/* ==========================================================================
   GESTOR LAN - TEMA KRONO
   Se carga después de style.css y unifica colores, botones y tarjetas con la
   identidad de KRONO (krono.net.pe): fondo #f2f2f7, tinta #111827, rojo #e53e3e.

   Nota de especificidad: el tema claro de style.css usa "body.light-theme .x"
   con !important. Para ganarle en ambos temas sin duplicar cada regla se usa
   el prefijo "body:is(.light-theme, :not(.light-theme))", que tiene la misma
   especificidad (0,1,1) y aparece después.
   ========================================================================== */

/* ==========================================
   1. TOKENS DE COLOR
   ========================================== */
:root {
    --k-ink: #111827;
    --k-red: #e53e3e;
    --k-red-hover: #c53030;
    --k-red-soft: rgba(229, 62, 62, 0.08);
    --k-red-border: rgba(229, 62, 62, 0.3);
    --k-gray: #9ca3af;
    --k-radius: 12px;
    --k-radius-card: 16px;
    --k-font: "Inter", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Tema claro KRONO (por defecto) */
body.light-theme {
    --bg: #f2f2f7;
    --panel: rgba(255, 255, 255, 0.92);
    --panel-alt: #f9fafb;
    --panel-hover: #ffffff;
    --panel-border: rgba(17, 24, 39, 0.08);
    --sidebar-bg: #ffffff;
    --topbar-bg: rgba(255, 255, 255, 0.85);
    --text: #111827;
    --text-muted: #6b7280;
    --text-hover: #111827;
    --primary: #e53e3e;
    --primary-hover: #c53030;
    --bg-soft: rgba(229, 62, 62, 0.08);
    --accent: #e53e3e;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #e53e3e;
    --info: #111827;

    --k-btn-primary-bg: #111827;
    --k-btn-primary-hover: #1f2937;
    --k-btn-primary-text: #ffffff;
    --k-btn-sec-bg: #ffffff;
    --k-btn-sec-hover: #f9fafb;
    --k-btn-sec-border: rgba(17, 24, 39, 0.12);
    --k-btn-sec-text: #111827;
    --k-input-bg: rgba(255, 255, 255, 0.7);
    --k-input-border: rgba(229, 231, 235, 0.9);
    --k-card-shadow: 0 12px 40px rgba(17, 24, 39, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    --k-glow: radial-gradient(circle at 6% 14%, rgba(229, 62, 62, 0.10) 0%, transparent 32%),
              radial-gradient(circle at 96% 96%, rgba(129, 140, 248, 0.08) 0%, transparent 30%);
}

/* Tema oscuro KRONO */
body:not(.light-theme) {
    --bg: #0f1115;
    --bg-mesh: radial-gradient(circle at 6% 10%, rgba(229, 62, 62, 0.12) 0%, transparent 34%),
               radial-gradient(circle at 96% 96%, rgba(129, 140, 248, 0.06) 0%, transparent 30%),
               linear-gradient(180deg, #14171d 0%, #0f1115 100%);
    --panel: rgba(24, 27, 34, 0.92);
    --panel-alt: rgba(31, 35, 44, 0.92);
    --panel-hover: rgba(38, 43, 54, 0.96);
    --panel-border: rgba(255, 255, 255, 0.08);
    --sidebar-bg: rgba(17, 19, 24, 0.97);
    --topbar-bg: rgba(24, 27, 34, 0.88);
    --text: #f3f4f6;
    --text-muted: #9ca3af;
    --text-hover: #ffffff;
    --primary: #e53e3e;
    --primary-hover: #c53030;
    --bg-soft: rgba(229, 62, 62, 0.12);
    --accent: #e53e3e;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #f05252;
    --info: #f3f4f6;

    --k-btn-primary-bg: #f9fafb;
    --k-btn-primary-hover: #ffffff;
    --k-btn-primary-text: #111827;
    --k-btn-sec-bg: rgba(255, 255, 255, 0.04);
    --k-btn-sec-hover: rgba(255, 255, 255, 0.08);
    --k-btn-sec-border: rgba(255, 255, 255, 0.12);
    --k-btn-sec-text: #f3f4f6;
    --k-input-bg: rgba(255, 255, 255, 0.04);
    --k-input-border: rgba(255, 255, 255, 0.12);
    --k-card-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* ==========================================
   2. BASE: FUENTE Y FONDO
   ========================================== */
body,
body button,
body input,
body select,
body textarea {
    font-family: var(--k-font);
}

body.light-theme {
    background: var(--bg) !important;
    background-image: var(--k-glow) !important;
    background-attachment: fixed !important;
}

/* ==========================================
   3. BARRA LATERAL Y BARRA SUPERIOR
   ========================================== */
body:is(.light-theme, :not(.light-theme)) .sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--panel-border);
}

body:is(.light-theme, :not(.light-theme)) .sidebar-title {
    color: var(--k-red);
    letter-spacing: 0.08em;
    font-weight: 800;
}

body:is(.light-theme, :not(.light-theme)) .nav-item {
    color: var(--text-muted);
    border-radius: 10px;
}

body:is(.light-theme, :not(.light-theme)) .nav-item:hover {
    background: var(--k-red-soft);
    color: var(--text);
}

body:is(.light-theme, :not(.light-theme)) .nav-item.active {
    background: var(--k-red-soft);
    color: var(--k-red);
    border-left: 3px solid var(--k-red);
    font-weight: 700;
}

body:is(.light-theme, :not(.light-theme)) .topbar {
    background: var(--topbar-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--k-radius-card);
    box-shadow: var(--k-card-shadow);
}

body:is(.light-theme, :not(.light-theme)) .topbar-left h2 {
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.01em;
}

body:is(.light-theme, :not(.light-theme)) .lbl-filtro {
    color: var(--k-gray);
}

body:is(.light-theme, :not(.light-theme)) .filtro-grupo {
    background: var(--k-btn-sec-bg);
    border: 1px solid var(--k-btn-sec-border);
    border-radius: 10px;
    box-shadow: none;
}

body:is(.light-theme, :not(.light-theme)) .filtro-grupo select,
body:is(.light-theme, :not(.light-theme)) #filtroEtiqueta,
body:is(.light-theme, :not(.light-theme)) #filtroEtiquetaMetricas {
    background: transparent !important;
    color: var(--text) !important;
    border: none !important;
    font-weight: 600;
}

body:is(.light-theme, :not(.light-theme)) .filtro-grupo select option {
    background: var(--panel-hover);
    color: var(--text);
}

body:is(.light-theme, :not(.light-theme)) .badge-page-info {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    font-weight: 600;
}

/* ==========================================
   4. BOTONES: PRINCIPAL, ACENTO, SECUNDARIO Y PELIGRO
   ========================================== */
body:is(.light-theme, :not(.light-theme)) :is(
    .btn-actualizar-todos, .btn-servidores-respaldo, .btn-etiquetas, .btn-pag, .btn-logout,
    .btn-control, .btn-asignar-tags, .btn-guardar, .btn-guardar-bloqueos-master, .btn-cancelar,
    .btn-anadir-item, .btn-whitelist-permitir, .btn-reset-scope, .btn-olvidar-pc, .btn-renombrar-pc) {
    border-radius: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
}

body:is(.light-theme, :not(.light-theme)) :is(
    .btn-actualizar-todos, .btn-servidores-respaldo, .btn-etiquetas, .btn-pag, .btn-logout,
    .btn-control, .btn-asignar-tags, .btn-guardar, .btn-guardar-bloqueos-master, .btn-cancelar,
    .btn-anadir-item, .btn-whitelist-permitir, .btn-reset-scope, .btn-olvidar-pc):active {
    transform: translateY(1px);
}

/* Principal (tinta KRONO) */
body:is(.light-theme, :not(.light-theme)) :is(
    .btn-actualizar-todos, .btn-guardar, .btn-guardar-bloqueos-master, .btn-anadir-item, .btn-whitelist-permitir) {
    background: var(--k-btn-primary-bg) !important;
    color: var(--k-btn-primary-text) !important;
    border: 1px solid var(--k-btn-primary-bg) !important;
}

body:is(.light-theme, :not(.light-theme)) :is(
    .btn-actualizar-todos, .btn-guardar, .btn-guardar-bloqueos-master, .btn-anadir-item, .btn-whitelist-permitir):hover {
    background: var(--k-btn-primary-hover) !important;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.18) !important;
}

