/*
 * Gestor Comercial — estructura de pantalla.
 * Lineamiento Gráfico §5 y §6.
 *
 * Acá está el armazón completo: barra superior con selector de local,
 * navegación lateral de 248 px colapsable a 64, navegación inferior móvil,
 * grilla de contenido y pantalla de ingreso.
 *
 * La lista de destinos NO se decide en esta hoja. La arma `App\Http\Navigation`
 * con los que existen de verdad y el usuario tiene permiso de ver: una barra
 * con cinco íconos que no llevan a ninguna parte es una promesa vacía. Cada
 * paso del plan suma el suyo.
 */

/* Enlace de salto: primer elemento tabulable de la página, invisible hasta que
 * recibe el foco. Sin él, quien navega con teclado atraviesa toda la
 * navegación en cada pantalla. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--sp-2);
    z-index: var(--z-toast);
    padding: var(--sp-2) var(--sp-4);
    background-color: var(--n-900);
    color: var(--n-000);
    border-radius: var(--r-md);
    text-decoration: none;
}

.skip-link:focus {
    left: var(--sp-4);
}

/* ── Barra superior (Lineamiento §6.1) ──────────────────────────────────── */

/*
 * El Lineamiento §6.1 reserva el centro de la barra para el buscador global.
 * Ese buscador todavía no existe —no hay búsqueda transversal de producto,
 * presupuesto y cliente en esta versión— y dejarle el hueco reservado se veía
 * como una barra rota: 600 px vacíos entre el logo y el selector de local. Hasta
 * que la función exista, los tres elementos que sí existen se agrupan a la
 * izquierda. Cuando el buscador entre, vuelve el `space-between` y ocupa su
 * lugar sin tocar nada más.
 */
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-3);
    min-height: var(--topbar-h);
    padding: 0 var(--sp-4);
    background-color: var(--n-000);
    border-bottom: 1px solid var(--n-200);
    box-shadow: var(--sh-1);
}

.topbar__start {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-2) 0;
}

/* El selector de local vive siempre a la vista: toda operación registra
 * Empresa→Local→Vendedor, y equivocarse de sucursal es un dato mal atribuido. */
.store-selector {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* El desplegable con su propio marco: el `select` nativo dibuja una flecha del
 * sistema y un radio de 2 px que no son de este sistema de diseño y que
 * desentonaban con los campos del resto de las pantallas. Se apaga la
 * apariencia nativa y la flecha la pone el ícono `chevron-down` del sprite, el
 * mismo que usa el resto de la interfaz. El relleno derecho de 32 px es el
 * lugar que ocupa esa flecha: sin él, un nombre largo le pasa por encima. */
.store-selector__field {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.store-selector__control {
    appearance: none;
    height: 36px;
    padding: 0 32px 0 var(--sp-3);
    border: 1px solid var(--n-300);
    border-radius: var(--r-md);
    background-color: var(--n-000);
    color: var(--n-900);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}

/* La flecha no recibe el clic: se lo lleva el `select` que tiene debajo. */
.store-selector__caret {
    position: absolute;
    right: var(--sp-2);
    color: var(--n-500);
    pointer-events: none;
}

/*
 * Chip de local para celular (Lineamiento §6.1): en la barra de 56 px no entra
 * un desplegable con su botón de confirmar, y bajarlo a un renglón propio le
 * comía a la pantalla el alto de una fila entera. El chip muestra dónde estás
 * parado y abre la hoja inferior donde se cambia de local.
 */
.store-chip {
    position: relative;
    display: none;
    align-items: center;
    gap: var(--sp-2);
    height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--n-300);
    border-radius: var(--r-pill);
    background-color: var(--n-000);
    color: var(--n-900);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    max-width: 100%;
}

.store-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El área táctil real es de 48 px de alto aunque el chip mida 32 (Lineamiento
 * §10): se agranda con un pseudoelemento para no engordar la barra. */
.store-chip::after {
    content: "";
    position: absolute;
    inset: -8px;
}

/* Opciones de la hoja inferior de locales. */
.store-sheet__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.store-sheet__option {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 48px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--n-300);
    border-radius: var(--r-md);
    background-color: var(--n-000);
    color: var(--n-900);
    font-family: var(--font-ui);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.store-sheet__option[aria-current="true"] {
    border-width: 2px;
    border-color: var(--n-900);
}

.store-sheet__code {
    font-weight: 600;
}

.store-sheet__current {
    margin-left: auto;
    color: var(--ok);
}

.topbar__toggle {
    flex: none;
}

/* ── Menú de usuario ────────────────────────────────────────────────────── */

/*
 * `details` en lugar de un desplegable a mano: abre con Enter, cierra con
 * Escape y no depende de que el script haya cargado. El triángulo nativo se
 * saca, porque el ícono ya dice qué es.
 */
.user-menu {
    position: relative;
}

.user-menu__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    color: var(--n-700);
    cursor: pointer;
    list-style: none;
}

