/* =====================================================================
   Sistema de temas — variables semánticas. Cada tema redefine estos
   tokens; los componentes de abajo solo usan los tokens, nunca colores
   fijos, para que los 4 temas se vean consistentes.
   ===================================================================== */

:root, [data-theme="claro"] {
    --bg: #f4f5f8;
    --surface: #ffffff;
    --surface-alt: #fafbfc;
    --surface-hover: #f8f6ec;
    --border: #e6e8ee;
    --text: #1f2733;
    --text-muted: #6b7480;

    --primary: #16294a;
    --primary-hover: #1e3a63;
    --primary-contrast: #ffffff;

    --accent: #c9a227;
    --accent-hover: #dab949;
    --accent-contrast: #10233d;

    --nav-start: #101f35;
    --nav-end: #0b1524;
    --nav-text: rgba(255,255,255,0.72);
    --nav-text-hover: #ffffff;

    --login-bg-start: #0b1524;
    --login-bg-end: #16294a;

    --success-bg: #e2f6ec; --success-text: #17784a;
    --warning-bg: #fdf1da; --warning-text: #a8690a;
    --orange-bg: #fde9d9; --orange-text: #b5590d;
    --danger-bg: #fbe4e4; --danger-text: #b23030;
    --info-bg: #e4ecfc; --info-text: #2451b0;
    --aumento-bg: #ede4fb; --aumento-text: #6a3fb0;
    --revisar-bg: #d9f2f0; --revisar-text: #0f7a72;

    --shadow: 0 1px 2px rgba(16, 31, 53, 0.04), 0 6px 20px rgba(16, 31, 53, 0.06);
    --shadow-lg: 0 10px 30px rgba(16, 31, 53, 0.16);
}

[data-theme="oscuro"] {
    --bg: #0c1119;
    --surface: #161d29;
    --surface-alt: #1b2330;
    --surface-hover: #202a3a;
    --border: #2a3242;
    --text: #e8eaee;
    --text-muted: #97a1b0;

    --primary: #2c4a78;
    --primary-hover: #375a8f;
    --primary-contrast: #ffffff;

    --accent: #d9b23c;
    --accent-hover: #e8c65c;
    --accent-contrast: #10233d;

    --nav-start: #0c1119;
    --nav-end: #05070b;
    --nav-text: rgba(255,255,255,0.72);
    --nav-text-hover: #ffffff;

    --login-bg-start: #05070b;
    --login-bg-end: #14243d;

    --success-bg: #163828; --success-text: #6fe3ab;
    --warning-bg: #3a2c0f; --warning-text: #f0c065;
    --orange-bg: #3a260f; --orange-text: #f3a55f;
    --danger-bg: #3a1717; --danger-text: #f29b9b;
    --info-bg: #142743; --info-text: #8fb2f5;
    --aumento-bg: #2a1f3d; --aumento-text: #c9a6f0;
    --revisar-bg: #103531; --revisar-text: #6fd8cc;

    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    --shadow-lg: 0 10px 34px rgba(0,0,0,0.5);
}

[data-theme="rojo_oscuro"] {
    --bg: #170d0e;
    --surface: #241416;
    --surface-alt: #2c1a1d;
    --surface-hover: #332023;
    --border: #40262a;
    --text: #f2e8e8;
    --text-muted: #bd9a9c;

    --primary: #7d222e;
    --primary-hover: #952a38;
    --primary-contrast: #ffffff;

    --accent: #dba15a;
    --accent-hover: #e8b877;
    --accent-contrast: #241416;

    --nav-start: #2b1013;
    --nav-end: #150a0b;
    --nav-text: rgba(255,255,255,0.72);
    --nav-text-hover: #ffffff;

    --login-bg-start: #150a0b;
    --login-bg-end: #3a1319;

    --success-bg: #163828; --success-text: #6fe3ab;
    --warning-bg: #3a2c0f; --warning-text: #f0c065;
    --orange-bg: #3a260f; --orange-text: #f3a55f;
    --danger-bg: #3d1c1c; --danger-text: #f5a3a3;
    --info-bg: #23283f; --info-text: #a4b7ef;
    --aumento-bg: #2c1f3a; --aumento-text: #cba6f0;
    --revisar-bg: #11322e; --revisar-text: #6fd1c5;

    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    --shadow-lg: 0 10px 34px rgba(0,0,0,0.5);
}