/* Acento (rojo KRONO): la acción principal de cada tarjeta */
body:is(.light-theme, :not(.light-theme)) .btn-control {
    background: var(--k-red) !important;
    color: #ffffff !important;
    border: 1px solid var(--k-red) !important;
}

body:is(.light-theme, :not(.light-theme)) .btn-control:hover {
    background: var(--k-red-hover) !important;
    border-color: var(--k-red-hover) !important;
    box-shadow: 0 6px 18px rgba(229, 62, 62, 0.28) !important;
}

/* Secundario (contorno) */
body:is(.light-theme, :not(.light-theme)) :is(
    .btn-servidores-respaldo, .btn-etiquetas, .btn-pag, .btn-asignar-tags, .btn-cancelar,
    .btn-reset-scope, .btn-renombrar-pc) {
    background: var(--k-btn-sec-bg) !important;
    color: var(--k-btn-sec-text) !important;
    border: 1px solid var(--k-btn-sec-border) !important;
}

body:is(.light-theme, :not(.light-theme)) :is(
    .btn-servidores-respaldo, .btn-etiquetas, .btn-pag, .btn-asignar-tags, .btn-cancelar,
    .btn-reset-scope, .btn-renombrar-pc):hover {
    background: var(--k-btn-sec-hover) !important;
    color: var(--k-red) !important;
    border-color: var(--k-red-border) !important;
}

body:is(.light-theme, :not(.light-theme)) .btn-renombrar-pc {
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* Peligro suave */
body:is(.light-theme, :not(.light-theme)) :is(.btn-logout, .btn-olvidar-pc) {
    background: var(--k-red-soft) !important;
    color: var(--k-red) !important;
    border: 1px solid var(--k-red-border) !important;
}

body:is(.light-theme, :not(.light-theme)) :is(.btn-logout, .btn-olvidar-pc):hover {
    background: var(--k-red) !important;
    color: #ffffff !important;
    border-color: var(--k-red) !important;
}

/* Botón flotante "Restaurar orden" con estilos en línea */
body:is(.light-theme, :not(.light-theme)) #btnResetOrdenPantallas,
body:is(.light-theme, :not(.light-theme)) #btnResetOrdenMetricas {
    background: var(--k-btn-sec-bg) !important;
    color: var(--k-btn-sec-text) !important;
    border: 1px solid var(--k-btn-sec-border) !important;
    border-radius: 10px !important;
    font-weight: 600;
}

