/*
 * ============================================================================
 * SISTEMA DE DISENO DEL WMS DE EEPAT
 * ============================================================================
 *
 * Esto no es una hoja de estilos suelta: es la ley visual del sistema. Si algo
 * se ve distinto al resto, o esta mal escrito o le falta una ficha de aqui.
 *
 * ---------------------------------------------------------------------------
 * EL LENGUAJE VISUAL (desde 06/10/2026)
 * ---------------------------------------------------------------------------
 * El de chainlink, por decision de BW: el WMS de EEPAT se ve igual que
 * demo.chainlink.mx. De EEPAT quedan el logotipo y los nombres. Inter, fondo
 * gris claro, tarjetas blancas de esquina amplia con sombra suave, pildoras
 * de estado, botones con degradado y el menu oscuro. La referencia es el CSS
 * de chainlink (resources/css/app.css y Components/UI); si algo se ve distinto
 * a como se ve alla, esta mal aqui.
 *
 * ---------------------------------------------------------------------------
 * LAS FICHAS: TRES CAPAS
 * ---------------------------------------------------------------------------
 *   1. Primitiva   --wms-azul-500      el color que existe
 *   2. Semantica   --wms-accion        para que sirve
 *   3. Componente  --wms-control-alto  cuanto mide una pieza
 *
 * Una vista NUNCA escribe un color literal: usa la ficha semantica. Cambiar la
 * identidad visual del sistema es tocar la capa 1, y lo demas obedece.
 */

/* ==========================================================================
   CAPA 1. PRIMITIVAS
   Derivadas del logotipo de EEPAT: azul #3b62af y rojo #d81f25.
   ========================================================================== */

:root {
    /* Azul de EEPAT. Es el unico acento del sistema */
    --wms-azul-50:  #eff6ff;
    --wms-azul-100: #dbeafe;
    --wms-azul-200: #bfdbfe;
    --wms-azul-300: #93c5fd;
    --wms-azul-400: #60a5fa;
    --wms-azul-500: #3b82f6;  /* el del logotipo, exacto */
    --wms-azul-600: #2563eb;
    --wms-azul-700: #1d4ed8;
    --wms-azul-800: #1e40af;
    --wms-azul-900: #1e3a8a;

    /*
     * Rojo de EEPAT. En el logotipo es el trazo que cruza la palabra. En el
     * sistema significa exactamente dos cosas: peligro y error. Nunca decora.
     */
    --wms-rojo-50:  #fef2f2;
    --wms-rojo-100: #fee2e2;
    --wms-rojo-200: #fecaca;
    --wms-rojo-500: #ef4444;  /* el del logotipo, exacto */
    --wms-rojo-600: #dc2626;
    --wms-rojo-700: #b91c1c;

    /* Los otros dos estados del almacen. Apagados a proposito */
    --wms-verde-50:  #ecfdf5;
    --wms-verde-100: #d1fae5;
    --wms-verde-500: #10b981;
    --wms-verde-600: #059669;
    --wms-verde-700: #047857;

    --wms-ambar-50:  #fffbeb;
    --wms-ambar-100: #fef3c7;
    --wms-ambar-500: #f59e0b;
    --wms-ambar-600: #d97706;
    --wms-ambar-700: #b45309;

    /* Lo que esta en curso: asignado, iniciado, en proceso. Separado del azul, que es el de las
       acciones y el de lo pendiente, para que las dos cosas no se confundan en una misma lista */
    --wms-turquesa-50:  #ecfeff;
    --wms-turquesa-200: #a5f3fc;
    --wms-turquesa-500: #06b6d4;
    --wms-turquesa-700: #0e7490;

    /*
     * Neutros. No son grises puros: llevan el mismo tono 220 del azul de la
     * marca con muy poca saturacion. Por eso el sistema se ve de una pieza y
     * no como una plantilla con un color encima.
     */
    --wms-gris-0:   #ffffff;
    --wms-gris-25:  #fcfcfd;
    --wms-gris-50:  #f9fafb;
    --wms-gris-100: #f3f4f6;
    --wms-gris-200: #e5e7eb;
    --wms-gris-300: #d1d5db;
    --wms-gris-400: #9ca3af;
    --wms-gris-500: #6b7280;
    --wms-gris-600: #4b5563;
    --wms-gris-700: #374151;
    --wms-gris-800: #1f2937;
    --wms-gris-900: #111827;
    --wms-gris-950: #030712;

    /* Tipografia */
    --wms-fuente: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --wms-fuente-dato: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Escala tipografica. Seis tamanos, ni uno mas */
    --wms-txt-xs: 12px;    /* rotulos de columna y ayudas */
    --wms-txt-sm: 14px;  /* la mayor parte de la interfaz */
    --wms-txt-md: 14px;    /* cuerpo y campos */
    --wms-txt-lg: 18px;    /* titulo de tarjeta */
    --wms-txt-xl: 24px;    /* titulo de pantalla */
    --wms-txt-2xl: 24px;   /* cifra de indicador */

    /* Espaciado: multiplos de 4. No hay valores sueltos */
    --wms-e1: 4px;
    --wms-e2: 8px;
    --wms-e3: 12px;
    --wms-e4: 16px;
    --wms-e5: 20px;
    --wms-e6: 24px;
    --wms-e8: 32px;
    --wms-e10: 40px;

    /* Radios de instrumento, no de burbuja */
    --wms-r-sm: 8px;
    --wms-r-md: 12px;
    --wms-r-lg: 16px;

    /*
     * Sombras. SOLO para lo que de verdad flota sobre la pagina: menus,
     * ventanas y globos de ayuda. Una tarjeta quieta lleva filete, no sombra.
     */
    --wms-sombra-flota: 0 4px 12px -2px rgba(17, 21, 29, .12), 0 2px 4px -2px rgba(17, 21, 29, .08);
    --wms-sombra-ventana: 0 16px 40px -8px rgba(17, 21, 29, .22), 0 4px 12px -4px rgba(17, 21, 29, .12);

    /*
     * Movimiento. Las curvas de CSS son demasiado flojas; estas tienen empuje.
     * Nunca ease-in: arranca lento justo cuando la persona esta mirando.
     */
    --wms-salida: cubic-bezier(.23, 1, .32, 1);
    --wms-ambas: cubic-bezier(.77, 0, .175, 1);
    --wms-veloz: 120ms;
    --wms-normal: 180ms;
    --wms-lento: 240ms;
}

/* ==========================================================================
   CAPA 2. SEMANTICAS
   Lo unico que una vista puede nombrar.
   ========================================================================== */

:root {
    --wms-fondo: var(--wms-gris-50);
    --wms-superficie: var(--wms-gris-0);
    --wms-superficie-suave: var(--wms-gris-25);
    --wms-superficie-hundida: var(--wms-gris-100);

    /* Los filetes son la sombra de este sistema */
    --wms-filete: var(--wms-gris-200);
    --wms-filete-fuerte: var(--wms-gris-300);
    --wms-filete-suave: var(--wms-gris-100);

    --wms-tinta: var(--wms-gris-900);
    --wms-tinta-media: var(--wms-gris-700);
    --wms-tinta-suave: var(--wms-gris-500);
    --wms-tinta-tenue: var(--wms-gris-400);
    --wms-tinta-invertida: var(--wms-gris-0);

    --wms-accion: var(--wms-azul-600);
    --wms-accion-viva: var(--wms-azul-700);
    --wms-accion-honda: var(--wms-azul-700);
    --wms-accion-tenue: var(--wms-azul-50);
    --wms-accion-filete: var(--wms-azul-200);

    --wms-bien: var(--wms-verde-600);
    --wms-bien-tenue: var(--wms-verde-50);
    --wms-bien-filete: var(--wms-verde-100);
    --wms-bien-tinta: var(--wms-verde-700);

    --wms-atencion: var(--wms-ambar-500);
    --wms-atencion-tenue: var(--wms-ambar-50);
    --wms-atencion-filete: var(--wms-ambar-100);
    --wms-atencion-tinta: var(--wms-ambar-700);

    --wms-peligro: var(--wms-rojo-500);
    --wms-peligro-viva: var(--wms-rojo-600);
    --wms-peligro-tenue: var(--wms-rojo-50);
    --wms-peligro-filete: var(--wms-rojo-200);
    --wms-peligro-tinta: var(--wms-rojo-700);

    /* El anillo de foco se ve siempre: aqui se navega con teclado y con lector */
    --wms-foco: 0 0 0 4px rgb(59 130 246 / .15);
}

/* ==========================================================================
   CAPA 3. COMPONENTE
   ========================================================================== */

:root {
    --wms-control-alto: 40px;      /* campos, desplegables y botones: una altura */
    --wms-control-alto-lg: 44px;
    --wms-boton-icono: 34px;
    --wms-fila-alto: 52px;
    --wms-menu-ancho: 288px;
    --wms-barra-alto: 64px;
    --wms-contenido-max: 2200px;  /* solo muerde en pantallas ultrapanoramicas */
    --wms-texto-max: 80ch;        /* la prosa se acota; las tablas no */
}

/* ==========================================================================
   BASE
   ========================================================================== */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
body.white-content,
.wrapper,
.main-panel,
.content,
input, select, textarea, button {
    font-family: var(--wms-fuente);
}

body,
body.white-content {
    background-color: var(--wms-fondo);
    color: var(--wms-tinta-media);
    font-size: var(--wms-txt-sm);
    line-height: 1.45;
}

h1, h2, h3, h4, h5, h6,
.card-title, .modal-title, .page-title {
    font-family: var(--wms-fuente);
    color: var(--wms-tinta);
    font-weight: 600;
    letter-spacing: -.006em;
    margin-top: 0;
}

h1, .page-title { font-size: var(--wms-txt-xl); line-height: 26px; }
h2 { font-size: var(--wms-txt-lg); line-height: 22px; }
h3 { font-size: var(--wms-txt-md); line-height: 20px; }
h4, .card-title { font-size: var(--wms-txt-md); line-height: 20px; margin-bottom: 0; }
h5 { font-size: var(--wms-txt-sm); }
h6 { font-size: var(--wms-txt-xs); }

a {
    color: var(--wms-accion-viva);
    transition: color var(--wms-veloz) ease;
}

a:hover,
a:focus {
    color: var(--wms-accion-honda);
    text-decoration: none;
}

hr { border-top-color: var(--wms-filete); margin: var(--wms-e5) 0; }

/*
 * Todo lo que asigno una maquina va en monoespaciada: codigo de articulo,
 * numero de serie, lote, EPC, uuid y folio. Se comparan caracter por caracter,
 * y asi el 0 no se confunde con la O ni el 1 con la l.
 */
code, kbd, pre, samp,
.wms-dato,
.product-code {
    font-family: var(--wms-fuente-dato);
    font-size: .95em;
    font-variant-ligatures: none;
}

.wms-dato {
    color: var(--wms-tinta);
    letter-spacing: -.01em;
}

/*
 * Un dato enlazado tiene que verse como enlace: va en el azul de accion y con peso medio, como los
 * enlaces de las tablas de chainlink. El subrayado aparece al pasar encima.
 */
a > .wms-dato {
    color: var(--wms-azul-600);
    font-weight: 500;
    text-decoration: none;
}

a:hover > .wms-dato,
a:focus > .wms-dato {
    color: var(--wms-azul-700);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--wms-gris-300); border: 3px solid var(--wms-fondo); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--wms-gris-400); }

*:focus-visible {
    outline: none;
    box-shadow: var(--wms-foco);
    border-radius: var(--wms-r-sm);
}

::selection { background: var(--wms-azul-100); color: var(--wms-azul-900); }

/* Lo que Alpine va a esconder no parpadea abierto antes de que Alpine arranque. Con !important
   a proposito: tiene que ganar al display que le ponga cualquier componente. */
[x-cloak] { display: none !important; }

/* ==========================================================================
   ESTRUCTURA: MENU LATERAL
   ========================================================================== */

.sidebar,
body.white-content .sidebar,
.off-canvas-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--wms-menu-ancho);
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
    border-right: 1px solid var(--wms-gris-800);
    background: var(--wms-gris-950);
}

.sidebar:after,
.sidebar:before,
body.white-content .sidebar:after,
body.white-content .sidebar:before { display: none; }

/*
 * La marca no se desplaza y el menu se queda con el resto exacto de la altura.
 * Antes el menu pedia el alto completo de la pantalla ADEMAS de la marca, asi que
 * sus ultimos 53 px caian por debajo del borde y no habia forma de alcanzarlos: con
 * varios grupos desplegados, la ultima entrada quedaba fuera.
 *
 * `min-height: 0` es obligatorio. Sin el, un hijo flexible no encoge por debajo de su
 * contenido y el desbordamiento vuelve, esta vez sin barra de desplazamiento.
 */
.sidebar .wms-marca,
.off-canvas-sidebar .wms-marca { flex: 0 0 auto; }

.sidebar .sidebar-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    /*
     * La plantilla le pone `max-height: calc(-705px + 100vh)`, un resto de su maqueta original con
     * cabecera y pie grandes. En una pantalla de 1170 px eso recorta el menu a 465: se veia cortado
     * y sobraba medio panel vacio debajo. Aqui el alto lo decide el flex del contenedor.
     */
    max-height: none;
    padding: var(--wms-e2) var(--wms-e2) var(--wms-e4);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Delgada y discreta: la del sistema mide 10 px y sobre un menu de 248 px se come el texto */
.sidebar .sidebar-wrapper::-webkit-scrollbar { width: 6px; }
.sidebar .sidebar-wrapper::-webkit-scrollbar-track { background: transparent; }
.sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: var(--wms-gris-700);
    border: none;
    border-radius: 99px;
}
.sidebar .sidebar-wrapper::-webkit-scrollbar-thumb:hover { background: var(--wms-gris-600); }

.sidebar .logo,
.sidebar .logo:after { display: none; }

.sidebar .nav { margin-top: var(--wms-e1); }

.sidebar .nav li > a,
body.white-content .sidebar .nav li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wms-e3);
    margin: 1px 0;
    padding: 7px 10px;
    border-radius: var(--wms-r-md);
    color: var(--wms-gris-400);
    opacity: 1;
    font-weight: 400;
    transition: background-color var(--wms-veloz) ease, color var(--wms-veloz) ease;
}

.sidebar .nav li > a:hover,
.sidebar .nav li > a:focus,
body.white-content .sidebar .nav li > a:hover {
    background-color: rgba(255, 255, 255, .05);
    color: var(--wms-gris-100);
}

.sidebar .nav li.active > a,
body.white-content .sidebar .nav li.active > a {
    background-color: rgba(255, 255, 255, .07);
    color: #fff;
    font-weight: 500;
}

/*
 * El trazo rojo inclinado del logotipo de EEPAT, usado como marca de "estas
 * aqui". Es la firma del sistema: sale de su propia marca y no la tiene ningun
 * otro panel.
 */
.sidebar .nav li.active > a:before,
body.white-content .sidebar .nav li.active > a:before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -8px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: 3px !important;
    height: 16px !important;
    margin: -8px 0 0 !important;
    padding: 0 !important;
    background: var(--wms-rojo-500) !important;
    border: 0 !important;
    border-radius: 0 2px 2px 0 !important;
    transform: skewX(-12deg) !important;
    opacity: 1 !important;
}

.sidebar .nav li.active > a:after,
.sidebar .nav li > a:after { display: none !important; }

.sidebar .nav p,
.sidebar .nav .nav-link-text,
body.white-content .sidebar .nav p,
body.white-content .sidebar .nav .nav-link-text {
    text-transform: none;
    font-size: var(--wms-txt-sm);
    font-weight: inherit;
    letter-spacing: 0;
    line-height: 17px;
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Los grupos que se despliegan son encabezados de seccion, no destinos */
.sidebar .nav > li > a[data-toggle="collapse"] .nav-link-text,
.sidebar .nav > li > a[data-toggle="collapse"] p {
    font-size: var(--wms-txt-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--wms-gris-500);
}

.sidebar .nav > li > a[data-toggle="collapse"]:hover .nav-link-text,
.sidebar .nav > li > a[aria-expanded="true"] .nav-link-text { color: var(--wms-gris-300); }

.sidebar .nav i,
.sidebar .nav [class^="fa-"],
.sidebar .nav [class*=" fa-"],
.sidebar .nav [class^="tim-icons"] {
    width: 16px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
    opacity: .75;
}

.sidebar .nav li.active > a i { opacity: 1; }

/* Submenu: sangrado con una guia vertical */
.sidebar .nav .nav {
    margin: 1px 0 var(--wms-e2) 18px;
    padding-left: 10px;
    border-left: 1px solid var(--wms-gris-800);
}

.sidebar .nav .nav li > a { padding: 6px 10px; }
.sidebar .nav .nav p { font-size: var(--wms-txt-sm); }

.sidebar .caret {
    margin-left: auto;
    font-size: 10px;
    transition: transform var(--wms-normal) var(--wms-salida);
}

.sidebar .nav li > a[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* ==========================================================================
   ESTRUCTURA: PANEL Y BARRA SUPERIOR
   ========================================================================== */

.main-panel,
body.white-content .main-panel {
    width: calc(100% - var(--wms-menu-ancho));
    background: var(--wms-fondo);
    border-radius: 0;
    border-top: 0;
}

.main-panel.main-panel-full,
body.white-content .main-panel.main-panel-full { width: 100%; }

/*
 * El contenido ocupa todo el ancho disponible.
 *
 * Estaba topado a 1560px y pegado a la izquierda: en un monitor de 2560 dejaba
 * 752px muertos a la derecha. Una medida maxima tiene sentido para leer prosa,
 * no para una consola de operacion: aqui el ancho de mas se traduce en mas
 * columnas y mas renglones visibles, que es justo lo que necesita un supervisor.
 *
 * Lo que si se acota es el texto corrido, que a 2300px no se lee.
 */
.main-panel > .content {
    padding: calc(var(--wms-barra-alto) + var(--wms-e5)) var(--wms-e6) var(--wms-e10);
    min-height: 100vh;
    /*
     * El tope es alto a proposito: en un monitor de 2560 no se nota, y solo entra
     * en juego en pantallas ultrapanoramicas, donde una tabla de cinco columnas
     * estirada tres mil pixeles deja el dato flotando. Y va centrado, no pegado
     * a la izquierda.
     */
    max-width: var(--wms-contenido-max);
    margin-left: auto;
    margin-right: auto;
}

.main-panel.main-panel-full > .content {
    padding-top: var(--wms-e5);
    min-height: auto;
    max-width: none;
}

.main-panel .navbar,
body.white-content .main-panel > .navbar {
    min-height: var(--wms-barra-alto);
    height: var(--wms-barra-alto);
    padding: 0 var(--wms-e6);
    background: var(--wms-superficie);
    border-bottom: 1px solid var(--wms-filete);
    box-shadow: none;
}

.main-panel .navbar .navbar-brand {
    color: var(--wms-tinta);
    font-size: var(--wms-txt-md);
    font-weight: 600;
    letter-spacing: -.006em;
    text-transform: none;
}

/* ==========================================================================
   TARJETAS
   Sin sombra: un filete de 1px basta para separarlas del fondo.
   ========================================================================== */

.card,
body.white-content .card {
    background: var(--wms-superficie);
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-lg);
    box-shadow: none;
    margin-bottom: var(--wms-e5);
}

.card:hover { box-shadow: none; }

.card .card-header,
body.white-content .card .card-header {
    min-height: 46px;
    background: transparent;
    border-bottom: 1px solid var(--wms-filete-suave);
    border-radius: var(--wms-r-lg) var(--wms-r-lg) 0 0;
    padding: var(--wms-e3) var(--wms-e5);
}

/*
 * La cabecera en fila solo la usa <x-ui.card>. Las vistas heredadas meten un
 * `row`/`col` dentro de la cabecera, y con `display:flex` aqui el titulo se
 * quedaba en una columna angosta y se partia a la mitad ("Recep / ciones").
 */
.card.wms-card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wms-e3);
}

.card.wms-card > .card-header > :first-child { flex: 1 1 auto; min-width: 0; }