[data-theme="gris"] {
    --bg: #f1f1f2;
    --surface: #ffffff;
    --surface-alt: #f6f6f7;
    --surface-hover: #eceded;
    --border: #e0e0e2;
    --text: #25272a;
    --text-muted: #6c6e72;

    --primary: #3a3f47;
    --primary-hover: #4c525b;
    --primary-contrast: #ffffff;

    --accent: #5b7a94;
    --accent-hover: #6f90ac;
    --accent-contrast: #ffffff;

    --nav-start: #2b2e33;
    --nav-end: #1b1d20;
    --nav-text: rgba(255,255,255,0.72);
    --nav-text-hover: #ffffff;

    --login-bg-start: #1b1d20;
    --login-bg-end: #3a3f47;

    --success-bg: #e3ede8; --success-text: #2c6e52;
    --warning-bg: #efe9dc; --warning-text: #8a662a;
    --orange-bg: #efe3d6; --orange-text: #925f26;
    --danger-bg: #eee0e0; --danger-text: #963a3a;
    --info-bg: #e2e7ee; --info-text: #3c5a80;
    --aumento-bg: #e8e3ee; --aumento-text: #5c4a78;
    --revisar-bg: #dceeec; --revisar-text: #1f6b63;

    --shadow: 0 1px 2px rgba(20,20,20,0.05), 0 6px 20px rgba(20,20,20,0.07);
    --shadow-lg: 0 10px 30px rgba(20,20,20,0.18);
}

:root {
    --radius: 14px;
    --radius-sm: 9px;
}

/* Bootstrap (dropdowns de la barra de navegación y el buscador de productos)
   trae sus propios colores fijos para ".dropdown-item" en :hover, :focus,
   .active/:active y .disabled/:disabled — colores pensados para su tema
   claro de fábrica, que NO se ajustan solos a los 4 temas de esta app (por
   eso, por ejemplo, el ítem del menú que corresponde a la página en la que
   ya estás se veía con un azul fijo antes de inventar la clase
   ".sugerencia-activa" para el buscador). En vez de pelear selector por
   selector contra los de Bootstrap, le pasamos nuestros propios colores por
   sus mismas variables, así cualquier estado que Bootstrap dibuje (al pasar
   el mouse, al navegar con teclado, al marcar la página activa) ya sale
   combinando con el tema actual. */
:root {
    --bs-dropdown-color: var(--text);
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--surface-alt);
    --bs-dropdown-link-active-color: var(--accent-contrast);
    --bs-dropdown-link-active-bg: var(--accent);
    --bs-dropdown-link-disabled-color: var(--text-muted);
    --bs-dropdown-divider-bg: var(--border);
    --bs-dropdown-header-color: var(--text-muted);
}

/* El navegador (sobre todo Chrome en Android, y algunos navegadores de
   escritorio) trae su propio modo oscuro automático: si la página no le
   avisa explícitamente qué colores está usando, el navegador intenta
   "adivinar" e invertir los controles nativos (recuadros de texto, flechas
   de los <select>, etc.) — y como esta app ya tiene sus propios temas
   oscuros, esa inversión automática choca con nuestros colores y es
   justo lo que hacía que el texto de los campos no se distinguiera en el
   tema rojo oscuro (y pasaría igual en el tema oscuro). Esta propiedad le
   dice al navegador "ya sé lo que hago, no lo adivines", y hace que los
   controles nativos (como el calendario de un campo de fecha, o el tilde
   de un checkbox) combinen con cada tema en vez de pelear con él. */
[data-theme="claro"], [data-theme="gris"] { color-scheme: light; }
[data-theme="oscuro"], [data-theme="rojo_oscuro"] { color-scheme: dark; }

/* =====================================================================
   Base
   ===================================================================== */

* { box-sizing: border-box; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background-color .15s ease, color .15s ease;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; }

a { color: var(--primary); }
a:hover { color: var(--accent); }

/* ---------- Navbar ---------- */

