/*
 * Advance — tema corporativo unificado
 * Azul acero refinado: profesional, legible en móvil y coherente en todas las barras.
 */
:root {
    --wms-primary: #4678A8;
    --wms-primary-light: #5A8FBA;
    --wms-primary-dark: #3A658F;
    --wms-primary-deep: #2E5678;
    --wms-ink: #1E2A36;
    --wms-ink-mid: #2A3847;
    --wms-brand-light: #89C2F0;
    --wms-brand-muted: #6BA3D6;
    --wms-surface: #EEF2F7;
    --wms-surface-card: #FFFFFF;
    --wms-input-bg: #FFFBF0;
    --wms-text-on-primary: #FFFFFF;
    --wms-text-ink: #1A3348;
    /* Texto de cuerpo, texto atenuado y borde de tarjeta (adaptables al tema).
       Antes no existían: las vistas que usaban var(--wms-text...) caían a su
       fallback claro y quedaban ilegibles en modo oscuro. */
    --wms-text: #243240;
    --wms-text-muted: #5A6B7B;
    --wms-border: #D9E1EA;
    --wms-border-soft: #C5D4E3;
    --wms-shadow-bar: 0 2px 10px rgba(30, 42, 54, 0.2);
    --wms-shadow-card: 0 6px 18px rgba(30, 42, 54, 0.08);
    --wms-radius: 10px;
    --wms-menu-bg: #FFFFFF;
    --wms-menu-border: var(--wms-primary);
    --wms-menu-label: #333333;
    --wms-menu-icon: var(--wms-primary);
    --wms-menu-accent: #27ae60;
    --wms-menu-accent-label: #27ae60;
    --wms-menu-active-bg: #e3f2fd;
    --wms-menu-disabled-bg: #fafafa;
    --wms-menu-disabled-border: #dddddd;
    --wms-menu-link: var(--wms-primary);
    --wms-menu-link-hover: #1a4a75;
    --wms-menu-sep: #bbbbbb;
    --wms-overlay-bg: rgba(255, 255, 255, 0.82);
    --wms-overlay-msg: #1a4a75;
    --wms-overlay-icon: var(--wms-primary);
    /* Spinner de carga estándar (símbolo Advance + anillo) — tema claro. */
    --wms-spinner-color: #2475ba;
    --wms-spinner-ring: rgba(36, 117, 186, 0.18);
    --wms-spinner-ring-accent: #2475ba;
}

body {
    background-color: var(--wms-surface);
}

/* Barra de módulo (home + título) */
.header-system,
.wms-bar-module {
    background: linear-gradient(180deg, var(--wms-primary-light) 0%, var(--wms-primary) 100%);
    color: var(--wms-text-on-primary);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    box-shadow: var(--wms-shadow-bar);
    /* Estándar de presentación: el header azul se alinea con la barra superior
       (mismo margen izquierdo tras el logo, mismo margen derecho) y va redondeado
       a ambos lados. El contenedor de contenido aporta el margen derecho/izquierdo
       (.main-content-fluid-wrapper), por eso aquí solo se suma el desfase del header. */
    margin-left: calc(var(--wms-shell-gap-left, 72px) - var(--wms-shell-content-left, 5px));
    margin-right: 0;
    border-radius: var(--wms-shell-radius, 10px);
}

.wms-bar-title {
    margin: 0;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.05em;
}

.btn-home,
.btn-home-wms {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: var(--wms-text-on-primary);
    margin-right: 12px;
    padding: 6px 11px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

    .btn-home:hover,
    .btn-home:focus,
    .btn-home-wms:hover,
    .btn-home-wms:focus {
        background: rgba(255, 255, 255, 0.14);
        border-color: #fff;
        color: #fff;
        text-decoration: none;
        outline: none;
    }

/* Botón estándar "Regresar" al menú inmediatamente anterior (barra de módulo). */
.btn-regresar-modulo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}


/* Volver al menú Utilidades (toolbars claros en pantallas de utilidades) */
.util-btn-volver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 36px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    border: 1px solid rgba(70, 120, 168, 0.35);
    background: linear-gradient(180deg, var(--wms-surface-card) 0%, var(--wms-surface) 100%);
    color: var(--wms-primary);
    box-shadow: 0 1px 3px rgba(30, 42, 54, 0.08);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.util-btn-volver:hover,
.util-btn-volver:focus {
    border-color: var(--wms-primary);
    background: rgba(70, 120, 168, 0.1);
    color: var(--wms-primary-dark, var(--wms-primary));
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(70, 120, 168, 0.18);
    outline: none;
}

html[data-wms-theme="dark"] .util-btn-volver {
    border-color: rgba(126, 184, 232, 0.35);
    color: var(--wms-brand-light);
    background: linear-gradient(180deg, rgba(45, 45, 48, 0.95) 0%, rgba(37, 37, 38, 0.95) 100%);
}

html[data-wms-theme="dark"] .util-btn-volver:hover,
html[data-wms-theme="dark"] .util-btn-volver:focus {
    border-color: var(--wms-brand-light);
    background: rgba(126, 184, 232, 0.12);
    color: #fff;
}

.util-btn-volver .glyphicon {
    font-size: 12px;
    opacity: 0.9;
}

