/* ===========================================================================
   POS Óptica — hoja de estilos propia
   Va DESPUÉS de Bootstrap. Solo añade: no reescribe el framework.

   Todo el movimiento respeta `prefers-reduced-motion`: si el sistema del
   usuario pide menos animación, aquí no se mueve nada. No es un detalle
   estético — hay gente a la que el movimiento le produce mareo.
   =========================================================================== */

:root {
    --pos-tinta:      #14202e;   /* azul casi negro, más cálido que el negro puro */
    --pos-tinta-2:    #24354a;
    --pos-acento:     #0d6efd;
    --pos-borde:      #dfe5ec;

    /* Semáforo del inventario: elegidos para que el texto encima se lea */
    --pos-stock-ok:      #d7f5e3;
    --pos-stock-ok-txt:  #0a5535;
    --pos-stock-bajo:    #fdeec2;
    --pos-stock-bajo-txt:#6b4c00;
    --pos-stock-cero:    #fbdcdc;
    --pos-stock-cero-txt:#8b1a1a;
    --pos-stock-vacio:   #f4f6f8;

    --pos-sombra:  0 1px 2px rgba(20,32,46,.06), 0 4px 12px rgba(20,32,46,.06);
    --pos-sombra-2:0 4px 10px rgba(20,32,46,.10), 0 12px 28px rgba(20,32,46,.10);
}

