/* ==========================================================================
   Santiago Fundas · chrome del backoffice
   --------------------------------------------------------------------------
   Header de 56 px + navegacion lateral de 186 px + area de contenido.
   Referencia: docs/design/source/Inicio - Alta fidelidad.dc.html
   (el mismo chasis se repite en las trece pantallas con navegacion).

   Desktop-first: el backoffice se opera en mostrador con notebook o monitor.
   Debajo del ancho minimo la aplicacion hace scroll horizontal en lugar de
   aplanarse a una columna.
   ========================================================================== */

/* ==========================================================================
   Chasis
   ========================================================================== */

body.sf-app {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.sf-app .sf-frame {
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

body.sf-app .sf-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Anula el ancho fijo centrado del CSS legado (.app-main). */
body.sf-app .sf-main {
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--sf-sp-6) 18px 32px;
    flex: 1;
    min-width: 0;
}

body.sf-guest .sf-main {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.sf-guest .sf-frame {
    display: block;
    min-height: 100vh;
}

/* ==========================================================================
   Skip link
   ========================================================================== */

body.sf-app .skip-link,
body.sf-guest .skip-link {
    background: var(--sf-accent-900);
    border: 1px solid var(--sf-accent);
    color: var(--sf-accent-100);
    border-radius: var(--sf-r-sm);
    text-decoration: none;
    z-index: 60;
}

/* ==========================================================================
   Header · 56 px
   ========================================================================== */

.sf-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--sf-sp-5);
    height: var(--sf-header-h);
    flex: none;
    padding: 0 var(--sf-sp-6);
    background: var(--sf-header);
    border-bottom: 1px solid var(--sf-line);
}

.sf-header__brand {
    display: flex;
    align-items: center;
    gap: var(--sf-sp-4);
    text-decoration: none;
    color: inherit;
}

.sf-header__logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    display: block;
    object-fit: cover;
}

.sf-header__wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.sf-header__name {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.sf-header__context {
    font-size: var(--sf-fs-kicker);
    letter-spacing: var(--sf-ls-thead);
    text-transform: uppercase;
    color: var(--sf-text-faint);
}

.sf-header__sep {
    width: 1px;
    height: 26px;
    background: var(--sf-line);
    flex: none;
    margin: 0 4px;
}

/* Chip de sucursal y terminal. No es un selector: la terminal operativa
   pertenece al dispositivo y no se cambia desde el header. */
.sf-header__place {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--sf-fs-sub);
    color: var(--sf-text);
    border: 1px solid var(--sf-n-700);
    border-radius: var(--sf-r-sm);
    padding: 6px 10px;
    white-space: nowrap;
}

/* Chip de caja. */
.sf-header__cash {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--sf-fs-sub);
    padding: 6px 10px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm);
    color: var(--sf-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.sf-header__cash:hover {
    border-color: var(--sf-n-600);
}

.sf-header__cash--open {
    border-color: var(--sf-accent-600);
    background: var(--sf-accent-900);
    color: var(--sf-accent-200);
}

.sf-header__cash-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--sf-text);
}

/* Bloque de usuario + salir. */
.sf-header__user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.sf-header__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sf-accent-800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--sf-accent-200);
    flex: none;
}

.sf-header__identity {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sf-header__username {
    font-size: var(--sf-fs-sub);
    color: var(--sf-n-300);
}

.sf-header__role {
    font-size: 10.5px;
    color: var(--sf-text-ghost);
}

.sf-header__logout {
    font: inherit;
    font-size: 12px;
    color: var(--sf-text-muted);
    background: transparent;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm);
    padding: 6px 10px;
    cursor: pointer;
}

.sf-header__logout:hover {
    border-color: var(--sf-n-600);
    color: var(--sf-text);
}

/* ==========================================================================
   Navegacion lateral · 186 px
   ========================================================================== */