/* ==========================================
   5. TARJETAS, PANELES Y MODALES
   ========================================== */
body:is(.light-theme, :not(.light-theme)) :is(
    .pc-card, .metric-card, .bloqueo-card, .bloqueos-scope-card, .panel-scope-bar,
    .admin-whitelist-card, .bloqueo-password-card, .modal-card, .modal-dialog,
    .etiqueta-form-card, .etiqueta-list-card) {
    background: var(--panel) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--k-radius-card) !important;
    box-shadow: var(--k-card-shadow) !important;
}

body:is(.light-theme, :not(.light-theme)) :is(.pc-card, .metric-card):hover {
    border-color: var(--k-red-border) !important;
}

body:is(.light-theme, :not(.light-theme)) .modal-dialog-header {
    background: transparent !important;
    border-bottom: 1px solid var(--panel-border) !important;
}

body:is(.light-theme, :not(.light-theme)) .modal-dialog-header h3 {
    color: var(--text) !important;
    font-weight: 800;
}

body:is(.light-theme, :not(.light-theme)) .btn-dialog-close {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
}

body:is(.light-theme, :not(.light-theme)) .btn-dialog-close:hover {
    background: var(--k-red-soft) !important;
    color: var(--k-red) !important;
}

body.light-theme .modal,
body.light-theme .modal-overlay {
    background: rgba(17, 24, 39, 0.35) !important;
    backdrop-filter: blur(6px);
}

/* KPIs: tarjeta blanca con una línea de color arriba */
body:is(.light-theme, :not(.light-theme)) .kpi-card {
    background: var(--panel) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--k-radius-card) !important;
    box-shadow: var(--k-card-shadow) !important;
}

body:is(.light-theme, :not(.light-theme)) .kpi-card.kpi-total { border-top: 3px solid var(--text) !important; }
body:is(.light-theme, :not(.light-theme)) .kpi-card.kpi-activos { border-top: 3px solid var(--success) !important; }
body:is(.light-theme, :not(.light-theme)) .kpi-card.kpi-warning { border-top: 3px solid var(--warning) !important; }
body:is(.light-theme, :not(.light-theme)) .kpi-card.kpi-inactivos { border-top: 3px solid var(--k-gray) !important; }
body:is(.light-theme, :not(.light-theme)) .kpi-card.kpi-danger { border-top: 3px solid var(--k-red) !important; }

body:is(.light-theme, :not(.light-theme)) .kpi-val {
    color: var(--text) !important;
    font-weight: 800;
}

body:is(.light-theme, :not(.light-theme)) .kpi-label {
    color: var(--k-gray) !important;
    letter-spacing: 0.06em;
}

/* ==========================================
   6. FORMULARIOS
   ========================================== */
body:is(.light-theme, :not(.light-theme)) :is(input[type="text"], input[type="password"], input[type="search"], input:not([type]), select, textarea, .bloqueo-add-input, .bloqueo-password-input):not(.filtro-grupo select):not(#filtroEtiqueta):not(#filtroEtiquetaMetricas):not(.acceso-card input) {
    background: var(--k-input-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--k-input-border) !important;
    border-radius: 10px !important;
}

body:is(.light-theme, :not(.light-theme)) :is(input, select, textarea, .bloqueo-add-input, .bloqueo-password-input):focus {
    outline: none !important;
    border-color: var(--k-red) !important;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12) !important;
}

body:is(.light-theme, :not(.light-theme)) :is(input, textarea, .bloqueo-add-input)::placeholder {
    color: var(--k-gray) !important;
}

/* Interruptores y casillas en rojo KRONO */
body:is(.light-theme, :not(.light-theme)) input:checked + .slider-switch {
    background: var(--k-red) !important;
}

body:is(.light-theme, :not(.light-theme)) input[type="checkbox"] {
    accent-color: var(--k-red);
}

/* ==========================================
   7. REGLAS DE BLOQUEO: PESTAÑAS DE ALCANCE Y CHIPS
   ========================================== */
body:is(.light-theme, :not(.light-theme)) .scope-selector-tabs {
    background: var(--panel-alt) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--k-radius) !important;
}