.app-navbar {
    background: linear-gradient(180deg, var(--nav-start) 0%, var(--nav-end) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    padding-top: .55rem;
    padding-bottom: .55rem;
    position: sticky;
    top: 0;
    z-index: 1030;

    /* Este es el verdadero causante del título que "se oculta" al abrir
       "Aprobar pedidos": al abrirlo, Bootstrap le agrega su propia clase
       ".show" al título del menú, y esa clase trae un color de letra fijo
       (pensado para un navbar claro) que nunca llegamos a tocar — por eso
       se ve bien cerrado (ahí sí manda nuestro color) pero se oscurece justo
       al desplegarlo. Igual que con los menús desplegables, lo más seguro
       es entregarle nuestros propios colores por sus mismas variables. */
    --bs-navbar-color: var(--nav-text);
    --bs-navbar-hover-color: var(--nav-text-hover);
    --bs-navbar-active-color: var(--nav-text-hover);
    --bs-navbar-disabled-color: var(--text-muted);
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
}

.app-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }

.app-brand-logo {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--accent); color: var(--accent-contrast);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.05rem; overflow: hidden; flex-shrink: 0;
}
.app-brand-logo img { width: 100%; height: 100%; object-fit: cover; }

.app-brand-text { line-height: 1.15; }
.app-brand-title { color: #fff; font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.app-brand-subtitle { color: var(--accent); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.app-navbar-links {
    display: flex;
    gap: .2rem;
}
/* "align-items: center" y "flex-wrap: wrap" son para acomodar los enlaces
   en una sola fila en pantallas anchas (ver media query al final de este
   archivo) — aplicarlos siempre, sin esta condición, centraba cada enlace
   horizontalmente también en el menú apilado de celular/tablet (ahí
   Bootstrap acomoda la lista en columna, y "center" en una columna
   significa centrar en el eje horizontal). */

.app-navbar .nav-link {
    color: var(--nav-text); font-weight: 500; font-size: .92rem;
    padding: .5rem .8rem; border-radius: var(--radius-sm); transition: all .15s ease;
    display: inline-flex; align-items: center; gap: .5rem;
    white-space: nowrap;
}
.app-navbar .nav-link i { font-size: 1rem; width: 1em; text-align: center; flex-shrink: 0; }
.app-navbar .nav-link:hover, .app-navbar .nav-link:focus, .app-navbar .nav-link.show { color: var(--nav-text-hover); background: rgba(255,255,255,0.06); }
.app-navbar .nav-link.active { color: var(--accent-contrast); background: var(--accent); }

/* Menús desplegables del navbar: encabezados de grupo (p.ej. "Aprobar
   pedidos" / "Mis pedidos" dentro de un mismo menú "Pedidos") y los
   íconos alineados en una columna pareja, para que las etiquetas de
   cada opción empiecen todas en la misma posición. */
.app-navbar .dropdown-menu {
    min-width: 15rem;
    padding: .5rem;
}
.app-navbar .dropdown-item {
    display: flex; align-items: center; gap: .6rem;
    border-radius: var(--radius-sm);
    padding: .45rem .6rem;
}
.app-navbar .dropdown-item i { width: 1.1em; text-align: center; flex-shrink: 0; color: var(--text-muted); }
.app-navbar .dropdown-item.active i, .app-navbar .dropdown-item:hover i { color: inherit; }
.app-navbar .dropdown-header {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: .35rem .6rem .25rem;
}
.app-navbar .dropdown-divider { margin: .35rem 0; }

/* Separa visualmente el grupo de enlaces del bloque de usuario/salir —
   en pantallas anchas con una línea vertical sutil, y en el menú
   desplegado (celular/tablet) con una línea horizontal. */
.app-navbar-divider {
    width: 1px; align-self: stretch; margin: 0 1rem;
    background: rgba(255,255,255,0.15);
}
.app-navbar-separator { border-color: rgba(255,255,255,0.15); opacity: 1; margin: .5rem 0 .75rem; }

.app-navbar-user {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
}

/* El selector de tema se reordena al final de todo en pantallas anchas
   (order-xl-3 en el HTML) — sin este margen queda pegado al botón
   "Salir" que le precede, porque ninguno de los dos trae espacio propio
   de ese lado. */
