/* ==========================================================================
   Santiago Fundas · la cuenta del comprador
   --------------------------------------------------------------------------
   Lo propio de /cuenta/ y nada mas. Todo lo que ya resuelven tokens.css,
   components.css y store.css se consume desde ahi: los botones son .sf-btn,
   los campos .sf-field, los estados .sf-tag y los vacios .sf-empty.

   Mobile-first como el resto de la tienda: se disena a 390 px y recien despues
   se ensancha. Nada de min-width en el chasis y nada de scroll horizontal.
   ========================================================================== */

.sf-acc {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 18px;
}

.sf-acc__head {
    display: flex;
    flex-direction: column;
    /* Sin esto, una pastilla o una etiqueta dentro del encabezado se estira a
       todo el ancho de la columna en vez de medir lo que dice. */
    align-items: flex-start;
    gap: 4px;
}

.sf-acc__title {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    color: var(--sf-text);
}

.sf-acc__sub {
    margin: 0;
    font-size: 13px;
    color: var(--sf-text-muted);
}

/* La señal de cuenta (.sf-acc-badge), el corazón (.sf-fav-btn) y el aviso de
   mínimo mayorista (.sf-min-note) NO viven acá: aparecen en el header, en el
   catálogo y en la ficha, que son pantallas de la tienda y no de la cuenta.
   Están en store.css, que se carga en todas. */

/* --- Navegacion de la cuenta --------------------------------------------- */
.sf-acc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sf-acc-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm, 8px);
    color: var(--sf-n-200);
    font-size: 13px;
    text-decoration: none;
}

.sf-acc-nav__link:hover {
    color: var(--sf-text);
    border-color: var(--sf-n-700);
}

.sf-acc-nav__link:focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: 2px;
}

.sf-acc-nav__link--on {
    border-color: var(--sf-accent-700);
    background: var(--sf-accent-900);
    color: var(--sf-accent-100);
}

/* Cerrar sesion es un POST, así que su control es un <button>. Tiene que verse
   igual que los enlaces de al lado y no como el botón gris del navegador. */
button.sf-acc-nav__link {
    background: none;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* --- Tarjeta de formulario (entrar, registrarse, contrasena) -------------- */
.sf-acc-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-md, 12px);
    background: var(--sf-panel);
}

.sf-acc-card__lead {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--sf-text-muted);
}

.sf-acc-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sf-line-soft);
    font-size: 12.5px;
    color: var(--sf-text-faint);
}

.sf-acc-card__foot a {
    color: var(--sf-accent-300);
}

/* --- Resumen de Mi cuenta ------------------------------------------------- */
.sf-acc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.sf-acc-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-md, 12px);
    background: var(--sf-panel);
    color: inherit;
    text-decoration: none;
}

.sf-acc-tile:hover {
    border-color: var(--sf-n-700);
}

.sf-acc-tile:focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: 2px;
}

.sf-acc-tile__value {
    font-size: 24px;
    font-weight: 600;
    color: var(--sf-text);
    font-variant-numeric: tabular-nums;
}

.sf-acc-tile__label {
    font-size: 12.5px;
    color: var(--sf-text-muted);
}

/* --- Mis pedidos ---------------------------------------------------------- */
.sf-acc-order {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-md, 12px);
    background: var(--sf-panel);
}

.sf-acc-order__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.sf-acc-order__code {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--sf-text);
    text-decoration: none;
}

.sf-acc-order__code:hover {
    text-decoration: underline;
}

.sf-acc-order__when {
    font-size: 12px;
    color: var(--sf-text-faint);
    font-variant-numeric: tabular-nums;
}

.sf-acc-order__total {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sf-text);
}

.sf-acc-order__states {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sf-acc-order__detail {
    font-size: 12.5px;
    color: var(--sf-text-muted);
}

/* --- Favoritos ------------------------------------------------------------ */
.sf-acc-favs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Un favorito cuyo producto ya no esta publicado. No se borra ni se esconde:
   se apaga y dice por que, para que nadie crea que su lista se perdio. */
.sf-fav-gone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px dashed var(--sf-line);
    border-radius: var(--sf-r-md, 12px);
    background: var(--sf-panel);
}

.sf-fav-gone__name {
    margin: 0;
    font-size: 14px;
    color: var(--sf-text-muted);
}

.sf-fav-gone__note {
    margin: 0;
    font-size: 12.5px;
    color: var(--sf-text-faint);
}

/* --- Escritorio ----------------------------------------------------------
   El backoffice es de escritorio; la tienda no. Aca solo se aprovecha el
   ancho cuando sobra, sin cambiar la jerarquia de lo que se lee primero. */
@media (min-width: 720px) {
    .sf-acc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sf-acc-favs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sf-acc-card {
        padding: 22px;
    }
}