body:is(.light-theme, :not(.light-theme)) .scope-tab-btn {
    background: transparent !important;
    color: var(--text-muted) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

body:is(.light-theme, :not(.light-theme)) .scope-tab-btn:hover {
    color: var(--text) !important;
}

body:is(.light-theme, :not(.light-theme)) .scope-tab-btn.active {
    background: var(--k-btn-primary-bg) !important;
    color: var(--k-btn-primary-text) !important;
}

body:is(.light-theme, :not(.light-theme)) .scope-tag-pill.active {
    background: var(--k-red-soft) !important;
    color: var(--k-red) !important;
    border-color: var(--k-red-border) !important;
}

body:is(.light-theme, :not(.light-theme)) .catalogo-chip.checked {
    border-color: var(--k-red-border) !important;
    background: var(--k-red-soft) !important;
}

body:is(.light-theme, :not(.light-theme)) .bloqueo-badge-count,
body:is(.light-theme, :not(.light-theme)) .whitelist-badge-count,
body:is(.light-theme, :not(.light-theme)) .badge-total-etiquetas {
    background: var(--k-red-soft) !important;
    color: var(--k-red) !important;
    border: 1px solid var(--k-red-border) !important;
}

/* ==========================================
   8. INTERRUPTOR DE TEMA FLOTANTE
   ========================================== */
body:is(.light-theme, :not(.light-theme)) .theme-toggle-floating-container {
    /* Debajo del login (2000) y de los modales (1000+): solo se ve dentro del panel */
    z-index: 900 !important;
    background: var(--panel) !important;
    border: 1px solid var(--panel-border) !important;
    box-shadow: var(--k-card-shadow) !important;
}

/* ==========================================
   9. PANTALLA DE ACCESO: TARJETA NEUMÓRFICA DE DOS PANELES
   Fondo crema con relieve suave, tinta azul marino y detalles dorados.
   La cortina (.acceso-cortina) tapa el panel derecho; con .modo-ayuda se
   desliza a la izquierda, tapa el formulario y deja ver la ayuda.
   ========================================== */
.login-overlay {
    --acc-bg: #ecebe4;
    --acc-panel: #efeee8;
    --acc-osc: rgba(168, 163, 146, 0.55);
    --acc-clara: rgba(255, 255, 255, 0.92);
    --acc-tinta: #1f2a3c;
    --acc-texto: #2b3445;
    --acc-gris: #8f8d84;
    --acc-oro: #c2a36b;
    --acc-dur: 0.7s;
    --acc-curva: cubic-bezier(0.68, 0, 0.32, 1);
    padding: 16px;
    font-family: "Inter", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:is(.light-theme, :not(.light-theme)) .login-overlay {
    background: var(--acc-bg) !important;
    background-image: none !important;
}

.acceso-card {
    position: relative;
    width: 100%;
    max-width: 820px;
    min-height: 480px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--acc-panel);
    border-radius: 22px;
    overflow: hidden;
    color: var(--acc-texto);
    box-shadow: 14px 14px 30px var(--acc-osc), -14px -14px 30px var(--acc-clara);
}

.acceso-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 48px;
    text-align: center;
}

.acceso-panel h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--acc-tinta);
}

/* Fila de tres botones redondos en relieve */
.acceso-chips {
    display: flex;
    gap: 14px;
    margin: 18px 0 14px;
}

.acceso-chips span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--acc-panel);
    color: var(--acc-tinta);
    box-shadow: 4px 4px 9px var(--acc-osc), -4px -4px 9px var(--acc-clara);
}

.acceso-sub {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--acc-gris);
}

.acceso-panel form {
    width: 100%;
    max-width: 290px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.acceso-campo-pass {
    position: relative;
    width: 100%;
}

body:is(.light-theme, :not(.light-theme)) .acceso-card input:is([type="text"], [type="password"]) {
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: none !important;
    border-radius: 10px !important;
    background: var(--acc-panel) !important;
    color: var(--acc-texto) !important;
    font-family: inherit;
    font-size: 13px;
    box-shadow: inset 4px 4px 8px var(--acc-osc), inset -4px -4px 8px var(--acc-clara) !important;
    transition: box-shadow 0.2s ease;
}

body:is(.light-theme, :not(.light-theme)) .acceso-card input:is([type="text"], [type="password"]):focus {
    outline: none !important;
    box-shadow: inset 4px 4px 8px var(--acc-osc), inset -4px -4px 8px var(--acc-clara),
                0 0 0 1.5px var(--acc-oro) !important;
}

body:is(.light-theme, :not(.light-theme)) .acceso-card input::placeholder {
    color: #a9a69b !important;
}

body:is(.light-theme, :not(.light-theme)) .acceso-campo-pass input {
    padding-right: 42px;
}

.acceso-ojo {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #a9a69b;
    cursor: pointer;
}

.acceso-ojo:hover {
    color: var(--acc-tinta);
}

.acceso-enlace {
    margin: 2px 0 6px;
    padding: 2px 0;
    border: none;
    border-bottom: 1px solid transparent;
    background: none;
    color: var(--acc-texto);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.acceso-enlace:hover {
    border-bottom-color: var(--acc-oro);
}

/* Píldora oscura principal */
.acceso-btn {
    min-width: 150px;
    padding: 11px 34px;
    border: 1px solid var(--acc-tinta);
    border-radius: 999px;
    background: var(--acc-tinta);
    color: #f5f1e6;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 5px 5px 12px var(--acc-osc), -5px -5px 12px var(--acc-clara);
    transition: transform 0.12s ease, border-color 0.2s ease, color 0.2s ease;
}

.acceso-btn:hover {
    border-color: var(--acc-oro);
    color: var(--acc-oro);
}

.acceso-btn:active {
    transform: scale(0.97);
}

.acceso-error {
    display: none;
    width: 100%;
    max-width: 290px;
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--acc-panel);
    color: #b4442e;
    font-size: 12px;
    font-weight: 600;
    box-shadow: inset 3px 3px 6px var(--acc-osc), inset -3px -3px 6px var(--acc-clara);
}

/* Ayuda de acceso */
.acceso-pasos {
    max-width: 290px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: paso;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.acceso-pasos li {
    counter-increment: paso;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--acc-texto);
}

.acceso-pasos li::before {
    content: counter(paso);
    flex: 0 0 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--acc-panel);
    color: var(--acc-oro);
    font-size: 11px;
    font-weight: 800;
    box-shadow: 2px 2px 5px var(--acc-osc), -2px -2px 5px var(--acc-clara);
}