.app-navbar-quick { margin-left: .75rem; }

.app-navbar .navbar-text { color: var(--nav-text); font-size: .87rem; white-space: nowrap; }
.app-navbar .navbar-text strong { color: #fff; }
.app-navbar-store { color: var(--nav-text); }
.app-navbar-store::before { content: '·'; margin: 0 .35rem; color: rgba(255,255,255,0.35); }

.btn-salir { border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: .85rem; white-space: nowrap; }
.btn-salir:hover { background: rgba(255,255,255,0.1); color: #fff; }

.navbar-toggler {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.06);
    padding: .4rem .55rem;
}
.navbar-toggler:focus { box-shadow: 0 0 0 .15rem rgba(255,255,255,0.25); }

/* El selector de tema por persona/navegador (.theme-select) se quitó: el
   tema de color ahora es uno solo para todos, elegido por un usuario
   maestro desde Configuraciones → Generales. */

/* A partir de aquí (1200px), Bootstrap acomoda el menú en una sola fila
   horizontal ("navbar-expand-xl" en el HTML) en vez de la lista apilada
   de celular/tablet — estos ajustes son solo para esa fila horizontal. */
@media (min-width: 1200px) {
    .app-navbar-links { align-items: center; flex-wrap: wrap; }
}

/* ---------- Cards / tables ---------- */

.card { border: none; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); }
.card-header {
    background: transparent; border-bottom: 1px solid var(--border); font-weight: 600;
    padding: .9rem 1.1rem; border-top-left-radius: var(--radius) !important; border-top-right-radius: var(--radius) !important;
    color: var(--text);
}
.card-body { padding: 1.1rem; }

/* ---------- Panel principal (dashboard) ---------- */

.tarjeta-panel {
    border-left: 4px solid var(--primary);
    transition: box-shadow .15s ease, transform .15s ease;
}
.tarjeta-panel:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.tarjeta-panel-acento { border-left-color: var(--accent); }
.tarjeta-panel-label { color: var(--text-muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .3rem; }
.tarjeta-panel-valor { color: var(--text); font-size: 1.6rem; font-weight: 700; }
.lista-top-articulos { list-style: none; padding-left: 0; font-size: .85rem; }
.lista-top-articulos li { margin-bottom: .15rem; }

.table { color: var(--text); margin-bottom: 0; }
.table thead th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
    font-weight: 600; border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.table td { border-color: var(--border); font-size: .92rem; }
.table-hover tbody tr:hover { background-color: var(--surface-hover); }
.table > :not(caption) > * > * { background-color: transparent; color: var(--text); }

/* Tablas con un menú desplegable de "Acciones" por fila (Usuarios, Tiendas):
   .table-responsive de Bootstrap pone overflow-x:auto, y eso basta para que
   el navegador también recorte verticalmente (overflow-y se comporta como
   auto en cuanto overflow-x no es "visible"), cortando el menú cuando se
   abre cerca del borde inferior de la tabla. Estas tablas no necesitan
   desplazamiento horizontal (pocas columnas), así que se les quita el
   recorte en los dos sentidos. */
.tabla-con-menu { overflow: visible; }

/* ---------- Pestañas (tabs) de categorías ---------- */

.nav-tabs { border-bottom: 1px solid var(--border); gap: .25rem; }
.nav-tabs .nav-link {
    border: none; border-bottom: 3px solid transparent; color: var(--text-muted);
    font-weight: 600; font-size: .9rem; padding: .65rem 1.1rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--text); background: var(--surface-alt); }
.nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--accent); background: var(--surface); }
.tab-content-card {
    background: var(--surface); border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow);
}

/* ---------- Buttons ---------- */

.btn { border-radius: var(--radius-sm); font-weight: 550; font-size: .9rem; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-contrast); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.btn-outline-secondary { color: var(--text-muted); border-color: var(--border); }
.btn-outline-secondary:hover { background: var(--surface-alt); color: var(--text); border-color: var(--border); }

.btn-gold, .btn-accent {
    background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600;
}
.btn-gold:hover, .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); }