.sf-nav {
    width: var(--sf-nav-w);
    flex: none;
    background: var(--sf-nav);
    border-right: 1px solid var(--sf-line);
    padding: var(--sf-sp-4) 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: var(--sf-header-h);
    align-self: flex-start;
    height: calc(100vh - var(--sf-header-h));
    overflow-y: auto;
}

.sf-nav__group {
    font-size: 10px;
    letter-spacing: var(--sf-ls-kicker);
    text-transform: uppercase;
    color: var(--sf-text-ghost);
    padding: 14px 10px 8px;
}

.sf-nav__group:first-child {
    padding-top: 6px;
}

.sf-nav__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--sf-r-sm);
    font-size: var(--sf-fs-body);
    color: var(--sf-n-300);
    text-decoration: none;
}

.sf-nav__item:hover {
    background: var(--sf-n-900);
    color: var(--sf-text);
}

.sf-nav__item[aria-current="page"] {
    color: var(--sf-text);
    background: var(--sf-accent-900);
    box-shadow: inset 2px 0 0 var(--sf-accent);
    font-weight: 500;
}

/* Modulo todavia no disponible: visible, atenuado, sin navegacion y con el
   motivo accesible en el title. Nunca se oculta sin explicacion. */
.sf-nav__item--off {
    color: var(--sf-text-ghost);
    cursor: not-allowed;
}

.sf-nav__item--off:hover {
    background: transparent;
    color: var(--sf-text-ghost);
}

.sf-nav__soon {
    margin-left: auto;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-n-700);
    border: 1px solid var(--sf-n-800);
    border-radius: 3px;
    padding: 1px 5px;
}

.sf-nav__badge {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--sf-accent-800);
    color: var(--sf-accent-200);
    border-radius: 9px;
    padding: 1px 6px;
    font-variant-numeric: tabular-nums;
}

.sf-nav__foot {
    margin-top: auto;
    font-size: 11px;
    color: var(--sf-text-ghost);
    padding: 10px;
    border-top: 1px solid var(--sf-line);
    line-height: 1.5;
}

.sf-nav__external {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-top: var(--sf-sp-4);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-sm);
    font-size: 12.5px;
    color: var(--sf-text-muted);
    text-decoration: none;
}

.sf-nav__external:hover {
    border-color: var(--sf-n-600);
    color: var(--sf-text);
}

/* ==========================================================================
   Mensajes
   ========================================================================== */

body.sf-app .sf-messages,
body.sf-guest .sf-messages {
    width: auto;
    max-width: none;
    margin: 0;
    display: grid;
    gap: 8px;
}

body.sf-app .sf-messages {
    padding: var(--sf-sp-6) 18px 0;
}

body.sf-guest .sf-messages {
    padding: var(--sf-sp-6) 20px 0;
}

body.sf-app .sf-messages .message,
body.sf-guest .sf-messages .message {
    border-radius: var(--sf-r-sm);
    padding: 11px 13px;
    font-size: var(--sf-fs-sub);
    background: var(--sf-panel);
    border: 1px solid var(--sf-line);
    color: var(--sf-text);
}

body.sf-app .sf-messages .message-success,
body.sf-guest .sf-messages .message-success {
    border-color: var(--sf-accent-600);
    background: var(--sf-accent-900);
    color: var(--sf-accent-100);
}

body.sf-app .sf-messages .message-warning,
body.sf-guest .sf-messages .message-warning {
    border-color: var(--sf-warn-line);
    background: var(--sf-warn-bg);
    color: var(--sf-warn-text);
}

body.sf-app .sf-messages .message-error,
body.sf-guest .sf-messages .message-error {
    border-color: var(--sf-danger-line);
    background: var(--sf-danger-bg);
    color: var(--sf-danger-text);
}