/* Cortina deslizante: misma superficie crema, en relieve */
.acceso-cortina {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    width: 50%;
    height: 100%;
    overflow: hidden;
    display: grid;
    background: var(--acc-panel);
    box-shadow: -8px 0 22px var(--acc-osc);
    transition: transform var(--acc-dur) var(--acc-curva), box-shadow var(--acc-dur) var(--acc-curva);
}

.modo-ayuda .acceso-cortina {
    transform: translateX(-100%);
    box-shadow: 8px 0 22px var(--acc-osc);
}

/* Círculos en relieve que se mueven con la cortina */
.acceso-circulo {
    position: absolute;
    border-radius: 50%;
    background: var(--acc-panel);
    pointer-events: none;
    transition: transform var(--acc-dur) var(--acc-curva);
}

.acceso-circulo-1 {
    top: -70px;
    left: -60px;
    width: 190px;
    height: 190px;
    box-shadow: inset 10px 10px 22px var(--acc-osc), inset -10px -10px 22px var(--acc-clara);
}

.acceso-circulo-2 {
    right: -90px;
    bottom: -120px;
    width: 260px;
    height: 260px;
    box-shadow: 10px 10px 24px var(--acc-osc), -10px -10px 24px var(--acc-clara);
}

.modo-ayuda .acceso-circulo-1 {
    transform: translate(250px, 40px);
}

.modo-ayuda .acceso-circulo-2 {
    transform: translate(-270px, -20px);
}

.acceso-cortina-texto {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 48px;
    text-align: center;
    transition: opacity 0.35s ease 0.25s, transform var(--acc-dur) var(--acc-curva), visibility 0s;
}

.acceso-cortina-texto h2 {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    color: var(--acc-tinta);
}

.acceso-cortina-texto p {
    max-width: 260px;
    margin: 0 0 24px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--acc-gris);
}

/* Solo el mensaje activo se ve y recibe foco */
.acceso-cortina-ayuda,
.modo-ayuda .acceso-cortina-hola {
    opacity: 0;
    visibility: hidden;
    transform: translateX(60px);
    transition: opacity 0.25s ease, transform var(--acc-dur) var(--acc-curva), visibility 0s 0.25s;
}

.modo-ayuda .acceso-cortina-hola {
    transform: translateX(-60px);
}

.modo-ayuda .acceso-cortina-ayuda {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s ease 0.25s, transform var(--acc-dur) var(--acc-curva), visibility 0s;
}

/* Píldora con contorno de la cortina */
.acceso-btn-borde {
    min-width: 150px;
    padding: 10px 30px;
    border: 1px solid var(--acc-tinta);
    border-radius: 999px;
    background: var(--acc-panel);
    color: var(--acc-tinta);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 4px 4px 10px var(--acc-osc), -4px -4px 10px var(--acc-clara);
    transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.acceso-btn-borde:hover {
    background: var(--acc-tinta);
    color: #f5f1e6;
}

.acceso-btn-borde:active {
    transform: scale(0.97);
}

/* El panel tapado por la cortina no debe recibir foco */
.acceso-card:not(.modo-ayuda) .acceso-panel-ayuda,
.modo-ayuda .acceso-panel-form {
    visibility: hidden;
    transition: visibility 0s var(--acc-dur);
}

/* Móvil: un solo panel con la cortina arriba como cabecera */
@media (max-width: 720px) {
    .acceso-card {
        grid-template-columns: 1fr;
        max-width: 420px;
        min-height: 0;
    }

    .acceso-cortina,
    .modo-ayuda .acceso-cortina {
        position: relative;
        left: 0;
        grid-row: 1;
        width: 100%;
        transform: none;
        box-shadow: 0 8px 18px var(--acc-osc);
    }

    .acceso-cortina-texto {
        padding: 28px 24px;
    }

    .acceso-cortina-texto h2 {
        margin-bottom: 8px;
        font-size: 22px;
    }

    .acceso-cortina-texto p {
        margin-bottom: 16px;
    }

    .acceso-panel {
        grid-row: 2;
        grid-column: 1;
        padding: 28px 24px 32px;
    }

    .acceso-card:not(.modo-ayuda) .acceso-panel-ayuda,
    .modo-ayuda .acceso-panel-form {
        display: none;
    }

    .modo-ayuda .acceso-circulo-1,
    .modo-ayuda .acceso-circulo-2 {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acceso-cortina,
    .acceso-circulo,
    .acceso-cortina-texto {
        transition: none !important;
    }
}

/* ==========================================
   10. GESTIÓN DE ETIQUETAS E IPS DE SERVIDOR
   ========================================== */
body:is(.light-theme, :not(.light-theme)) :is(.etiqueta-form-card, .etiqueta-list-card) h4 {
    color: var(--text) !important;
    font-weight: 800;
}

body:is(.light-theme, :not(.light-theme)) .btn-item-editar {
    background: var(--k-btn-sec-bg) !important;
    color: var(--k-btn-sec-text) !important;
    border: 1px solid var(--k-btn-sec-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body:is(.light-theme, :not(.light-theme)) .btn-item-eliminar {
    background: var(--k-red-soft) !important;
    color: var(--k-red) !important;
    border: 1px solid var(--k-red-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body:is(.light-theme, :not(.light-theme)) :is(.btn-item-editar, .btn-item-eliminar):hover {
    border-color: var(--k-red) !important;
}

/* "Añadir" de IPs de servidor trae colores en línea */
body:is(.light-theme, :not(.light-theme)) #modalServidores .btn-tool {
    background: var(--k-btn-primary-bg) !important;
    color: var(--k-btn-primary-text) !important;
    border: 1px solid var(--k-btn-primary-bg) !important;
    border-radius: 10px !important;
}

/* ==========================================
   11. VISTA DE CONTROL REMOTO (siempre oscura, en tinta KRONO)
   ========================================== */
body:is(.light-theme, :not(.light-theme)) #modalControl {
    background: #0b0f19 !important;
}

body:is(.light-theme, :not(.light-theme)) #modalControl .modal-control-topbar {
    background: #111827 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:is(.light-theme, :not(.light-theme)) #modalControl :is(.btn-tool, .btn-calidad, .btn-calidad.hd, .btn-modo-observar) {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f3f4f6 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

body:is(.light-theme, :not(.light-theme)) #modalControl :is(.btn-tool, .btn-calidad, .btn-calidad.hd, .btn-modo-observar):hover {
    background: rgba(229, 62, 62, 0.16) !important;
    border-color: var(--k-red) !important;
    color: #ffffff !important;
}

body:is(.light-theme, :not(.light-theme)) #modalControl .btn-tool.btn-modo-control {
    background: rgba(229, 62, 62, 0.16) !important;
    border: 1px solid var(--k-red-border) !important;
    color: #fca5a5 !important;
    border-radius: 10px !important;
}

body:is(.light-theme, :not(.light-theme)) #modalControl .btn-tool.btn-reiniciar-ivanti {
    background: transparent !important;
    border: 1px solid var(--k-red-border) !important;
    color: #fca5a5 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

body:is(.light-theme, :not(.light-theme)) #modalControl .btn-close {
    background: var(--k-red) !important;
    border-radius: 10px !important;
}

body:is(.light-theme, :not(.light-theme)) #modalControl .btn-close:hover {
    background: var(--k-red-hover) !important;
}