.card .card-body,
body.white-content .card .card-body { padding: var(--wms-e5); }

.card .card-footer,
body.white-content .card .card-footer {
    background: var(--wms-superficie-suave);
    border-top: 1px solid var(--wms-filete-suave);
    border-radius: 0 0 var(--wms-r-lg) var(--wms-r-lg);
    padding: var(--wms-e3) var(--wms-e5);
}

/* La plantilla ponia los titulos en peso 100 y las ayudas en Mayusculas De Titulo */
body .card .card-header .card-title,
body.white-content .card .card-header .card-title,
body .card .card-title {
    color: var(--wms-tinta);
    font-size: var(--wms-txt-md);
    font-weight: 600;
    text-transform: none;
    letter-spacing: -.006em;
    margin-bottom: 0;
}

body .card .card-category,
body .card .card-subtitle,
body.white-content .card .card-category {
    color: var(--wms-tinta-suave);
    font-size: var(--wms-txt-xs);
    font-weight: 400;
    text-transform: none;
    margin-top: 2px;
}

.card > .table-responsive:last-child,
.card > .table-responsive:last-child > .table { border-radius: 0 0 var(--wms-r-lg) var(--wms-r-lg); }

/* ==========================================================================
   BOTONES
   Solidos. Sin degradado y sin resplandor. Una sola altura.
   ========================================================================== */

.btn,
body.white-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--wms-control-alto);
    padding: 0 var(--wms-e3);
    font-family: var(--wms-fuente);
    font-size: var(--wms-txt-sm);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    background-color: var(--wms-superficie);
    background-image: none;
    border: 1px solid var(--wms-filete-fuerte);
    border-radius: var(--wms-r-md);
    color: var(--wms-tinta-media);
    box-shadow: none;
    transition: background-color var(--wms-veloz) ease,
                border-color var(--wms-veloz) ease,
                color var(--wms-veloz) ease,
                transform 100ms var(--wms-salida);
}

.btn:hover { background-color: var(--wms-gris-50); border-color: var(--wms-gris-400); color: var(--wms-tinta); }

/* Que el boton conteste al dedo: 100ms, apenas visible, pero se siente */
.btn:active,
.btn.active,
.btn:not(:disabled):not(.disabled):active { transform: scale(.97); }

.btn:disabled,
.btn.disabled { opacity: .45; box-shadow: none; pointer-events: none; }

.btn-sm { height: var(--wms-boton-icono); padding: 0 var(--wms-e2); font-size: var(--wms-txt-xs); }
.btn-lg { height: var(--wms-control-alto-lg); padding: 0 var(--wms-e5); font-size: var(--wms-txt-md); }
.btn-block { width: 100%; }

.btn.btn-primary,
body.white-content .btn.btn-primary {
    background-color: var(--wms-accion);
    background-image: none;
    border-color: var(--wms-accion);
    color: var(--wms-tinta-invertida);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:not(:disabled):not(.disabled):active,
body.white-content .btn.btn-primary:hover {
    background-color: var(--wms-accion-viva);
    border-color: var(--wms-accion-viva);
    color: var(--wms-tinta-invertida);
}

.btn.btn-success,
body.white-content .btn.btn-success {
    background-color: var(--wms-bien);
    background-image: none;
    border-color: var(--wms-bien);
    color: var(--wms-tinta-invertida);
}

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--wms-verde-700);
    border-color: var(--wms-verde-700);
    color: var(--wms-tinta-invertida);
}

.btn.btn-danger,
body.white-content .btn.btn-danger {
    background-color: var(--wms-peligro);
    background-image: none;
    border-color: var(--wms-peligro);
    color: var(--wms-tinta-invertida);
}

.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--wms-peligro-viva);
    border-color: var(--wms-peligro-viva);
    color: var(--wms-tinta-invertida);
}

.btn.btn-warning,
body.white-content .btn.btn-warning {
    background-color: var(--wms-atencion);
    background-image: none;
    border-color: var(--wms-atencion);
    color: var(--wms-gris-950);
}

.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--wms-ambar-600);
    border-color: var(--wms-ambar-600);
    color: var(--wms-gris-950);
}

/* El boton `info` se comporta como el acento. El distintivo `info` si es un estado: en curso, turquesa */
.btn.btn-info,
body.white-content .btn.btn-info {
    background-color: var(--wms-azul-600);
    background-image: none;
    border-color: var(--wms-azul-600);
    color: var(--wms-tinta-invertida);
}

.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--wms-azul-700);
    border-color: var(--wms-azul-700);
    color: var(--wms-tinta-invertida);
}

.btn.btn-secondary,
.btn.btn-default,
body.white-content .btn.btn-secondary {
    background-color: var(--wms-superficie);
    background-image: none;
    border-color: var(--wms-filete-fuerte);
    color: var(--wms-tinta-media);
}

.btn.btn-secondary:hover,
.btn.btn-default:hover,
.btn.btn-secondary:focus {
    background-color: var(--wms-gris-50);
    border-color: var(--wms-gris-400);
    color: var(--wms-tinta);
}

.btn.btn-link,
body.white-content .btn.btn-link {
    background: transparent;
    background-image: none;
    border-color: transparent;
    color: var(--wms-tinta-suave);
    padding: 0 var(--wms-e2);
}

.btn.btn-link:hover,
.btn.btn-link:focus {
    background: var(--wms-gris-100);
    border-color: transparent;
    color: var(--wms-tinta);
}

/* --------------------------------------------------------------------------
   Estados de raton y teclado de los botones
   -------------------------------------------------------------------------- */

/*
 * La plantilla declara esto, con !important, sobre TODO `.btn`:
 *
 *     .btn:hover, .btn:focus, .btn:active, .btn.active, ... {
 *         background-color: #263148 !important;
 *         background-image: linear-gradient(to bottom left, #344675, #263148, #344675) !important;
 *     }
 *
 * y repite el patron por variante con el magenta #e14eca de su paleta. Como lleva !important, gana
 * sobre las reglas de arriba por mucha especificidad que se les ponga: los botones de este sistema
 * se quedaban con el degradado morado de la plantilla en cuanto se les pasaba el raton, y el
 * secundario quedaba con texto oscuro sobre azul marino, ilegible.
 *
 * Solo se puede responder con !important. Se aplica al minimo: el fondo y su degradado.
 */
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active {
    background-image: none !important;
    box-shadow: none;
}

.btn:hover,
.btn:focus,
.btn:not(:disabled):not(.disabled):active { background-color: var(--wms-gris-50) !important; }

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:not(:disabled):not(.disabled):active { background-color: var(--wms-accion-viva) !important; }

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:not(:disabled):not(.disabled):active { background-color: var(--wms-verde-700) !important; }

.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:not(:disabled):not(.disabled):active { background-color: var(--wms-peligro-viva) !important; }

.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:not(:disabled):not(.disabled):active { background-color: var(--wms-ambar-600) !important; }

.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info:not(:disabled):not(.disabled):active { background-color: var(--wms-azul-700) !important; }

.btn.btn-secondary:hover,
.btn.btn-default:hover,
.btn.btn-secondary:focus,
.btn.btn-default:focus { background-color: var(--wms-gris-50) !important; }

/* El de accion de un listado vive sobre la fila, que ya se tine al pasar el raton */
.btn.btn-link:hover,
.btn.btn-link:focus,
.table .btn.btn-link:hover,
.td-actions .btn:hover { background-color: var(--wms-gris-100) !important; }

.btn[class*="btn-outline-"]:hover,
.btn[class*="btn-outline-"]:focus { background-color: var(--wms-accion-tenue) !important; }

.btn[class*="btn-outline-"] { background: transparent; background-image: none; }
.btn.btn-outline-primary { border-color: var(--wms-accion-filete); color: var(--wms-accion-honda); }
.btn.btn-outline-primary:hover { background: var(--wms-accion-tenue); border-color: var(--wms-azul-300); color: var(--wms-azul-800); }
.btn.btn-outline-danger { border-color: var(--wms-peligro-filete); color: var(--wms-peligro-tinta); }
.btn.btn-outline-danger:hover { background: var(--wms-peligro-tenue); color: var(--wms-peligro-tinta); }
.btn.btn-outline-success { border-color: var(--wms-bien-filete); color: var(--wms-bien-tinta); }
.btn.btn-outline-success:hover { background: var(--wms-bien-tenue); color: var(--wms-bien-tinta); }
.btn.btn-outline-secondary { border-color: var(--wms-filete-fuerte); color: var(--wms-tinta-media); }
.btn.btn-outline-secondary:hover { background: var(--wms-gris-100); color: var(--wms-tinta); }

.btn.btn-icon,
.btn.btn-sm.btn-icon {
    width: var(--wms-boton-icono);
    height: var(--wms-boton-icono);
    padding: 0;
}

.btn i { font-size: 12px; line-height: 1; }

.btn-group > .btn { border-radius: 0; margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: var(--wms-r-md) 0 0 var(--wms-r-md); margin-left: 0; }
.btn-group > .btn:last-child { border-radius: 0 var(--wms-r-md) var(--wms-r-md) 0; }
.btn-group > .btn:only-child { border-radius: var(--wms-r-md); }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

.form-control,
.custom-select,
body.white-content .form-control,
.input-group .form-control {
    font-family: var(--wms-fuente);
    font-size: var(--wms-txt-sm);
    color: var(--wms-tinta);
    background-color: var(--wms-superficie);
    border: 1px solid var(--wms-filete-fuerte);
    border-radius: var(--wms-r-md);
    padding: 0 10px;
    height: var(--wms-control-alto);
    line-height: 1.4;
    box-shadow: none;
    transition: border-color var(--wms-veloz) ease, box-shadow var(--wms-veloz) ease;
}

.input-group .input-group-text,
.input-group .btn,
body.white-content .input-group .btn { height: var(--wms-control-alto); }

textarea.form-control,
body.white-content textarea.form-control,
select[multiple].form-control { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; }

.form-control:hover,
.custom-select:hover { border-color: var(--wms-gris-400); }

.form-control:focus,
.custom-select:focus,
body.white-content .form-control:focus {
    background-color: var(--wms-superficie);
    border-color: var(--wms-accion);
    color: var(--wms-tinta);
    box-shadow: 0 0 0 3px var(--wms-azul-100);
}

.form-control::placeholder { color: var(--wms-tinta-tenue); }

.form-control.is-invalid,
.has-danger .form-control { border-color: var(--wms-peligro); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--wms-rojo-100); }

.form-control:disabled,
.form-control[readonly] { background-color: var(--wms-superficie-hundida); color: var(--wms-tinta-suave); }

/* Un codigo se escribe y se lee en monoespaciada tambien dentro del campo */
input.wms-dato,
input[name*="barcode"],
input[name*="serial"],
input[name*="item_code"],
input[name*="scan"] {
    font-family: var(--wms-fuente-dato);
    letter-spacing: .01em;
}

label,
.form-group label,
.col-form-label {
    display: block;
    color: var(--wms-tinta-media);
    font-size: var(--wms-txt-xs);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 5px;
}

.form-group { margin-bottom: var(--wms-e4); }

.invalid-feedback,
.form-control-feedback,
.has-danger .form-control-feedback {
    color: var(--wms-peligro-tinta);
    font-size: var(--wms-txt-xs);
    margin-top: 4px;
}

.input-group .input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    background: var(--wms-superficie-suave);
    border: 1px solid var(--wms-filete-fuerte);
    color: var(--wms-tinta-suave);
    font-size: var(--wms-txt-sm);
    padding: 0 10px;
}

.input-group > .input-group-prepend > .input-group-text { border-radius: var(--wms-r-md) 0 0 var(--wms-r-md); margin-right: -1px; }
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn { border-radius: 0 var(--wms-r-md) var(--wms-r-md) 0; margin-left: -1px; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.form-check-input,
.custom-control-input { accent-color: var(--wms-accion); }

.form-check-label,
.custom-control-label { color: var(--wms-tinta-media); font-size: var(--wms-txt-sm); }

/* El desplegable con busqueda de varias pantallas */
.ss-main .ss-single-selected,
.ss-main .ss-multi-selected {
    height: var(--wms-control-alto);
    min-height: var(--wms-control-alto);
    padding: 0 10px;
    font-family: var(--wms-fuente);
    font-size: var(--wms-txt-sm);
    color: var(--wms-tinta);
    background: var(--wms-superficie);
    border: 1px solid var(--wms-filete-fuerte);
    border-radius: var(--wms-r-md);
}

.ss-main .ss-single-selected:focus,
.ss-main .ss-multi-selected:focus-within {
    border-color: var(--wms-accion);
    box-shadow: 0 0 0 3px var(--wms-azul-100);
}

.ss-content {
    border-radius: var(--wms-r-md);
    border: 1px solid var(--wms-filete);
    box-shadow: var(--wms-sombra-flota);
}

.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option.ss-highlighted { background: var(--wms-accion-tenue); color: var(--wms-accion-honda); }

/* ==========================================================================
   TABLAS
   Densas: un supervisor tiene que ver quince renglones sin desplazarse.
   ========================================================================== */

.table,
body.white-content .table {
    color: var(--wms-tinta-media);
    font-size: var(--wms-txt-sm);
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table > thead > tr > th,
body.white-content .table > thead > tr > th {
    height: 34px;
    padding: 0 var(--wms-e4);
    background: var(--wms-superficie-suave);
    border-bottom: 1px solid var(--wms-filete);
    border-top: 0;
    color: var(--wms-tinta-suave);
    font-size: var(--wms-txt-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    vertical-align: middle;
    text-align: left;
}

.table > tbody > tr > td,
body.white-content .table > tbody > tr > td {
    height: var(--wms-fila-alto);
    padding: 6px var(--wms-e4);
    border-top: 1px solid var(--wms-filete-suave);
    color: var(--wms-tinta-media);
    vertical-align: middle;
}

.table > tbody > tr:first-child > td { border-top: 0; }

.table > tbody > tr,
body.white-content .table > tbody > tr { transition: background-color 90ms ease; }

.table > tbody > tr:hover,
body.white-content .table > tbody > tr:hover { background-color: var(--wms-azul-50); }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table td.td-nowrap,
.table th.td-nowrap { white-space: nowrap; }

.table .td-actions { width: 1%; white-space: nowrap; text-align: right; }

/* --------------------------------------------------------------------------
   Encabezado ordenable
   -------------------------------------------------------------------------- */

/*
 * Hereda la tipografia del `th` en vez de fijarla: si cambia el encabezado, la columna
 * ordenable cambia con el y no se queda con un tamano distinto al de sus vecinas.
 */
.wms-orden {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
}

/* El nombre puede partirse en dos renglones cuando la tabla va apretada: un encabezado largo no
   tiene por que fijar el ancho minimo de toda una columna. El ancho minimo evita que se parta en
   tres o cuatro, que es lo que hace un titulo largo en una tabla que ya se desplaza en horizontal.
   La flecha se queda pegada a la ultima palabra. */
.wms-orden > span { white-space: normal; min-width: 9em; text-wrap: balance; }
.wms-orden__icono { flex-shrink: 0; }

.wms-orden:hover { color: var(--wms-azul-600); }
.wms-orden--activa { color: var(--wms-tinta); }

/* Apagada mientras no ordena por esta columna: se ve que se puede, sin competir con la activa */
.wms-orden__icono { font-size: 10px; opacity: .35; transition: opacity var(--wms-veloz) ease; }
.wms-orden:hover .wms-orden__icono { opacity: .7; }
.wms-orden--activa .wms-orden__icono { opacity: 1; color: var(--wms-azul-600); }

th[aria-sort="ascending"],
th[aria-sort="descending"] { background: var(--wms-azul-50); }

/* --------------------------------------------------------------------------
   Veredicto de una pantalla de diagnostico: <x-ui.veredicto>
   -------------------------------------------------------------------------- */

/*
 * Va antes que cualquier dato y ocupa el ancho completo: es la respuesta, no un aviso al margen.
 * El color va en el filete de la izquierda y en el icono, no en un fondo saturado que compita con
 * las tarjetas que vienen debajo.
 */
.wms-veredicto {
    display: flex;
    align-items: flex-start;
    gap: var(--wms-e4);
    margin-bottom: var(--wms-e4);
    padding: var(--wms-e4) var(--wms-e5);
    border: 1px solid var(--wms-filete);
    border-left: 3px solid var(--wms-gris-400);
    border-radius: var(--wms-r-lg);
    background: var(--wms-superficie);
}

.wms-veredicto__icono { font-size: 18px; line-height: 1.35; color: var(--wms-gris-400); flex-shrink: 0; }
.wms-veredicto__texto { min-width: 0; }

.wms-veredicto__titulo {
    margin: 0;
    font-size: var(--wms-txt-lg);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--wms-tinta);
}

.wms-veredicto__detalle {
    margin: 3px 0 0;
    font-size: var(--wms-txt-md);
    color: var(--wms-tinta-media);
    max-width: 78ch;
}

.wms-veredicto--bien { border-left-color: var(--wms-bien); background: var(--wms-bien-tenue); border-color: var(--wms-bien-filete); }
.wms-veredicto--bien .wms-veredicto__icono { color: var(--wms-bien-tinta); }

.wms-veredicto--falta { border-left-color: var(--wms-atencion); background: var(--wms-atencion-tenue); border-color: var(--wms-atencion-filete); }
.wms-veredicto--falta .wms-veredicto__icono { color: var(--wms-atencion-tinta); }

.wms-veredicto--cancelada { border-left-color: var(--wms-peligro); background: var(--wms-peligro-tenue); border-color: var(--wms-peligro-filete); }
.wms-veredicto--cancelada .wms-veredicto__icono { color: var(--wms-peligro-tinta); }

.wms-veredicto--pendiente { border-left-color: var(--wms-gris-400); }

/* --------------------------------------------------------------------------
   Lo que falta por resolver, y las partidas
   -------------------------------------------------------------------------- */

.wms-faltantes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wms-e4);
}

.wms-faltantes__punto { display: flex; flex-direction: column; gap: 5px; }

.wms-faltantes__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wms-e2); }

/* Que partidas toca. Sin esto el aviso dice el problema pero no a quien mirar */
.wms-faltantes__donde {
    font-size: var(--wms-txt-xs);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wms-tinta-suave);
}

.wms-faltantes__texto { margin: 0; font-size: var(--wms-txt-md); color: var(--wms-tinta-media); max-width: 92ch; }

/* La ficha de datos: pares que se acomodan solos sin dejar un hueco al final */
.wms-ficha {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--wms-e4) var(--wms-e5);
}

.wms-ficha > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.wms-ficha dt {
    font-size: var(--wms-txt-xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--wms-tinta-suave);
}

.wms-ficha dd { margin: 0; font-size: var(--wms-txt-md); color: var(--wms-tinta); }

/*
 * La linea de tiempo de una orden: seis pasos en fila, cada uno con su barra, su nombre y cuanto
 * duro. Lo hecho va en verde, el paso actual en azul, lo que falta en gris; una orden retirada se
 * detiene en rojo donde estaba. Debajo, en que paso va, los dos relojes y que sigue.
 */