body { background-color: #f2f5f9; }

/* ------------------------------------------------------------- animaciones */

@keyframes pos-entrar   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pos-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes pos-latir    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes pos-entrar-x { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.card, .alert { animation: pos-entrar .28s ease-out both; }

/* Escalonado: las tarjetas de una fila no entran todas de golpe */
.row > [class^="col"]:nth-child(1) .card { animation-delay: .00s; }
.row > [class^="col"]:nth-child(2) .card { animation-delay: .04s; }
.row > [class^="col"]:nth-child(3) .card { animation-delay: .08s; }
.row > [class^="col"]:nth-child(4) .card { animation-delay: .12s; }
.row > [class^="col"]:nth-child(5) .card { animation-delay: .16s; }
.row > [class^="col"]:nth-child(6) .card { animation-delay: .20s; }

.table tbody tr { animation: pos-aparecer .3s ease-out both; }

/* ------------------------------------------------------------------ cartas */

.card {
    border-radius: .6rem;
    box-shadow: var(--pos-sombra);
    transition: box-shadow .18s ease, transform .18s ease;
}
.card-header { border-radius: .6rem .6rem 0 0 !important; letter-spacing: .01em; }

/* Solo las tarjetas que son enlaces se levantan al pasar por encima */
.tarjeta:hover, a > .card:hover, .card > a:hover {
    box-shadow: var(--pos-sombra-2);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ botones */

.btn { transition: transform .08s ease, box-shadow .18s ease, background-color .15s ease; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-lg:not(:disabled):hover { box-shadow: var(--pos-sombra-2); }

/* El botón que crea o cobra late suavemente una vez al aparecer */
.btn-success.btn-lg { animation: pos-entrar .3s ease-out both; }

/* ------------------------------------------------------------------ tablas */

.table > thead.table-dark th {
    background-color: var(--pos-tinta) !important;
    color: #fff;
    border-color: var(--pos-tinta-2) !important;
    font-weight: 600;
    letter-spacing: .02em;
}
.table-hover > tbody > tr:hover > * { background-color: #eef4ff; }

/* ======================================================== MATRIZ DE STOCK ==

   El problema que había: encabezados oscuros y celdas con texto gris claro
   sobre pastel. Se leía mal justo donde más hay que leer.

   Ahora: encabezados con contraste alto, la esquina ESF\CYL con su propio
   color para que se entienda que es el cruce de los dos ejes, y el SKU en un
   tono legible en vez de gris humo.
   ========================================================================== */

/* La matriz se mueve en los dos ejes: 25 columnas de cilindro no caben en
   ninguna pantalla, y 49 filas de esfera tampoco.

   La barra se pinta A PROPÓSITO. En macOS las barras son «overlay»: se esconden
   hasta que algo se mueve, y con un ratón normal —sin trackpad— la rueda solo
   mueve en vertical, así que la barra de cilindro no aparecía nunca y no había
   nada que arrastrar. Darle color a `scrollbar-color` hace que el navegador
   vuelva a la barra clásica, siempre visible y agarrable con el ratón. */
.matriz-envoltura {
    --barra-pulgar: #7b8794;
    --barra-riel: #eef2f6;

    max-height: 76vh;
    overflow: auto;
    border-radius: .5rem;
    border: 1px solid var(--pos-borde);
    scrollbar-color: var(--barra-pulgar) var(--barra-riel);
}

/* Estas reglas NO van dentro de un `@supports not (scrollbar-color: auto)`, que
   sería lo habitual para un apaño de WebKit, y es a conciencia: en macOS
   `scrollbar-color` por sí solo NO saca la barra del modo overlay —medido: la
   barra seguía ocupando 0 px—. `-webkit-appearance: none` con una altura es lo
   único que la convierte en barra clásica, que ocupa sitio y se puede agarrar.
   Los colores de arriba cascadean solos hasta aquí, así que no se repiten. */
.matriz-envoltura::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
}
.matriz-envoltura::-webkit-scrollbar-track {
    background: var(--barra-riel);
    border-radius: 7px;
}
.matriz-envoltura::-webkit-scrollbar-thumb {
    background: var(--barra-pulgar);
    border-radius: 7px;
    border: 3px solid var(--barra-riel);
}
.matriz-envoltura::-webkit-scrollbar-thumb:hover { background: #566270; }

/* La esquina donde se cruzan las dos barras, para que no quede un hueco. */
.matriz-envoltura::-webkit-scrollbar-corner { background: var(--barra-riel); }

/* El mando del cilindro: la barra de verdad, la que sí se ve siempre. */
.matriz-mando {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem .25rem;
    margin: 0;
    background: #f8fafc;
    border-bottom: 1px solid var(--pos-borde);
    border-radius: .5rem .5rem 0 0;
    cursor: pointer;
}
.matriz-mando input[type="range"] {
    flex: 1;
    height: 1.35rem;
    accent-color: var(--pos-acento);
    cursor: grab;
}
.matriz-mando input[type="range"]:active { cursor: grabbing; }
.matriz-mando-texto {
    font-size: .78rem;
    font-weight: 700;
    color: #566270;
    letter-spacing: .04em;
    min-width: 3.4rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.matriz {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    width: 100%;
    background: #fff;
    font-size: .9rem;
}

/* La matriz NO usa `.table` de Bootstrap a propósito: ese componente pinta el
   fondo de cada celda con un box-shadow interno que tapaba el semáforo de
   stock. Aquí el fondo de la celda ES la información, así que manda ella. */
.matriz th, .matriz td {
    border-right: 1px solid #e6ebf1;
    border-bottom: 1px solid #e6ebf1;
    vertical-align: middle;
}

/* Encabezado de columnas: el cilindro */
.matriz thead th {
    position: sticky; top: 0; z-index: 10;
    background: linear-gradient(180deg, #1c2b3d 0%, var(--pos-tinta) 100%);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    padding: .55rem .35rem;
    text-align: center;
    box-shadow: inset 0 -2px 0 var(--pos-acento);
}

/* Encabezado de filas: la esfera */
.matriz tbody th.matriz-esfera {
    position: sticky; left: 0; z-index: 9;
    background: linear-gradient(90deg, #1c2b3d 0%, var(--pos-tinta) 100%);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    text-align: center;
    min-width: 92px;
    padding: .5rem .4rem;
    box-shadow: inset -2px 0 0 var(--pos-acento);
}

/* La esquina: cruce de los dos ejes. Color propio para que se entienda. */
.matriz th.matriz-esquina {
    position: sticky; left: 0; top: 0; z-index: 11;
    background: var(--pos-acento);
    color: #fff;
    font-weight: 800;
    font-size: .78rem;
    line-height: 1.15;
    letter-spacing: .06em;
    min-width: 92px;
    box-shadow: inset -2px 0 0 #0b5ed7, inset 0 -2px 0 #0b5ed7;
}
.matriz th.matriz-esquina .eje-y { display: block; opacity: .95; }
.matriz th.matriz-esquina .barra { opacity: .55; margin: 0 .15rem; }

/* Celdas */
.matriz-celda {
    cursor: pointer;
    text-align: center;
    min-width: 74px;
    padding: .35rem .2rem;
    transition: transform .1s ease, box-shadow .12s ease, filter .12s ease;
}
.matriz-celda:hover {
    transform: scale(1.14);
    box-shadow: 0 6px 18px rgba(20,32,46,.28);
    filter: saturate(1.25);
    z-index: 8;
    position: relative;
    border-radius: .25rem;
}
.matriz-celda .cantidad { display: block; font-weight: 800; font-size: 1rem; line-height: 1.1; }
.matriz-celda .sku {
    display: block;
    font-size: .6rem;
    letter-spacing: -.02em;
    opacity: .72;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Una sola línea siempre: antes el SKU partía la celda en tres renglones
       y la matriz se volvía ilegible. El SKU completo está en el tooltip. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.stock-ok   { background: var(--pos-stock-ok);   color: var(--pos-stock-ok-txt); }
.stock-bajo { background: var(--pos-stock-bajo); color: var(--pos-stock-bajo-txt); }
.stock-cero { background: var(--pos-stock-cero); color: var(--pos-stock-cero-txt); }
.matriz-vacia { background: var(--pos-stock-vacio); color: #9aa6b2; text-align: center; }

/* Celda recién actualizada: un destello verde y se acabó */
@keyframes pos-destello {
    0%   { box-shadow: 0 0 0 0 rgba(25,135,84,.65); }
    100% { box-shadow: 0 0 0 14px rgba(25,135,84,0); }
}
.matriz-celda.actualizada { animation: pos-destello .7s ease-out; }

/* Leyenda */
.leyenda-stock .badge { font-size: .78rem; padding: .5rem .8rem; font-weight: 600; }

/* --------------------------------------------------------------- detalles */

.badge { font-weight: 600; letter-spacing: .01em; }
.form-control:focus, .form-select:focus {
    border-color: #93bcff;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.14);
}
.font-monospace, code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Barra de navegación superior de cada pantalla */
.barra-superior { animation: pos-entrar-x .3s ease-out both; }

/* Contador que cambia: llama la atención sin gritar */
.tarjeta-num { animation: pos-entrar .35s ease-out both; }
.tarjeta-num.alerta { animation: pos-latir 1.6s ease-in-out 2; }

/* --------------------------------------------------- quien pide no moverse */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .card:hover, .tarjeta:hover, .matriz-celda:hover { transform: none; }
}

/* ------------------------------------------------------------- impresión */

@media print {
    .card, .alert, .table tbody tr { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   El menú de navegación

   Cada sección abre su propio desplegable con cuatro o cinco entradas. Ya no
   hace falta repartir nada en columnas: lo que se abre cabe entero. Queda el
   `max-height` como cinturón, por si una sección crece más de la cuenta, para
   que se desplace en vez de quedar cortada por abajo.
--------------------------------------------------------------------------- */
.menu-seccion {
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    min-width: 15rem;
    padding: .5rem;
}

.menu-seccion .dropdown-item {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

/* La barra: iconos del menú alineados en columna, y el círculo con la inicial
   del usuario. En pantalla chica el menú entero va en un panel lateral
   (offcanvas de Bootstrap) con los nombres escritos: solo iconos confundía. */
.icono-menu { width: 1.15rem; text-align: center; color: #6c757d; }
.active > .icono-menu, .active .icono-menu { color: inherit; }
.avatar-pos {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: #212529; color: #fff; font-weight: 700; font-size: .85rem;
}
#menuPos { width: min(20rem, 88vw); }

/* El nombre junto al círculo solo cuando sobra sitio: a 1400 px la barra ya
   llena la línea y el nombre quedaba cortado por el borde. */
.nombre-usuario { display: none; }
@media (min-width: 1600px) { .nombre-usuario { display: inline; } }

/* ---------------------------------------------------------------------------
   Enlaces sin subrayado en todo el sitio (4-oct-2026, pedido del laboratorio:
   se ve más limpio). Bootstrap 5.3 los subraya por defecto, también al pasar
   el mouse. El color sigue diciendo que es un enlace, y el foco de teclado
   conserva su contorno para quien navega sin mouse.
   --------------------------------------------------------------------------- */
a, a:hover, a:focus, .btn-link, .btn-link:hover {
    text-decoration: none;
}

/* Nueva orden: las líneas de lente se leen de dos en dos (5-oct-2026). */
#contenedorPares tr.inicio-par > td { border-top: 3px solid var(--pos-tinta-2); }
#contenedorPares tr.par-alterno > td { background-color: #f3f6fa; }