body:is(.light-theme, :not(.light-theme)) #modalControl .modal-control-footer {
    background: #111827 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================
   12. TEMA CLARO NEUMÓRFICO (mismo lenguaje que el login)
   Superficie crema única con relieve: lo que se pulsa sobresale, lo que se
   escribe o está activo queda hundido. Tinta azul marino y acento dorado.
   Va al final para ganar a las secciones anteriores con la misma especificidad.
   ========================================== */
body.light-theme {
    --bg: #ecebe4;
    --panel: #efeee8;
    --panel-alt: #e9e8e1;
    --panel-hover: #f2f1eb;
    --panel-border: transparent;
    --sidebar-bg: #efeee8;
    --topbar-bg: #efeee8;
    --text: #1f2a3c;
    --text-muted: #8f8d84;
    --text-hover: #1f2a3c;
    --info: #1f2a3c;

    --n-osc: rgba(168, 163, 146, 0.5);
    --n-clara: rgba(255, 255, 255, 0.9);
    --n-tinta: #1f2a3c;
    --n-oro: #b8965a;
    --n-oro-suave: rgba(194, 163, 107, 0.16);
    --n-peligro: #b4442e;
    --n-relieve: 8px 8px 18px var(--n-osc), -8px -8px 18px var(--n-clara);
    --n-relieve-sm: 4px 4px 9px var(--n-osc), -4px -4px 9px var(--n-clara);
    --n-hundido: inset 4px 4px 8px var(--n-osc), inset -4px -4px 8px var(--n-clara);
    --n-hundido-sm: inset 2px 2px 5px var(--n-osc), inset -2px -2px 5px var(--n-clara);

    /* Los tokens KRONO pasan al acento dorado en este tema */
    --k-red: #a8874d;
    --k-red-hover: #8f7140;
    --k-red-soft: rgba(194, 163, 107, 0.16);
    --k-red-border: rgba(184, 150, 90, 0.5);
    --accent: #a8874d;
    --primary: #1f2a3c;
    --bg-soft: rgba(194, 163, 107, 0.16);
    --k-btn-primary-bg: #1f2a3c;
    --k-btn-primary-hover: #2a3850;
    --k-btn-primary-text: #f5f1e6;
    --k-btn-sec-bg: #efeee8;
    --k-btn-sec-hover: #efeee8;
    --k-btn-sec-border: transparent;
    --k-btn-sec-text: #1f2a3c;
    --k-input-bg: #efeee8;
    --k-input-border: transparent;
    --k-card-shadow: var(--n-relieve);
    --k-glow: none;
}

body.light-theme {
    background: var(--bg) !important;
    background-image: none !important;
}

/* Barra lateral y superior */
body.light-theme .sidebar {
    background: var(--panel) !important;
    border-right: none !important;
    box-shadow: 6px 0 18px var(--n-osc) !important;
}

body.light-theme :is(.sidebar-header, .sidebar-footer) {
    border-color: rgba(168, 163, 146, 0.25) !important;
}

body.light-theme .sidebar-title {
    color: var(--n-tinta) !important;
}