.wms-linea__pasos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--wms-e2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.wms-linea__paso { display: flex; flex-direction: column; gap: var(--wms-e1); min-width: 0; }
.wms-linea__barra { display: block; height: 6px; border-radius: 99px; background: var(--wms-gris-200); }
.wms-linea__paso--hecho .wms-linea__barra { background: var(--wms-bien); }
.wms-linea__paso--actual .wms-linea__barra { background: var(--wms-accion); box-shadow: 0 0 0 3px var(--wms-accion-tenue); }
.wms-linea__paso--detenido .wms-linea__barra { background: var(--wms-peligro); }
.wms-linea__nombre {
    font-size: var(--wms-txt-xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--wms-tinta-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wms-linea__paso--actual .wms-linea__nombre { color: var(--wms-tinta); }
.wms-linea__paso--detenido .wms-linea__nombre { color: var(--wms-peligro-tinta); }
.wms-linea__duracion { font-size: var(--wms-txt-sm); color: var(--wms-tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wms-linea__duracion--en-curso { font-style: italic; color: var(--wms-tinta-media); }

.wms-linea__resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wms-e2) var(--wms-e5);
    margin-top: var(--wms-e4);
}
.wms-linea__paso-actual { margin: 0; font-size: var(--wms-txt-md); color: var(--wms-tinta-media); }
.wms-linea__paso-actual strong { color: var(--wms-tinta); }
.wms-linea__relojes { display: flex; flex-wrap: wrap; gap: var(--wms-e1) var(--wms-e4); margin: 0; font-size: var(--wms-txt-sm); }
.wms-linea__relojes > div { display: flex; gap: var(--wms-e1); }
.wms-linea__relojes dt { color: var(--wms-tinta-suave); }
.wms-linea__relojes dt::after { content: ':'; }
.wms-linea__relojes dd { margin: 0; color: var(--wms-tinta); font-variant-numeric: tabular-nums; }
.wms-linea__reloj--en-curso dd { font-style: italic; color: var(--wms-tinta-media); }
.wms-linea__enlace { margin-left: auto; font-size: var(--wms-txt-sm); white-space: nowrap; }

/* Un enlace de listado que lleva una insignia y un dato chico debajo, como la orden de empaque de una lista */
.wms-listado__enlace { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; }
.wms-listado__enlace:hover { text-decoration: none; }
.wms-listado__enlace:hover .wms-partida__nombre { text-decoration: underline; }

.wms-linea__siguiente {
    margin-top: var(--wms-e3);
    padding: var(--wms-e3) var(--wms-e4);
    border-radius: var(--wms-r-sm);
    background: var(--wms-superficie-suave);
    font-size: var(--wms-txt-md);
    color: var(--wms-tinta);
}
.wms-linea__siguiente-titulo {
    display: block;
    margin-bottom: 2px;
    font-size: var(--wms-txt-xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--wms-tinta-suave);
}
@media (max-width: 767.98px) {
    .wms-linea__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--wms-e3); }
    .wms-linea__enlace { margin-left: 0; flex-basis: 100%; }
}

/* Una partida a la que le falta algo se distingue por el filete, no por un fondo de color:
   con varias seguidas, el fondo convierte la tabla en un semaforo ilegible */
.wms-partida--pendiente > td:first-child { box-shadow: inset 2px 0 0 var(--wms-atencion); }

.wms-partida__num { color: var(--wms-tinta-suave); font-variant-numeric: tabular-nums; }

/* Al desplazar la tabla en horizontal, el numero de partida se queda a la vista: es el ancla de la
   fila y sin el se pierde de que renglon se esta leyendo */
@media (max-width: 1200px) {
    .table td.wms-partida__num,
    .table thead th:first-child { position: sticky; left: 0; background: var(--wms-superficie); z-index: 1; }
}
.wms-partida__nombre { margin-top: 2px; max-width: 34ch; overflow-wrap: anywhere; font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); }

.wms-listado__bien { display: inline-flex; align-items: center; gap: 5px; color: var(--wms-bien-tinta); font-size: var(--wms-txt-sm); }

/* La serie o el lote que SAP reservo, junto a su articulo */
.wms-reserva {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 4px 0 0;
    padding: 1px 7px 1px 5px;
    border: 1px solid var(--wms-filete);
    border-radius: 99px;
    background: var(--wms-gris-25);
    font-size: var(--wms-txt-xs);
    color: var(--wms-tinta-suave);
}

.wms-piezas { font-family: var(--wms-fuente-dato); font-size: var(--wms-txt-md); color: var(--wms-tinta); font-variant-numeric: tabular-nums; }
.wms-piezas__de { margin: 0 2px; font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); }

/* El surtido del WMS que trabaja la partida: su numero y su estado en un renglon, uno por surtido */
.wms-surtido { display: flex; align-items: center; gap: 6px; }
.wms-surtido + .wms-surtido { margin-top: 4px; }
.wms-ubicacion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }

/* --- Tablero de empaque --------------------------------------------------- */

/* El resumen por estado va arriba de la busqueda, con el mismo aire que bajo un titulo */
.wms-tablero__resumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wms-e2); margin-bottom: var(--wms-e4); }

/* Las acciones de una orden: cada una es su propio formulario y se alinean como una fila de botones */
.wms-tablero__acciones { display: flex; flex-wrap: wrap; gap: var(--wms-e2); margin-top: var(--wms-e4); padding-top: var(--wms-e4); border-top: 1px solid var(--wms-filete); }
.wms-tablero__acciones form { display: inline; margin: 0; }

.wms-historial__flecha { margin: 0 6px; font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); }

/*
 * Texto que solo anuncia el lector de pantalla, para el encabezado de la columna de acciones.
 *
 * No se usa el `.sr-only` de Bootstrap dentro de una tabla: es absoluto, asi que su bloque
 * contenedor queda FUERA del `.table-responsive` y el `overflow` de este no lo recorta. Su caja se
 * queda donde la tabla la puso, a 750 px del borde, y la pagina entera gana una barra horizontal en
 * cuanto la pantalla es angosta. Esta version no se posiciona: ocupa un pixel dentro de la celda.
 */
.wms-oculto-visual {
    display: block;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* El requisito que falta para una accion del tablero, escrito debajo de los botones */
.wms-tablero__requisito { flex-basis: 100%; margin: 0; }

/*
 * La captura del empaque: los datos de la orden y el formulario del bulto comparten la misma
 * rejilla de campos. Las notas ocupan la fila entera.
 */
.wms-captura__campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0 var(--wms-e3);
}
.wms-captura__campo--ancho { grid-column: 1 / -1; }
.wms-captura__lapem { grid-column: 1 / -1; }
.wms-captura__lapem .wms-check { margin-bottom: var(--wms-e3); }

.wms-bultos__total::before { content: "\00b7"; margin: 0 var(--wms-e2); }
.wms-bultos__avisos { padding: var(--wms-e4) var(--wms-e4) 0; }
.wms-bultos__avisos .alert { margin-bottom: 0; }
.wms-bultos__formulario { padding: var(--wms-e4); border-top: 1px solid var(--wms-filete); }
.wms-bultos__titulo { margin: 0 0 var(--wms-e3); font-size: var(--wms-txt-md); font-weight: 600; color: var(--wms-tinta); }
.wms-bultos__acciones { display: flex; flex-wrap: wrap; gap: var(--wms-e2); }
.wms-bulto--editando td:first-child { box-shadow: inset 3px 0 0 var(--wms-tinta); }

/*
 * La evidencia fotografica: una cuadricula de miniaturas cuadradas, cuatro por fila en escritorio
 * y dos en el telefono, y al pie el selector de archivos con lo que cabe.
 */
.wms-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--wms-e3);
    margin: 0;
    padding: var(--wms-e4);
    list-style: none;
}
.wms-fotos__foto { min-width: 0; }
.wms-fotos__enlace {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-sm);
    background: var(--wms-gris-100);
}
.wms-fotos__enlace:focus-visible { outline: none; box-shadow: var(--wms-foco); }
.wms-fotos__enlace img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wms-fotos__pie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--wms-e1);
    margin-top: var(--wms-e1);
    font-size: var(--wms-txt-sm);
    color: var(--wms-tinta-suave);
}
.wms-fotos__autor { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wms-tinta); }
.wms-fotos__fecha { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wms-fotos__captura {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wms-e2) var(--wms-e3);
    padding: var(--wms-e4);
    border-top: 1px solid var(--wms-filete);
}
.wms-fotos__selector { margin: 0; cursor: pointer; }
.wms-fotos__selector.disabled { pointer-events: none; }
.wms-fotos__ayuda { margin: 0; }

/*
 * El visor de imagenes: la foto sobre un fondo oscuro que tapa toda la pantalla, con la barra de
 * arriba (que foto es, zoom, original, cerrar), las flechas a los lados y el contador abajo. Es
 * una ventana de Bootstrap por debajo, para heredar el fondo, Escape y el foco.
 */
.wms-visor .modal-dialog { max-width: none; width: 100%; height: 100%; margin: 0; }
.wms-visor .modal-content {
    position: relative;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    background: #0c0d10;
    color: var(--wms-gris-0);
    overflow: hidden;
}
.wms-visor__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wms-e3);
    padding: var(--wms-e3) var(--wms-e4);
    background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    position: relative;
    z-index: 2;
}
.wms-visor__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wms-visor__titulo { font-size: var(--wms-txt-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wms-visor__detalle { font-size: var(--wms-txt-xs); color: var(--wms-gris-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wms-visor__acciones { display: flex; align-items: center; gap: var(--wms-e1); flex-shrink: 0; }
.wms-visor__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wms-e2);
    min-width: 36px;
    height: 36px;
    padding: 0 var(--wms-e2);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--wms-r-sm);
    background: rgba(255, 255, 255, .08);
    color: var(--wms-gris-0);
    font-size: var(--wms-txt-sm);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.wms-visor__boton:hover, .wms-visor__boton:focus-visible { background: rgba(255, 255, 255, .18); color: var(--wms-gris-0); text-decoration: none; outline: none; }
.wms-visor__boton--texto { padding: 0 var(--wms-e3); }
.wms-visor__zoom { min-width: 3.5em; text-align: center; font-size: var(--wms-txt-xs); color: var(--wms-gris-300); font-variant-numeric: tabular-nums; }
.wms-visor__escena {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    cursor: zoom-in;
    user-select: none;
}
.wms-visor__imagen {
    max-width: calc(100% - 2 * var(--wms-e4));
    max-height: calc(100% - 120px);
    opacity: 0;
    transition: opacity .15s ease;
    transform-origin: center center;
    will-change: transform;
}
.wms-visor__imagen--lista { opacity: 1; }
.wms-visor__imagen--ampliada { cursor: grab; }
.wms-visor__cargando {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: var(--wms-gris-0);
    border-radius: 50%;
    animation: wms-gira .8s linear infinite;
}
.wms-visor__cargando[hidden] { display: none; }
.wms-visor__flecha {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: var(--wms-gris-0);
    font-size: 16px;
    cursor: pointer;
}
.wms-visor__flecha:hover, .wms-visor__flecha:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }
.wms-visor__flecha:disabled { opacity: .25; cursor: default; }
.wms-visor__flecha--anterior { left: var(--wms-e4); }
.wms-visor__flecha--siguiente { right: var(--wms-e4); }
.wms-visor__pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: var(--wms-e3);
    padding: var(--wms-e3) var(--wms-e4);
    font-size: var(--wms-txt-xs);
    color: var(--wms-gris-300);
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
    pointer-events: none;
}
@media (max-width: 767.98px) {
    .wms-visor__ayuda, .wms-visor__zoom, .wms-visor__boton--texto span { display: none; }
    .wms-visor__flecha { width: 40px; height: 40px; margin-top: -20px; }
}
.wms-fotos__progreso { flex-basis: 100%; height: 6px; margin: 0; }

/*
 * El reporte de tiempos: trece columnas en una tabla densa. Las celdas van mas apretadas que en
 * los listados y el cliente no se parte en renglones; la fase en curso se distingue de las cerradas.
 */
.wms-filtros__campo--casilla { display: flex; align-items: flex-end; padding-bottom: var(--wms-e2); }
.wms-filtros__campo--casilla .wms-check { margin-bottom: 0; }
.wms-filtros__botones { display: flex; flex-wrap: wrap; gap: var(--wms-e2); }

.wms-reporte th, .wms-reporte td { padding: var(--wms-e2) var(--wms-e3); }

/* El encabezado de grupo sobre las columnas de fase: un renglon sin fondo, centrado y con filete abajo. */
.wms-reporte__grupos td { border: 0; padding: 0; }
.wms-reporte__grupo {
    text-align: center;
    padding-bottom: var(--wms-e1);
    border-bottom: 1px solid var(--wms-filete);
    color: var(--wms-tinta-media);
}
.wms-reporte__nota {
    margin: 0;
    padding: var(--wms-e2) var(--wms-e4);
    border-top: 1px solid var(--wms-filete);
    font-size: var(--wms-txt-xs);
    color: var(--wms-tinta-suave);
}
.wms-reporte__cliente { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wms-reporte__abierta { color: var(--wms-tinta-media); font-style: italic; }
.wms-reporte__marca,
.wms-linea__en-curso { display: inline-block; margin-left: 4px; font-size: var(--wms-txt-xs); font-style: italic; color: var(--wms-tinta-suave); }

/* --------------------------------------------------------------------------
   Panel de pruebas, solo en el entorno local
   -------------------------------------------------------------------------- */

/*
 * Se distingue del resto de la pantalla a proposito: es una herramienta de desarrollo dentro de una
 * pantalla de operacion, y quien la mire tiene que ver de un vistazo que no es parte del sistema.
 * Las rayas son el recurso de siempre para decir "zona de trabajo, no de produccion".
 */
.wms-card--prueba {
    border-style: dashed;
    border-color: var(--wms-gris-300);
    background: repeating-linear-gradient(
        135deg,
        var(--wms-ambar-50),
        var(--wms-ambar-50) 12px,
        var(--wms-superficie) 12px,
        var(--wms-superficie) 24px
    );
}

/* La cabecera es el interruptor entero, no una flecha de 12px al final del renglon */
.wms-prueba__palanca {
    display: flex;
    align-items: center;
    gap: var(--wms-e3);
    width: 100%;
    padding: var(--wms-e3) var(--wms-e4);
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.wms-prueba__icono { font-size: 14px; color: var(--wms-tinta-suave); flex-shrink: 0; }
.wms-prueba__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.wms-prueba__titulo { font-size: var(--wms-txt-md); font-weight: 600; color: var(--wms-tinta); }
.wms-prueba__ayuda { font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); }

.wms-prueba__flecha {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--wms-tinta-suave);
    transition: transform var(--wms-normal) ease;
}
.wms-prueba__flecha--abierta { transform: rotate(180deg); }

.wms-prueba__cuerpo {
    padding: var(--wms-e4);
    border-top: 1px solid var(--wms-filete-suave);
}

.wms-prueba__pie { display: flex; flex-wrap: wrap; gap: var(--wms-e2); margin-top: var(--wms-e3); }

.wms-casos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--wms-e2);
}

/* El numero arriba, alineado con el titulo: la ayuda de abajo puede ocupar dos o tres renglones */
.wms-caso {
    display: flex;
    align-items: flex-start;
    gap: var(--wms-e3);
    padding: 10px 12px;
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-md);
    background: var(--wms-superficie);
    font-size: var(--wms-txt-sm);
    color: var(--wms-tinta-media);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--wms-veloz) ease, background-color var(--wms-veloz) ease;
}

.wms-caso:hover { border-color: var(--wms-accion); background: var(--wms-accion-tenue); color: var(--wms-tinta); }
.wms-caso:disabled { opacity: .5; cursor: default; }

.wms-caso__num {
    flex-shrink: 0;
    padding-top: 2px;
    font-family: var(--wms-fuente-dato);
    font-size: var(--wms-txt-xs);
    font-weight: 500;
    color: var(--wms-tinta-suave);
    font-variant-numeric: tabular-nums;
}

.wms-caso__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wms-caso__titulo { font-weight: 600; color: var(--wms-tinta); }
.wms-caso__espera { font-size: var(--wms-txt-xs); line-height: 1.4; color: var(--wms-tinta-suave); }
.wms-caso:hover .wms-caso__espera { color: var(--wms-tinta-media); }

/* --------------------------------------------------------------------------
   Listado que se actualiza sin recargar
   -------------------------------------------------------------------------- */

.wms-listado__resumen { display: flex; align-items: center; gap: var(--wms-e2); }

/*
 * Un cero no es un dato que mirar: se apaga para que resalten los renglones que si traen algo.
 * Se apaga, no se esconde: en gris-300 sobre blanco no llega al contraste minimo y "Sin surtir"
 * es informacion, no relleno.
 */
.wms-listado__cero { color: var(--wms-tinta-suave); }

/*
 * Mientras la consulta viaja, la tabla se atenua en vez de vaciarse.
 *
 * Vaciarla haria saltar la pagina entera a cada letra que se escribe en el buscador. Atenuarla
 * dice lo mismo (esto ya no es el resultado) sin mover nada de sitio.
 */
.wms-listado--actualizando {
    opacity: .45;
    transition: opacity var(--wms-veloz) ease;
    pointer-events: none;
}

/* La rueda del boton, suelta: aqui no cuelga de un `.btn` sino del resumen del listado */
.wms-listado__resumen .wms-girando {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--wms-gris-300);
    border-right-color: transparent;
    border-radius: 50%;
    animation: wms-gira 600ms linear infinite;
}

/* --------------------------------------------------------------------------
   Pie de paginacion
   -------------------------------------------------------------------------- */

.wms-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wms-e3);
}

.wms-paginacion__tamano {
    display: flex;
    align-items: center;
    gap: var(--wms-e2);
    flex: 0 0 auto;
}

.wms-paginacion__tamano label {
    margin: 0;
    font-size: var(--wms-txt-sm);
    color: var(--wms-tinta-suave);
    white-space: nowrap;
}

.wms-paginacion__tamano .form-control,
.wms-paginacion__tamano .ss-main { width: auto; min-width: 82px; }

/* Se centra en el hueco que dejan el selector y las paginas, no respecto de la tarjeta */
.wms-paginacion__cuenta {
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    font-size: var(--wms-txt-sm);
    color: var(--wms-tinta-suave);
}

.wms-paginacion__paginas { flex: 0 0 auto; }
.wms-paginacion__paginas .pagination { margin: 0; }

@media (max-width: 640px) {
    .wms-paginacion { justify-content: center; }
    .wms-paginacion__cuenta { flex-basis: 100%; order: 3; }
}

/* Numeros a la derecha y en cifras de ancho fijo, para poder compararlos */
.table td.wms-numero,
.table th.wms-numero {
    text-align: right;
    font-family: var(--wms-fuente-dato);
    font-variant-numeric: tabular-nums;
}

/*
 * Filas que la aplicacion marca por estado. Con filete a la izquierda ademas
 * del fondo: el color solo no basta para quien no lo distingue.
 */
body.white-content .table > tbody > tr.tr-success td { background-color: var(--wms-bien-tenue); }
body.white-content .table > tbody > tr.tr-success td:first-child { box-shadow: inset 3px 0 0 var(--wms-bien); }
body.white-content .table > tbody > tr.tr-danger td { background-color: var(--wms-peligro-tenue); }
body.white-content .table > tbody > tr.tr-danger td:first-child { box-shadow: inset 3px 0 0 var(--wms-peligro); }
body.white-content .table > tbody > tr.tr-closed td { background-color: var(--wms-superficie-suave); color: var(--wms-tinta-suave); }

/* Los botones de accion de un listado, iguales se escriban como se escriban */
.table .btn.btn-link,
.td-actions .btn,
.table .btn.btn-sm:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not([class*="btn-outline"]),
body.white-content .table .btn.btn-link,
body.white-content .td-actions .btn {
    width: var(--wms-boton-icono);
    height: var(--wms-boton-icono);
    padding: 0;
    background: var(--wms-superficie);
    background-image: none;
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-sm);
    color: var(--wms-tinta-suave);
    box-shadow: none;
}

.table .btn.btn-link:hover,
.td-actions .btn:hover,
.table .btn.btn-sm:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not([class*="btn-outline"]):hover {
    background: var(--wms-accion-tenue);
    border-color: var(--wms-accion-filete);
    color: var(--wms-accion-honda);
}

/* Paginacion */
.pagination { gap: 3px; margin: 0; }

.pagination .page-item .page-link,
body.white-content .pagination .page-item .page-link {
    min-width: var(--wms-boton-icono);
    height: var(--wms-boton-icono);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-sm);
    color: var(--wms-tinta-media);
    background: var(--wms-superficie);
    font-size: var(--wms-txt-sm);
    margin: 0;
}

.pagination .page-item .page-link:hover { background: var(--wms-gris-100); color: var(--wms-tinta); border-color: var(--wms-filete-fuerte); }