.user-menu__trigger::-webkit-details-marker {
    display: none;
}

.user-menu__trigger:hover {
    background-color: var(--n-100);
}

.user-menu__panel {
    position: absolute;
    top: calc(100% + var(--sp-1));
    right: 0;
    z-index: var(--z-topbar);
    min-width: 220px;
    padding: var(--sp-3);
    background-color: var(--n-000);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
}

.user-menu__name {
    margin: 0 0 var(--sp-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--n-900);
}

.user-menu__item {
    padding-left: 0;
    padding-right: 0;
}

/* Debajo del punto de quiebre la navegación vive en la barra inferior, así que
 * el botón de contraer la lateral no tiene nada que contraer. Y la barra pasa a
 * dos renglones: arriba el monograma y el menú de usuario; abajo el selector de
 * local a ancho completo. Meter los tres en una línea obligaba a recortar el
 * nombre del local y el del usuario, y el local es justamente lo que hay que
 * poder leer entero antes de cargar un presupuesto. */
@media (max-width: 767px) {
    /*
     * La barra superior del celular mide 56 px y no crece: el selector de local
     * entra como chip, no como renglón propio. El chip dice el local en el que
     * estás —que es lo que hay que poder leer de un vistazo antes de cargar un
     * presupuesto— y el cambio se hace en la hoja inferior, donde cada local es
     * un objetivo táctil de 48 px con su nombre completo.
     */
    .topbar {
        flex-wrap: nowrap;
        gap: var(--sp-2);
        padding: 0 var(--sp-3) 0 0;
    }

    .topbar__toggle { display: none; }

    /* Área de seguridad del logotipo (Lineamiento §2.2): el monograma nunca
     * queda pegado a lo que tiene al lado. */
    .topbar__start {
        flex: none;
        padding: 12px 16px;
    }

    .topbar__actions {
        flex: none;
        margin-left: auto;
        padding: 0;
    }

    /* El desplegable y su botón de confirmar son la versión de escritorio. */
    .store-selector {
        display: none;
    }

    .store-chip {
        display: inline-flex;
        min-width: 0;
        flex: 0 1 auto;
    }
}

/* ── Armazón: lateral + contenido (Lineamiento §6.1) ────────────────────── */

.app-shell {
    display: flex;
    align-items: flex-start;
}

/*
 * Navegación lateral de 248 px, pegada bajo la barra superior y con scroll
 * propio: la lista de secciones no se pierde al bajar en una tabla larga.
 */
.sidenav {
    position: sticky;
    top: var(--topbar-h);
    flex: none;
    width: var(--sidenav-w);
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    padding: var(--sp-3) 0;
    background-color: var(--n-100);
    border-right: 1px solid var(--n-200);
    transition: width .12s ease;
}

.sidenav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidenav__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: 40px;
    padding: 0 var(--sp-4);
    /* La barra de 3 px del ítem activo se reserva desde el principio: si
     * apareciera recién al activarse, el texto se correría. */
    border-left: 3px solid transparent;
    color: var(--n-700);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
}

.sidenav__link:hover {
    background-color: var(--n-000);
    color: var(--n-900);
}

/*
 * Ítem activo: barra amarilla al borde izquierdo, fondo blanco y peso 600. El
 * amarillo acá es indicador y no fondo, que es la única forma en que puede
 * aparecer sobre claro sin problemas de contraste (Lineamiento §6.1).
 */
.sidenav__link[aria-current="page"] {
    background-color: var(--n-000);
    border-left-color: var(--brand-yellow);
    color: var(--n-900);
    font-weight: 600;
}

/* Colapsada a 64 px: quedan los íconos. El nombre de cada destino sigue
 * disponible en el `title` y para el lector de pantalla, así que nadie pierde
 * información al colapsar. */
body.sidenav-collapsed .sidenav {
    width: var(--sidenav-w-collapsed);
}

body.sidenav-collapsed .sidenav__label {
    display: none;
}

body.sidenav-collapsed .sidenav__link {
    justify-content: center;
    padding: 0 var(--sp-2);
}

@media (max-width: 767px) {
    .sidenav { display: none; }
}