body.light-theme .nav-item {
    color: var(--text-muted) !important;
    border-left: none !important;
    border-radius: 12px !important;
}

body.light-theme .nav-item:hover {
    background: transparent !important;
    color: var(--n-tinta) !important;
    box-shadow: var(--n-relieve-sm) !important;
}

body.light-theme .nav-item.active {
    background: var(--panel) !important;
    color: var(--n-tinta) !important;
    border-left: none !important;
    box-shadow: var(--n-hundido) !important;
}

body.light-theme .nav-item.active .nav-icon {
    color: var(--n-oro);
}

body.light-theme .topbar {
    background: var(--panel) !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: var(--n-relieve) !important;
    backdrop-filter: none !important;
}

body.light-theme .topbar-left h2 {
    color: var(--n-tinta) !important;
    font-weight: 700 !important;
}

/* Botones: todos en píldora y en relieve */
body.light-theme :is(
    .btn-actualizar-todos, .btn-servidores-respaldo, .btn-etiquetas, .btn-pag, .btn-logout,
    .btn-control, .btn-asignar-tags, .btn-guardar, .btn-guardar-bloqueos-master, .btn-cancelar,
    .btn-anadir-item, .btn-whitelist-permitir, .btn-reset-scope, .btn-olvidar-pc, .btn-renombrar-pc,
    .btn-item-editar, .btn-item-eliminar, #btnResetOrdenPantallas, #btnResetOrdenMetricas) {
    border: none !important;
    border-radius: 999px !important;
    box-shadow: var(--n-relieve-sm) !important;
}

body.light-theme :is(
    .btn-servidores-respaldo, .btn-etiquetas, .btn-pag, .btn-asignar-tags, .btn-cancelar,
    .btn-reset-scope, .btn-renombrar-pc, .btn-item-editar, #btnResetOrdenPantallas, #btnResetOrdenMetricas) {
    background: var(--panel) !important;
    color: var(--n-tinta) !important;
}

body.light-theme :is(
    .btn-servidores-respaldo, .btn-etiquetas, .btn-pag, .btn-asignar-tags, .btn-cancelar,
    .btn-reset-scope, .btn-renombrar-pc, .btn-item-editar, #btnResetOrdenPantallas, #btnResetOrdenMetricas):hover {
    background: var(--panel) !important;
    color: var(--n-oro) !important;
    box-shadow: var(--n-hundido-sm) !important;
}

/* Principal: píldora azul marino, como "Iniciar sesión" */
body.light-theme :is(
    .btn-actualizar-todos, .btn-control, .btn-guardar, .btn-guardar-bloqueos-master,
    .btn-anadir-item, .btn-whitelist-permitir) {
    background: var(--n-tinta) !important;
    color: #f5f1e6 !important;
}

body.light-theme :is(
    .btn-actualizar-todos, .btn-control, .btn-guardar, .btn-guardar-bloqueos-master,
    .btn-anadir-item, .btn-whitelist-permitir):hover {
    background: #2a3850 !important;
    color: var(--n-oro) !important;
    box-shadow: var(--n-relieve-sm), 0 0 0 1px var(--n-oro) !important;
}

/* Peligro: texto terracota sobre la superficie */
body.light-theme :is(.btn-logout, .btn-olvidar-pc, .btn-item-eliminar) {
    background: var(--panel) !important;
    color: var(--n-peligro) !important;
}

body.light-theme :is(.btn-logout, .btn-olvidar-pc, .btn-item-eliminar):hover {
    background: var(--panel) !important;
    color: var(--n-peligro) !important;
    box-shadow: var(--n-hundido-sm) !important;
}

/* Filtro de etiquetas y paginación hundidos */
body.light-theme .filtro-grupo {
    background: var(--panel) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: var(--n-hundido-sm) !important;
}

body.light-theme .badge-page-info {
    color: var(--text-muted) !important;
}

/* Tarjetas, paneles y modales en relieve */
body.light-theme :is(
    .pc-card, .metric-card, .bloqueo-card, .bloqueos-scope-card, .panel-scope-bar,
    .admin-whitelist-card, .bloqueo-password-card, .modal-card, .modal-dialog,
    .etiqueta-form-card, .etiqueta-list-card, .kpi-card) {
    background: var(--panel) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: var(--n-relieve) !important;
}

body.light-theme :is(.pc-card, .metric-card):hover {
    border: none !important;
    box-shadow: 10px 10px 22px var(--n-osc), -10px -10px 22px var(--n-clara), 0 0 0 1px var(--n-oro-suave) !important;
}

/* Dentro de un modal, las subtarjetas quedan hundidas para no apilar relieves */
body.light-theme .modal-dialog :is(.etiqueta-form-card, .etiqueta-list-card) {
    box-shadow: var(--n-hundido) !important;
}

body.light-theme .modal-dialog-header {
    border-bottom: 1px solid rgba(168, 163, 146, 0.25) !important;
}

body.light-theme :is(.modal, .modal-overlay):not(#modalControl) {
    background: rgba(236, 235, 228, 0.65) !important;
    backdrop-filter: blur(6px);
}

body.light-theme .btn-dialog-close {
    box-shadow: var(--n-relieve-sm) !important;
    border-radius: 50% !important;
}