.pagination .page-item.active .page-link,
body.white-content .pagination .page-item.active .page-link {
    background: var(--wms-accion);
    border-color: var(--wms-accion);
    color: var(--wms-tinta-invertida);
    box-shadow: none;
}

.pagination .page-item.disabled .page-link { background: var(--wms-superficie-suave); color: var(--wms-tinta-tenue); }

/* ==========================================================================
   DISTINTIVOS DE ESTADO
   Color, forma y palabra. Nunca solo color: hay gente que no lo distingue.
   ========================================================================== */

.badge,
body.white-content .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 7px;
    font-family: var(--wms-fuente);
    font-size: var(--wms-txt-xs);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--wms-r-sm);
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge:before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: currentColor;
    flex-shrink: 0;
}

.badge.badge-primary,
body.white-content .badge.badge-primary {
    background-color: var(--wms-accion-tenue);
    border-color: var(--wms-accion-filete);
    color: var(--wms-accion-honda);
}

.badge.badge-success,
body.white-content .badge.badge-success {
    background-color: var(--wms-bien-tenue);
    border-color: var(--wms-bien-filete);
    color: var(--wms-bien-tinta);
}

.badge.badge-warning,
body.white-content .badge.badge-warning {
    background-color: var(--wms-atencion-tenue);
    border-color: var(--wms-atencion-filete);
    color: var(--wms-atencion-tinta);
}

.badge.badge-danger,
body.white-content .badge.badge-danger {
    background-color: var(--wms-peligro-tenue);
    border-color: var(--wms-peligro-filete);
    color: var(--wms-peligro-tinta);
}

.badge.badge-info,
body.white-content .badge.badge-info {
    background-color: var(--wms-turquesa-50);
    border-color: var(--wms-turquesa-200);
    color: var(--wms-turquesa-700);
}

.badge.badge-secondary,
.badge.badge-default,
body.white-content .badge.badge-secondary {
    background-color: var(--wms-superficie-hundida);
    border-color: var(--wms-filete);
    color: var(--wms-tinta-media);
}

/* ==========================================================================
   AVISOS, VENTANAS Y MENUS
   Aqui si hay sombra: son las unicas cosas que de verdad flotan.
   ========================================================================== */

/*
 * En bloque, no en fila. Con `display: flex` un aviso que lleva dentro un
 * parrafo y una lista convertia la lista en columnas y partia las palabras a la
 * mitad. El icono, cuando lo hay, se alinea sin volver flexible al aviso.
 */
.alert {
    display: block;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--wms-r-md);
    padding: 10px var(--wms-e4);
    font-size: var(--wms-txt-sm);
    box-shadow: none;
    margin-bottom: var(--wms-e4);
}

.alert p { max-width: var(--wms-texto-max); }

.alert.alert-success { background: var(--wms-bien-tenue); border-color: var(--wms-bien-filete); border-left-color: var(--wms-bien); color: var(--wms-bien-tinta); }
.alert.alert-danger  { background: var(--wms-peligro-tenue); border-color: var(--wms-peligro-filete); border-left-color: var(--wms-peligro); color: var(--wms-peligro-tinta); }
.alert.alert-warning { background: var(--wms-atencion-tenue); border-color: var(--wms-atencion-filete); border-left-color: var(--wms-atencion); color: var(--wms-atencion-tinta); }
.alert.alert-info    { background: var(--wms-accion-tenue); border-color: var(--wms-accion-filete); border-left-color: var(--wms-accion); color: var(--wms-accion-honda); }
.alert .alert-link { color: inherit; font-weight: 600; text-decoration: underline; }
.alert > i:first-child { margin-right: 6px; }
.alert p:last-child { margin-bottom: 0; }
.alert strong { display: block; margin-bottom: 4px; }

.modal-content {
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-lg);
    box-shadow: var(--wms-sombra-ventana);
}

/* La plantilla les quita el filete con un selector mas fuerte, y la ventana se
   queda sin separacion entre el titulo, el cuerpo y las acciones */
body .modal .modal-header,
body.white-content .modal .modal-header {
    border-bottom: 1px solid var(--wms-filete);
    padding: var(--wms-e4) var(--wms-e5);
}

body .modal .modal-body,
body.white-content .modal .modal-body { padding: var(--wms-e5); }

body .modal .modal-footer,
body.white-content .modal .modal-footer {
    border-top: 1px solid var(--wms-filete);
    padding: var(--wms-e3) var(--wms-e5);
    gap: var(--wms-e2);
}
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .4; }

/* Nada aparece de la nada: entra desde 0.98, nunca desde cero */
.modal.fade .modal-dialog { transform: scale(.98) translateY(-8px); transition: transform var(--wms-lento) var(--wms-salida); }
.modal.show .modal-dialog { transform: none; }

.dropdown-menu,
body.white-content .dropdown-menu {
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-md);
    box-shadow: var(--wms-sombra-flota);
    padding: 4px;
    font-size: var(--wms-txt-sm);
}

.dropdown-menu .dropdown-item {
    border-radius: var(--wms-r-sm);
    padding: 6px 10px;
    font-size: var(--wms-txt-sm);
    color: var(--wms-tinta-media);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background: var(--wms-gris-100); color: var(--wms-tinta); }

.dropdown-divider { border-top-color: var(--wms-filete-suave); }

.tooltip-inner {
    background: var(--wms-gris-900);
    /*
     * La plantilla pinta el globo blanco con texto #222a42. Aqui el fondo pasa a oscuro, asi que
     * sin este color el texto se queda en el de la plantilla y el globo sale en blanco: oscuro
     * sobre oscuro. Las dos mitades de la regla viajan juntas.
     */
    color: var(--wms-gris-0);
    border-radius: var(--wms-r-sm);
    font-size: var(--wms-txt-xs);
    padding: 5px 8px;
    max-width: 260px;
}

.tooltip .arrow:before { border-top-color: var(--wms-gris-900); border-bottom-color: var(--wms-gris-900); }

.nav-tabs { border-bottom: 1px solid var(--wms-filete); gap: 2px; }

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--wms-tinta-suave);
    font-size: var(--wms-txt-sm);
    font-weight: 500;
    padding: 8px 12px;
}

.nav-tabs .nav-link:hover { color: var(--wms-tinta); }

.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--wms-accion-honda);
    border-bottom-color: var(--wms-accion);
}

.progress { height: 6px; background: var(--wms-superficie-hundida); border-radius: 99px; box-shadow: none; }
.progress-bar { background-image: none; background-color: var(--wms-accion); border-radius: 99px; }

/* ==========================================================================
   FICHAS HEREDADAS
   Las 42 pantallas de detalle anteriores al sistema de diseno escriben cada dato como un
   `h5 > strong` con la etiqueta y un `p.fs--1` con el valor, coloreado de azul o verde como si
   fuera un enlace. Aqui se leen como la ficha del empaque (`dl.wms-ficha`): etiqueta pequena en
   gris, valor en tinta, y los folios en la fuente de datos. Sin tocar 42 archivos.
   ========================================================================== */

.card-body h5.fs-0 {
    margin: 0 0 3px;
    font-size: var(--wms-txt-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wms-tinta-suave);
}
.card-body h5.fs-0 strong { font-weight: 600; }

.card-body p.fs--1,
.card-body p.fs--1.text-info,
.card-body p.fs--1.text-success,
.card-body p.fs--1.text-primary,
.card-body p.fs--1 .text-primary,
.card-body p.fs--1 .text-info {
    margin-bottom: var(--wms-e4);
    font-size: var(--wms-txt-md);
    line-height: 1.4;
    color: var(--wms-tinta) !important;
}
.card-body p.fs--1 strong { font-weight: 500; color: var(--wms-tinta-suave); }

/* El dato principal de una ficha (folio, almacen, nombre): grande y con cifras tabulares. Ya no va en
   monoespaciada porque el mismo estilo se usa para nombres de personas y de productos */
.card-body p.h2.fs--1 {
    font-family: var(--wms-fuente);
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.card-body hr { border-top-color: var(--wms-filete); margin: var(--wms-e4) 0; }

/* El boton de regreso de las fichas heredadas se lee como accion secundaria, igual que en el empaque */
.card-header a.btn.btn-primary.btn-sm:not(.wms-boton-alta) {
    background: var(--wms-superficie);
    border-color: var(--wms-filete);
    color: var(--wms-tinta);
}
.card-header a.btn.btn-primary.btn-sm:not(.wms-boton-alta):hover { background: var(--wms-superficie-suave); border-color: var(--wms-filete-fuerte); }

/* El renglon que el script pone en una tabla sin filas */
.table td.wms-tabla__vacia { padding: var(--wms-e5) var(--wms-e4); text-align: center; color: var(--wms-tinta-suave); font-size: var(--wms-txt-sm); }

/* Las cuentas en las pestanas no son alarmas */
.nav-tabs .nav-link .badge,
.nav-tabs .nav-link .badge-danger {
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--wms-gris-100);
    color: var(--wms-tinta-media);
    font-family: var(--wms-fuente-dato);
    font-size: 11px;
    font-weight: 600;
}
.nav-tabs .nav-link.active .badge { background: var(--wms-azul-100); color: var(--wms-accion-honda); }

/* ==========================================================================
   UTILIDADES DE COLOR
   La plantilla definia `text-primary` como magenta. Se realinean al sistema.
   ========================================================================== */

.text-primary, body.white-content .text-primary { color: var(--wms-accion-viva) !important; }
.text-info,    body.white-content .text-info    { color: var(--wms-accion-viva) !important; }
.text-success, body.white-content .text-success { color: var(--wms-bien-tinta) !important; }
.text-danger,  body.white-content .text-danger  { color: var(--wms-peligro-tinta) !important; }
.text-warning, body.white-content .text-warning { color: var(--wms-atencion-tinta) !important; }
.text-muted,   body.white-content .text-muted   { color: var(--wms-tinta-suave) !important; }
.text-dark,    body.white-content .text-dark    { color: var(--wms-tinta) !important; }
.text-secondary { color: var(--wms-tinta-suave) !important; }

.bg-primary { background-color: var(--wms-accion) !important; }
.bg-success { background-color: var(--wms-bien) !important; }
.bg-danger  { background-color: var(--wms-peligro) !important; }
.bg-warning { background-color: var(--wms-atencion) !important; }
.bg-info    { background-color: var(--wms-azul-600) !important; }
.bg-light   { background-color: var(--wms-superficie-suave) !important; }
.bg-dark    { background-color: var(--wms-gris-900) !important; }

.table thead.text-primary th,
.table thead.text-info th { color: var(--wms-tinta-suave) !important; }

.wms-cuenta { text-align: center; }
.wms-cuenta__iniciales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--wms-e3);
    border-radius: var(--wms-r-lg);
    background: var(--wms-azul-100);
    color: var(--wms-accion-honda);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .02em;
}
.wms-cuenta__nombre { margin: 0 0 var(--wms-e4); font-size: var(--wms-txt-lg); font-weight: 600; color: var(--wms-tinta); }
.wms-ficha--columna { grid-template-columns: 1fr; text-align: left; }

/* La marca roja de "estas aqui" en una entrada de primer nivel: pegada al borde, sin salirse */
.sidebar .sidebar-wrapper > .nav > li.active > a:before { left: 0 !important; }

/* ==========================================================================
   MENU PLEGADO
   Una columna de iconos de 72 px. La clase va en <html>, la pone un script en la
   cabecera antes de pintar, y se recuerda en el navegador.
   ========================================================================== */

html.wms-menu-plegado { --wms-menu-ancho: 72px; }

.sidebar,
body.white-content .sidebar,
.main-panel,
body.white-content .main-panel { transition: width var(--wms-lento) var(--wms-salida); }

html.wms-menu-plegado .sidebar .wms-marca { justify-content: center; padding-left: 0; padding-right: 0; }
html.wms-menu-plegado .sidebar .wms-marca__texto,
html.wms-menu-plegado .sidebar .nav p,
html.wms-menu-plegado .sidebar .nav .nav-link-text,
html.wms-menu-plegado .sidebar .nav .caret,
html.wms-menu-plegado .sidebar .nav .collapse { display: none !important; }

html.wms-menu-plegado .sidebar .sidebar-wrapper { padding-left: var(--wms-e2); padding-right: var(--wms-e2); }
html.wms-menu-plegado .sidebar .nav li > a,
html.wms-menu-plegado body.white-content .sidebar .nav li > a {
    justify-content: center;
    padding: 11px 0;
    margin: 2px 0;
}
html.wms-menu-plegado .sidebar .nav i,
html.wms-menu-plegado .sidebar .nav [class^="fa-"],
html.wms-menu-plegado .sidebar .nav [class*=" fa-"] { width: auto; font-size: 16px; }
html.wms-menu-plegado .sidebar .nav > li > a[data-toggle="collapse"] i { opacity: .6; }
html.wms-menu-plegado .sidebar .nav li.active > a:before { left: -4px !important; }

/* Con el menu plegado, el grupo que contiene la pantalla actual se marca el mismo */
html.wms-menu-plegado .sidebar .nav > li > a[aria-expanded="true"] { background-color: rgba(255, 255, 255, .07); }
html.wms-menu-plegado .sidebar .nav > li > a[aria-expanded="true"] i { opacity: 1; color: #fff; }

.wms-barra__plegar {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: var(--wms-e3);
    border: 1px solid transparent;
    border-radius: var(--wms-r-md);
    background: none;
    color: var(--wms-tinta-media);
    font-size: 15px;
    transition: background-color var(--wms-veloz) ease, border-color var(--wms-veloz) ease;
}
.wms-barra__plegar:hover { background: var(--wms-superficie-suave); border-color: var(--wms-filete); color: var(--wms-tinta); }
.wms-barra__plegar:focus-visible { outline: none; box-shadow: var(--wms-foco); }

@media (min-width: 992px) {
    .wms-barra__plegar { display: inline-flex; }
}

/* ==========================================================================
   BARRA SUPERIOR: BUSQUEDA GLOBAL
   ========================================================================== */

.main-panel .navbar .navbar-wrapper { display: flex; align-items: center; min-width: 0; }

.wms-busqueda {
    position: relative;
    flex: 0 1 380px;
    min-width: 0;
    margin: 0 var(--wms-e5);
}

.wms-busqueda__icono {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--wms-tinta-tenue);
    pointer-events: none;
}

.wms-busqueda__campo {
    width: 100%;
    height: 34px;
    padding: 0 36px 0 34px;
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-md);
    background: var(--wms-superficie-suave);
    color: var(--wms-tinta);
    font: inherit;
    font-size: var(--wms-txt-sm);
    transition: border-color var(--wms-veloz) ease, background-color var(--wms-veloz) ease, box-shadow var(--wms-veloz) ease;
}
.wms-busqueda__campo::placeholder { color: var(--wms-tinta-tenue); }
.wms-busqueda__campo:focus { outline: none; background: var(--wms-superficie); border-color: var(--wms-azul-400); box-shadow: 0 0 0 3px var(--wms-azul-100); }
.wms-busqueda__campo::-webkit-search-cancel-button { -webkit-appearance: none; }

.wms-busqueda__atajo {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6px;
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-sm);
    background: var(--wms-superficie);
    font-family: var(--wms-fuente-dato);
    font-size: 11px;
    line-height: 18px;
    color: var(--wms-tinta-tenue);
    pointer-events: none;
}
.wms-busqueda__campo:focus ~ .wms-busqueda__atajo { display: none; }

.wms-busqueda__resultados {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 420px;
    overflow-y: auto;
    padding: var(--wms-e1);
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-lg);
    background: var(--wms-superficie);
    box-shadow: var(--wms-sombra-ventana);
}

.wms-busqueda__grupo {
    padding: var(--wms-e2) var(--wms-e3) var(--wms-e1);
    font-size: var(--wms-txt-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wms-tinta-suave);
}

.wms-busqueda__opcion {
    display: grid;
    grid-template-columns: 18px auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--wms-e2);
    padding: 7px var(--wms-e3);
    border-radius: var(--wms-r-md);
    color: var(--wms-tinta);
    font-size: var(--wms-txt-sm);
    text-decoration: none;
}
.wms-busqueda__opcion i { font-size: 12px; color: var(--wms-tinta-tenue); text-align: center; }
.wms-busqueda__titulo { font-family: var(--wms-fuente-dato); font-weight: 500; white-space: nowrap; }
.wms-busqueda__detalle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wms-tinta-suave); }
.wms-busqueda__opcion:hover,
.wms-busqueda__opcion--activa { background: var(--wms-azul-50); color: var(--wms-tinta); text-decoration: none; }
.wms-busqueda__opcion:hover i,
.wms-busqueda__opcion--activa i { color: var(--wms-accion); }
.wms-busqueda__vacio { margin: 0; padding: var(--wms-e3); font-size: var(--wms-txt-sm); color: var(--wms-tinta-suave); }

@media (max-width: 991px) {
    .wms-busqueda { display: none; }
}

/* ==========================================================================
   BARRA SUPERIOR: CAMPANA
   ========================================================================== */

.wms-campana { margin-right: var(--wms-e2); }

.wms-campana__boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: var(--wms-r-md);
    background: none;
    color: var(--wms-tinta-media);
    font-size: 16px;
    transition: background-color var(--wms-veloz) ease, border-color var(--wms-veloz) ease;
}
.wms-campana__boton:hover { background: var(--wms-superficie-suave); border-color: var(--wms-filete); color: var(--wms-tinta); }
.wms-campana__boton:focus-visible { outline: none; box-shadow: var(--wms-foco); }
.wms-campana__boton::after { display: none; }

.wms-campana__cuenta {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--wms-rojo-500);
    color: #fff;
    font-family: var(--wms-fuente-dato);
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}

.wms-campana__panel { width: 360px; max-width: calc(100vw - 32px); padding: 0; }
.wms-campana__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wms-e3) var(--wms-e4);
    border-bottom: 1px solid var(--wms-filete);
}
.wms-campana__titulo { font-size: var(--wms-txt-md); font-weight: 600; color: var(--wms-tinta); }
.wms-campana__todo { border: 0; background: none; padding: 0; font-size: var(--wms-txt-xs); color: var(--wms-accion); }
.wms-campana__todo:hover { text-decoration: underline; }
.wms-campana__lista { max-height: 400px; overflow-y: auto; }
.wms-campana__vacio { margin: 0; padding: var(--wms-e5) var(--wms-e4); text-align: center; font-size: var(--wms-txt-sm); color: var(--wms-tinta-suave); }

.wms-campana__aviso {
    display: flex;
    gap: var(--wms-e3);
    padding: var(--wms-e3) var(--wms-e4);
    border-bottom: 1px solid var(--wms-filete-suave);
    color: var(--wms-tinta);
    text-decoration: none;
}
.wms-campana__aviso:last-child { border-bottom: 0; }
.wms-campana__aviso:hover { background: var(--wms-azul-50); text-decoration: none; color: var(--wms-tinta); }
.wms-campana__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--wms-r-md);
    background: var(--wms-azul-100);
    color: var(--wms-accion-honda);
    font-size: 13px;
}
.wms-campana__cuerpo { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.wms-campana__aviso-titulo { font-size: var(--wms-txt-sm); font-weight: 600; }
.wms-campana__aviso-texto { font-size: var(--wms-txt-sm); color: var(--wms-tinta-media); }
.wms-campana__cuando { font-size: var(--wms-txt-xs); color: var(--wms-tinta-tenue); }

/* ==========================================================================
   AVISOS FLOTANTES
   Arriba a la derecha, debajo de la barra. Entran desde la derecha y se van solos.
   ========================================================================== */

.wms-avisos {
    position: fixed;
    top: calc(var(--wms-barra-alto) + var(--wms-e3));
    right: var(--wms-e4);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--wms-e2);
    width: 360px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.wms-aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--wms-e3);
    padding: var(--wms-e3) var(--wms-e3) var(--wms-e3) var(--wms-e4);
    border: 1px solid var(--wms-filete);
    border-left-width: 3px;
    border-radius: var(--wms-r-lg);
    background: var(--wms-superficie);
    box-shadow: var(--wms-sombra-ventana);
    color: var(--wms-tinta);
    font-size: var(--wms-txt-sm);
    line-height: 1.45;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity var(--wms-lento) var(--wms-salida), transform var(--wms-lento) var(--wms-salida);
}
.wms-aviso--visible { opacity: 1; transform: none; }
.wms-aviso--saliendo { opacity: 0; transform: translateX(16px); }
.wms-aviso__icono { flex-shrink: 0; margin-top: 2px; font-size: 14px; }
.wms-aviso__texto { flex: 1 1 auto; min-width: 0; }
.wms-aviso__cerrar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: -2px -2px 0 0;
    border: 0;
    border-radius: var(--wms-r-sm);
    background: none;
    color: var(--wms-tinta-tenue);
    font-size: 12px;
}
.wms-aviso__cerrar:hover { background: var(--wms-superficie-suave); color: var(--wms-tinta); }
.wms-aviso--exito { border-left-color: var(--wms-bien); }
.wms-aviso--exito .wms-aviso__icono { color: var(--wms-bien); }
.wms-aviso--error { border-left-color: var(--wms-peligro); }
.wms-aviso--error .wms-aviso__icono { color: var(--wms-peligro); }
.wms-aviso--aviso { border-left-color: var(--wms-atencion); }
.wms-aviso--aviso .wms-aviso__icono { color: var(--wms-atencion); }
.wms-aviso--info { border-left-color: var(--wms-accion); }
.wms-aviso--info .wms-aviso__icono { color: var(--wms-accion); }