/* Barra de contexto (sub-ruta / SW activo) */
.wms-bar-context,
.header-context {
    background: linear-gradient(180deg, var(--wms-primary) 0%, var(--wms-primary-dark) 100%);
    color: var(--wms-text-on-primary);
    padding: 8px 12px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 6px rgba(58, 101, 143, 0.28);
}

    .wms-bar-context .ctx-sep,
    .header-context .ctx-sep {
        opacity: 0.72;
        margin: 0 8px;
        font-weight: 400;
    }

/* Paneles y títulos de sección */
.panel-erp {
    background: var(--wms-surface-card);
    border: 1px solid var(--wms-border-soft);
    border-radius: var(--wms-radius);
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: var(--wms-shadow-card);
}

.panel-titulo {
    color: var(--wms-primary);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    border-bottom: 2px solid var(--wms-primary);
    padding-bottom: 6px;
}

/* ===== Selección de bodega — tarjetas ===== */
.bodega-page .header-system {
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

.bodega-page .bod-head-left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.bodega-page .bod-contador {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.bodega-page .bodega-toolbar {
    flex-shrink: 0;
    padding: 12px;
    background: var(--wms-surface);
    border-bottom: 1px solid var(--wms-border-soft);
}

.bodega-page .bodega-buscar {
    width: 100%;
    height: 40px;
    border: 1px solid var(--wms-border-soft);
    border-radius: 999px;
    background: var(--wms-surface-card);
    color: var(--wms-text-ink);
    font-size: 14px;
    box-shadow: var(--wms-shadow-card);
}

    .bodega-page .bodega-buscar:focus {
        border-color: var(--wms-primary);
        box-shadow: 0 0 0 3px rgba(70, 120, 168, 0.18);
        outline: none;
    }

.bodega-page .bodega-cards-scroll {
    padding: 14px 16px 24px;
}

.bodega-page .bod-subtitulo {
    margin: 0 auto 14px;
    max-width: 1280px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wms-text-muted);
}

.bodega-page .bodega-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
}

.bodega-page .bod-cargando,
.bodega-page .bod-vacio {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--wms-text-muted);
    padding: 44px 16px;
    font-size: 14px;
}

    .bodega-page .bod-cargando .glyphicon,
    .bodega-page .bod-vacio .glyphicon {
        font-size: 30px;
        display: block;
        margin-bottom: 10px;
        opacity: 0.6;
    }

/* --- Tarjeta --- */
.bodega-page .bod-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--wms-surface-card);
    border: 1px solid var(--wms-border-soft);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--wms-shadow-card);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

    .bodega-page .bod-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(30, 42, 54, 0.18);
        border-color: var(--wms-primary-light);
    }

    .bodega-page .bod-card:focus {
        outline: none;
        border-color: var(--wms-primary);
        box-shadow: 0 0 0 3px rgba(70, 120, 168, 0.25);
    }

    .bodega-page .bod-card:active {
        transform: translateY(-1px) scale(0.997);
    }