body.light-theme .btn-dialog-close:hover {
    background: var(--panel) !important;
    color: var(--n-peligro) !important;
    box-shadow: var(--n-hundido-sm) !important;
}

/* Miniatura de pantalla como una ventana hundida */
body.light-theme .pc-screen-wrapper {
    border: none !important;
    border-radius: 14px !important;
    padding: 6px;
    background: var(--panel) !important;
    box-shadow: var(--n-hundido) !important;
}

body.light-theme .pc-screen {
    border-radius: 10px !important;
}

/* KPIs: línea de color arriba sobre la tarjeta en relieve */
body.light-theme .kpi-card.kpi-total { border-top: 3px solid var(--n-tinta) !important; }
body.light-theme .kpi-card.kpi-activos { border-top: 3px solid var(--success) !important; }
body.light-theme .kpi-card.kpi-warning { border-top: 3px solid var(--warning) !important; }
body.light-theme .kpi-card.kpi-inactivos { border-top: 3px solid var(--text-muted) !important; }
body.light-theme .kpi-card.kpi-danger { border-top: 3px solid var(--n-peligro) !important; }

body.light-theme .kpi-val {
    color: var(--n-tinta) !important;
}

/* Barras de progreso y cajas internas hundidas */
body.light-theme .progress-bar {
    background: var(--panel) !important;
    box-shadow: var(--n-hundido-sm) !important;
    border: none !important;
}

body.light-theme :is(.metric-net-row, .scope-status-bar, .bloqueos-items-scroll, .checkbox-group-container) {
    background: var(--panel) !important;
    border: none !important;
    box-shadow: var(--n-hundido-sm) !important;
}

/* Campos de texto hundidos */
body.light-theme :is(input[type="text"], input[type="password"], input[type="search"], input:not([type]), select, textarea, .bloqueo-add-input, .bloqueo-password-input):not(.filtro-grupo select):not(#filtroEtiqueta):not(#filtroEtiquetaMetricas):not(.acceso-card input) {
    background: var(--panel) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: var(--n-hundido) !important;
}

body.light-theme :is(input, select, textarea, .bloqueo-add-input, .bloqueo-password-input):not(.acceso-card input):focus {
    border: none !important;
    box-shadow: var(--n-hundido), 0 0 0 1.5px var(--n-oro) !important;
}

body.light-theme input:checked + .slider-switch {
    background: var(--n-tinta) !important;
}

body.light-theme input[type="checkbox"] {
    accent-color: var(--n-tinta);
}

/* Reglas de bloqueo: pestañas hundidas con la activa en píldora */
body.light-theme .scope-selector-tabs {
    background: var(--panel) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: var(--n-hundido-sm) !important;
    padding: 4px !important;
}

body.light-theme .scope-tab-btn {
    border-radius: 999px !important;
}

body.light-theme .scope-tab-btn.active {
    background: var(--n-tinta) !important;
    color: #f5f1e6 !important;
    box-shadow: var(--n-relieve-sm) !important;
}

body.light-theme .catalogo-chip {
    background: var(--panel) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: var(--n-relieve-sm) !important;
}

body.light-theme .catalogo-chip.checked {
    background: var(--panel) !important;
    box-shadow: var(--n-hundido-sm) !important;
}

body.light-theme :is(.bloqueo-badge-count, .whitelist-badge-count, .badge-total-etiquetas) {
    background: var(--n-oro-suave) !important;
    color: #8f7140 !important;
    border: none !important;
}

/* Interruptor de tema */
body.light-theme .theme-toggle-floating-container {
    background: var(--panel) !important;
    border: none !important;
    box-shadow: var(--n-relieve-sm) !important;
}

/* Detalles que aún traían colores propios */
body.light-theme .scope-badge-tag {
    background: var(--n-oro-suave) !important;
    color: #8f7140 !important;
    border: none !important;
}

body.light-theme .badge-version {
    background: var(--panel) !important;
    color: var(--text-muted) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: var(--n-hundido-sm) !important;
}

body.light-theme .metric-net-row .net-val[style*="monospace"] {
    color: var(--n-tinta) !important;
}

body.light-theme .switch-wrapper {
    background: var(--panel) !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: var(--n-hundido-sm) !important;
}

body.light-theme .theme-switch-track {
    background: var(--panel) !important;
    border: none !important;
    box-shadow: var(--n-hundido-sm) !important;
}

body.light-theme .theme-switch-thumb {
    background: var(--n-tinta) !important;
    box-shadow: var(--n-relieve-sm) !important;
}

body.light-theme .theme-switch-thumb svg {
    color: var(--n-oro) !important;
    stroke: var(--n-oro) !important;
}

body.light-theme input[type="number"] {
    background: var(--panel) !important;
    color: var(--text) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: var(--n-hundido) !important;
}

body.light-theme .etiqueta-item {
    background: var(--panel) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 14px !important;
    box-shadow: var(--n-relieve-sm) !important;
}

body.light-theme .etiqueta-item:hover {
    box-shadow: var(--n-hundido-sm) !important;
}

/* Estado de conexión: píldora hundida con un punto del color del estado */
.estado-conexion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.estado-conexion::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

body.light-theme .estado-conexion {
    background: var(--panel);
    box-shadow: var(--n-hundido-sm);
}

/* Mientras no llega el primer cuadro, la miniatura no muestra el icono de imagen rota */
img.pc-screen[src=""] {
    visibility: hidden;
}