@media (prefers-reduced-motion: reduce) {
    .wms-aviso, .sidebar, .main-panel { transition: none; }
}

/* ==========================================================================
   PANTALLA DE ACCESO
   ========================================================================== */

/*
 * Dos mitades. La marca va sobre el azul del logotipo, plano, con una reticula fina encima como
 * la de un plano de almacen: es lo unico que se mueve del blanco y no hace falta mas. El
 * formulario va en su mitad con el mismo aire que cualquier otra pantalla del sistema.
 */
.wms-acceso {
    display: flex;
    min-height: 100vh;
    margin: 0;
    background: var(--wms-superficie);
    color: var(--wms-tinta);
}

.wms-acceso__marca {
    display: none;
    position: relative;
    flex: 0 0 48%;
    overflow: hidden;
    background-color: var(--wms-azul-600);
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 72px 72px;
    color: var(--wms-gris-0);
}

.wms-acceso__marca-contenido {
    position: relative;
    max-width: 480px;
    padding: var(--wms-e8) 64px;
}

.wms-acceso__logo {
    display: inline-block;
    padding: var(--wms-e3) var(--wms-e4);
    margin-bottom: var(--wms-e6);
    background: var(--wms-gris-0);
    border-radius: var(--wms-r-lg);
}
.wms-acceso__logo img { display: block; height: auto; }

.wms-acceso__titulo {
    margin: 0 0 var(--wms-e3);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--wms-gris-0);
}

.wms-acceso__lema {
    margin: 0 0 var(--wms-e6);
    font-size: var(--wms-txt-lg);
    line-height: 1.5;
    color: var(--wms-azul-100);
}

.wms-acceso__lista { margin: 0; padding: 0; list-style: none; }
.wms-acceso__lista li {
    display: flex;
    align-items: center;
    gap: var(--wms-e3);
    margin-bottom: var(--wms-e3);
    font-size: var(--wms-txt-md);
    color: var(--wms-azul-50);
}
.wms-acceso__lista i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--wms-r-md);
    background: var(--wms-azul-700);
    font-size: 12px;
}

.wms-acceso__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    padding: var(--wms-e8) var(--wms-e4);
}

.wms-acceso__logo-movil { text-align: center; margin-bottom: var(--wms-e6); }
.wms-acceso__logo-movil img { height: auto; }

.wms-acceso__formulario { width: 100%; max-width: 400px; margin: 0 auto; }

.wms-acceso__encabezado { margin: 0 0 var(--wms-e1); font-size: 24px; font-weight: 600; color: var(--wms-tinta); }
.wms-acceso__ayuda { margin: 0 0 var(--wms-e6); font-size: var(--wms-txt-md); color: var(--wms-tinta-suave); }

.wms-acceso .form-group { margin-bottom: var(--wms-e4); }
.wms-acceso .form-control { height: 44px; font-size: var(--wms-txt-md); }

.wms-acceso__clave { position: relative; }
.wms-acceso__clave .form-control { padding-right: 44px; }
.wms-acceso__ojo {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--wms-tinta-suave);
    cursor: pointer;
}
.wms-acceso__ojo:hover { color: var(--wms-tinta); }
.wms-acceso__ojo:focus-visible { outline: none; box-shadow: var(--wms-foco); border-radius: var(--wms-r-sm); }

.wms-acceso__opciones { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--wms-e5); }
.wms-acceso__opciones .wms-check { margin: 0; }

.wms-acceso .btn-lg { height: 46px; font-size: var(--wms-txt-md); }
.wms-acceso__enlace { font-size: var(--wms-txt-sm); font-weight: 500; color: var(--wms-accion); }
.wms-acceso__enlace:hover { color: var(--wms-accion-honda); text-decoration: underline; }
.wms-acceso__volver { margin: var(--wms-e5) 0 0; font-size: var(--wms-txt-sm); }
.wms-acceso__volver a { color: var(--wms-tinta-media); }
.wms-acceso__volver a:hover { color: var(--wms-tinta); }
.wms-acceso .alert { margin-bottom: var(--wms-e4); }

.wms-acceso__pie {
    max-width: 400px;
    margin: var(--wms-e8) auto 0;
    text-align: center;
    font-size: var(--wms-txt-xs);
    color: var(--wms-tinta-tenue);
}

@media (min-width: 992px) {
    .wms-acceso__marca { display: flex; align-items: center; }
    .wms-acceso__logo-movil { display: none; }
    .wms-acceso__panel { padding: var(--wms-e8) 64px; }
}

/* ==========================================================================
   PANTALLAS ANGOSTAS
   ========================================================================== */

@media (max-width: 991px) {
    .main-panel,
    body.white-content .main-panel { width: 100%; }
    .main-panel > .content { padding-left: var(--wms-e4); padding-right: var(--wms-e4); }
    .main-panel .navbar,
    body.white-content .main-panel > .navbar { padding: 0 var(--wms-e4); }
    .table > thead > tr > th,
    .table > tbody > tr > td { padding-left: var(--wms-e3); padding-right: var(--wms-e3); }
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   COMPONENTES PROPIOS
   Cada uno tiene su pieza en resources/views/components/ui/. Si una pantalla
   necesita algo que no esta aqui, se agrega el componente; no se escribe suelto
   en la vista.
   ========================================================================== */

/* --- Encabezado de pantalla: <x-ui.page> ------------------------------- */

.wms-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wms-e4);
    flex-wrap: wrap;
    margin-bottom: var(--wms-e5);
}

.wms-page-header__ayuda {
    color: var(--wms-tinta-suave);
    font-size: var(--wms-txt-sm);
    margin: 3px 0 0;
    max-width: var(--wms-texto-max);
}

.wms-page-header__acciones {
    display: flex;
    flex-wrap: wrap;   /* tres botones no caben en un telefono: bajan de renglon, no empujan la pagina */
    align-items: center;
    gap: var(--wms-e2);
    flex-shrink: 0;
    max-width: 100%;
}

/* --- Tarjeta: <x-ui.card> ---------------------------------------------- */

.wms-card__acciones {
    display: flex;
    align-items: center;
    gap: var(--wms-e2);
    flex-shrink: 0;
}

/*
 * Una tarjeta puede llevar tono cuando lo que contiene es una condicion del
 * almacen, no decoracion. Solo cambia el filete: el fondo se queda blanco para
 * que la tabla de dentro siga siendo legible.
 */
body .card.wms-card--peligro,
body.white-content .card.wms-card--peligro { border-color: var(--wms-peligro-filete); }
body .card.wms-card--peligro > .card-header { border-bottom-color: var(--wms-peligro-filete); }
body .card.wms-card--peligro > .card-header .card-title { color: var(--wms-peligro-tinta); }
body .card.wms-card--atencion,
body.white-content .card.wms-card--atencion { border-color: var(--wms-atencion-filete); }
body .card.wms-card--atencion > .card-header { border-bottom-color: var(--wms-atencion-filete); }

/* --- Indicador: <x-ui.metric> ------------------------------------------ */

/*
 * A proposito NO es la tarjeta de icono redondo con titulo y dos renglones que
 * traen todas las plantillas. Aqui manda la cifra: es lo que se lee de lejos.
 * El color vive en una barra de 3px arriba, no en un circulo de fondo.
 */
.wms-metric {
    display: block;
    position: relative;
    height: 100%;
    padding: var(--wms-e4) var(--wms-e4) var(--wms-e3);
    background: var(--wms-superficie);
    border: 1px solid var(--wms-filete);
    border-top: 3px solid var(--wms-filete-fuerte);
    border-radius: var(--wms-r-lg);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--wms-veloz) ease, background-color var(--wms-veloz) ease;
}

a.wms-metric:hover {
    background: var(--wms-superficie-suave);
    color: inherit;
}

.wms-metric--accion,
.wms-metric--primary  { border-top-color: var(--wms-accion); }
.wms-metric--info     { border-top-color: var(--wms-turquesa-500); }
.wms-metric--bien     { border-top-color: var(--wms-bien); }
.wms-metric--atencion,
.wms-metric--warning  { border-top-color: var(--wms-atencion); }
.wms-metric--peligro,
.wms-metric--danger   { border-top-color: var(--wms-peligro); }

.wms-metric__valor {
    display: block;
    font-size: var(--wms-txt-2xl);
    font-weight: 600;
    line-height: 1.1;
    color: var(--wms-tinta);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.wms-metric__etiqueta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--wms-e2);
    font-size: var(--wms-txt-sm);
    font-weight: 500;
    color: var(--wms-tinta-media);
}

.wms-metric__etiqueta i { font-size: 11px; color: var(--wms-tinta-tenue); }
.wms-metric--peligro .wms-metric__etiqueta i,
.wms-metric--danger .wms-metric__etiqueta i { color: var(--wms-peligro); }

.wms-metric__ayuda {
    display: block;
    margin-top: 2px;
    font-size: var(--wms-txt-xs);
    color: var(--wms-tinta-suave);
}

/* --- Vacio: <x-ui.empty> ----------------------------------------------- */

.wms-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wms-e10) var(--wms-e5);
    text-align: center;
}

.wms-empty__icono { font-size: 22px; color: var(--wms-gris-300); margin-bottom: var(--wms-e3); }
.wms-empty__titulo { margin: 0; font-size: var(--wms-txt-md); font-weight: 500; color: var(--wms-tinta-media); }
.wms-empty__texto { margin: 4px 0 0; font-size: var(--wms-txt-sm); color: var(--wms-tinta-suave); max-width: 46ch; }

/* --- Campo: <x-ui.field> ----------------------------------------------- */

.wms-requerido { color: var(--wms-peligro); margin-left: 2px; }
.wms-ayuda { display: block; margin-top: 4px; font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); }

/* --- Barra de filtros: components/searchBar ---------------------------- */

/*
 * La alineacion de la fila de filtros es estructural, no incidental: cada
 * columna es a su vez una columna flexible que empuja su control al fondo. Asi
 * da igual que una etiqueta ocupe dos renglones o que el control sea un
 * desplegable con buscador; todos los controles terminan en la misma linea.
 */
.wms-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--wms-e3);
}

.wms-filtros__campo,
.wms-filtros__acciones {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

.wms-filtros__campo { flex: 1 1 150px; }
.wms-filtros__acciones { flex: 0 0 auto; margin-left: auto; }
.wms-filtros__campo label { margin-bottom: 5px; }

/* Y el control siempre mide lo mismo, sea cual sea */
.wms-filtros__campo > .form-control,
.wms-filtros__campo > .input-group,
.wms-filtros__campo > .ss-main,
.wms-filtros__acciones > .btn { height: var(--wms-control-alto); flex: 0 0 auto; }

/*
 * Un control que Livewire no debe repintar va envuelto en `wire:ignore`, y ese envoltorio se
 * interpone entre el campo y su control. Sin estas dos reglas el control se sale de la linea:
 * deja de heredar la altura del sistema y la fila de filtros pierde su alineacion al fondo.
 */
.wms-filtros__campo > [wire\:ignore] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

.wms-filtros__campo > [wire\:ignore] > .form-control,
.wms-filtros__campo > [wire\:ignore] > .input-group,
.wms-filtros__campo > [wire\:ignore] > .ss-main { height: var(--wms-control-alto); flex: 0 0 auto; }

/* La caja de texto libre pide mas sitio que un desplegable de opciones cerradas */
.wms-filtros__campo--ancho { flex: 2 1 240px; }


/* --- Rejilla de indicadores -------------------------------------------- */

.wms-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--wms-e4);
    margin-bottom: var(--wms-e5);
}

/* --- Panel de estado del tunel: <x-ui.status> --------------------------- */

/*
 * Las dos pantallas del tunel se leen desde el pasillo, no desde la silla. Por
 * eso aqui la tipografia sube de escala. Sigue siendo el mismo sistema: los
 * mismos colores, el mismo filete y el mismo lenguaje, en tamano de kiosco.
 */
.wms-estado {
    display: flex;
    align-items: center;
    gap: var(--wms-e5);
    padding: var(--wms-e6);
    background: var(--wms-superficie);
    border: 1px solid var(--wms-filete);
    border-left: 4px solid var(--wms-filete-fuerte);
    border-radius: var(--wms-r-lg);
    margin-bottom: var(--wms-e5);
}

.wms-estado__icono { font-size: 34px; flex-shrink: 0; color: var(--wms-tinta-tenue); }
.wms-estado__texto { flex: 1 1 auto; min-width: 0; }

.wms-estado__titulo {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--wms-tinta);
}

.wms-estado__mensaje { margin: 5px 0 0; font-size: var(--wms-txt-lg); color: var(--wms-tinta-media); }

.wms-estado__etiqueta {
    display: inline-flex;
    align-items: center;
    margin-top: var(--wms-e3);
    padding: 4px 10px;
    border-radius: var(--wms-r-sm);
    font-size: var(--wms-txt-sm);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: var(--wms-superficie-hundida);
    color: var(--wms-tinta-media);
}

.wms-estado__acciones { display: flex; align-items: center; gap: var(--wms-e2); flex-shrink: 0; }

.wms-estado--espera { border-left-color: var(--wms-atencion); }
.wms-estado--espera .wms-estado__icono { color: var(--wms-atencion); }
.wms-estado--espera .wms-estado__etiqueta { background: var(--wms-atencion-tenue); color: var(--wms-atencion-tinta); }

.wms-estado--bien { border-left-color: var(--wms-bien); }
.wms-estado--bien .wms-estado__icono { color: var(--wms-bien); }
.wms-estado--bien .wms-estado__etiqueta { background: var(--wms-bien-tenue); color: var(--wms-bien-tinta); }

.wms-estado--peligro { border-left-color: var(--wms-peligro); }
.wms-estado--peligro .wms-estado__icono { color: var(--wms-peligro); }
.wms-estado--peligro .wms-estado__etiqueta { background: var(--wms-peligro-tenue); color: var(--wms-peligro-tinta); }
.wms-estado--peligro .wms-estado__titulo { color: var(--wms-peligro-tinta); }

/* Una pantalla de kiosco no tiene menu: el contenido se centra y respira */
.wms-kiosco {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--wms-e5) var(--wms-e5) var(--wms-e10);
}

/* En el tunel la tabla tambien se lee de lejos */
.wms-kiosco .table > tbody > tr > td { height: 44px; font-size: var(--wms-txt-md); }
.wms-kiosco .table > thead > tr > th { font-size: var(--wms-txt-sm); }

[v-cloak] { display: none; }

/* Un contador junto al titulo de una tarjeta: cuantos hay de lo que se lista */
.wms-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    background: var(--wms-superficie-hundida);
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-sm);
    font-family: var(--wms-fuente-dato);
    font-size: var(--wms-txt-xs);
    font-weight: 500;
    color: var(--wms-tinta-media);
    font-variant-numeric: tabular-nums;
}

/* --- Fila con estado ---------------------------------------------------- */

/*
 * Tres listados de bitacora pintaban CADA celda con el color solido del estado y
 * ponian el texto en blanco encima. Se leia mal y repetia la informacion, porque
 * en la misma fila ya iba el distintivo. Aqui el estado es un filete a la
 * izquierda y un fondo apenas tenido: la fila sigue siendo legible.
 */
.wms-fila > td:first-child { box-shadow: inset 3px 0 0 var(--wms-filete-fuerte); }

.wms-fila--success > td { background-color: var(--wms-bien-tenue); }
.wms-fila--success > td:first-child { box-shadow: inset 3px 0 0 var(--wms-bien); }

.wms-fila--danger > td { background-color: var(--wms-peligro-tenue); }
.wms-fila--danger > td:first-child { box-shadow: inset 3px 0 0 var(--wms-peligro); }

.wms-fila--warning > td { background-color: var(--wms-atencion-tenue); }
.wms-fila--warning > td:first-child { box-shadow: inset 3px 0 0 var(--wms-atencion); }

.wms-fila--info > td,
.wms-fila--primary > td { background-color: var(--wms-accion-tenue); }
.wms-fila--info > td:first-child,
.wms-fila--primary > td:first-child { box-shadow: inset 3px 0 0 var(--wms-accion); }

.wms-fila--secondary > td:first-child { box-shadow: inset 3px 0 0 var(--wms-gris-400); }

/* --- Encabezado de pantalla, seccion y resumen -------------------------- */

.wms-page-header__seccion {
    margin: 0 0 2px;
    font-size: var(--wms-txt-xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--wms-tinta-tenue);
}

.wms-page-header__resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wms-e2);
    margin-top: var(--wms-e3);
}

/*
 * Los distintivos del resumen son enlaces: filtran el listado. Se ven como
 * distintivo de estado porque eso es lo que cuentan.
 */
.wms-resumen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    background: var(--wms-superficie);
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-md);
    font-size: var(--wms-txt-sm);
    color: var(--wms-tinta-media);
    text-decoration: none;
    transition: border-color var(--wms-veloz) ease, background-color var(--wms-veloz) ease;
}

a.wms-resumen:hover { background: var(--wms-superficie-suave); border-color: var(--wms-filete-fuerte); color: var(--wms-tinta); }
a.wms-resumen.is-activo { border-color: var(--wms-accion); background: var(--wms-accion-tenue); color: var(--wms-accion-honda); }

.wms-resumen__punto { width: 6px; height: 6px; border-radius: 1px; background: var(--wms-gris-400); flex-shrink: 0; }
.wms-resumen--bien .wms-resumen__punto { background: var(--wms-bien); }
.wms-resumen--atencion .wms-resumen__punto { background: var(--wms-atencion); }
.wms-resumen--peligro .wms-resumen__punto { background: var(--wms-peligro); }
.wms-resumen--accion .wms-resumen__punto { background: var(--wms-accion); }
.wms-resumen--curso .wms-resumen__punto { background: var(--wms-turquesa-500); }

.wms-resumen__cifra {
    font-family: var(--wms-fuente-dato);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wms-tinta);
}

/* --- Barra superior: ruta y sesion -------------------------------------- */

.wms-ruta { display: flex; align-items: center; gap: 6px; font-size: var(--wms-txt-sm); }
.wms-ruta__paso { color: var(--wms-tinta-suave); }
.wms-ruta__paso--actual { color: var(--wms-tinta); font-weight: 500; }
.wms-ruta__sep { color: var(--wms-tinta-tenue); }

.wms-sesion { display: flex; align-items: center; margin-left: auto; }

.wms-sesion__boton {
    display: flex;
    align-items: center;
    gap: var(--wms-e2);
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: var(--wms-r-md);
    color: var(--wms-tinta-media);
    transition: background-color var(--wms-veloz) ease, border-color var(--wms-veloz) ease;
}