/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   Gestion >= 1420 px es el caso disenado. Entre 1024 y 1420 px el chasis se
   mantiene tal cual (solo cede el ancho del contenido). Por debajo de
   1024 px el backoffice no es un caso de uso: la aplicacion hace scroll
   horizontal en lugar de reacomodarse, para no romper el POS en tablet
   horizontal.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .sf-nav__item,
    .sf-header__cash,
    .sf-header__logout {
        transition: background-color .16s ease, color .16s ease, border-color .16s ease;
    }
}

@media (max-width: 1240px) {
    .sf-header {
        gap: 10px;
        padding: 0 var(--sf-sp-4);
    }

    .sf-header__context {
        display: none;
    }
}

/* ==========================================================================
   Degradacion responsive del chrome
   --------------------------------------------------------------------------
   El backoffice ya no fuerza un lienzo minimo. En vez de recortarse, cambia
   de forma:

     >= 1200 px  navegacion lateral de 186 px (el caso disenado)
     800-1199    la navegacion pasa a ser una barra horizontal bajo el header
                 y el contenido usa todo el ancho
     < 800 px    lo mismo, con el header reducido a lo esencial y las tablas
                 con scroll horizontal propio

   Nunca se aplica un scale(): no se achica la aplicacion, se reacomoda.
   ========================================================================== */

@media (max-width: 1199px) {
    /* El chasis pasa a apilarse: la navegacion deja de ocupar una columna. */
    body.sf-app .sf-frame {
        flex-direction: column;
    }

    /* La navegacion se convierte en una barra horizontal desplazable. Sigue
       siendo la misma lista de enlaces: no se esconde ningun modulo. */
    .sf-nav {
        width: auto;
        height: auto;
        position: sticky;
        top: var(--sf-header-h);
        z-index: 25;
        align-self: stretch;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--sf-line);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .sf-nav__item,
    .sf-nav__external {
        flex: none;
        white-space: nowrap;
        margin-top: 0;
    }

    /* El realce del item activo pasa de la izquierda al pie. */
    .sf-nav__item[aria-current="page"] {
        box-shadow: inset 0 -2px 0 var(--sf-accent);
    }

    /* Los rotulos de grupo se vuelven separadores en linea. */
    .sf-nav__group {
        flex: none;
        padding: 0 8px 0 12px;
        border-left: 1px solid var(--sf-line);
        white-space: nowrap;
        line-height: 1;
    }

    .sf-nav__group:first-child {
        padding-left: 0;
        border-left: 0;
    }

    /* La nota al pie no tiene lugar en una barra: su contenido se repite en
       las pantallas de Caja y Productos, asi que no se pierde informacion. */
    .sf-nav__foot {
        display: none;
    }

    body.sf-app .sf-main {
        padding-inline: var(--sf-sp-5);
    }

    /* Las tablas se desplazan dentro de su propio marco en lugar de recortar
       columnas. */
    .sf-table {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .sf-table__head,
    .sf-table__row,
    .sf-cash-table-foot {
        min-width: 760px;
    }
}

@media (max-width: 999px) {
    /* Sucursal y terminal salen del header: el dato sigue completo en Caja y
       en el detalle de cada venta. El chip de caja se queda porque es el que
       decide si se puede cobrar. */
    .sf-header__place {
        display: none;
    }
}

@media (max-width: 799px) {
    .sf-header {
        gap: 8px;
        padding: 0 10px;
    }

    /* Del bloque de usuario queda el avatar y Salir: nada deja de ser
       accesible. */
    .sf-header__identity {
        display: none;
    }

    .sf-header__cash {
        padding: 5px 8px;
    }

    .sf-header__cash-amount {
        display: none;
    }

    body.sf-app .sf-main {
        padding-inline: var(--sf-sp-4);
    }

    body.sf-app .sf-messages {
        padding-inline: var(--sf-sp-4);
    }

    .sf-nav {
        padding: 6px 10px;
    }

    .sf-nav__item {
        padding: 7px 9px;
        font-size: 13px;
    }
}