/* ---------- Badges de estado ---------- */

.badge { border-radius: 999px; font-weight: 600; font-size: .74rem; padding: .4em .75em; }
.badge-estado-pendiente { background-color: var(--warning-bg); color: var(--warning-text); }
.badge-estado-aprobado { background-color: var(--success-bg); color: var(--success-text); }
.badge-estado-parcial { background-color: var(--orange-bg); color: var(--orange-text); }
.badge-estado-aumento { background-color: var(--aumento-bg); color: var(--aumento-text); }
.badge-estado-rechazado { background-color: var(--danger-bg); color: var(--danger-text); }
.badge-estado-entregado { background-color: var(--info-bg); color: var(--info-text); }
.badge-estado-revisado { background-color: var(--revisar-bg); color: var(--revisar-text); }

/* ---------- Formularios ---------- */

.form-control, .form-select {
    border-radius: var(--radius-sm); border-color: var(--border); font-size: .92rem;
    background-color: var(--surface); color: var(--text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 20%, transparent);
}
.form-label { font-weight: 600; font-size: .85rem; color: var(--text); }
.form-text { color: var(--text-muted); }
/* Bootstrap ya trae su propia regla ".form-control::placeholder" con esta
   misma "especificidad" (una clase + un pseudo-elemento) — y como la suya
   usa un gris fijo pensado solo para fondos claros, en los temas oscuros
   ese texto de ejemplo (el que se ve ANTES de escribir algo) prácticamente
   no se distinguía del fondo oscuro. Antes esta regla era solo "::placeholder"
   (sin la clase), que tiene MENOS especificidad que la de Bootstrap, así que
   Bootstrap siempre ganaba sin importar el orden de los archivos. Al
   agregar ".form-control" aquí también, empatamos en especificidad y, como
   este archivo se carga después de Bootstrap, ahora sí gana el color del
   tema actual. */
.form-control::placeholder { color: var(--text-muted); opacity: .7; }

/* El navegador autocompleta usuario/contraseña (y a veces otros campos ya
   escritos antes) con su propio fondo claro y texto oscuro fijo, sin
   importar el tema — se ve mal en los temas oscuros. Esto lo fuerza a
   respetar los colores del tema actual. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

.aviso-advertencia { color: var(--warning-text); font-size: .85rem; margin-top: .4rem; }

.search-box { position: relative; }
.search-box i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-box input { padding-left: 2.1rem; }

/* Botón propio de "mostrar/ocultar contraseña" (el ojito dentro del campo
   de login) -- no depende del gestor de contraseñas del navegador, que no
   siempre muestra su propio ícono (ver login.php). */
.campo-password-wrap { position: relative; }
.campo-password-wrap .form-control { padding-right: 2.6rem; }
.btn-mostrar-password {
    position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
    border: none; background: none; color: var(--text-muted);
    width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
    border-radius: .375rem; cursor: pointer; padding: 0;
}
.btn-mostrar-password:hover { color: var(--text); background: var(--surface-hover); }
.btn-mostrar-password:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---------- Login ---------- */

.login-shell {
    /* Antes tenía su propio fondo oscuro en degradado (un "cuadro" encima
       del fondo normal de la página) — se quitó a pedido: ahora el login
       se ve sobre el mismo fondo (var(--bg)) que el resto de la app, salvo
       que se hayan configurado imágenes de fondo (ver .login-fondo-*),
       en cuyo caso rotan detrás de la tarjeta. */
    position: relative;
    min-height: calc(100vh - 40px);
    display: flex; align-items: center; justify-content: center;
    padding: 3rem 1rem;
    overflow: hidden;
}

/* Carrusel de imágenes de fondo (opcional, configurable desde
   Configuraciones → Generales — ver admin_configuracion.php). Si no hay
   ninguna imagen configurada, ninguno de estos elementos se imprime y el
   login se ve sobre el fondo normal (ver arriba). */