.wms-sesion__boton:hover { background: var(--wms-superficie-suave); border-color: var(--wms-filete); color: var(--wms-tinta); }

.wms-sesion__inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--wms-r-md);
    background: var(--wms-azul-100);
    color: var(--wms-accion-honda);
    font-size: var(--wms-txt-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.wms-sesion__texto { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.wms-sesion__nombre { font-size: var(--wms-txt-sm); font-weight: 500; color: var(--wms-tinta); }
.wms-sesion__perfil { font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); }
.wms-sesion__caret { font-size: 9px; color: var(--wms-tinta-tenue); margin-left: 2px; }

.dropdown-menu .dropdown-item i { width: 14px; margin-right: 6px; color: var(--wms-tinta-tenue); }

@media (max-width: 767px) {
    .wms-sesion__texto { display: none; }
    .wms-ruta__paso:not(.wms-ruta__paso--actual),
    .wms-ruta__sep { display: none; }
}

/* ==========================================================================
   MOVIMIENTO
   Con criterio, no de adorno. Las reglas, en orden:
     1. Nada que se vea cien veces al dia se anima. Cansa y hace lento al sistema.
     2. Nunca `ease-in`: arranca lento justo cuando la persona esta mirando.
     3. Nada por encima de 300ms. Un desplegable de 180ms se SIENTE mas rapido
        que uno de 400, aunque los dos tarden lo mismo en ser utiles.
     4. Nada aparece de la nada: se entra desde 0.98 y 4px, nunca desde cero.
        En el mundo real las cosas no surgen del vacio.
     5. Quien pidio que nada se mueva, no ve nada moverse.
   ========================================================================== */

@keyframes wms-entra {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

@keyframes wms-entra-lateral {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
}

/*
 * El contenido entra al cargar. Es lo que mas cambia la sensacion de un sistema
 * que pinta paginas en el servidor: antes aparecia de golpe.
 *
 * Escalonado, pero solo los primeros: a partir del sexto bloque el retraso ya
 * no lee como orden, lee como lentitud.
 */
.main-panel > .content > * {
    animation: wms-entra 220ms var(--wms-salida) backwards;
}

.main-panel > .content > *:nth-child(1) { animation-delay: 0ms; }
.main-panel > .content > *:nth-child(2) { animation-delay: 25ms; }
.main-panel > .content > *:nth-child(3) { animation-delay: 50ms; }
.main-panel > .content > *:nth-child(4) { animation-delay: 70ms; }
.main-panel > .content > *:nth-child(n+5) { animation-delay: 85ms; }

/* Los indicadores del tablero entran uno tras otro, de izquierda a derecha */
.wms-rejilla > * { animation: wms-entra 240ms var(--wms-salida) backwards; }
.wms-rejilla > *:nth-child(1) { animation-delay: 40ms; }
.wms-rejilla > *:nth-child(2) { animation-delay: 80ms; }
.wms-rejilla > *:nth-child(3) { animation-delay: 120ms; }
.wms-rejilla > *:nth-child(4) { animation-delay: 160ms; }
.wms-rejilla > *:nth-child(n+5) { animation-delay: 180ms; }

/*
 * Los renglones entran escalonados, y solo los doce primeros: en una tabla de
 * cien, la cascada completa se vuelve una espera.
 */
.table > tbody > tr { animation: wms-entra-lateral 200ms var(--wms-salida) backwards; }
.table > tbody > tr:nth-child(1) { animation-delay: 20ms; }
.table > tbody > tr:nth-child(2) { animation-delay: 32ms; }
.table > tbody > tr:nth-child(3) { animation-delay: 44ms; }
.table > tbody > tr:nth-child(4) { animation-delay: 56ms; }
.table > tbody > tr:nth-child(5) { animation-delay: 68ms; }
.table > tbody > tr:nth-child(6) { animation-delay: 80ms; }
.table > tbody > tr:nth-child(7) { animation-delay: 92ms; }
.table > tbody > tr:nth-child(8) { animation-delay: 104ms; }
.table > tbody > tr:nth-child(9) { animation-delay: 116ms; }
.table > tbody > tr:nth-child(10) { animation-delay: 128ms; }
.table > tbody > tr:nth-child(11) { animation-delay: 140ms; }
.table > tbody > tr:nth-child(n+12) { animation-delay: 150ms; }

/* Los avisos bajan desde arriba: vienen del sistema, no estaban ahi */
.alert { animation: wms-entra 260ms var(--wms-salida) backwards; }

/*
 * El renglon se levanta un pelo al pasar por encima. Dos pixeles: suficiente
 * para saber cual estas mirando en una tabla de diez columnas, y no tanto como
 * para marear al recorrerla.
 */
.table > tbody > tr,
body.white-content .table > tbody > tr {
    transition: background-color 90ms ease, box-shadow 140ms var(--wms-salida);
}

/* Las tarjetas de indicador se levantan al apuntarlas, porque son enlaces */
a.wms-metric {
    transition: border-color var(--wms-veloz) ease,
                background-color var(--wms-veloz) ease,
                transform 160ms var(--wms-salida),
                box-shadow 160ms var(--wms-salida);
}

a.wms-metric:hover {
    transform: translateY(-2px);
    box-shadow: var(--wms-sombra-flota);
}

a.wms-metric:active { transform: translateY(0); }

/* Los distintivos del resumen tambien son enlaces */
a.wms-resumen { transition: border-color var(--wms-veloz) ease, background-color var(--wms-veloz) ease, transform 120ms var(--wms-salida); }
a.wms-resumen:active { transform: scale(.97); }

/* El menu lateral: la entrada activa y el submenu que se despliega */
.sidebar .nav li.active > a:before { animation: wms-entra 200ms var(--wms-salida) backwards; }
.sidebar .nav .collapsing { transition: height var(--wms-normal) var(--wms-salida); }

/* Un boton trabajando lo dice. El formulario ya lo desactiva; esto explica por que */
.btn .wms-girando {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: wms-gira 600ms linear infinite;
}

@keyframes wms-gira { to { transform: rotate(360deg); } }

/* La cifra de un indicador, mientras cuenta */
.wms-metric__valor { transition: color var(--wms-veloz) ease; }

@media (prefers-reduced-motion: reduce) {
    .main-panel > .content > *,
    .wms-rejilla > *,
    .table > tbody > tr,
    .alert,
    .sidebar .nav li.active > a:before {
        animation: none !important;
    }
}

/* --- La marca, arriba del menu ------------------------------------------ */

/*
 * Mide exactamente lo que la barra superior, para que el filete de abajo de la
 * marca y el de abajo de la barra sean la misma linea cruzando la pantalla. Con
 * 70 contra 52 se notaba el escalon.
 */
.wms-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--wms-barra-alto);
    padding: 0 var(--wms-e4);
    border-bottom: 1px solid var(--wms-gris-800);
    text-decoration: none;
}

/*
 * El sello: el trazo rojo del logotipo sobre una placa oscura. Antes el trazo
 * cruzaba la palabra, y una palabra con una linea encima se lee como texto
 * tachado, no como marca. Asi el rojo sigue siendo el de EEPAT y ademas es la
 * misma forma inclinada que senala la pantalla activa en el menu.
 */
.wms-marca__sello {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--wms-r-md);
    background: var(--wms-gris-800);
    border: 1px solid var(--wms-gris-700);
    overflow: hidden;
}

.wms-marca__sello:before,
.wms-marca__sello:after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 1px;
    transform: skewX(-14deg);
}

.wms-marca__sello:before { left: 8px; background: var(--wms-azul-400); }
.wms-marca__sello:after { left: 15px; background: var(--wms-rojo-500); }

.wms-marca__texto { display: flex; flex-direction: column; min-width: 0; }

.wms-marca:hover { text-decoration: none; }

.wms-marca__nombre {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.15;
}

.wms-marca__producto {
    display: block;
    margin-top: 1px;
    font-size: var(--wms-txt-xs);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wms-gris-500);
}

.wms-marca:hover .wms-marca__producto { color: var(--wms-gris-400); }

/* --- El desplegable con buscador de los filtros ------------------------- */

/*
 * Los filtros usan SlimSelect, que ya venia en el proyecto pero solo en cinco
 * pantallas sueltas. Un desplegable nativo con treinta almacenes obliga a
 * recorrerlos a ojo; con buscador se escribe una parte del nombre y ya.
 */
.ss-main { width: 100%; }

.ss-main .ss-single-selected .placeholder { color: var(--wms-tinta); }
.ss-main .ss-single-selected .placeholder.ss-disabled { color: var(--wms-tinta-tenue); }

.ss-main .ss-single-selected .ss-arrow .arrow-up,
.ss-main .ss-single-selected .ss-arrow .arrow-down { border-color: var(--wms-tinta-tenue); }

.ss-content .ss-search { padding: 6px; border-bottom: 1px solid var(--wms-filete-suave); }

.ss-content .ss-search input {
    height: 30px;
    padding: 0 10px;
    font-family: var(--wms-fuente);
    font-size: var(--wms-txt-sm);
    color: var(--wms-tinta);
    border: 1px solid var(--wms-filete-fuerte);
    border-radius: var(--wms-r-sm);
    box-shadow: none;
}

.ss-content .ss-search input:focus {
    border-color: var(--wms-accion);
    box-shadow: 0 0 0 3px var(--wms-azul-100);
}

.ss-content .ss-list { padding: 4px; }

.ss-content .ss-list .ss-option {
    padding: 6px 10px;
    border-radius: var(--wms-r-sm);
    font-size: var(--wms-txt-sm);
    color: var(--wms-tinta-media);
}

.ss-content .ss-list .ss-option.ss-disabled { color: var(--wms-tinta-tenue); background: transparent; }

.ss-content .ss-list .ss-option.ss-option-selected,
.ss-content .ss-list .ss-option[data-selected="true"] {
    background: var(--wms-accion-tenue);
    color: var(--wms-accion-honda);
    font-weight: 500;
}

/* Cuando el desplegable esta abierto, el campo se ve enfocado */
.ss-main .ss-single-selected.ss-open-below,
.ss-main .ss-single-selected.ss-open-above {
    border-color: var(--wms-accion);
    box-shadow: 0 0 0 3px var(--wms-azul-100);
    border-radius: var(--wms-r-md);
}

/* ==========================================================================
   AJUSTES DE APRIETE Y HUECOS
   Cada uno viene de una medicion, no de una impresion.
   ========================================================================== */

/*
 * Un campo con boton pegado quedaba 5px mas abajo que sus vecinos, y eso
 * empujaba el boton de buscar 16px por debajo de la fila. En una barra de
 * filtros se nota como si estuviera torcida.
 */
.input-group { align-items: stretch; }
.input-group > .input-group-append,
.input-group > .input-group-prepend { display: flex; align-items: stretch; }
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .btn { height: auto; align-self: stretch; }

/* Los desplegables con buscador miden lo mismo que un campo de texto */
.wms-filtros .ss-main,
.wms-filtros .ss-main .ss-single-selected { height: var(--wms-control-alto); }
.wms-filtros .ss-main .ss-single-selected { display: flex; align-items: center; }

/*
 * Un pie de tarjeta que solo lleva la paginacion y la paginacion no existe
 * (porque todo cabe en una pagina) dejaba 49px de tarjeta vacia debajo de la
 * tabla. Se va, pero solo en ese caso: un pie con botones se queda.
 */
.card > .card-footer:has(> nav):not(:has(.pagination)),
.card > .card-footer:has(> .row > nav):not(:has(.pagination)) { display: none; }

/* La paginacion queda a la derecha con el mismo aire que el resto de la tarjeta */
.card > .card-footer > nav,
.card > .card-footer > .row > nav { margin: 0; }
.card > .card-footer .row { margin: 0; }

/* Un `py-4` heredado hacia el pie el doble de alto que la cabecera */
.card > .card-footer.py-4 { padding-top: var(--wms-e3) !important; padding-bottom: var(--wms-e3) !important; }

/*
 * Los listados heredados envuelven la tabla en `card-body`, que le mete 20px de
 * relleno lateral encima de los 16 de cada celda: la tabla quedaba flotando
 * dentro de la tarjeta en vez de ocuparla. La envoltura `.table-responsive` que
 * el script agrega recibe el margen; la tabla de adentro no, o se corre dos veces.
 */
.card > .card-body > .table-responsive,
.card > .card-body > .table,
.card > .card-body > div:only-child:not(.table-responsive) > .table {
    margin-left: calc(var(--wms-e5) * -1);
    margin-right: calc(var(--wms-e5) * -1);
    width: calc(100% + var(--wms-e5) * 2);
}

.card > .card-body:has(> .table-responsive:only-child),
.card > .card-body:has(> .table:only-child) { padding-top: 0; padding-bottom: 0; }

/*
 * La plantilla le pone margen inferior a los campos, a los grupos y a los
 * botones. Dentro de una fila de filtros eso hace que cada columna mida
 * distinto y la fila se vea torcida: medido, el boton de buscar quedaba 16px
 * por debajo de los campos. Aqui los margenes se anulan y la rejilla manda.
 */
body .wms-filtros .wms-filtros__campo > *,
body .wms-filtros .wms-filtros__campo > [wire\:ignore] > *,
body .wms-filtros .wms-filtros__acciones > *,
body.white-content .wms-filtros .wms-filtros__campo > *,
body.white-content .wms-filtros .wms-filtros__campo > [wire\:ignore] > * { margin: 0; }

body .wms-filtros .wms-filtros__campo > label { margin-bottom: 5px; }

.wms-filtros__campo > .input-group,
.wms-filtros__campo > .ss-main { display: flex; }

/*
 * El boton pegado al campo de fecha quedaba 5px mas abajo que el campo: la
 * plantilla le pone margen propio a los botones y el grupo no lo compensa.
 */
body .input-group > .input-group-append > .btn,
body .input-group > .input-group-prepend > .btn,
body.white-content .input-group > .input-group-append > .btn {
    margin-top: 0;
    margin-bottom: 0;
    height: 100%;
}


/*
 * La plantilla le pone 30px de margen inferior a los titulos. Dentro del
 * encabezado eso abria un hueco entre el titulo y su linea de contexto, que
 * son la misma idea y tienen que leerse juntos.
 */
body .wms-page-header .page-title,
body .wms-page-header h1,
body .wms-page-header p { margin: 0; }

body .wms-page-header__ayuda { margin-top: 3px !important; }
body .wms-page-header__seccion { margin-bottom: 3px !important; }

/* Lo mismo dentro de las tarjetas y de los paneles del tunel */
body .card .card-header h1,
body .card .card-header h2,
body .card .card-header h3,
body .card .card-header h4,
body .card .card-header h5,
body .wms-estado p { margin-top: 0; margin-bottom: 0; }

body .wms-estado__mensaje { margin-top: 5px !important; }

/*
 * La tarjeta de filtros se dibuja por encima de la que lleva la tabla: su
 * desplegable con buscador se despliega hacia abajo y tiene que tapar el
 * listado, no quedar debajo.
 */
.card-search { position: relative; z-index: 20; }
.ss-content { z-index: 1100; }

/* Con listas de doscientas marcas, 200px de alto se queda corto */
.ss-content .ss-list { max-height: 260px; }

/*
 * SlimSelect copia al contenedor las clases del `select` original, asi que
 * `.ss-main` acababa con `form-control` y dibujaba su propia caja ademas de la
 * del control de dentro: dos rectangulos con borde, uno metido en el otro,
 * separados 11px. Se ve como un campo mal armado.
 *
 * El contenedor pasa a ser transparente y la unica caja es la del control.
 */
.wms-filtros .ss-main,
.wms-filtros .ss-main.form-control,
body.white-content .wms-filtros .ss-main.form-control,
.ss-main.form-control {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ss-main .ss-single-selected,
.wms-filtros .ss-main .ss-single-selected { width: 100%; }

/* ==========================================================================
   FORMULARIOS DE ALTA Y EDICION
   ========================================================================== */

/*
 * La plantilla pinta las etiquetas de dentro de una tarjeta en azul marino con
 * una regla muy especifica, asi que se salian del sistema justo donde mas se
 * leen. Se igualan con la misma especificidad.
 */
body.white-content .card:not(.card-white) label:not(.btn),
body.white-content .card:not(.card-white) .col-form-label {
    color: var(--wms-tinta-media);
    font-size: var(--wms-txt-xs);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/*
 * Un campo de nombre de mil pixeles de ancho no se lee mejor: se lee peor,
 * porque el ojo pierde la relacion entre la etiqueta y lo que escribio. Los
 * controles de un formulario se acotan a una medida comoda; dentro de una
 * rejilla de columnas la columna ya manda y esto no estorba.
 */
form .form-group > .form-control,
form .form-group > .ss-main,
form .form-group > .input-group,
form .form-group > .custom-select { max-width: 520px; }

/* Lo que si necesita todo el ancho */
form .form-group > textarea.form-control,
form .form-group > .form-control.w-100 { max-width: none; }

/* El pie de un formulario: las acciones a la derecha, no centradas */
form .text-center > .btn[type="submit"] { margin-left: 0; }

/* ==========================================================================
   CASILLAS, INTERRUPTORES Y OPCIONES
   ========================================================================== */

/*
 * Una casilla NUNCA se dibuja como un campo de texto, aunque el marcado diga
 * `form-control`. Dos vistas lo hacian y el resultado era un recuadro vacio de
 * 34px de alto flotando en medio del formulario, con su etiqueta perdida
 * encima. Esta regla protege tambien a las vistas que no se han tocado.
 */
/*
 * La plantilla esconde la casilla nativa (`visibility: hidden; opacity: 0`) para
 * dibujar la suya con pseudoelementos sobre la etiqueta. Ese contrato solo
 * funciona con su marcado exacto, asi que en cuanto una vista lo escribia
 * distinto no se veia ninguna casilla. El sistema dibuja la suya y no depende
 * de eso.
 */
input[type="checkbox"],
input[type="radio"],
body.white-content input[type="checkbox"],
body.white-content input[type="radio"],
body.white-content .card:not(.card-white) input[type="checkbox"],
body.white-content .card:not(.card-white) input[type="radio"],
input[type="checkbox"].form-control,
input[type="radio"].form-control,
input[type="checkbox"].form-check-input,
input[type="radio"].form-check-input {
    position: static;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 0;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    visibility: visible;
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--wms-superficie);
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--wms-filete-fuerte);
    border-radius: var(--wms-r-sm);
    box-shadow: none;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color var(--wms-veloz) ease, border-color var(--wms-veloz) ease;
}

input[type="radio"],
input[type="radio"].form-control,
input[type="radio"].form-check-input { border-radius: 50%; }

input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--wms-gris-400); }

input[type="checkbox"]:checked,
body.white-content input[type="checkbox"]:checked,
body.white-content .card:not(.card-white) input[type="checkbox"]:checked,
body.white-content .card:not(.card-white) input[type="checkbox"].form-check-input:checked,
body.white-content .card:not(.card-white) input[type="checkbox"].form-control:checked,
input[type="checkbox"].form-check-input:checked {
    background-color: var(--wms-accion);
    border-color: var(--wms-accion);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 5.8 10.2 11 4.6'/%3E%3C/svg%3E");
    background-size: 12px;
}

input[type="radio"]:checked,
body.white-content input[type="radio"]:checked,
body.white-content .card:not(.card-white) input[type="radio"]:checked,
body.white-content .card:not(.card-white) input[type="radio"].form-check-input:checked,
body.white-content .card:not(.card-white) input[type="radio"].form-control:checked,
input[type="radio"].form-check-input:checked {
    background-color: var(--wms-accion);
    border-color: var(--wms-accion);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.6' fill='%23fff'/%3E%3C/svg%3E");
    background-size: 12px;
}