.bodega-page .bod-card-media {
    position: relative;
    height: 132px;
    background: linear-gradient(135deg, var(--wms-primary-light) 0%, var(--wms-primary-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bodega-page .bod-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bodega-page .bod-card-media-ph {
    color: rgba(255, 255, 255, 0.9);
    font-size: 46px;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.bodega-page .bod-card-id {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
    background: rgba(17, 28, 40, 0.55);
    padding: 3px 9px;
    border-radius: 999px;
}

.bodega-page .bod-card-activa {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff7ed;
    background: linear-gradient(145deg, #f97316 0%, #c2410c 100%);
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(124, 45, 18, 0.45);
}

.bodega-page .bod-card-body {
    flex: 1 1 auto;
    padding: 12px 14px 6px;
}

.bodega-page .bod-card-nom {
    font-size: 15px;
    font-weight: 700;
    color: var(--wms-text-ink);
    line-height: 1.25;
    margin-bottom: 5px;
    word-break: break-word;
}

.bodega-page .bod-card-meta {
    font-size: 11.5px;
    color: var(--wms-text-muted);
    line-height: 1.5;
}

    .bodega-page .bod-card-meta > div {
        display: flex;
        align-items: baseline;
        gap: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bodega-page .bod-card-meta .glyphicon {
        font-size: 10px;
        opacity: 0.7;
        top: 1px;
    }

.bodega-page .bod-card-cta {
    padding: 8px 14px 13px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wms-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bodega-page .bod-card:hover .bod-card-cta {
    color: var(--wms-primary-dark);
}

/* Bodega activa: look estándar .wms-seleccionado (texto crema sobre el degradado naranja) */
.bodega-page .bod-card.wms-seleccionado .bod-card-nom,
.bodega-page .bod-card.wms-seleccionado .bod-card-meta,
.bodega-page .bod-card.wms-seleccionado .bod-card-cta,
.bodega-page .bod-card.wms-seleccionado:hover .bod-card-cta {
    color: #fff7ed;
}

.bodega-page .bod-card.wms-seleccionado .bod-card-meta {
    opacity: 0.92;
}

/* Estado "seleccionando" mientras se cambia de bodega */
.bodega-page .bod-card-cargando {
    opacity: 0.6;
    pointer-events: none;
}

/* Botones primarios Bootstrap dentro de WMS */
.btn-wms-primary,
.btn-primary.wms-btn {
    background: linear-gradient(180deg, var(--wms-primary-light) 0%, var(--wms-primary) 100%);
    border-color: var(--wms-primary-dark);
    color: var(--wms-text-on-primary);
    font-weight: 700;
}

    .btn-wms-primary:hover,
    .btn-wms-primary:focus,
    .btn-primary.wms-btn:hover,
    .btn-primary.wms-btn:focus {
        background: linear-gradient(180deg, var(--wms-primary) 0%, var(--wms-primary-dark) 100%);
        border-color: var(--wms-primary-deep);
        color: var(--wms-text-on-primary);
    }

/* Tablas — encabezado oscuro coordinado */
.wms-table-head,
.table thead.wms-table-head {
    background-color: var(--wms-ink-mid) !important;
    color: var(--wms-text-on-primary) !important;
}

/* Tablas Bootstrap — modo oscuro (WMS, picking, bodegas, modales, etc.) */
html[data-wms-theme="dark"] .table,
body.wms-theme-dark .table {
    color: var(--wms-text-ink);
    background-color: var(--wms-surface-card);
}

html[data-wms-theme="dark"] .table > thead > tr > th,
html[data-wms-theme="dark"] .table > thead th,
body.wms-theme-dark .table > thead > tr > th,
body.wms-theme-dark .table > thead th {
    background-color: #2d2d30 !important;
    color: #7eb8e8 !important;
    border-color: var(--wms-border-soft) !important;
}

html[data-wms-theme="dark"] .table-bordered > thead > tr > th,
html[data-wms-theme="dark"] .table-bordered > tbody > tr > th,
html[data-wms-theme="dark"] .table-bordered > tbody > tr > td,
body.wms-theme-dark .table-bordered > thead > tr > th,
body.wms-theme-dark .table-bordered > tbody > tr > th,
body.wms-theme-dark .table-bordered > tbody > tr > td {
    border-color: var(--wms-border-soft) !important;
}

html[data-wms-theme="dark"] .table tbody tr,
body.wms-theme-dark .table tbody tr {
    background-color: var(--wms-surface-card);
}

html[data-wms-theme="dark"] .table tbody td,
body.wms-theme-dark .table tbody td {
    color: var(--wms-text-ink);
}

html[data-wms-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
body.wms-theme-dark .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

html[data-wms-theme="dark"] .table-hover > tbody > tr:hover,
body.wms-theme-dark .table-hover > tbody > tr:hover {
    background-color: #264466;
}

html[data-wms-theme="dark"] .table-responsive,
body.wms-theme-dark .table-responsive {
    border-color: var(--wms-border-soft);
    background-color: var(--wms-surface-card);
}

/* Modales */
.wms-modal-header {
    background: linear-gradient(180deg, var(--wms-primary-light) 0%, var(--wms-primary) 100%);
    color: var(--wms-text-on-primary);
}

.wms-modal-header-dark {
    background: linear-gradient(180deg, var(--wms-ink-mid) 0%, var(--wms-ink) 100%);
    color: var(--wms-text-on-primary);
}

.wms-modal-header-danger {
    background: linear-gradient(180deg, #d9534f 0%, #c9302c 100%);
    color: var(--wms-text-on-primary);
}

/* Tema oscuro global (piloto — ampliar módulo a módulo) */
html[data-wms-theme="dark"] {
    --wms-surface: #141414;
    --wms-surface-card: #252526;
    --wms-input-bg: #2d2d2d;
    --wms-text-ink: #e8eef4;
    --wms-text: #d6dee6;
    --wms-text-muted: #9aa7b5;
    --wms-border: #41464d;
    --wms-border-soft: #3c3c3c;
    --wms-shadow-card: 0 6px 18px rgba(0, 0, 0, 0.35);
    --wms-menu-bg: var(--wms-surface-card);
    --wms-menu-border: var(--wms-primary-light);
    --wms-menu-label: #e8eef4;
    --wms-menu-icon: var(--wms-brand-light);
    --wms-menu-accent: #69F0AE;
    --wms-menu-accent-label: #69F0AE;
    --wms-menu-active-bg: #2a3f54;
    --wms-menu-disabled-bg: #1e1e1e;
    --wms-menu-disabled-border: #444444;
    --wms-menu-link: #7eb8e8;
    --wms-menu-link-hover: #a8d4f5;
    --wms-menu-sep: #666666;
    --wms-overlay-bg: rgba(0, 0, 0, 0.72);
    --wms-overlay-msg: #e8eef4;
    --wms-overlay-icon: var(--wms-brand-light);
    /* Spinner de carga estándar (símbolo Advance + anillo) — tema oscuro. */
    --wms-spinner-color: #89C2F0;
    --wms-spinner-ring: rgba(137, 194, 240, 0.22);
    --wms-spinner-ring-accent: #89C2F0;
}

html[data-wms-theme="dark"] body,
body.wms-theme-dark {
    background-color: var(--wms-surface);
    color: var(--wms-text-ink);
}

html[data-wms-theme="dark"] .panel-erp,
body.wms-theme-dark .panel-erp {
    background: var(--wms-surface-card);
    border-color: var(--wms-border-soft);
    color: var(--wms-text-ink);
}

html[data-wms-theme="dark"] .menu-item,
body.wms-theme-dark .menu-item {
    background: var(--wms-menu-bg);
    border-color: var(--wms-menu-border);
    color: var(--wms-menu-label);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

html[data-wms-theme="dark"] .menu-item > span:not(.glyphicon),
html[data-wms-theme="dark"] .menu-item span.menu-item-label,
body.wms-theme-dark .menu-item > span:not(.glyphicon),
body.wms-theme-dark .menu-item span.menu-item-label {
    color: var(--wms-menu-label);
}

html[data-wms-theme="dark"] .menu-item .glyphicon,
html[data-wms-theme="dark"] .menu-item .menu-icon-svg,
body.wms-theme-dark .menu-item .glyphicon,
body.wms-theme-dark .menu-item .menu-icon-svg {
    color: var(--wms-menu-icon);
}

html[data-wms-theme="dark"] .menu-item:active,
body.wms-theme-dark .menu-item:active {
    background-color: var(--wms-menu-active-bg);
    border-color: var(--wms-menu-border);
}

html[data-wms-theme="dark"] .menu-disabled,
body.wms-theme-dark .menu-disabled {
    background-color: var(--wms-menu-disabled-bg);
    border-color: var(--wms-menu-disabled-border);
}

html[data-wms-theme="dark"] .menu-top-links a,
body.wms-theme-dark .menu-top-links a {
    color: var(--wms-menu-link);
}

html[data-wms-theme="dark"] .menu-top-links a:hover,
body.wms-theme-dark .menu-top-links a:hover {
    color: var(--wms-menu-link-hover);
}

html[data-wms-theme="dark"] .menu-top-sep,
body.wms-theme-dark .menu-top-sep {
    color: var(--wms-menu-sep);
}

html[data-wms-theme="dark"] .bodega-page .bodega-toolbar,
body.wms-theme-dark .bodega-page .bodega-toolbar {
    background: var(--wms-surface);
    border-bottom-color: var(--wms-border-soft);
}

html[data-wms-theme="dark"] .bodega-page .bodega-buscar,
body.wms-theme-dark .bodega-page .bodega-buscar {
    background-color: var(--wms-input-bg);
    border-color: var(--wms-border-soft);
    color: var(--wms-text-ink);
}

html[data-wms-theme="dark"] .bodega-page .bodega-buscar::placeholder,
body.wms-theme-dark .bodega-page .bodega-buscar::placeholder {
    color: #9aa5b1;
}

html[data-wms-theme="dark"] .bodega-page .bod-card:hover,
body.wms-theme-dark .bodega-page .bod-card:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--wms-primary-light);
}

/* Configuración / parámetros de enlace */
body.config-page {
    background-color: #eceff1;
    color: #333;
}

.config-card {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    color: #333;
}

.config-card-title,
.config-seccion-titulo {
    color: #4678A8;
}

.config-field-label {
    color: #333;
}

.config-intro {
    color: #555;
}

.config-help {
    color: #666;
}

.config-tema-opcion {
    color: inherit;
}

html[data-wms-theme="dark"] body.config-page,
body.wms-theme-dark.config-page {
    background: var(--wms-surface);
    color: var(--wms-text-ink);
}

html[data-wms-theme="dark"] .config-card,
body.wms-theme-dark .config-card {
    background: var(--wms-surface-card);
    color: var(--wms-text-ink);
    box-shadow: var(--wms-shadow-card);
}

html[data-wms-theme="dark"] .config-card-title,
body.wms-theme-dark .config-card-title {
    color: #7eb8e8;
    border-bottom-color: #4678A8;
}

html[data-wms-theme="dark"] .config-field-label,
body.wms-theme-dark .config-field-label {
    color: #7eb8e8;
}

html[data-wms-theme="dark"] .config-seccion-titulo,
body.wms-theme-dark .config-seccion-titulo {
    color: #7eb8e8;
    border-top-color: var(--wms-border-soft);
}

html[data-wms-theme="dark"] .config-intro,
html[data-wms-theme="dark"] .config-help,
body.wms-theme-dark .config-intro,
body.wms-theme-dark .config-help {
    color: #9aa5b1;
}

html[data-wms-theme="dark"] .config-card .option-box label,
body.wms-theme-dark .config-card .option-box label {
    color: var(--wms-text-ink);
}

html[data-wms-theme="dark"] .config-tema-opcion,
body.wms-theme-dark .config-tema-opcion {
    color: var(--wms-text-ink);
}

html[data-wms-theme="dark"] .config-card .form-control,
body.wms-theme-dark .config-card .form-control {
    background-color: var(--wms-input-bg);
    border-color: var(--wms-border-soft);
    color: var(--wms-text-ink);
}

html[data-wms-theme="dark"] .config-card label,
body.wms-theme-dark .config-card label {
    color: var(--wms-text-ink);
}

html[data-wms-theme="dark"] .config-card .help-block,
body.wms-theme-dark .config-card .help-block {
    color: #9aa5b1;
}

html[data-wms-theme="dark"] .config-card .btn-default,
body.wms-theme-dark .config-card .btn-default {
    background-color: #3c3c3c;
    border-color: #555;
    color: #e8eef4;
}

html[data-wms-theme="dark"] .config-card .btn-default:hover,
html[data-wms-theme="dark"] .config-card .btn-default:focus,
body.wms-theme-dark .config-card .btn-default:hover,
body.wms-theme-dark .config-card .btn-default:focus {
    background-color: #4a4a4a;
    border-color: #666;
    color: #fff;
}

/* Login */
html[data-wms-theme="dark"] body.login-page,
body.wms-theme-dark.login-page {
    background: linear-gradient(160deg, #0f1114 0%, #141820 45%, #1a1f28 100%);
    color: #e8eef4;
    color-scheme: dark;
    --login-input-bg: #1e1e1e;
    --login-input-color: #e8eef4;
    --login-input-border: #454545;
    --login-input-placeholder: #888;
    --login-input-focus-border: #5a8fba;
    --login-input-focus-shadow: rgba(90, 143, 186, 0.28);
    --login-input-autofill-bg: #1e1e1e;
    --login-input-autofill-color: #e8eef4;
}

html[data-wms-theme="dark"] body.login-page .login-card,
body.wms-theme-dark.login-page .login-card {
    background: #252526;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

html[data-wms-theme="dark"] body.login-page .login-field-label,
body.wms-theme-dark.login-page .login-field-label {
    color: #7eb8e8;
}

html[data-wms-theme="dark"] body.login-page .login-input-icon,
body.wms-theme-dark.login-page .login-input-icon,
html[data-wms-theme="dark"] body.login-page .btn-ver-clave,
body.wms-theme-dark.login-page .btn-ver-clave {
    color: #7eb8e8;
}

html[data-wms-theme="dark"] body.login-page .btn-ver-clave:hover,
html[data-wms-theme="dark"] body.login-page .btn-ver-clave:focus,
body.wms-theme-dark.login-page .btn-ver-clave:hover,
body.wms-theme-dark.login-page .btn-ver-clave:focus {
    color: #a8d4f5;
    background-color: rgba(126, 184, 232, 0.12);
}

html[data-wms-theme="dark"] body.login-page .form-control-custom,
body.wms-theme-dark.login-page .form-control-custom,
html[data-wms-theme="dark"] body.login-page input[type="password"].form-control-custom,
body.wms-theme-dark.login-page input[type="password"].form-control-custom {
    background-color: var(--login-input-bg) !important;
    border-color: var(--login-input-border);
    color: var(--login-input-color);
}

html[data-wms-theme="dark"] body.login-page .form-control-custom:focus,
body.wms-theme-dark.login-page .form-control-custom:focus {
    border-color: var(--login-input-focus-border);
    box-shadow: 0 0 0 3px var(--login-input-focus-shadow);
    background-color: var(--login-input-bg) !important;
    color: var(--login-input-color);
}

html[data-wms-theme="dark"] body.login-page .form-control-custom::placeholder,
body.wms-theme-dark.login-page .form-control-custom::placeholder {
    color: var(--login-input-placeholder);
}

html[data-wms-theme="dark"] body.login-page .form-control-custom:-webkit-autofill,
html[data-wms-theme="dark"] body.login-page .form-control-custom:-webkit-autofill:hover,
html[data-wms-theme="dark"] body.login-page .form-control-custom:-webkit-autofill:focus,
html[data-wms-theme="dark"] body.login-page .form-control-custom:-webkit-autofill:active,
html[data-wms-theme="dark"] body.login-page .form-control-custom:autofill,
body.wms-theme-dark.login-page .form-control-custom:-webkit-autofill,
body.wms-theme-dark.login-page .form-control-custom:-webkit-autofill:hover,
body.wms-theme-dark.login-page .form-control-custom:-webkit-autofill:focus,
body.wms-theme-dark.login-page .form-control-custom:-webkit-autofill:active,
body.wms-theme-dark.login-page .form-control-custom:autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--login-input-autofill-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--login-input-autofill-bg) inset !important;
    -webkit-text-fill-color: var(--login-input-autofill-color) !important;
    caret-color: var(--login-input-autofill-color);
    border-color: var(--login-input-border);
}

html[data-wms-theme="dark"] body.login-page .login-olvido-clave,
body.wms-theme-dark.login-page .login-olvido-clave {
    color: #7eb8e8;
}

html[data-wms-theme="dark"] body.login-page .login-olvido-clave:hover,
html[data-wms-theme="dark"] body.login-page .login-olvido-clave:focus,
body.wms-theme-dark.login-page .login-olvido-clave:hover,
body.wms-theme-dark.login-page .login-olvido-clave:focus {
    color: #a8d4f5;
}

html[data-wms-theme="dark"] body.login-page .status-bar,
body.wms-theme-dark.login-page .status-bar {
    background-color: #1e1e1e;
    border-top-color: #3c3c3c;
    color: #c5d0db;
}

html[data-wms-theme="dark"] body.login-page .status-bar-nodo-nombre,
body.wms-theme-dark.login-page .status-bar-nodo-nombre {
    color: #d4dde6;
}

html[data-wms-theme="dark"] body.login-page .btn-link-config:hover,
html[data-wms-theme="dark"] body.login-page .btn-link-config:focus,
body.wms-theme-dark.login-page .btn-link-config:hover,
body.wms-theme-dark.login-page .btn-link-config:focus {
    color: #e8eef4;
}

html[data-wms-theme="dark"] body.login-page .btn-link-config .glyphicon,
body.wms-theme-dark.login-page .btn-link-config .glyphicon {
    color: #7eb8e8;
}

html[data-wms-theme="dark"] body.login-page .login-user-photo-ring,
body.wms-theme-dark.login-page .login-user-photo-ring {
    background: radial-gradient(circle at 50% 42%, #3a3f48 0%, #2a3038 52%, #1e242c 100%);
    box-shadow:
        0 0 0 2px rgba(37, 37, 38, 0.96),
        0 0 16px 5px rgba(70, 120, 168, 0.35),
        0 0 32px 11px rgba(70, 120, 168, 0.18);
}

html[data-wms-theme="dark"] body.login-page .login-user-photo,
body.wms-theme-dark.login-page .login-user-photo {
    border-color: #454545;
    background-color: #333;
}

html[data-wms-theme="dark"] body.login-page .login-user-name,
body.wms-theme-dark.login-page .login-user-name {
    color: #7eb8e8;
}

html[data-wms-theme="dark"] body.login-page .login-version,
body.wms-theme-dark.login-page .login-version {
    color: #9aa5b1;
}

html[data-wms-theme="dark"] body.login-page .login-ingreso-overlay,
body.wms-theme-dark.login-page .login-ingreso-overlay {
    background: var(--wms-overlay-bg);
}

html[data-wms-theme="dark"] body.login-page .login-ingreso-overlay-msg,
body.wms-theme-dark.login-page .login-ingreso-overlay-msg {
    color: var(--wms-overlay-msg);
}

html[data-wms-theme="dark"] body.login-page .login-ingreso-overlay .glyphicon-hourglass,
body.wms-theme-dark.login-page .login-ingreso-overlay .glyphicon-hourglass {
    color: var(--wms-overlay-icon);
}

html[data-wms-theme="dark"] body.login-page .login-modal-olvido-clave .modal-content,
body.wms-theme-dark.login-page .login-modal-olvido-clave .modal-content {
    background: #252526;
    color: #e8eef4;
}

html[data-wms-theme="dark"] body.login-page .login-modal-olvido-clave .modal-body,
body.wms-theme-dark.login-page .login-modal-olvido-clave .modal-body {
    color: #c5d0db;
}

html[data-wms-theme="dark"] body.login-page .login-modal-olvido-email,
body.wms-theme-dark.login-page .login-modal-olvido-email {
    background: #1e1e1e;
    border-color: #454545;
    color: #e8eef4;
}

html[data-wms-theme="dark"] body.login-page .login-modal-olvido-nota,
body.wms-theme-dark.login-page .login-modal-olvido-nota {
    color: #9aa5b1;
}

html[data-wms-theme="dark"] body.login-page .login-modal-olvido-clave .modal-footer,
body.wms-theme-dark.login-page .login-modal-olvido-clave .modal-footer {
    background: #2d2d2d;
    border-top-color: #3c3c3c;
}

html[data-wms-theme="dark"] body.login-page .login-modal-olvido-clave .btn-default,
body.wms-theme-dark.login-page .login-modal-olvido-clave .btn-default {
    background: #3c3c3c;
    border-color: #555;
    color: #e0e0e0;
}

/* Botón INGRESAR: azul un poco más luminoso para que "respire" sobre la tarjeta gris. */
html[data-wms-theme="dark"] body.login-page .btn-ingresar,
body.wms-theme-dark.login-page .btn-ingresar {
    background-color: #5a8fba;
}

html[data-wms-theme="dark"] body.login-page .btn-ingresar:hover,
html[data-wms-theme="dark"] body.login-page .btn-ingresar:focus,
body.wms-theme-dark.login-page .btn-ingresar:hover,
body.wms-theme-dark.login-page .btn-ingresar:focus {
    background-color: #6ba0cb;
    color: #ffffff;
}

/* Indicador de ambiente: tonos más luminosos para mejor contraste en oscuro. */
html[data-wms-theme="dark"] body.login-page .login-ambiente-rea,
body.wms-theme-dark.login-page .login-ambiente-rea {
    color: #2fbd7e;
}

html[data-wms-theme="dark"] body.login-page .login-ambiente-rea .status-bar-ambiente-dot,
body.wms-theme-dark.login-page .login-ambiente-rea .status-bar-ambiente-dot {
    background-color: #2fbd7e;
    box-shadow: 0 0 0 2px rgba(47, 189, 126, 0.28);
}

html[data-wms-theme="dark"] body.login-page .login-ambiente-pru,
body.wms-theme-dark.login-page .login-ambiente-pru {
    color: #e6b93d;
}

html[data-wms-theme="dark"] body.login-page .login-ambiente-pru .status-bar-ambiente-dot,
body.wms-theme-dark.login-page .login-ambiente-pru .status-bar-ambiente-dot {
    background-color: #e6b93d;
    box-shadow: 0 0 0 2px rgba(230, 185, 61, 0.28);
}

html[data-wms-theme="dark"] body.login-page .login-ambiente-sop,
body.wms-theme-dark.login-page .login-ambiente-sop {
    color: #4ba9e8;
}

html[data-wms-theme="dark"] body.login-page .login-ambiente-sop .status-bar-ambiente-dot,
body.wms-theme-dark.login-page .login-ambiente-sop .status-bar-ambiente-dot {
    background-color: #4ba9e8;
    box-shadow: 0 0 0 2px rgba(75, 169, 232, 0.28);
}

html[data-wms-theme="dark"] .config-ips-page .config-ips-toolbar .btn-default,
body.wms-theme-dark .config-ips-page .config-ips-toolbar .btn-default {
    background: #3c3c3c;
    border-color: #555;
    color: #e0e0e0;
}

html[data-wms-theme="dark"] .config-ips-page .config-ips-toolbar .btn-default:hover,
html[data-wms-theme="dark"] .config-ips-page .config-ips-toolbar .btn-default:focus,
body.wms-theme-dark .config-ips-page .config-ips-toolbar .btn-default:hover,
body.wms-theme-dark .config-ips-page .config-ips-toolbar .btn-default:focus {
    background: #4a4a4a;
    border-color: #666;
    color: #fff;
}

.sql-editor-overlay,
.doc-consulta-overlay,
.item-consulta-overlay,
.utilidades-sql-overlay,
.config-ips-overlay,
.login-ingreso-overlay {
    background: var(--wms-overlay-bg);
}

.sql-editor-overlay-msg,
.doc-consulta-overlay-msg,
.item-consulta-overlay-msg,
.utilidades-sql-overlay-msg,
.config-ips-overlay-msg,
.login-ingreso-overlay-msg {
    color: var(--wms-overlay-msg);
}

/* Modal de alerta / error global */
html[data-wms-theme="dark"] .modal-alerta-dms .modal-content,
body.wms-theme-dark .modal-alerta-dms .modal-content {
    background: #2d3339;
    color: #e8edf2;
}

html[data-wms-theme="dark"] .modal-alerta-dms .modal-body,
body.wms-theme-dark .modal-alerta-dms .modal-body {
    background: #2d3339;
}

html[data-wms-theme="dark"] .modal-alerta-dms .alerta-dms-mensaje,
body.wms-theme-dark .modal-alerta-dms .alerta-dms-mensaje {
    color: #e8edf2;
}

html[data-wms-theme="dark"] .modal-alerta-dms .modal-footer,
body.wms-theme-dark .modal-alerta-dms .modal-footer {
    background: #252a30;
    border-top-color: #3c444c;
}

/* ============================================================
   Overlay de navegación: reloj de arena al abrir cualquier opción
   ============================================================ */
.wms-nav-overlay {
    display: none;
    position: fixed;
    /* Cobertura completa con longhand (no 'inset': algunos motores embebidos/antiguos no lo aplican
       y el overlay se colapsa arriba-izquierda, dejando el reloj pegado a la izquierda). Además
       width/height al 100% del viewport como red de seguridad: si el motor ignora el longhand, el
       overlay igual ocupa toda la pantalla y el spinner queda centrado (no pegado arriba-izquierda). */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200000;
    background: var(--wms-overlay-bg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.wms-nav-overlay.visible {
    display: flex;
}

.wms-nav-overlay-msg {
    margin-top: 12px;
    color: var(--wms-overlay-msg);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================================
   Spinner de carga ESTÁNDAR (única fuente de verdad) — símbolo
   Advance con pulso suave + anillo girando. Úsalo en cualquier
   overlay de carga del sistema:
       <span class="wms-spinner-advance" aria-hidden="true"></span>
   Tamaño configurable con --wms-spinner-size (def. 60px).
   ============================================================ */
.wms-spinner-advance {
    --wms-spinner-size: 60px;
    position: relative;
    display: inline-block;
    width: var(--wms-spinner-size);
    height: var(--wms-spinner-size);
    flex: 0 0 auto;
}

/* Símbolo Advance (swoosh) QUIETO en el centro: se pinta con máscara para poder
   recolorearlo por tema (azul en claro, celeste en oscuro). */
.wms-spinner-advance::before {
    content: "";
    position: absolute;
    top: 18%;
    left: 12%;
    right: 12%;
    bottom: 18%;
    background-color: var(--wms-spinner-color);
    /* SVG EN LÍNEA (data URI), no archivo externo: en móvil WebKit/PWA el
       url("advance-swoosh.svg") a veces NO carga (service worker/caché/ruta
       relativa) y, al fallar la máscara, WebKit recorta el ::before a nada → se
       veía solo el anillo (círculo) sin el logo dentro. Con el SVG embebido la
       máscara no depende de la red. Lleva width/height explícitos para que
       "mask-size: contain" siempre lo escale dentro del círculo (el shorthand
       "mask: ..." no lo parsea bien WebKit móvil; por eso longhand). */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='830' height='663.18' viewBox='0 0 830 663.18'%3E%3Cpath d='M789.05,50.72c-4.89-1.15-10.11-1.35-15.43-.35l-86.11,16.14-301.38,358.36c-8.71,10.35-25.08,8.8-31.69-3-3.93-7.02-3.1-15.74,2.08-21.9L627.5,77.76l-60.01,11.25-281.11,334.27c-8.67,10.3-24.96,8.76-31.53-2.99h0c-3.91-6.99-3.09-15.66,2.07-21.79L507.76,100.2l-60.55,11.35-134.92,160.43c-8.73,10.38-25.14,8.82-31.77-3.01-3.94-7.04-3.11-15.78,2.08-21.95l104.44-124.19-269.03,50.43c-23.78,8.45-35.14,36.69-22.31,59.58l208.48,371.83c14.34,25.58,46.81,32.09,69.67,16.92L807.22,106.27c17.01-20.58,4.67-49.7-18.16-55.55Z'/%3E%3Cpath d='M52.74,431.5c-9.01-38.85,22.04-83.12,79.56-123.37-27.65,27.29-40.91,55.29-35.02,80.69,16.19,69.8,170.75,93.58,345.23,53.11,174.47-40.47,302.79-129.86,286.6-199.66-2.02-8.7-6.19-16.68-12.27-23.92,22.61,12.88,37.33,29.45,41.95,49.38,18.09,78-125.29,177.89-320.26,223.12-194.97,45.22-367.69,18.65-385.78-59.35Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='830' height='663.18' viewBox='0 0 830 663.18'%3E%3Cpath d='M789.05,50.72c-4.89-1.15-10.11-1.35-15.43-.35l-86.11,16.14-301.38,358.36c-8.71,10.35-25.08,8.8-31.69-3-3.93-7.02-3.1-15.74,2.08-21.9L627.5,77.76l-60.01,11.25-281.11,334.27c-8.67,10.3-24.96,8.76-31.53-2.99h0c-3.91-6.99-3.09-15.66,2.07-21.79L507.76,100.2l-60.55,11.35-134.92,160.43c-8.73,10.38-25.14,8.82-31.77-3.01-3.94-7.04-3.11-15.78,2.08-21.95l104.44-124.19-269.03,50.43c-23.78,8.45-35.14,36.69-22.31,59.58l208.48,371.83c14.34,25.58,46.81,32.09,69.67,16.92L807.22,106.27c17.01-20.58,4.67-49.7-18.16-55.55Z'/%3E%3Cpath d='M52.74,431.5c-9.01-38.85,22.04-83.12,79.56-123.37-27.65,27.29-40.91,55.29-35.02,80.69,16.19,69.8,170.75,93.58,345.23,53.11,174.47-40.47,302.79-129.86,286.6-199.66-2.02-8.7-6.19-16.68-12.27-23.92,22.61,12.88,37.33,29.45,41.95,49.38,18.09,78-125.29,177.89-320.26,223.12-194.97,45.22-367.69,18.65-385.78-59.35Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Anillo de progreso que GIRA alrededor del símbolo (siempre, aunque el sistema
   tenga "reducir movimiento": es un indicador de carga y debe girar). */
.wms-spinner-advance::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid var(--wms-spinner-ring);
    border-top-color: var(--wms-spinner-ring-accent);
    animation: wms-spinner-spin 0.9s linear infinite;
}

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

/* ============================================================
   Botón "X" para limpiar campos de búsqueda (global)
   ============================================================ */
.wms-search-clear-wrap {
    position: relative;
    box-sizing: border-box;
}

.wms-search-clear-wrap > input.wms-search-clear-input {
    width: 100%;
}

/* Estándar unificado: deja espacio para la lupa (izq) y la X (der) */
input.wms-search-clear-input.wms-search-clear-input {
    padding-left: 34px !important;
    padding-right: 34px !important;
}

input.wms-search-clear-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

input.wms-search-clear-input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

/* Lupa izquierda estandarizada */
.wms-search-ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b97a6;
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
    z-index: 4;
}

html[data-wms-theme="dark"] .wms-search-ico,
body.wms-theme-dark .wms-search-ico {
    color: #9aa7b5;
}

/* Botón X para limpiar */
.wms-search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(120, 132, 148, 0.16);
    color: #6b7685;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    z-index: 5;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.wms-search-clear-wrap.has-value > .wms-search-clear-btn,
.wms-search-clear-host.has-value > .wms-search-clear-btn {
    display: inline-flex;
}

.wms-search-clear-btn:hover,
.wms-search-clear-btn:focus {
    background: #e7515f;
    color: #fff;
    outline: none;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.35);
}

.wms-search-clear-btn:active {
    transform: translateY(-50%) scale(0.86);
}

html[data-wms-theme="dark"] .wms-search-clear-btn,
body.wms-theme-dark .wms-search-clear-btn {
    background: rgba(255, 255, 255, 0.14);
    color: #c7d0da;
}

html[data-wms-theme="dark"] .wms-search-clear-btn:hover,
html[data-wms-theme="dark"] .wms-search-clear-btn:focus,
body.wms-theme-dark .wms-search-clear-btn:hover,
body.wms-theme-dark .wms-search-clear-btn:focus {
    background: #d0454f;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/*
 * Estado "seleccionado" estándar de Advance.
 * Mismo look que la tarjeta en edición/pendiente del programa de Configuración de IPs:
 * degradado naranja, borde naranja y glow. Aplíquelo a cualquier elemento que deba
 * verse seleccionado (tarjetas, recuadros, chips, filas, etc.). No fija el radio del
 * borde para respetar la forma del elemento.
 */
/*
 * Variables del estado "seleccionado". Son los VALORES POR DEFECTO (el degradado naranja de
 * siempre, por tema). El usuario puede personalizar el color desde "Mi perfil > Mi configuración";
 * esa personalización sobrescribe estas variables como estilo inline en <html> (window.WmsPersonalizacion),
 * de modo que prevalece sobre ambos temas. "Restaurar predeterminado" quita el inline y vuelve aquí.
 */
:root {
    --wms-sel-bg: linear-gradient(145deg, #c2410c 0%, #7c2d12 100%);
    --wms-sel-border: rgba(251, 146, 60, 0.75);
    --wms-sel-shadow: 0 0 0 1px rgba(251, 146, 60, 0.35), 0 8px 20px rgba(124, 45, 18, 0.28);
    --wms-sel-text: #fff7ed;
}

html[data-wms-theme="dark"],
body.wms-theme-dark {
    --wms-sel-bg: linear-gradient(145deg, #9a3412 0%, #431407 100%);
    --wms-sel-border: rgba(251, 146, 60, 0.7);
    --wms-sel-shadow: 0 0 0 1px rgba(251, 146, 60, 0.35), 0 8px 22px rgba(0, 0, 0, 0.35);
    --wms-sel-text: #fff7ed;
}

.wms-seleccionado {
    background: var(--wms-sel-bg) !important;
    border-color: var(--wms-sel-border) !important;
    box-shadow: var(--wms-sel-shadow) !important;
    color: var(--wms-sel-text) !important;
}