/*
 * 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);
}

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 */
.bodega-page .search-bodega-box {
    padding: 10px;
    background-color: var(--wms-bodega-search-bg, #f8f9fa);
    border-bottom: 1px solid var(--wms-border-soft);
}

.bodega-page .bodega-panel {
    border: 1px solid var(--wms-border-soft);
    padding: 15px;
    background: var(--wms-surface-card);
}

.bodega-page .bodega-lbl-title {
    font-size: 11px;
    font-weight: bold;
    color: var(--wms-bodega-label, #555);
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
}

.bodega-page .bodega-table-wrap {
    border: 1px solid var(--wms-border-soft);
    border-radius: 4px;
}

.bodega-page .fila-bodega {
    cursor: pointer;
    transition: background 0.2s;
}

    .bodega-page .fila-bodega:active {
        background-color: var(--wms-bodega-row-press, #e3f2fd) !important;
    }

.bodega-page .fila-bodega-activa {
    background-color: var(--wms-bodega-row-active-bg, #fffdec) !important;
    border-left: 4px solid var(--wms-primary);
}

.bodega-page .fila-bodega-seleccionando {
    background-color: var(--wms-bodega-row-press, #e3f2fd) !important;
}

.bodega-page .bodega-col-id {
    font-weight: bold;
    color: var(--wms-bodega-id-color, #1a237e);
    padding: 12px 8px;
}

.bodega-page .bodega-col-nombre {
    font-weight: 500;
    padding: 12px 8px;
}

/* 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);
    --wms-bodega-search-bg: #2d2d2d;
    --wms-bodega-label: #7eb8e8;
    --wms-bodega-row-press: #264466;
    --wms-bodega-row-active-bg: #2a3520;
    --wms-bodega-id-color: #a8d4f5;
}

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 .form-control,
body.wms-theme-dark .bodega-page .form-control {
    background-color: var(--wms-input-bg);
    border-color: var(--wms-border-soft);
    color: var(--wms-text-ink);
}

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

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

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

html[data-wms-theme="dark"] .bodega-page .fila-bodega-activa,
body.wms-theme-dark .bodega-page .fila-bodega-activa {
    border-left-color: var(--wms-brand-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 .glyphicon-hourglass,
    .doc-consulta-overlay .glyphicon-hourglass,
    .item-consulta-overlay .glyphicon-hourglass,
    .utilidades-sql-overlay .glyphicon-hourglass,
    .config-ips-overlay .glyphicon-hourglass,
    .login-ingreso-overlay .glyphicon-hourglass {
        color: var(--wms-overlay-icon);
    }

.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;
    inset: 0;
    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 .glyphicon {
    font-size: 46px;
    color: var(--wms-overlay-icon);
    animation: wms-nav-spin 1.1s ease-in-out infinite;
}

.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;
}

@keyframes wms-nav-spin {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.92); }
}

/* ============================================================
   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.
 */
.wms-seleccionado {
    background: linear-gradient(145deg, #c2410c 0%, #7c2d12 100%) !important;
    border-color: rgba(251, 146, 60, 0.75) !important;
    box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.35), 0 8px 20px rgba(124, 45, 18, 0.28) !important;
    color: #fff7ed !important;
}

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