input[type="checkbox"]:indeterminate {
    background-color: var(--wms-accion);
    border-color: var(--wms-accion);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3.5 7h7'/%3E%3C/svg%3E");
    background-size: 12px;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { box-shadow: var(--wms-foco); }

input[type="checkbox"]:disabled,
input[type="radio"]:disabled { cursor: not-allowed; opacity: .5; background-color: var(--wms-superficie-hundida); }

/* La plantilla dibujaba su casilla falsa sobre la etiqueta. Ya no hace falta */
.form-check .form-check-label:before,
.form-check .form-check-label:after,
.form-check-sign:before,
.form-check-sign:after { display: none !important; }

/*
 * La etiqueta al lado de la casilla, alineada con ella, y toda la fila es zona
 * de click: con guantes, acertarle a un cuadro de 16px es pedir mucho.
 */
.form-check,
.wms-check {
    display: flex;
    align-items: flex-start;
    gap: var(--wms-e2);
    padding: 0;
    margin: 0;
    min-height: 22px;
}

.form-check + .form-check,
.wms-check + .wms-check { margin-top: 6px; }

.form-check .form-check-input,
.wms-check .form-check-input {
    position: static;
    margin: 3px 0 0;
}

body.white-content .card:not(.card-white) .form-check .form-check-label,
.form-check .form-check-label,
.wms-check .form-check-label {
    display: block;
    margin: 0;
    /*
     * La plantilla le reserva 25px a la casilla que ella misma dibuja con :before y :after. Esos
     * pseudo-elementos se apagan mas arriba, asi que sin este cero el hueco se queda vacio y el
     * texto aparece separado de su casilla por dos centimetros de nada.
     */
    padding-left: 0;
    font-size: var(--wms-txt-sm);
    font-weight: 400;
    color: var(--wms-tinta-media);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}

.wms-check__ayuda {
    display: block;
    margin-top: 1px;
    font-size: var(--wms-txt-xs);
    color: var(--wms-tinta-suave);
}

/* Un grupo de casillas dentro de un campo respira igual que cualquier control */
.form-group > .form-check:first-of-type,
.form-group > .wms-check:first-of-type { margin-top: 2px; }

/*
 * Las casillas de seleccion de renglon en las tablas de etiquetas y particiones:
 * centradas en su celda y con zona de click amplia.
 */
.table td > input[type="checkbox"],
.table th > input[type="checkbox"] {
    display: block;
    margin: 0 auto;
}

.table td:has(> input[type="checkbox"]:only-child),
.table th:has(> input[type="checkbox"]:only-child) {
    width: 44px;
    text-align: center;
    padding-left: var(--wms-e2);
    padding-right: var(--wms-e2);
}

/* ==========================================================================
   OTROS CONTROLES
   ========================================================================== */

/* Subir un archivo */
input[type="file"].form-control,
input[type="file"] {
    height: auto;
    min-height: var(--wms-control-alto);
    padding: 6px 10px;
    font-size: var(--wms-txt-sm);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    height: 22px;
    margin-right: var(--wms-e2);
    padding: 0 10px;
    background: var(--wms-superficie-hundida);
    border: 1px solid var(--wms-filete);
    border-radius: var(--wms-r-sm);
    font-family: var(--wms-fuente);
    font-size: var(--wms-txt-xs);
    color: var(--wms-tinta-media);
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover { background: var(--wms-gris-100); }

/* Un campo numerico se lee en cifras de ancho fijo y alineado a la derecha */
input[type="number"].form-control {
    font-family: var(--wms-fuente-dato);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* El campo de fecha nativo, a la altura del resto */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control { padding-right: 8px; }

/* Un `select` nativo que se quede sin buscador tampoco desentona */
select.form-control:not([data-wms-buscador]) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23747881' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 14px;
}

/*
 * La hoja vieja le pone 20px de margen inferior a todo desplegable con
 * buscador. Dentro de un campo que ya trae su propio margen eso deja 36px entre
 * un control y el siguiente, mientras un campo de texto normal deja 16: la
 * misma columna con dos ritmos distintos.
 */
body .ss-main,
body.white-content .ss-main { margin: 0; width: 100%; }

body .form-group > .ss-main { margin-bottom: 0; }

/* Un contador dentro de un boton: cuantas cosas va a tocar la accion */
.btn .wms-contador {
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 2px;
    background: rgba(255, 255, 255, .22);
    border-color: transparent;
    color: inherit;
}

.btn.btn-secondary .wms-contador,
.btn:not([class*="btn-primary"]):not([class*="btn-success"]):not([class*="btn-danger"]):not([class*="btn-warning"]):not([class*="btn-info"]) .wms-contador {
    background: var(--wms-superficie-hundida);
    border: 1px solid var(--wms-filete);
    color: var(--wms-tinta-media);
}

/* Una accion apagada dice por que con su globo de ayuda, asi que sigue recibiendo el raton */
.btn:disabled,
.btn.disabled { pointer-events: auto; cursor: not-allowed; }

/* Un formulario que solo envuelve un boton no ocupa espacio propio */
.wms-card__acciones > form,
.wms-page-header__acciones > form { display: inline-flex; margin: 0; }

/* La fila de un remanente. Antes lo pintaba una hoja privada de la vista */
body.white-content .table > tbody > tr.tr-warning td { background-color: var(--wms-atencion-tenue); }
body.white-content .table > tbody > tr.tr-warning td:first-child { box-shadow: inset 3px 0 0 var(--wms-atencion); }

/* ==========================================================================
   PIEL DE CHAINLINK
   Las piezas de Bootstrap que usan las pantallas Blade, vestidas con las
   clases de chainlink (su resources/css/app.css y Components/UI). Va al final
   para ganar a las reglas de arriba sin tocarlas una por una.
   ========================================================================== */

/* Tarjetas: bg-white rounded-2xl border border-gray-100 shadow-sm */
.card,
body.white-content .card {
    border: 1px solid var(--wms-gris-100);
    border-radius: 16px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    margin-bottom: 24px;
}
.card:hover { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.card .card-header,
body.white-content .card .card-header {
    min-height: 0;
    padding: 16px 24px;
    border-bottom: 1px solid var(--wms-gris-100);
    border-radius: 16px 16px 0 0;
}
.card .card-body,
body.white-content .card .card-body { padding: 24px; }
.card .card-footer,
body.white-content .card .card-footer {
    padding: 16px 24px;
    background: rgb(249 250 251 / .5);
    border-top: 1px solid var(--wms-gris-100);
    border-radius: 0 0 16px 16px;
}
body .card .card-header .card-title,
body.white-content .card .card-header .card-title,
body .card .card-title,
body .card .card-body .card-title,
body .card > .card-header :is(h2, h3, h4):not(.card-category):not(.card-subtitle) {
    color: var(--wms-gris-900);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0;
}
body .card .card-category,
body .card .card-subtitle,
body.white-content .card .card-category { color: var(--wms-gris-500); font-size: 14px; margin-top: 4px; }
.card > .table-responsive:last-child,
.card > .table-responsive:last-child > .table { border-radius: 0 0 16px 16px; }

/* Botones: rounded-xl, px-4 py-2.5, text-sm font-medium; los de color con degradado y sombra de su color */
.btn,
body.white-content .btn {
    height: 40px;
    padding: 0 16px;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 12px;
    background-color: #fff;
    border: 1px solid var(--wms-gris-200);
    color: var(--wms-gris-700);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    transition: all 200ms ease-out;
}
.btn:hover { background-color: var(--wms-gris-50); border-color: var(--wms-gris-300); color: var(--wms-gris-900); }
.btn:active,
.btn.active,
.btn:not(:disabled):not(.disabled):active { transform: scale(.98); }
.btn:focus,
.btn.focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wms-azul-500); }
.btn-sm,
body.white-content .btn.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.btn-lg,
body.white-content .btn.btn-lg { height: 48px; padding: 0 24px; font-size: 16px; border-radius: 12px; }

.btn.btn-primary,
body.white-content .btn.btn-primary,
.btn.btn-info,
body.white-content .btn.btn-info {
    background-image: linear-gradient(to right, #2563eb, #3b82f6);
    background-color: #2563eb;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(59 130 246 / .25), 0 4px 6px -4px rgb(59 130 246 / .25);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
body.white-content .btn.btn-primary:hover,
.btn.btn-info:hover,
body.white-content .btn.btn-info:hover {
    background-image: linear-gradient(to right, #1d4ed8, #2563eb);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 20px 25px -5px rgb(59 130 246 / .3), 0 8px 10px -6px rgb(59 130 246 / .3);
}
.btn.btn-success,
body.white-content .btn.btn-success {
    background-image: linear-gradient(to right, #059669, #10b981);
    background-color: #059669;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(16 185 129 / .25), 0 4px 6px -4px rgb(16 185 129 / .25);
}
.btn.btn-success:hover,
body.white-content .btn.btn-success:hover { background-image: linear-gradient(to right, #047857, #059669); color: #fff; }
.btn.btn-danger,
body.white-content .btn.btn-danger {
    background-image: linear-gradient(to right, #dc2626, #ef4444);
    background-color: #dc2626;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(239 68 68 / .25), 0 4px 6px -4px rgb(239 68 68 / .25);
}
.btn.btn-danger:hover,
body.white-content .btn.btn-danger:hover { background-image: linear-gradient(to right, #b91c1c, #dc2626); color: #fff; }
.btn.btn-warning,
body.white-content .btn.btn-warning {
    background-image: linear-gradient(to right, #f59e0b, #fbbf24);
    background-color: #f59e0b;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(245 158 11 / .25), 0 4px 6px -4px rgb(245 158 11 / .25);
}
.btn.btn-warning:hover,
body.white-content .btn.btn-warning:hover { background-image: linear-gradient(to right, #d97706, #f59e0b); color: #fff; }
.btn.btn-secondary,
.btn.btn-default,
body.white-content .btn.btn-secondary {
    background-image: none;
    background-color: #fff;
    border: 1px solid var(--wms-gris-200);
    color: var(--wms-gris-700);
}
.btn.btn-link,
body.white-content .btn.btn-link { background: transparent; border-color: transparent; box-shadow: none; color: var(--wms-azul-600); }
.btn.btn-link:hover { color: var(--wms-azul-700); text-decoration: underline; }
.btn.btn-primary:not(:disabled):not(.disabled):active { background-color: #1d4ed8 !important; }
.btn.btn-success:not(:disabled):not(.disabled):active { background-color: #047857 !important; }
.btn.btn-danger:not(:disabled):not(.disabled):active { background-color: #b91c1c !important; }
.btn.btn-warning:not(:disabled):not(.disabled):active { background-color: #d97706 !important; }
.btn.btn-info:not(:disabled):not(.disabled):active { background-color: #1d4ed8 !important; }
.btn.btn-outline-primary { border-color: var(--wms-azul-300); color: var(--wms-azul-600); background: transparent; box-shadow: none; }
.btn.btn-outline-primary:hover { background: var(--wms-azul-50); border-color: var(--wms-azul-400); color: var(--wms-azul-700); }
.btn-group > .btn:first-child { border-radius: 12px 0 0 12px; }
.btn-group > .btn:last-child { border-radius: 0 12px 12px 0; }
.btn-group > .btn:only-child { border-radius: 12px; }

/* Botones de icono dentro de la tabla: btn ghost de chainlink, sin marco */
body.white-content .td-actions .btn,
.table .btn.btn-sm.btn-icon {
    height: 36px;
    width: 36px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--wms-gris-500);
}
body.white-content .td-actions .btn:hover,
.td-actions .btn:hover { background-color: var(--wms-gris-100) !important; color: var(--wms-gris-900); }

/* Campos: form-input de chainlink */
.form-control,
body.white-content .form-control {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--wms-gris-900);
    background-color: #fff;
    border: 1px solid var(--wms-gris-200);
    border-radius: 12px;
    box-shadow: none;
    transition: all 200ms;
}
textarea.form-control { height: auto; padding: 10px 16px; }
.form-control:hover { border-color: var(--wms-gris-300); }
.form-control:focus,
body.white-content .form-control:focus {
    border-color: var(--wms-azul-500);
    box-shadow: 0 0 0 4px rgb(59 130 246 / .1);
}
.form-control::placeholder { color: var(--wms-gris-400); }
.form-control.is-invalid { border-color: #fca5a5; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgb(239 68 68 / .1); }
/* Slim Select hereda form-control en su contenedor: la caja la pone solo el control de dentro */
.ss-main.form-control,
body.white-content .ss-main.form-control {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}
.ss-content .ss-search input {
    height: 36px;
    border: 1px solid var(--wms-gris-200);
    border-radius: 8px;
    font-size: 14px;
}
.form-group label,
body.white-content .form-group label,
.wms-filtros__campo > label,
.col-form-label {
    color: var(--wms-gris-700);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.input-group .form-control { border-radius: 12px; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .input-group-append > .btn { border-radius: 0 12px 12px 0; }

/* Selector (Slim Select) con la misma caja que un campo */
.ss-main .ss-single-selected,
.ss-main .ss-multi-selected {
    min-height: 40px;
    border: 1px solid var(--wms-gris-200);
    border-radius: 12px;
    background-color: #fff;
    padding-left: 16px;
    font-size: 14px;
    color: var(--wms-gris-900);
}
.ss-main .ss-content {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 0 0 1px rgb(17 24 39 / .05);
    margin-top: 8px;
}
.ss-content .ss-list .ss-option { font-size: 14px; padding: 8px 16px; }
.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option.ss-highlighted { background-color: var(--wms-azul-50); color: var(--wms-azul-700); }

/* Tablas: encabezado gris en mayusculas, filas holgadas y divididas con gray-100 */
.table,
body.white-content .table { margin-bottom: 0; }
.table > thead > tr > th,
body.white-content .table > thead > tr > th {
    background-color: rgb(249 250 251 / .8);
    padding: 14px 24px;
    border-bottom: 1px solid var(--wms-gris-100);
    color: var(--wms-gris-600);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
}
.table > tbody > tr > td,
body.white-content .table > tbody > tr > td {
    height: auto;
    padding: 16px 24px;
    border-top: 1px solid var(--wms-gris-100);
    color: var(--wms-gris-700);
    font-size: 14px;
}
.table > tbody > tr:hover,
body.white-content .table > tbody > tr:hover { background-color: rgb(249 250 251 / .6); }

/* Estados: las pildoras de chainlink */
.badge,
body.white-content .badge {
    gap: 4px;
    padding: 4px 10px;
    border: 0;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    box-shadow: inset 0 0 0 1px rgb(107 114 128 / .2);
}
.badge:before { display: none; }
.badge.badge-primary,
body.white-content .badge.badge-primary { background-color: #eff6ff; color: #1d4ed8; box-shadow: inset 0 0 0 1px rgb(37 99 235 / .2); }
.badge.badge-info,
body.white-content .badge.badge-info { background-color: #ecfeff; color: #0e7490; box-shadow: inset 0 0 0 1px rgb(8 145 178 / .2); }
.badge.badge-success,
body.white-content .badge.badge-success { background-color: #ecfdf5; color: #047857; box-shadow: inset 0 0 0 1px rgb(5 150 105 / .2); }
.badge.badge-warning,
body.white-content .badge.badge-warning { background-color: #fffbeb; color: #b45309; box-shadow: inset 0 0 0 1px rgb(217 119 6 / .2); }
.badge.badge-danger,
body.white-content .badge.badge-danger { background-color: #fef2f2; color: #b91c1c; box-shadow: inset 0 0 0 1px rgb(220 38 38 / .2); }
.badge.badge-secondary,
.badge.badge-default,
body.white-content .badge.badge-secondary { background-color: #f9fafb; color: #4b5563; box-shadow: inset 0 0 0 1px rgb(107 114 128 / .2); }

/* Avisos dentro de la pagina: el Alert de chainlink */
.alert {
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 12px;
    padding: 16px;
    font-size: 14px;
}
.alert.alert-success { background: #ecfdf5; border-left-color: #10b981; color: #065f46; }
.alert.alert-danger  { background: #fef2f2; border-left-color: #ef4444; color: #991b1b; }
.alert.alert-warning { background: #fffbeb; border-left-color: #f59e0b; color: #92400e; }
.alert.alert-info    { background: #eff6ff; border-left-color: #3b82f6; color: #1e40af; }

/* Menus, ventanas y paginacion */
.dropdown-menu,
body.white-content .dropdown-menu {
    border: 0;
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1), 0 0 0 1px rgb(17 24 39 / .05);
}
.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--wms-gris-700);
}
.dropdown-menu .dropdown-item:hover { background-color: var(--wms-gris-50); color: var(--wms-gris-900); }
.dropdown-menu .dropdown-item svg { color: var(--wms-gris-400); }
.modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--wms-gris-100); }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--wms-gris-100); background: rgb(249 250 251 / .5); border-radius: 0 0 16px 16px; }
.modal-backdrop.show { opacity: .8; background-color: var(--wms-gris-900); }
.pagination .page-item .page-link,
body.white-content .pagination .page-item .page-link {
    min-width: 36px;
    height: 36px;
    margin: 0 2px;
    border: 1px solid var(--wms-gris-200);
    border-radius: 10px;
    font-size: 14px;
    color: var(--wms-gris-700);
}
.pagination .page-item.active .page-link,
body.white-content .pagination .page-item.active .page-link {
    background-image: linear-gradient(to right, #2563eb, #3b82f6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgb(59 130 246 / .3);
}
.nav-tabs { border-bottom: 1px solid var(--wms-gris-200); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--wms-gris-500); font-size: 14px; font-weight: 500; padding: 12px 4px; margin-right: 24px; }
.nav-tabs .nav-link:hover { color: var(--wms-gris-700); border-bottom-color: var(--wms-gris-300); }
.nav-tabs .nav-link.active { color: var(--wms-azul-600); background: transparent; border-bottom-color: var(--wms-azul-500); }

/* Enlaces del contenido: primary-600 */
body.white-content .wms-shell-contenido a:not(.btn):not(.dropdown-item):not(.page-link):not(.nav-link) { color: var(--wms-azul-600); }
body.white-content .wms-shell-contenido a:not(.btn):not(.dropdown-item):not(.page-link):not(.nav-link):hover { color: var(--wms-azul-700); }

/* Barra superior del marco nuevo: el buscador, la campana y la sesion de chainlink */
.wms-busqueda { display: block; flex: initial; margin: 0; }
.wms-busqueda__campo {
    height: 44px;
    padding: 0 40px;
    border: 0;
    border-radius: 12px;
    background: var(--wms-gris-100);
    font-size: 14px;
}
.wms-busqueda__campo:focus { background: #fff; border: 0; box-shadow: 0 0 0 2px var(--wms-azul-500); }
.wms-busqueda__atajo { border: 1px solid var(--wms-gris-200); border-radius: 6px; background: #fff; line-height: 18px; font-family: inherit; }
@media (max-width: 991px) { .wms-busqueda { display: block; } }
.wms-busqueda__resultados {
    top: calc(100% + 8px);
    padding: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 0 0 1px var(--wms-gris-200);
}
.wms-busqueda__grupo { padding: 8px 16px; background: var(--wms-gris-50); font-size: 12px; color: var(--wms-gris-500); }
.wms-busqueda__opcion { padding: 12px 16px; border-radius: 0; border-bottom: 1px solid var(--wms-gris-100); }
.wms-busqueda__opcion:hover,
.wms-busqueda__opcion--activa { background: var(--wms-azul-50); }
.wms-busqueda__titulo { font-family: inherit; font-weight: 500; }

.wms-campana { margin: 0; }
.wms-campana__boton { width: auto; height: auto; border: 0; border-radius: 8px; font-size: inherit; color: var(--wms-gris-400); }
.wms-campana__boton:hover { background: var(--wms-gris-100); border: 0; color: var(--wms-gris-500); }
.wms-campana__cuenta {
    top: 0;
    right: 0;
    min-width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: #ef4444;
    box-shadow: 0 0 0 2px #fff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 20px;
}
.wms-campana__panel { width: 320px; border-radius: 12px; overflow: hidden; }

.wms-sesion__boton { padding: 6px; border: 0; border-radius: 12px; }
.wms-sesion__boton:hover { background: var(--wms-gris-50); border: 0; }
.wms-sesion__boton::after { display: none; }

/* Botones sin color dentro de una tabla: el boton fantasma de chainlink, sin marco ni sombra */
.table .btn.btn-sm:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not([class*="btn-outline"]),
.table .btn.btn-link,
body.white-content .table .btn.btn-link {
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--wms-gris-500);
}
.table .btn.btn-sm:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not([class*="btn-outline"]):hover,
.table .btn.btn-link:hover { background: var(--wms-gris-100) !important; color: var(--wms-gris-900); text-decoration: none; }

/* La tabla llega a los bordes de su tarjeta, como en chainlink */
.card > .card-body:has(> .table-responsive:only-child),
.card > .card-body:has(> .table:only-child),
.card > .card-body:has(> div:only-child > .table-responsive:only-child) { padding: 0; }
/* Sin relleno ya no hace falta el margen negativo con el que la tabla vieja alcanzaba los bordes */
.card > .card-body:has(> .table-responsive:only-child) > .table-responsive,
.card > .card-body:has(> .table:only-child) > .table,
.card > .card-body:has(> div:only-child > .table-responsive:only-child) > div > .table-responsive,
.card > .card-body:has(> div:only-child > .table-responsive:only-child) > div:only-child:not(.table-responsive) > .table { margin-left: 0; margin-right: 0; width: 100%; }

/* Los contadores del encabezado: pildoras blancas con su punto de color */
.wms-resumen {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 9999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--wms-gris-200), 0 1px 2px 0 rgb(0 0 0 / .05);
    font-size: 13px;
    color: var(--wms-gris-600);
}
a.wms-resumen:hover { background: var(--wms-gris-50); color: var(--wms-gris-900); }
a.wms-resumen.is-activo { background: var(--wms-azul-50); color: var(--wms-azul-700); box-shadow: inset 0 0 0 1px rgb(37 99 235 / .3); }
.wms-resumen__punto { width: 8px; height: 8px; border-radius: 9999px; }
.wms-resumen__cifra { font-family: inherit; font-weight: 700; color: var(--wms-gris-900); }

/* La plantilla le pone un borde azul marino a los complementos de un grupo de campo */
.input-group-append,
.input-group-prepend,
body.white-content .input-group-append,
body.white-content .input-group-prepend { border: 0; }
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    border: 1px solid var(--wms-gris-200);
    background: var(--wms-gris-50);
    color: var(--wms-gris-500);
}
.input-group-prepend .input-group-text { border-radius: 12px 0 0 12px; }
.input-group-append .input-group-text { border-radius: 0 12px 12px 0; }
.table-responsive > .table { width: 100%; }

/* Las vistas heredadas envuelven su contenido en container-fluid; el marco ya pone los margenes */
.wms-shell-contenido .container-fluid { padding-left: 0; padding-right: 0; }

/* Botones de encabezado de tarjeta: del alto de chainlink, sin la sombra de color cuando hacen de secundarios */
.card-header .btn.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.card-header a.btn.btn-primary.btn-sm:not(.wms-boton-alta) { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); background-image: none; }

/* Filas que enlazan en cada celda: se leen como texto, no como una tabla de vinculos azules */
body.white-content .wms-shell-contenido .table td > a.d-block:not(.btn):not(.dropdown-item) { color: var(--wms-gris-700); }
body.white-content .wms-shell-contenido .table td:first-child > a.d-block:not(.btn):not(.dropdown-item) { color: var(--wms-gris-900); font-weight: 500; }
body.white-content .wms-shell-contenido .table td > a[href^="mailto:"]:not(.btn):not(.dropdown-item) { color: var(--wms-gris-600); }
body.white-content .wms-shell-contenido .table tr:hover td > a.d-block:not(.btn):not(.dropdown-item),
body.white-content .wms-shell-contenido .table td > a[href^="mailto:"]:not(.btn):not(.dropdown-item):hover { color: var(--wms-azul-600); text-decoration: none; }

/* En telefono el encabezado de las fichas heredadas (titulo en col-8, botones en col-4) se apila:
   los botones bajan debajo del titulo en lugar de salirse de la tarjeta */
@media (max-width: 575.98px) {
    .card-header > .row > .col-8,
    .card-header > .row > .col-4 { flex: 0 0 100%; max-width: 100%; }
    .card-header > .row > .col-4 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; text-align: left !important; }
    .card-header > .row > .col-4 > form { margin: 0; }
}

/* Algunos filtros heredados usan columnas fijas (col-2) que en telefono rebasan por unos pixeles; el
   contenido no debe arrastrar la pagina de lado */
main.wms-shell-contenido { overflow-x: clip; }

/* Acceso con la mitad de marca de chainlink: degradado azul, reticula tenue y dos manchas difusas */
.wms-acceso__marca {
    flex-basis: 50%;
    background-color: var(--wms-azul-700);
    background-image:
        linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px),
        linear-gradient(to bottom right, #2563eb, #1d4ed8, #1e40af);
    background-size: 64px 64px, 64px 64px, 100% 100%;
}
.wms-acceso__marca::before,
.wms-acceso__marca::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    pointer-events: none;
}
.wms-acceso__marca::before { top: 80px; left: 80px; width: 288px; height: 288px; background: rgb(255 255 255 / .1); }
.wms-acceso__marca::after { bottom: 80px; right: 80px; width: 384px; height: 384px; background: rgb(255 255 255 / .05); }
.wms-acceso__marca-contenido { z-index: 1; max-width: 560px; padding: 48px 64px; }
.wms-acceso__logo { padding: 12px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); }
.wms-acceso__logo img { width: auto; height: 40px; }
.wms-acceso__titulo { font-size: 44px; font-weight: 700; line-height: 1.15; margin-bottom: 16px; }
.wms-acceso__lema { font-size: 18px; color: rgb(255 255 255 / .8); max-width: 448px; margin-bottom: 32px; }
.wms-acceso__lista li { color: rgb(255 255 255 / .9); font-size: 16px; margin-bottom: 16px; }
.wms-acceso__lista i { width: 32px; height: 32px; border-radius: 8px; background: rgb(255 255 255 / .2); }
.wms-acceso__panel { padding: 48px 24px; background: #fff; }
.wms-acceso__encabezado { font-size: 24px; font-weight: 700; color: var(--wms-gris-900); }
.wms-acceso__ayuda { margin-top: 8px; margin-bottom: 32px; font-size: 14px; color: var(--wms-gris-600); }
.wms-acceso__formulario { max-width: 448px; }
.wms-acceso__pie { margin-top: 48px; text-align: center; font-size: 14px; color: var(--wms-gris-500); }
.wms-acceso__logo-movil img { width: auto; height: 48px; }
@media (min-width: 640px) { .wms-acceso__panel { padding-left: 48px; padding-right: 48px; } }
@media (min-width: 992px) { .wms-acceso__panel { padding-left: 64px; padding-right: 64px; } }
.wms-acceso__logo-movil { margin-bottom: 32px; }
.wms-acceso__opciones { flex-wrap: wrap; gap: 12px; }
.wms-acceso__opciones .wms-check label, .wms-acceso__opciones .wms-enlace, .wms-acceso__enlace { white-space: nowrap; }

/* Las tablas heredadas traen hasta diez columnas: 24px por lado en cada celda se comian el ancho y la
   del producto quedaba en cinco renglones. Entre celdas van 16px; los extremos conservan los 24px que
   alinean la tabla con el titulo de su tarjeta */
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td,
body.white-content .table > thead > tr > th,
body.white-content .table > tbody > tr > td { padding-left: 16px; padding-right: 16px; }
.table > thead > tr > th:first-child,
.table > tbody > tr > td:first-child,
body.white-content .table > thead > tr > th:first-child,
body.white-content .table > tbody > tr > td:first-child { padding-left: 24px; }
.table > thead > tr > th:last-child,
.table > tbody > tr > td:last-child,
body.white-content .table > thead > tr > th:last-child,
body.white-content .table > tbody > tr > td:last-child { padding-right: 24px; }

/* Todos los titulos de tarjeta del mismo tamano, tambien los que vienen como h5 */
body .card > .card-header h5.title,
body .card > .card-header > h5:not(.card-category):not(.card-subtitle) {
    color: var(--wms-gris-900);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    margin: 0;
}

/* En telefono la tabla se desliza de lado y el aviso de "sin registros" quedaba centrado en todo su
   ancho, cortado a la mitad. Se queda fijo en la parte visible de la tarjeta */
@media (max-width: 1023.98px) {
    .table-responsive td > .wms-empty { position: sticky; left: 24px; width: calc(100vw - 32px - 50px); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .table-responsive td > .wms-empty { width: calc(100vw - 48px - 50px); }
}

/* ==========================================================================
   EMPAQUE: salida NR/FR, captura y catalogos (06/10/2026)
   ========================================================================== */

/* La sigla de la salida: una pastilla con su color, NR en azul cielo y FR en ambar */
.wms-salida {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
.wms-salida abbr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    cursor: help;
    box-shadow: inset 0 0 0 1px currentColor;
}
.wms-salida--nr abbr { background: #ecfeff; color: #0e7490; }
.wms-salida--fr abbr { background: #fffbeb; color: #b45309; }
.wms-salida__nombre { font-size: 14px; color: var(--wms-gris-700); }

/* La captura del empaque: campos con aire y el cliente a lo ancho cuando se pide */
.wms-captura__campos {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 16px;
    max-width: 760px;
}
.wms-captura__cliente { grid-column: 1 / -1; max-width: 476px; }

.wms-enlace-discreto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}
body.white-content .wms-shell-contenido a.wms-enlace-discreto { color: var(--wms-gris-600); }
body.white-content .wms-shell-contenido a.wms-enlace-discreto:hover { color: var(--wms-azul-600); text-decoration: none; }

/* El conmutador de vista del tablero: un control segmentado, como el de chainlink */
.wms-vistas {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 12px;
    background: var(--wms-gris-100);
}
.wms-vistas__opcion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wms-gris-600);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 150ms, color 150ms, box-shadow 150ms;
}
.wms-vistas__opcion:hover { color: var(--wms-gris-900); }
.wms-vistas__opcion:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wms-azul-500); }
.wms-vistas__opcion--activa {
    background: #fff;
    color: var(--wms-gris-900);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .06), 0 1px 3px 0 rgb(0 0 0 / .08);
}

/* ---- El tablero por columnas ---- */
.wms-kanban {
    --kanban-tono: #3b82f6;
    /* Posicionado: los textos solo para lector de pantalla son absolutos, y sin un ancestro
       posicionado se miden contra la pagina y la ensanchan con las columnas que no caben */
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.wms-kanban__columna {
    position: relative;
    display: flex;
    flex: 0 0 292px;
    flex-direction: column;
    min-width: 0;
    max-height: calc(100vh - 150px);
    border: 1px solid rgb(229 231 235 / .8);
    border-top: 3px solid var(--kanban-tono);
    border-radius: 16px;
    background: rgb(243 244 246 / .7);
    scroll-snap-align: start;
}
.wms-kanban__columna--pending { --kanban-tono: #3b82f6; }
.wms-kanban__columna--in_progress { --kanban-tono: #06b6d4; }
.wms-kanban__columna--review_requested { --kanban-tono: #f59e0b; }
.wms-kanban__columna--reviewed { --kanban-tono: #10b981; }
.wms-kanban__columna--closed { --kanban-tono: #64748b; }
.wms-kanban__columna--shipped { --kanban-tono: #8b5cf6; }

.wms-kanban__cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 10px;
}
.wms-kanban__punto {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--kanban-tono);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kanban-tono) 20%, transparent);
}
.wms-kanban__titulo {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--wms-gris-900);
}
.wms-kanban__cuenta {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: #fff;
    color: var(--wms-gris-700);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    box-shadow: inset 0 0 0 1px var(--wms-gris-200);
    font-variant-numeric: tabular-nums;
}

.wms-kanban__tarjetas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 2px 10px 10px;
    overflow-y: auto;
    list-style: none;
}

body.white-content .wms-shell-contenido .wms-kanban a.wms-kanban__tarjeta:not(.btn):not(.dropdown-item):not(.page-link):not(.nav-link) {
    display: block;
    padding: 12px;
    border: 1px solid var(--wms-gris-200);
    border-radius: 12px;
    background: #fff;
    color: var(--wms-gris-700);
    text-decoration: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .04);
    transition: box-shadow 150ms, transform 150ms, border-color 150ms;
}
body.white-content .wms-shell-contenido .wms-kanban a.wms-kanban__tarjeta:not(.btn):not(.dropdown-item):not(.page-link):not(.nav-link):hover {
    border-color: var(--wms-gris-300);
    box-shadow: 0 6px 16px -4px rgb(17 24 39 / .12);
    transform: translateY(-1px);
}
body.white-content .wms-shell-contenido .wms-kanban a.wms-kanban__tarjeta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--wms-azul-500);
}
.wms-kanban__tarjeta--retirada { opacity: .6; }

.wms-kanban__folio {
    font-family: var(--wms-fuente-dato);
    font-size: 14px;
    font-weight: 600;
    color: var(--wms-gris-900);
    font-variant-ligatures: none;
}
.wms-kanban__folio--sin { font-family: var(--wms-fuente); font-weight: 500; color: var(--wms-gris-400); }

.wms-kanban__tiempo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--wms-gris-500);
    font-size: 12px;
    white-space: nowrap;
}
.wms-kanban__tiempo--espera { background: #fffbeb; color: #b45309; font-weight: 500; }

.wms-kanban__cliente {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    color: var(--wms-gris-700);
    font-size: 13px;
    line-height: 18px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wms-kanban__cliente--sin { color: var(--wms-gris-400); font-style: italic; }

.wms-kanban__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--wms-gris-100);
    font-size: 12px;
}
.wms-kanban__operador {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: var(--wms-gris-700);
    font-weight: 500;
}
.wms-kanban__operador--sin { color: var(--wms-gris-400); font-weight: 400; }
.wms-kanban__iniciales {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}
.wms-kanban__contadores {
    display: inline-flex;
    flex-shrink: 0;
    gap: 10px;
    color: var(--wms-gris-500);
    font-variant-numeric: tabular-nums;
}
.wms-kanban__contadores i { margin-right: 2px; color: var(--wms-gris-400); }

.wms-kanban__vacia {
    padding: 22px 12px;
    border: 1px dashed var(--wms-gris-300);
    border-radius: 12px;
    color: var(--wms-gris-400);
    font-size: 13px;
    text-align: center;
}
.wms-kanban__vacia i { display: block; margin-bottom: 6px; font-size: 18px; }

.wms-kanban__mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 10px 10px;
    padding: 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--wms-azul-600);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.wms-kanban__mas:hover { background: #fff; }

.wms-kanban__aviso {
    margin: -8px 0 24px;
    color: var(--wms-gris-500);
    font-size: 14px;
    text-align: center;
}

@media (max-width: 639.98px) {
    .wms-kanban { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
    .wms-kanban__columna { flex-basis: 84vw; max-height: none; }
    .wms-kanban__tarjetas { overflow-y: visible; }
}
@media (prefers-reduced-motion: reduce) {
    body.white-content .wms-shell-contenido .wms-kanban a.wms-kanban__tarjeta:hover { transform: none; }
}

/* Fotos: en computadora un solo boton ("Agregar fotografias"); en pantalla tactil, camara y galeria */
.wms-fotos__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.wms-fotos__selector[aria-disabled="true"] { pointer-events: none; opacity: .5; }
/* Con la especificidad de la plantilla, que pinta `.btn` en linea y sus `span` en bloque */
.wms-fotos__botones .wms-fotos__selector--camara.btn,
.wms-fotos__botones .btn .wms-fotos__texto-galeria { display: none; }
.wms-fotos__botones .btn .wms-fotos__texto-archivos { display: inline; }
@media (hover: none) and (pointer: coarse) {
    .wms-fotos__botones .wms-fotos__selector--camara.btn { display: inline-flex; }
    .wms-fotos__botones .btn .wms-fotos__texto-galeria { display: inline; }
    .wms-fotos__botones .btn .wms-fotos__texto-archivos { display: none; }
    /* La galeria es la segunda opcion: se ve como boton secundario junto a la camara */
    .wms-fotos__selector--galeria.btn.btn-primary,
    body.white-content .wms-fotos__selector--galeria.btn.btn-primary {
        background-image: none;
        background-color: #fff;
        border: 1px solid var(--wms-gris-200);
        color: var(--wms-gris-700);
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    }
}

/* ---- Avisos: tonos de la campana y ventanas emergentes ---- */
.wms-campana__icono--azul { background: #eff6ff; color: #2563eb; }
.wms-campana__icono--ambar { background: #fffbeb; color: #d97706; }
.wms-campana__icono--rojo { background: #fef2f2; color: #dc2626; }
.wms-campana__icono--verde { background: #ecfdf5; color: #059669; }

.wms-campana__sonido {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wms-gris-400);
    cursor: pointer;
}
.wms-campana__sonido:hover { background: var(--wms-gris-100); color: var(--wms-gris-700); }
.wms-campana__sonido[aria-pressed="true"] { color: var(--wms-azul-600); }

.wms-emergentes {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 380px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}
.wms-emergente {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 40px 16px 14px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 40px -12px rgb(17 24 39 / .25), 0 0 0 1px rgb(17 24 39 / .06);
    pointer-events: auto;
    animation: wms-emergente-entra 260ms cubic-bezier(.21, 1.02, .73, 1) both;
}
.wms-emergente--saliendo { animation: wms-emergente-sale 200ms ease-in both; }
.wms-emergente__icono {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 16px;
}
.wms-emergente__icono--azul { background: #eff6ff; color: #2563eb; }
.wms-emergente__icono--ambar { background: #fffbeb; color: #d97706; }
.wms-emergente__icono--rojo { background: #fef2f2; color: #dc2626; }
.wms-emergente__icono--verde { background: #ecfdf5; color: #059669; }
.wms-emergente__cuerpo { min-width: 0; flex: 1; }
.wms-emergente__titulo { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--wms-gris-900); }
.wms-emergente__texto { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--wms-gris-600); overflow-wrap: anywhere; }
.wms-emergente__acciones:empty { display: none; }
.wms-emergente__acciones { margin-top: 10px; }
.wms-emergente__abrir {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: var(--wms-azul-600);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.wms-emergente__abrir:hover { background: var(--wms-azul-700); }
.wms-emergente__cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wms-gris-400);
    cursor: pointer;
}
.wms-emergente__cerrar:hover { background: var(--wms-gris-100); color: var(--wms-gris-700); }
/* La barra de abajo se vacia en los diez segundos que dura la ventana, y se detiene con el puntero encima */
.wms-emergente__tiempo {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--wms-azul-500);
    transform-origin: left;
    animation: wms-emergente-tiempo 10s linear both;
}
.wms-emergente--en-pausa .wms-emergente__tiempo { animation-play-state: paused; }

@keyframes wms-emergente-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wms-emergente-sale { to { opacity: 0; transform: translateX(24px); } }
@keyframes wms-emergente-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 639.98px) {
    .wms-emergentes { top: 72px; right: 16px; bottom: auto; left: 16px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wms-emergente, .wms-emergente--saliendo { animation: none; }
    .wms-emergente__tiempo { animation: none; display: none; }
}

/* Un filtro que queda solo en su renglon no se estira a todo el ancho de la tarjeta */
.wms-filtros__campo:not(.wms-filtros__campo--ancho) { max-width: 320px; }

/* Catalogos: los botones de cada opcion en gris, como las acciones de una tabla, y el cuerpo de la
   tarjeta a su medida aunque la de al lado sea mas alta */
body.white-content .wms-catalogo .btn.btn-link { color: var(--wms-gris-500); }
body.white-content .wms-catalogo .btn.btn-link:hover { background: var(--wms-gris-100); color: var(--wms-gris-900); }
.wms-catalogo > .card-body { flex: 0 0 auto; }
.wms-emergente__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.wms-emergente__sonido {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--wms-gris-200);
    border-radius: 8px;
    background: #fff;
    color: var(--wms-gris-700);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.wms-emergente__sonido:hover { background: var(--wms-gris-50); }