/* ── Contenido ──────────────────────────────────────────────────────────── */

.app-main {
    flex: 1;
    min-width: 0;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-7);
}

/* En móvil el contenido termina por encima de la barra inferior, incluida el
 * área segura del dispositivo. */
@media (max-width: 767px) {
    .app-main {
        padding-bottom: calc(var(--bottomnav-h) + var(--sp-7) + env(safe-area-inset-bottom, 0px));
    }
}

.page-header {
    margin-bottom: var(--sp-5);
}

.stack > * + * {
    margin-top: var(--sp-4);
}

.grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid {
        gap: var(--gutter);
    }

    .grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

/* ── Navegación inferior móvil (Lineamiento §6.2) ───────────────────────── */
/*
 * Los destinos son los mismos que los de la lateral, y salen del mismo lugar.
 * Cuando el catálogo, los presupuestos, los clientes y el asistente existan,
 * serán los cinco que fija la Especificación §5 sin tocar esta hoja.
 *
 * El alto declarado es 56 px, pero cada destino ocupa 48 px de alto táctil real
 * y al menos 48 de ancho, que es el mínimo del Lineamiento §10.
 */

.bottomnav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-bottomnav);
    display: flex;
    justify-content: space-around;
    min-height: var(--bottomnav-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: var(--n-000);
    border-top: 1px solid var(--n-200);
}

.bottomnav__link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 48px;
    min-height: 48px;
    padding: var(--sp-1) 0;
    color: var(--n-500);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
}

.bottomnav__link[aria-current="page"] {
    color: var(--n-900);
    font-weight: 600;
}

/* El punto amarillo bajo la etiqueta acompaña al cambio de color: el estado
 * activo nunca se comunica solo con color (Lineamiento §10).
 *
 * Los 4 px de separación lo despegan de la etiqueta y del borde de la barra:
 * pegado abajo se confundía con el filo del dispositivo y dejaba de leerse como
 * el indicador que es. */
.bottomnav__dot {
    width: 4px;
    height: 4px;
    margin-top: 2px;
    border-radius: var(--r-pill);
    background-color: transparent;
}

.bottomnav__link[aria-current="page"] .bottomnav__dot {
    background-color: var(--brand-yellow);
}

@media (min-width: 768px) {
    .bottomnav { display: none; }
}

/* ── Pantalla de ingreso (Lineamiento §2.2 y §9) ────────────────────────── */
/*
 * El Lineamiento pide fondo de textura de madera con velo oscuro. La textura
 * es uno de los archivos que todavía no recibimos del cliente (§14), así que
 * se usa el crema de marca, que sí está definido, y la textura se suma cuando
 * llegue sin tocar la estructura.
 */

.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5) var(--sp-4);
    background-color: var(--brand-cream);
}

.login__panel {
    width: 100%;
    max-width: 420px;
}

.login__brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-5);
}

.login__footer {
    margin-top: var(--sp-5);
    text-align: center;
}

/* ── Pantallas de error ─────────────────────────────────────────────────── */
/*
 * Mismo esqueleto que el ingreso —crema de marca, bloque angosto centrado— y
 * por la misma razón: son las dos pantallas que se ven sin barra superior ni
 * navegación, y conviene que se reconozcan como parte del mismo sistema.
 *
 * El bloque es un poco más ancho que el del ingreso (480 px contra 420 px)
 * porque acá hay texto corrido, no campos: a 420 px las explicaciones quedan
 * en renglones de cuatro palabras.
 */

.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5) var(--sp-4);
    background-color: var(--brand-cream);
}

.error-page__panel {
    width: 100%;
    max-width: 480px;
}

.error-page__brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-5);
}

.error-page__code {
    margin: 0 0 var(--sp-1);
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--n-400);
}

.error-page__text {
    margin: var(--sp-3) 0 0;
    color: var(--n-700);
}

.error-page__help {
    margin: var(--sp-3) 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--n-500);
}

/*
 * En columna abajo de 480 px: dos botones de 44 px de alto uno al lado del
 * otro no entran en un teléfono sin achicar el área táctil.
 */

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.error-page__actions .button {
    flex: 1 1 180px;
    justify-content: center;
}

/* El pie no puede pasarse del ancho de la tarjeta: leído a 12 px, un renglón
 * más largo que el bloque que tiene arriba se ve como si perteneciera a otra
 * cosa. */
.error-page__footer {
    max-width: 480px;
    margin: var(--sp-5) auto 0;
    padding: 0 var(--sp-4);
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    color: var(--n-500);
}