.login-fondo-carrusel { position: absolute; inset: 0; z-index: 0; }
.login-fondo-carrusel img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.4s ease;
}
.login-fondo-carrusel img.activa { opacity: 1; }
.login-fondo-velo {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, color-mix(in srgb, var(--login-bg-start) 55%, transparent) 0%, color-mix(in srgb, var(--login-bg-end) 72%, transparent) 100%);
}
.login-fondo-puntos {
    position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 2;
    display: flex; gap: .4rem;
}
.login-fondo-puntos span {
    width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .3s;
}
.login-fondo-puntos span.activo { background: #fff; }

.login-card {
    position: relative; z-index: 2;
    background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg);
    padding: 2.5rem 2.25rem; width: 100%; max-width: 380px;
}
.login-logo {
    width: 64px; height: 64px; border-radius: 16px; background: var(--primary); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.6rem;
    margin: 0 auto 1.1rem; overflow: hidden;
}
.login-logo img { width: 100%; height: 100%; object-fit: cover; }
.login-title { text-align: center; font-weight: 700; font-size: 1.25rem; margin-bottom: .1rem; color: var(--text); }
.login-subtitle {
    text-align: center; color: var(--accent); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1.6rem;
}

/* ---------- Alerts ---------- */

.alert { border: none; border-radius: var(--radius-sm); font-size: .9rem; }

/* ---------- Misc ---------- */

.page-title { font-size: 1.35rem; font-weight: 700; color: var(--text); margin-bottom: .1rem; }
.page-subtitle { color: var(--text-muted); font-size: .88rem; }
.stat-chip { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.2rem; }
.text-gold, .text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted) !important; }

.dropdown-menu { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-alt); color: var(--text); }
.dropdown-item.active, .dropdown-item:active { background: var(--accent); color: var(--accent-contrast); }
.dropdown-item.disabled, .dropdown-item:disabled { color: var(--text-muted); }
/* Resaltado del buscador de productos (fila de captura estilo "Excel" al
   armar un pedido) al navegar las sugerencias con las flechas del teclado;
   se usa una clase propia en vez de la ".active" que trae Bootstrap porque
   esa trae un azul fijo que no respeta el tema actual. */
.dropdown-item.sugerencia-activa { background: var(--accent); color: var(--accent-contrast); }

/* ---------- Fila de categoría dentro de "Tu pedido" ---------- */
tr.fila-categoria td { border-top: 2px solid var(--border); background: var(--surface-alt); }

/* ---------- Campos numéricos (cantidades de pedido) ---------- */
/* Se quitan las flechitas nativas de subir/bajar: junto con el "seleccionar
   todo el texto al enfocar" (ver layout_bottom.php), esas flechas hacían que
   el campo se quedara incrementando solo sin parar hasta el siguiente clic
   (un conflicto conocido del navegador entre ese gesto y el "spin" nativo).
   Como de todas formas la cantidad se escribe a mano, quitarlas no quita
   ninguna función real. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

/* ---------- Tablas con columnas ajustables a mano (ver layout_bottom.php) ---------- */
table.tabla-ajustable {
    table-layout: fixed;
}
table.tabla-ajustable th {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}
table.tabla-ajustable .resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}
table.tabla-ajustable .resizer:hover,
table.tabla-ajustable .resizer.resizing {
    background: var(--accent);
    opacity: 0.6;
}

/* ---------- Indicador de comentario (tarjeta emergente al pasar el mouse) ---------- */
.indicador-comentario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1em;
    min-height: 1.1em;
    color: var(--accent-hover);
    cursor: help;
    margin-left: 4px;
}
.indicador-comentario:hover,
.indicador-comentario:focus {
    color: var(--accent);
    outline: none;
}
.popover-comentario .popover-header {
    background: var(--primary);
    color: var(--primary-contrast);
    font-size: 0.85rem;
}
.popover-comentario .popover-body {
    font-size: 0.85rem;
}

/* ---------- Pantalla de "sin permiso" (403) ---------- */
.pagina-403 {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}
.pagina-403-tarjeta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    max-width: 520px;
    width: 100%;
    padding: 40px 32px;
    text-align: center;
}
.pagina-403-icono {
    font-size: 2.75rem;
    color: var(--danger-text);
    background: var(--danger-bg);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.pagina-403-titulo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}
.pagina-403-mensaje {
    color: var(--text-muted);
    margin-bottom: 24px;
}
.pagina-403-acciones {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}