:root {
 --azul: #2563eb;
 --azul-oscuro: #1d4ed8;
 --gris-fondo: #f3f4f6;
 --gris-borde: #e5e7eb;
 --texto: #1f2937;
 --verde: #16a34a;
 --rojo: #dc2626;
 --amarillo: #d97706;
 --fondo-panel: #ffffff;
 --fondo-input: #ffffff;
 --fondo-hover: var(--gris-fondo);
 --fondo-chat: #fafafa;
 --fondo-burbuja-bot: #e5e7eb;
 --texto-secundario: #6b7280;
 --sombra-modal: rgba(0, 0, 0, 0.15);
 --sombra-overlay: rgba(17, 24, 39, 0.5);
 --badge-verde-fondo: #dcfce7;
 --badge-rojo-fondo: #fee2e2;
 --badge-azul-fondo: #dbeafe;
 --badge-amarillo-fondo: #fef3c7;
 --fila-atrasada-fondo: #fef9c3;
 --fila-atrasada-amarilla-fondo: rgba(234, 179, 8, 0.18);
 --fila-atrasada-roja-fondo: rgba(220, 38, 38, 0.12);
 --banner-aviso-fondo: #f1f5f9;
 --banner-aviso-borde: #cbd5e1;
 --banner-aviso-texto: #475569;
 --banner-aviso-amarillo-fondo: #fef3c7;
 --banner-aviso-amarillo-borde: #fcd34d;
 --banner-aviso-amarillo-texto: #92400e;
 --banner-aviso-importante-fondo: #fee2e2;
 --banner-aviso-importante-borde: #fca5a5;
 --banner-aviso-importante-texto: #991b1b;
 --celda-hover-fondo: #eff6ff;
 --check-ocultar-fondo: #f9fafb;
 --icono-inactivo: #d1d5db;
 --icono-importancia-amarillo: #eab308;
 --sombra-flotante: rgba(0, 0, 0, 0.15);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.12);
}

html {
 color-scheme: light;
}
html[data-tema="oscuro"],
html[data-tema="azul"],
html[data-tema="verde"],
html[data-tema="violeta"],
html[data-tema="rosa"],
html[data-tema="naranja"],
html[data-tema="turquesa"],
html[data-tema="neon"],
html[data-tema="synthwave"],
html[data-tema="matrix"],
html[data-tema="contraste"] {
 color-scheme: dark;
}

/* ---------- TEMA OSCURO ---------- */
html[data-tema="oscuro"] {
 --azul: #3b82f6;
 --azul-oscuro: #60a5fa;
 --gris-fondo: #0f172a;
 --gris-borde: #334155;
 --texto: #e5e7eb;
 --verde: #4ade80;
 --rojo: #f87171;
 --amarillo: #fbbf24;
 --fondo-panel: #1e293b;
 --fondo-input: #1e293b;
 --fondo-hover: #273449;
 --fondo-chat: #16213a;
 --fondo-burbuja-bot: #334155;
 --texto-secundario: #94a3b8;
 --sombra-modal: rgba(0, 0, 0, 0.5);
 --sombra-overlay: rgba(0, 0, 0, 0.7);
 --badge-verde-fondo: rgba(74, 222, 128, 0.16);
 --badge-rojo-fondo: rgba(248, 113, 113, 0.16);
 --badge-azul-fondo: rgba(96, 165, 250, 0.18);
 --badge-amarillo-fondo: rgba(251, 191, 36, 0.16);
 --fila-atrasada-fondo: rgba(251, 191, 36, 0.1);
 --fila-atrasada-amarilla-fondo: rgba(250, 204, 21, 0.16);
 --fila-atrasada-roja-fondo: rgba(248, 113, 113, 0.14);
 --banner-aviso-fondo: rgba(148, 163, 184, 0.12);
 --banner-aviso-borde: rgba(148, 163, 184, 0.4);
 --banner-aviso-texto: #94a3b8;
 --banner-aviso-amarillo-fondo: rgba(251, 191, 36, 0.12);
 --banner-aviso-amarillo-borde: rgba(251, 191, 36, 0.4);
 --banner-aviso-amarillo-texto: #fcd34d;
 --banner-aviso-importante-fondo: rgba(248, 113, 113, 0.12);
 --banner-aviso-importante-borde: rgba(248, 113, 113, 0.4);
 --banner-aviso-importante-texto: #f87171;
 --celda-hover-fondo: rgba(59, 130, 246, 0.15);
 --check-ocultar-fondo: var(--fondo-panel);
 --icono-inactivo: #475569;
 --icono-importancia-amarillo: #facc15;
 --sombra-flotante: rgba(0, 0, 0, 0.55);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.45);
}

/* ---------- TEMA AZUL ---------- */
html[data-tema="azul"] {
 --azul: #38bdf8;
 --azul-oscuro: #7dd3fc;
 --gris-fondo: #0b1d33;
 --gris-borde: #1e3a5f;
 --texto: #e0f2fe;
 --verde: #34d399;
 --rojo: #fb7185;
 --amarillo: #fbbf24;
 --fondo-panel: #102a46;
 --fondo-input: #102a46;
 --fondo-hover: #163a5c;
 --fondo-chat: #0d2540;
 --fondo-burbuja-bot: #1e3a5f;
 --texto-secundario: #93c5fd;
 --sombra-modal: rgba(0, 0, 0, 0.5);
 --sombra-overlay: rgba(0, 0, 0, 0.7);
 --badge-verde-fondo: rgba(52, 211, 153, 0.18);
 --badge-rojo-fondo: rgba(251, 113, 133, 0.18);
 --badge-azul-fondo: rgba(56, 189, 248, 0.2);
 --badge-amarillo-fondo: rgba(251, 191, 36, 0.18);
 --fila-atrasada-fondo: rgba(251, 191, 36, 0.1);
 --fila-atrasada-amarilla-fondo: rgba(250, 204, 21, 0.16);
 --fila-atrasada-roja-fondo: rgba(251, 113, 133, 0.14);
 --banner-aviso-fondo: rgba(147, 197, 253, 0.12);
 --banner-aviso-borde: rgba(147, 197, 253, 0.4);
 --banner-aviso-texto: #93c5fd;
 --banner-aviso-amarillo-fondo: rgba(251, 191, 36, 0.12);
 --banner-aviso-amarillo-borde: rgba(251, 191, 36, 0.4);
 --banner-aviso-amarillo-texto: #fcd34d;
 --banner-aviso-importante-fondo: rgba(251, 113, 133, 0.12);
 --banner-aviso-importante-borde: rgba(251, 113, 133, 0.4);
 --banner-aviso-importante-texto: #fb7185;
 --celda-hover-fondo: rgba(56, 189, 248, 0.15);
 --check-ocultar-fondo: var(--fondo-panel);
 --icono-inactivo: #375777;
 --icono-importancia-amarillo: #facc15;
 --sombra-flotante: rgba(0, 0, 0, 0.55);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.45);
}

/* ---------- TEMA VERDE ---------- */
html[data-tema="verde"] {
 --azul: #34d399;
 --azul-oscuro: #6ee7b7;
 --gris-fondo: #0b1f17;
 --gris-borde: #1f3d2f;
 --texto: #d1fae5;
 --verde: #4ade80;
 --rojo: #f87171;
 --amarillo: #fbbf24;
 --fondo-panel: #113328;
 --fondo-input: #113328;
 --fondo-hover: #163f30;
 --fondo-chat: #0d2a1f;
 --fondo-burbuja-bot: #1f3d2f;
 --texto-secundario: #86efac;
 --sombra-modal: rgba(0, 0, 0, 0.5);
 --sombra-overlay: rgba(0, 0, 0, 0.7);
 --badge-verde-fondo: rgba(74, 222, 128, 0.18);
 --badge-rojo-fondo: rgba(248, 113, 113, 0.16);
 --badge-azul-fondo: rgba(52, 211, 153, 0.2);
 --badge-amarillo-fondo: rgba(251, 191, 36, 0.16);
 --fila-atrasada-fondo: rgba(251, 191, 36, 0.1);
 --fila-atrasada-amarilla-fondo: rgba(250, 204, 21, 0.16);
 --fila-atrasada-roja-fondo: rgba(248, 113, 113, 0.14);
 --banner-aviso-fondo: rgba(134, 239, 172, 0.12);
 --banner-aviso-borde: rgba(134, 239, 172, 0.4);
 --banner-aviso-texto: #86efac;
 --banner-aviso-amarillo-fondo: rgba(251, 191, 36, 0.12);
 --banner-aviso-amarillo-borde: rgba(251, 191, 36, 0.4);
 --banner-aviso-amarillo-texto: #fcd34d;
 --banner-aviso-importante-fondo: rgba(248, 113, 113, 0.12);
 --banner-aviso-importante-borde: rgba(248, 113, 113, 0.4);
 --banner-aviso-importante-texto: #f87171;
 --celda-hover-fondo: rgba(52, 211, 153, 0.15);
 --check-ocultar-fondo: var(--fondo-panel);
 --icono-inactivo: #2f5943;
 --icono-importancia-amarillo: #facc15;
 --sombra-flotante: rgba(0, 0, 0, 0.55);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.45);
}

/* ---------- TEMA VIOLETA ---------- */
html[data-tema="violeta"] {
 --azul: #a78bfa;
 --azul-oscuro: #c4b5fd;
 --gris-fondo: #1a1233;
 --gris-borde: #3b2d5c;
 --texto: #ede9fe;
 --verde: #4ade80;
 --rojo: #f87171;
 --amarillo: #fbbf24;
 --fondo-panel: #241a45;
 --fondo-input: #241a45;
 --fondo-hover: #2f2258;
 --fondo-chat: #1d1540;
 --fondo-burbuja-bot: #3b2d5c;
 --texto-secundario: #c4b5fd;
 --sombra-modal: rgba(0, 0, 0, 0.5);
 --sombra-overlay: rgba(0, 0, 0, 0.7);
 --badge-verde-fondo: rgba(74, 222, 128, 0.16);
 --badge-rojo-fondo: rgba(248, 113, 113, 0.16);
 --badge-azul-fondo: rgba(167, 139, 250, 0.2);
 --badge-amarillo-fondo: rgba(251, 191, 36, 0.16);
 --fila-atrasada-fondo: rgba(251, 191, 36, 0.1);
 --fila-atrasada-amarilla-fondo: rgba(250, 204, 21, 0.16);
 --fila-atrasada-roja-fondo: rgba(248, 113, 113, 0.14);
 --banner-aviso-fondo: rgba(196, 181, 253, 0.12);
 --banner-aviso-borde: rgba(196, 181, 253, 0.4);
 --banner-aviso-texto: #c4b5fd;
 --banner-aviso-amarillo-fondo: rgba(251, 191, 36, 0.12);
 --banner-aviso-amarillo-borde: rgba(251, 191, 36, 0.4);
 --banner-aviso-amarillo-texto: #fcd34d;
 --banner-aviso-importante-fondo: rgba(248, 113, 113, 0.12);
 --banner-aviso-importante-borde: rgba(248, 113, 113, 0.4);
 --banner-aviso-importante-texto: #f87171;
 --celda-hover-fondo: rgba(167, 139, 250, 0.15);
 --check-ocultar-fondo: var(--fondo-panel);
 --icono-inactivo: #4c3d73;
 --icono-importancia-amarillo: #facc15;
 --sombra-flotante: rgba(0, 0, 0, 0.55);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.45);
}

/* ---------- TEMA ROSA ---------- */
html[data-tema="rosa"] {
 --azul: #f472b6;
 --azul-oscuro: #f9a8d4;
 --gris-fondo: #2a1220;
 --gris-borde: #4a2438;
 --texto: #fce7f3;
 --verde: #4ade80;
 --rojo: #f87171;
 --amarillo: #fbbf24;
 --fondo-panel: #3a1830;
 --fondo-input: #3a1830;
 --fondo-hover: #46213b;
 --fondo-chat: #331528;
 --fondo-burbuja-bot: #4a2438;
 --texto-secundario: #f9a8d4;
 --sombra-modal: rgba(0, 0, 0, 0.5);
 --sombra-overlay: rgba(0, 0, 0, 0.7);
 --badge-verde-fondo: rgba(74, 222, 128, 0.16);
 --badge-rojo-fondo: rgba(248, 113, 113, 0.16);
 --badge-azul-fondo: rgba(244, 114, 182, 0.2);
 --badge-amarillo-fondo: rgba(251, 191, 36, 0.16);
 --fila-atrasada-fondo: rgba(251, 191, 36, 0.1);
 --fila-atrasada-amarilla-fondo: rgba(250, 204, 21, 0.16);
 --fila-atrasada-roja-fondo: rgba(248, 113, 113, 0.14);
 --banner-aviso-fondo: rgba(249, 168, 212, 0.12);
 --banner-aviso-borde: rgba(249, 168, 212, 0.4);
 --banner-aviso-texto: #f9a8d4;
 --banner-aviso-amarillo-fondo: rgba(251, 191, 36, 0.12);
 --banner-aviso-amarillo-borde: rgba(251, 191, 36, 0.4);
 --banner-aviso-amarillo-texto: #fcd34d;
 --banner-aviso-importante-fondo: rgba(248, 113, 113, 0.12);
 --banner-aviso-importante-borde: rgba(248, 113, 113, 0.4);
 --banner-aviso-importante-texto: #f87171;
 --celda-hover-fondo: rgba(244, 114, 182, 0.15);
 --check-ocultar-fondo: var(--fondo-panel);
 --icono-inactivo: #6b3355;
 --icono-importancia-amarillo: #facc15;
 --sombra-flotante: rgba(0, 0, 0, 0.55);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.45);
}

/* ---------- TEMA NARANJA ---------- */
html[data-tema="naranja"] {
 --azul: #fb923c;
 --azul-oscuro: #fdba74;
 --gris-fondo: #241407;
 --gris-borde: #4a2f14;
 --texto: #fed7aa;
 --verde: #4ade80;
 --rojo: #f87171;
 --amarillo: #fbbf24;
 --fondo-panel: #331d0a;
 --fondo-input: #331d0a;
 --fondo-hover: #40260d;
 --fondo-chat: #2b1808;
 --fondo-burbuja-bot: #4a2f14;
 --texto-secundario: #fdba74;
 --sombra-modal: rgba(0, 0, 0, 0.5);
 --sombra-overlay: rgba(0, 0, 0, 0.7);
 --badge-verde-fondo: rgba(74, 222, 128, 0.16);
 --badge-rojo-fondo: rgba(248, 113, 113, 0.16);
 --badge-azul-fondo: rgba(251, 146, 60, 0.2);
 --badge-amarillo-fondo: rgba(251, 191, 36, 0.16);
 --fila-atrasada-fondo: rgba(251, 191, 36, 0.1);
 --fila-atrasada-amarilla-fondo: rgba(250, 204, 21, 0.16);
 --fila-atrasada-roja-fondo: rgba(248, 113, 113, 0.14);
 --banner-aviso-fondo: rgba(253, 186, 116, 0.12);
 --banner-aviso-borde: rgba(253, 186, 116, 0.4);
 --banner-aviso-texto: #fdba74;
 --banner-aviso-amarillo-fondo: rgba(251, 191, 36, 0.12);
 --banner-aviso-amarillo-borde: rgba(251, 191, 36, 0.4);
 --banner-aviso-amarillo-texto: #fcd34d;
 --banner-aviso-importante-fondo: rgba(248, 113, 113, 0.12);
 --banner-aviso-importante-borde: rgba(248, 113, 113, 0.4);
 --banner-aviso-importante-texto: #f87171;
 --celda-hover-fondo: rgba(251, 146, 60, 0.15);
 --check-ocultar-fondo: var(--fondo-panel);
 --icono-inactivo: #5c3a17;
 --icono-importancia-amarillo: #facc15;
 --sombra-flotante: rgba(0, 0, 0, 0.55);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.45);
}

/* ---------- TEMA TURQUESA ---------- */
html[data-tema="turquesa"] {
 --azul: #2dd4bf;
 --azul-oscuro: #5eead4;
 --gris-fondo: #072220;
 --gris-borde: #164541;
 --texto: #ccfbf1;
 --verde: #4ade80;
 --rojo: #f87171;
 --amarillo: #fbbf24;
 --fondo-panel: #0b332e;
 --fondo-input: #0b332e;
 --fondo-hover: #0f3f39;
 --fondo-chat: #082a26;
 --fondo-burbuja-bot: #164541;
 --texto-secundario: #5eead4;
 --sombra-modal: rgba(0, 0, 0, 0.5);
 --sombra-overlay: rgba(0, 0, 0, 0.7);
 --badge-verde-fondo: rgba(74, 222, 128, 0.16);
 --badge-rojo-fondo: rgba(248, 113, 113, 0.16);
 --badge-azul-fondo: rgba(45, 212, 191, 0.2);
 --badge-amarillo-fondo: rgba(251, 191, 36, 0.16);
 --fila-atrasada-fondo: rgba(251, 191, 36, 0.1);
 --fila-atrasada-amarilla-fondo: rgba(250, 204, 21, 0.16);
 --fila-atrasada-roja-fondo: rgba(248, 113, 113, 0.14);
 --banner-aviso-fondo: rgba(94, 234, 212, 0.12);
 --banner-aviso-borde: rgba(94, 234, 212, 0.4);
 --banner-aviso-texto: #5eead4;
 --banner-aviso-amarillo-fondo: rgba(251, 191, 36, 0.12);
 --banner-aviso-amarillo-borde: rgba(251, 191, 36, 0.4);
 --banner-aviso-amarillo-texto: #fcd34d;
 --banner-aviso-importante-fondo: rgba(248, 113, 113, 0.12);
 --banner-aviso-importante-borde: rgba(248, 113, 113, 0.4);
 --banner-aviso-importante-texto: #f87171;
 --celda-hover-fondo: rgba(45, 212, 191, 0.15);
 --check-ocultar-fondo: var(--fondo-panel);
 --icono-inactivo: #1f5f58;
 --icono-importancia-amarillo: #facc15;
 --sombra-flotante: rgba(0, 0, 0, 0.55);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.45);
}

/* ---------- TEMA NEON (cyberpunk cian/magenta) ---------- */
html[data-tema="neon"] {
 --azul: #00f0ff;
 --azul-oscuro: #67e8f9;
 --gris-fondo: #0a0014;
 --gris-borde: #3d1a5c;
 --texto: #f0e6ff;
 --verde: #39ff14;
 --rojo: #ff2079;
 --amarillo: #fde047;
 --fondo-panel: #140524;
 --fondo-input: #140524;
 --fondo-hover: #1e0a38;
 --fondo-chat: #10041d;
 --fondo-burbuja-bot: #2a0f47;
 --texto-secundario: #c084fc;
 --sombra-modal: rgba(0, 0, 0, 0.6);
 --sombra-overlay: rgba(0, 0, 0, 0.75);
 --badge-verde-fondo: rgba(57, 255, 20, 0.18);
 --badge-rojo-fondo: rgba(255, 32, 121, 0.18);
 --badge-azul-fondo: rgba(0, 240, 255, 0.2);
 --badge-amarillo-fondo: rgba(253, 224, 71, 0.18);
 --fila-atrasada-fondo: rgba(253, 224, 71, 0.1);
 --fila-atrasada-amarilla-fondo: rgba(250, 204, 21, 0.16);
 --fila-atrasada-roja-fondo: rgba(255, 32, 121, 0.12);
 --banner-aviso-fondo: rgba(0, 240, 255, 0.1);
 --banner-aviso-borde: rgba(0, 240, 255, 0.45);
 --banner-aviso-texto: #67e8f9;
 --banner-aviso-amarillo-fondo: rgba(253, 224, 71, 0.12);
 --banner-aviso-amarillo-borde: rgba(253, 224, 71, 0.45);
 --banner-aviso-amarillo-texto: #fde047;
 --banner-aviso-importante-fondo: rgba(255, 32, 121, 0.12);
 --banner-aviso-importante-borde: rgba(255, 32, 121, 0.45);
 --banner-aviso-importante-texto: #ff2079;
 --celda-hover-fondo: rgba(0, 240, 255, 0.12);
 --check-ocultar-fondo: var(--fondo-panel);
 --icono-inactivo: #4c2e73;
 --icono-importancia-amarillo: #fde047;
 --sombra-flotante: rgba(0, 0, 0, 0.6);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.5);
}

/* ---------- TEMA SYNTHWAVE (atardecer retro magenta/purpura) ---------- */
html[data-tema="synthwave"] {
 --azul: #ff36ab;
 --azul-oscuro: #ff6fc7;
 --gris-fondo: #1a0b2e;
 --gris-borde: #4a2472;
 --texto: #ffe0f7;
 --verde: #39ff14;
 --rojo: #ff2079;
 --amarillo: #fde047;
 --fondo-panel: #24123f;
 --fondo-input: #24123f;
 --fondo-hover: #301a52;
 --fondo-chat: #1d0e35;
 --fondo-burbuja-bot: #3a1c5e;
 --texto-secundario: #05d9e8;
 --sombra-modal: rgba(0, 0, 0, 0.6);
 --sombra-overlay: rgba(0, 0, 0, 0.75);
 --badge-verde-fondo: rgba(57, 255, 20, 0.18);
 --badge-rojo-fondo: rgba(255, 32, 121, 0.18);
 --badge-azul-fondo: rgba(255, 54, 171, 0.2);
 --badge-amarillo-fondo: rgba(253, 224, 71, 0.18);
 --fila-atrasada-fondo: rgba(253, 224, 71, 0.1);
 --fila-atrasada-amarilla-fondo: rgba(250, 204, 21, 0.16);
 --fila-atrasada-roja-fondo: rgba(255, 32, 121, 0.12);
 --banner-aviso-fondo: rgba(5, 217, 232, 0.1);
 --banner-aviso-borde: rgba(5, 217, 232, 0.45);
 --banner-aviso-texto: #05d9e8;
 --banner-aviso-amarillo-fondo: rgba(253, 224, 71, 0.12);
 --banner-aviso-amarillo-borde: rgba(253, 224, 71, 0.45);
 --banner-aviso-amarillo-texto: #fde047;
 --banner-aviso-importante-fondo: rgba(255, 32, 121, 0.12);
 --banner-aviso-importante-borde: rgba(255, 32, 121, 0.45);
 --banner-aviso-importante-texto: #ff6fc7;
 --celda-hover-fondo: rgba(255, 54, 171, 0.12);
 --check-ocultar-fondo: var(--fondo-panel);
 --icono-inactivo: #5c3487;
 --icono-importancia-amarillo: #fde047;
 --sombra-flotante: rgba(0, 0, 0, 0.6);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.5);
}

/* ---------- TEMA MATRIX (terminal verde monocromo) ---------- */
html[data-tema="matrix"] {
 --azul: #00ff41;
 --azul-oscuro: #7cff9e;
 --gris-fondo: #000800;
 --gris-borde: #0d3b16;
 --texto: #baffc9;
 --verde: #00ff41;
 --rojo: #ff3131;
 --amarillo: #ffe066;
 --fondo-panel: #001a05;
 --fondo-input: #001a05;
 --fondo-hover: #002b0a;
 --fondo-chat: #000f02;
 --fondo-burbuja-bot: #0d3b16;
 --texto-secundario: #4ade80;
 --sombra-modal: rgba(0, 0, 0, 0.7);
 --sombra-overlay: rgba(0, 0, 0, 0.85);
 --badge-verde-fondo: rgba(0, 255, 65, 0.18);
 --badge-rojo-fondo: rgba(255, 49, 49, 0.18);
 --badge-azul-fondo: rgba(0, 255, 65, 0.2);
 --badge-amarillo-fondo: rgba(255, 224, 102, 0.18);
 --fila-atrasada-fondo: rgba(255, 224, 102, 0.1);
 --fila-atrasada-amarilla-fondo: rgba(255, 224, 102, 0.16);
 --fila-atrasada-roja-fondo: rgba(255, 49, 49, 0.12);
 --banner-aviso-fondo: rgba(0, 255, 65, 0.1);
 --banner-aviso-borde: rgba(0, 255, 65, 0.4);
 --banner-aviso-texto: #4ade80;
 --banner-aviso-amarillo-fondo: rgba(255, 224, 102, 0.12);
 --banner-aviso-amarillo-borde: rgba(255, 224, 102, 0.4);
 --banner-aviso-amarillo-texto: #ffe066;
 --banner-aviso-importante-fondo: rgba(255, 49, 49, 0.12);
 --banner-aviso-importante-borde: rgba(255, 49, 49, 0.4);
 --banner-aviso-importante-texto: #ff6b6b;
 --celda-hover-fondo: rgba(0, 255, 65, 0.12);
 --check-ocultar-fondo: var(--fondo-panel);
 --icono-inactivo: #0d3b16;
 --icono-importancia-amarillo: #ffe066;
 --sombra-flotante: rgba(0, 0, 0, 0.7);
 --sombra-flotante-suave: rgba(0, 0, 0, 0.6);
}

/* Toque "gamer": brillo neon en botones, pestana activa y titulo de cabecera */
html[data-tema="neon"] .tab-btn.active,
html[data-tema="synthwave"] .tab-btn.active,
html[data-tema="matrix"] .tab-btn.active {
 text-shadow: 0 0 8px var(--azul);
}

html[data-tema="neon"] .login-caja button,
html[data-tema="neon"] .chat-form button,
html[data-tema="neon"] .modal-fila button,
html[data-tema="neon"] .msg.cliente,
html[data-tema="synthwave"] .login-caja button,
html[data-tema="synthwave"] .chat-form button,
html[data-tema="synthwave"] .modal-fila button,
html[data-tema="synthwave"] .msg.cliente,
html[data-tema="matrix"] .login-caja button,
html[data-tema="matrix"] .chat-form button,
html[data-tema="matrix"] .modal-fila button,
html[data-tema="matrix"] .msg.cliente {
 box-shadow: 0 0 12px var(--azul);
}

html[data-tema="neon"] header h1,
html[data-tema="synthwave"] header h1,
html[data-tema="matrix"] header h1 {
 text-shadow: 0 0 10px var(--azul), 0 0 22px var(--azul);
}

html[data-tema="matrix"] body {
 font-family: 'Courier New', Courier, monospace;
}

/* ---------- TEMA PIZARRA (gris neutro claro) ---------- */
html[data-tema="pizarra"] {
 --azul: #475569;
 --azul-oscuro: #334155;
 --gris-fondo: #e2e8f0;
 --gris-borde: #cbd5e1;
 --texto: #1e293b;
 --verde: #16a34a;
 --rojo: #dc2626;
 --amarillo: #d97706;
 --fondo-panel: #f8fafc;
 --fondo-input: #ffffff;
 --fondo-hover: #eef2f7;
 --fondo-chat: #f1f5f9;
 --fondo-burbuja-bot: #e2e8f0;
 --texto-secundario: #64748b;
 --sombra-modal: rgba(15, 23, 42, 0.15);
 --sombra-overlay: rgba(15, 23, 42, 0.5);
 --badge-verde-fondo: #dcfce7;
 --badge-rojo-fondo: #fee2e2;
 --badge-azul-fondo: #e2e8f0;
 --badge-amarillo-fondo: #fef3c7;
 --fila-atrasada-fondo: #fef9c3;
 --fila-atrasada-amarilla-fondo: rgba(234, 179, 8, 0.18);
 --fila-atrasada-roja-fondo: rgba(220, 38, 38, 0.12);
 --banner-aviso-fondo: #eef2f7;
 --banner-aviso-borde: #cbd5e1;
 --banner-aviso-texto: #475569;
 --banner-aviso-amarillo-fondo: #fef3c7;
 --banner-aviso-amarillo-borde: #fcd34d;
 --banner-aviso-amarillo-texto: #92400e;
 --banner-aviso-importante-fondo: #fee2e2;
 --banner-aviso-importante-borde: #fca5a5;
 --banner-aviso-importante-texto: #991b1b;
 --celda-hover-fondo: #e8edf3;
 --check-ocultar-fondo: #f1f5f9;
 --icono-inactivo: #cbd5e1;
 --icono-importancia-amarillo: #eab308;
 --sombra-flotante: rgba(15, 23, 42, 0.15);
 --sombra-flotante-suave: rgba(15, 23, 42, 0.1);
}

/* ---------- TEMA MENTA (claro) ---------- */
html[data-tema="menta"] {
 --azul: #059669;
 --azul-oscuro: #047857;
 --gris-fondo: #ecfdf5;
 --gris-borde: #d1fae5;
 --texto: #064e3b;
 --verde: #16a34a;
 --rojo: #dc2626;
 --amarillo: #d97706;
 --fondo-panel: #ffffff;
 --fondo-input: #ffffff;
 --fondo-hover: #e6faf1;
 --fondo-chat: #f0fdf9;
 --fondo-burbuja-bot: #d1fae5;
 --texto-secundario: #059669;
 --sombra-modal: rgba(6, 78, 59, 0.15);
 --sombra-overlay: rgba(6, 78, 59, 0.4);
 --badge-verde-fondo: #dcfce7;
 --badge-rojo-fondo: #fee2e2;
 --badge-azul-fondo: #d1fae5;
 --badge-amarillo-fondo: #fef3c7;
 --fila-atrasada-fondo: #fef9c3;
 --fila-atrasada-amarilla-fondo: rgba(234, 179, 8, 0.18);
 --fila-atrasada-roja-fondo: rgba(220, 38, 38, 0.12);
 --banner-aviso-fondo: #e6faf1;
 --banner-aviso-borde: #a7f3d0;
 --banner-aviso-texto: #047857;
 --banner-aviso-amarillo-fondo: #fef3c7;
 --banner-aviso-amarillo-borde: #fcd34d;
 --banner-aviso-amarillo-texto: #92400e;
 --banner-aviso-importante-fondo: #fee2e2;
 --banner-aviso-importante-borde: #fca5a5;
 --banner-aviso-importante-texto: #991b1b;
 --celda-hover-fondo: #d7f7e9;
 --check-ocultar-fondo: #f0fdf9;
 --icono-inactivo: #a7f3d0;
 --icono-importancia-amarillo: #eab308;
 --sombra-flotante: rgba(6, 78, 59, 0.15);
 --sombra-flotante-suave: rgba(6, 78, 59, 0.1);
}

/* ---------- TEMA SEPIA ---------- */
html[data-tema="sepia"] {
 --azul: #b45309;
 --azul-oscuro: #92400e;
 --gris-fondo: #f4ecd8;
 --gris-borde: #e0d3b0;
 --texto: #4a3826;
 --verde: #16a34a;
 --rojo: #dc2626;
 --amarillo: #b45309;
 --fondo-panel: #fbf4e4;
 --fondo-input: #fffaf0;
 --fondo-hover: #efe3c8;
 --fondo-chat: #f7efdc;
 --fondo-burbuja-bot: #e9dcbb;
 --texto-secundario: #7a6650;
 --sombra-modal: rgba(74, 56, 38, 0.15);
 --sombra-overlay: rgba(74, 56, 38, 0.4);
 --badge-verde-fondo: #dcfce7;
 --badge-rojo-fondo: #fee2e2;
 --badge-azul-fondo: #fde8cc;
 --badge-amarillo-fondo: #fef3c7;
 --fila-atrasada-fondo: #fef3c7;
 --fila-atrasada-amarilla-fondo: rgba(234, 179, 8, 0.18);
 --fila-atrasada-roja-fondo: rgba(220, 38, 38, 0.12);
 --banner-aviso-fondo: #efe3c8;
 --banner-aviso-borde: #d8c69a;
 --banner-aviso-texto: #6b5738;
 --banner-aviso-amarillo-fondo: #fef3c7;
 --banner-aviso-amarillo-borde: #fcd34d;
 --banner-aviso-amarillo-texto: #92400e;
 --banner-aviso-importante-fondo: #fee2e2;
 --banner-aviso-importante-borde: #fca5a5;
 --banner-aviso-importante-texto: #991b1b;
 --celda-hover-fondo: #f3e5c8;
 --check-ocultar-fondo: #f4ecd8;
 --icono-inactivo: #cbb98d;
 --icono-importancia-amarillo: #eab308;
 --sombra-flotante: rgba(74, 56, 38, 0.15);
 --sombra-flotante-suave: rgba(74, 56, 38, 0.1);
}

html[data-tema="contraste"] {
 --azul: #66d9ff;
 --azul-oscuro: #99e6ff;
 --gris-fondo: #000000;
 --gris-borde: #ffffff;
 --texto: #ffffff;
 --verde: #4dff88;
 --rojo: #ff5c5c;
 --amarillo: #ffe14d;
 --fondo-panel: #000000;
 --fondo-input: #000000;
 --fondo-hover: #1a1a1a;
 --fondo-chat: #000000;
 --fondo-burbuja-bot: #262626;
 --texto-secundario: #ffffff;
 --sombra-modal: rgba(255, 255, 255, 0.2);
 --sombra-overlay: rgba(0, 0, 0, 0.85);
 --badge-verde-fondo: rgba(77, 255, 136, 0.25);
 --badge-rojo-fondo: rgba(255, 92, 92, 0.25);
 --badge-azul-fondo: rgba(102, 217, 255, 0.25);
 --badge-amarillo-fondo: rgba(255, 225, 77, 0.25);
 --fila-atrasada-fondo: rgba(255, 225, 77, 0.18);
 --fila-atrasada-amarilla-fondo: rgba(255, 225, 77, 0.25);
 --fila-atrasada-roja-fondo: rgba(255, 92, 92, 0.2);
 --banner-aviso-fondo: rgba(255, 255, 255, 0.1);
 --banner-aviso-borde: #ffffff;
 --banner-aviso-texto: #ffffff;
 --banner-aviso-amarillo-fondo: rgba(255, 225, 77, 0.18);
 --banner-aviso-amarillo-borde: #ffe14d;
 --banner-aviso-amarillo-texto: #ffe14d;
 --banner-aviso-importante-fondo: rgba(255, 92, 92, 0.18);
 --banner-aviso-importante-borde: #ff5c5c;
 --banner-aviso-importante-texto: #ff5c5c;
 --celda-hover-fondo: rgba(102, 217, 255, 0.2);
 --check-ocultar-fondo: #000000;
 --icono-inactivo: #666666;
 --icono-importancia-amarillo: #ffe14d;
 --sombra-flotante: rgba(255, 255, 255, 0.15);
 --sombra-flotante-suave: rgba(255, 255, 255, 0.1);
}

/* ---------- PANTALLA DE CARGA INICIAL ---------- */
#pantalla-carga {
 position: fixed;
 inset: 0;
 z-index: 9999;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--gris-fondo);
 opacity: 1;
 transition: opacity 0.4s ease;
}
#pantalla-carga.oculta {
 opacity: 0;
 pointer-events: none;
}
.carga-contenido {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
}
.carga-spinner {
 width: 44px;
 height: 44px;
 border: 4px solid var(--gris-borde);
 border-top-color: var(--azul);
 border-radius: 50%;
 animation: girar-carga 0.8s linear infinite;
}
.carga-texto {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 font-size: 0.9rem;
 font-weight: 600;
 color: var(--azul-oscuro);
 letter-spacing: 0.02em;
}
@keyframes girar-carga {
 to { transform: rotate(360deg); }
}

/* Spinner dentro de un boton mientras se procesa una accion (login, cambiar usuario...) */
.btn-cargando {
 position: relative;
 color: transparent !important;
 pointer-events: none;
}
.btn-cargando::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 16px;
 height: 16px;
 margin: -8px 0 0 -8px;
 border: 2px solid rgba(255, 255, 255, 0.45);
 border-top-color: white;
 border-radius: 50%;
 animation: girar-carga 0.7s linear infinite;
}

/* ---------- PANTALLA DE LOGIN ---------- */
.oculto {
 display: none;
}

.login-overlay {
 position: fixed;
 inset: 0;
 z-index: 10000;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--gris-fondo);
 padding: 24px;
}
.login-overlay.oculto {
 display: none;
}
.login-caja {
 width: 100%;
 max-width: 340px;
 background: var(--fondo-panel);
 border-radius: 12px;
 padding: 24px;
 box-shadow: 0 10px 30px var(--sombra-flotante);
 display: flex;
 flex-direction: column;
}
.login-caja h1 {
 font-size: 1.3rem;
 margin: 0 0 4px 0;
 color: var(--azul-oscuro);
 text-align: center;
}
.login-caja h2 {
 font-size: 1rem;
 margin: 0 0 18px 0;
 color: var(--texto-secundario);
 font-weight: 600;
 text-align: center;
}
.login-caja label {
 font-size: 0.85rem;
 font-weight: 600;
 color: var(--texto);
 margin-bottom: 6px;
}
.login-caja input {
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 padding: 10px 12px;
 font-size: 0.95rem;
 margin-bottom: 14px;
}
.login-caja button {
 background: var(--azul);
 color: white;
 border: none;
 border-radius: 8px;
 padding: 12px;
 font-weight: 600;
 cursor: pointer;
 font-size: 0.95rem;
}
.login-caja button:hover {
 background: var(--azul-oscuro);
}
.login-invitado-fila {
 display: flex;
 gap: 8px;
 align-items: stretch;
 margin-bottom: 14px;
}
.login-invitado-fila input {
 flex: 1;
 margin-bottom: 0;
 min-width: 0;
}
.login-invitado-fila button {
 margin: 0;
 white-space: nowrap;
}
.login-error {
 color: var(--rojo);
 font-size: 0.8rem;
 margin: -6px 0 12px 0;
}
.login-error.oculto {
 display: none;
}

/* ---------- SELECTOR DE CUENTAS (login por dispositivo) ---------- */
.login-lista-cuentas {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-bottom: 14px;
}
.login-btn-cuenta {
 background: var(--fondo-panel);
 color: var(--texto);
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 padding: 12px;
 font-weight: 600;
 font-size: 0.95rem;
 cursor: pointer;
 text-align: left;
}
.login-btn-cuenta:hover {
 border-color: var(--azul);
 color: var(--azul);
}
.login-btn-secundario {
 background: transparent;
 color: var(--texto-secundario);
 border: none;
 padding: 10px;
 font-size: 0.85rem;
 font-weight: 600;
 cursor: pointer;
}
.login-btn-secundario:hover {
 color: var(--azul);
}

/* Caja monoespaciada donde se muestra el identificador (MAC o UUID de
   repuesto) de un dispositivo, para poder copiarlo facilmente */
.id-dispositivo-caja {
 font-family: 'Courier New', Courier, monospace;
 font-size: 0.85rem;
 background: var(--gris-fondo);
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 padding: 10px 12px;
 margin: 6px 0 14px 0;
 word-break: break-all;
 user-select: all;
}

.usuario-badge {
 background: var(--badge-azul-fondo);
 color: var(--azul-oscuro);
}

.modal-usuario-actual {
 margin: 0 0 10px 0;
 font-size: 0.95rem;
 font-weight: 700;
 color: var(--azul-oscuro);
}

.usuario-col {
 font-size: 0.8rem;
 color: var(--texto-secundario);
 max-width: 90px;
 overflow: hidden;
 text-overflow: ellipsis;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ---------- SCROLLBAR TEMATIZADO ---------- */
* {
 scrollbar-width: thin;
 scrollbar-color: var(--gris-borde) var(--fondo-panel);
}
::-webkit-scrollbar {
 width: 10px;
 height: 10px;
}
::-webkit-scrollbar-track {
 background: var(--fondo-panel);
}
::-webkit-scrollbar-thumb {
 background-color: var(--gris-borde);
 border-radius: 999px;
 border: 2px solid var(--fondo-panel);
}
::-webkit-scrollbar-thumb:hover {
 background-color: var(--texto-secundario);
}

/* Transición suave de colores al alternar entre modo claro y oscuro.
   Al ser una regla universal de baja especificidad, los elementos que ya
   declaran su propia "transition" (iconos, celdas editables al pasar el
   ratón, etc.) siguen usando la suya sin verse afectados. */
*, *::before, *::after {
 transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}

html, body {
 max-width: 100%;
 overflow-x: hidden;
}

body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 background: var(--gris-fondo);
 color: var(--texto);
 touch-action: manipulation;
}

/* Evita que iOS haga zoom automatico al enfocar inputs/selects con fuente < 16px */
input, select, textarea {
 font-size: 16px;
}

.app {
 max-width: 1100px;
 margin: 0 auto;
 padding: 16px;
 padding-top: max(16px, env(safe-area-inset-top));
 padding-bottom: max(16px, env(safe-area-inset-bottom));
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 flex-wrap: wrap;
 margin-bottom: 16px;
}

.header-acciones {
 display: flex;
 gap: 10px;
 align-items: center;
 flex-wrap: wrap;
}

header h1 {
 font-size: 1.3rem;
 margin: 0;
}

.badge {
 font-size: 0.75rem;
 padding: 4px 10px;
 border-radius: 999px;
 font-weight: 600;
}
.badge.conectado { background: var(--badge-verde-fondo); color: var(--verde); }
.badge.desconectado { background: var(--badge-rojo-fondo); color: var(--rojo); }

/* ---------- ESTADISTICAS RAPIDAS ---------- */
.stats-bar {
 display: flex;
 gap: 10px;
 margin-bottom: 16px;
 flex-wrap: wrap;
}
.stat-chip {
 display: flex;
 align-items: baseline;
 gap: 6px;
 padding: 8px 14px;
 border-radius: 10px;
 background: var(--fondo-panel);
 border: 1px solid var(--gris-borde);
 border-left: 4px solid var(--gris-borde);
}
.stat-chip .stat-numero {
 font-size: 1.2rem;
 font-weight: 700;
 color: var(--texto);
}
.stat-chip .stat-etiqueta {
 font-size: 0.78rem;
 color: var(--texto-secundario);
}
.stat-chip.stat-pendiente { border-left-color: var(--amarillo); }
.stat-chip.stat-gestionar { border-left-color: var(--azul); }
.stat-chip.stat-cerrado { border-left-color: var(--verde); }

main {
 display: flex;
 align-items: flex-start;
 gap: 16px;
 flex: 1;
 min-width: 0;
}

/* ---------- CHAT: PANEL DESPLEGABLE ----------
   El panel de chat empieza colapsado (56x56) mostrando solo el icono de
   chat, situado arriba a la izquierda, encima de la tabla. Al pulsarlo se
   despliega con una animacion y la tabla (que ocupa el espacio restante
   mediante flex: 1) se contrae en el mismo movimiento. */
.chat-panel {
 position: relative;
 flex: 0 0 41%;
 min-width: 0;
 overflow: hidden;
 transition: flex-basis 0.35s ease, max-height 0.35s ease, padding 0.35s ease,
 background-color 0.35s ease, border-color 0.35s ease;
}
.chat-panel.chat-colapsado {
 flex-basis: 56px;
 padding: 0;
 border-color: transparent;
 background: transparent;
}
.tabla-panel {
 flex: 1 1 0%;
 min-width: 0;
}

.chat-toggle-btn {
 all: unset;
 box-sizing: border-box;
 position: absolute;
 top: 0;
 left: 0;
 width: 56px;
 height: 56px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 background: var(--fondo-panel);
 border: 1px solid var(--gris-borde);
 font-size: 1.4rem;
 line-height: 1;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.2s ease, transform 0.2s ease;
}
.chat-toggle-btn:hover {
 transform: scale(1.05);
}
.chat-panel.chat-colapsado .chat-toggle-btn {
 opacity: 1;
 pointer-events: auto;
 transition: opacity 0.2s ease 0.15s, transform 0.2s ease;
}

.chat-close-btn {
 all: unset;
 box-sizing: border-box;
 position: absolute;
 top: 10px;
 right: 10px;
 width: 32px;
 height: 32px;
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 background: var(--fondo-panel);
 border: 1px solid var(--gris-borde);
 color: var(--texto-secundario);
 font-size: 1rem;
 line-height: 1;
 z-index: 2;
 opacity: 1;
 transition: opacity 0.15s ease 0.12s, background-color 0.2s ease, color 0.2s ease;
}
.chat-close-btn:hover {
 background: var(--gris-fondo);
 color: var(--texto);
}
.chat-panel.chat-colapsado .chat-close-btn {
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.1s ease;
}

.chat-panel-contenido {
 display: flex;
 flex-direction: column;
 height: 100%;
 min-width: 0;
 opacity: 1;
 transition: opacity 0.25s ease 0.12s;
}
.chat-panel.chat-colapsado .chat-panel-contenido {
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.15s ease;
}

/* Rol lector: sin chat ni descarga de Excel */
.chat-panel.oculto {
 display: none;
}
.btn-icono.oculto {
 display: none;
}
body.vista-lector .fecha-celda, body.vista-lector .fecha-celda-int, body.vista-lector .fecha-celda-aviso,
body.vista-lector .reclamacion-celda, body.vista-lector .reclamacion-celda-int, body.vista-lector .reclamacion-celda-aviso,
body.vista-lector .descripcion-celda-int, body.vista-lector .descripcion-celda-aviso,
body.vista-lector .observaciones-celda, body.vista-lector .observaciones-celda-aviso {
 cursor: default;
}
body.vista-lector .fecha-celda:hover, body.vista-lector .fecha-celda-int:hover, body.vista-lector .fecha-celda-aviso:hover,
body.vista-lector .reclamacion-celda:hover, body.vista-lector .reclamacion-celda-int:hover, body.vista-lector .reclamacion-celda-aviso:hover,
body.vista-lector .descripcion-celda-int:hover, body.vista-lector .descripcion-celda-aviso:hover,
body.vista-lector .observaciones-celda:hover, body.vista-lector .observaciones-celda-aviso:hover {
 background: none;
}
body.vista-lector .importancia-icono {
 cursor: default;
}
body.vista-lector .importancia-icono:hover {
 transform: none;
}



.panel {
 background: var(--fondo-panel);
 border: 1px solid var(--gris-borde);
 border-radius: 12px;
 padding: 16px;
 display: flex;
 flex-direction: column;
 min-width: 0;
 max-width: 100%;
 overflow-x: hidden;
}

.panel h2 {
 font-size: 1rem;
 margin: 0 0 12px 0;
}

.chat-log {
 flex: 1;
 min-height: 280px;
 max-height: 420px;
 overflow-y: auto;
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 padding: 10px;
 background: var(--fondo-chat);
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-bottom: 12px;
}

.msg {
 padding: 8px 12px;
 border-radius: 10px;
 max-width: 90%;
 font-size: 0.9rem;
 line-height: 1.35;
 display: flex;
 flex-direction: column;
}

.msg-texto {
 white-space: pre-wrap;
}

.msg-hora {
 font-size: 0.7rem;
 opacity: 0.65;
 margin-top: 4px;
}

.msg.cliente {
 align-self: flex-end;
 background: var(--azul);
 color: white;
 border-bottom-right-radius: 2px;
}

.msg.cliente .msg-hora {
 align-self: flex-end;
}

.msg.bot {
 align-self: flex-start;
 background: var(--fondo-burbuja-bot);
 color: var(--texto);
 border-bottom-left-radius: 2px;
}

.msg.bot .msg-hora {
 align-self: flex-start;
}

.chat-form {
 display: flex;
 gap: 8px;
}

.autocompletado-contenedor {
 position: relative;
 flex: 1;
 min-width: 0;
}
.autocompletado-contenedor input {
 width: 100%;
}
.autocompletado-lista {
 position: absolute;
 top: calc(100% + 4px);
 left: 0;
 right: 0;
 z-index: 50;
 background: var(--fondo-panel);
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 box-shadow: 0 6px 16px var(--sombra-flotante-suave);
 list-style: none;
 margin: 0;
 padding: 4px;
 max-height: 180px;
 overflow-y: auto;
}
.autocompletado-lista.oculto {
 display: none;
}
.autocompletado-lista li {
 padding: 8px 10px;
 border-radius: 6px;
 font-size: 0.85rem;
 cursor: pointer;
}
.autocompletado-lista li:hover {
 background: var(--gris-fondo);
}

.input-busqueda {
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 padding: 6px 10px;
 font-size: 0.8rem;
 color: var(--texto);
 background: var(--fondo-input);
 min-width: 160px;
 flex: 1 1 160px;
}

.chat-form input {
 flex: 1;
 padding: 10px 12px;
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 font-size: 0.9rem;
}

.chat-form button {
 background: var(--azul);
 color: white;
 border: none;
 border-radius: 8px;
 padding: 0 16px;
 font-weight: 600;
 cursor: pointer;
}
.chat-form button:hover { background: var(--azul-oscuro); }

.rapido-contenedor {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-top: 10px;
 flex-wrap: wrap;
}
.rapido-contenedor label {
 font-size: 0.78rem;
 color: var(--texto-secundario);
 white-space: nowrap;
}
.rapido-contenedor select {
 flex: 1;
 min-width: 140px;
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 padding: 7px 8px;
 font-size: 0.82rem;
 background: var(--fondo-input);
 color: var(--texto);
}

.tabla-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 10px;
 row-gap: 8px;
}

.tabla-scroll {
 overflow-x: auto;
 overflow-y: auto;
 max-height: 460px;
}

.paginacion {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 margin-top: 10px;
 flex-wrap: wrap;
}
.paginacion span {
 font-size: 0.8rem;
 color: var(--texto-secundario);
 text-align: center;
 flex: 1;
}
.paginacion button {
 border: 1px solid var(--gris-borde);
 background: var(--fondo-input);
 color: var(--texto);
 border-radius: 8px;
 padding: 6px 12px;
 font-size: 0.8rem;
 font-weight: 600;
 cursor: pointer;
}
.paginacion button:hover:not(:disabled) {
 background: var(--gris-fondo);
}
.paginacion button:disabled {
 opacity: 0.4;
 cursor: default;
}

table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.85rem;
}

th, td {
 text-align: left;
 padding: 8px 10px;
 border-bottom: 1px solid var(--gris-borde);
 white-space: nowrap;
}

th {
 position: sticky;
 top: 0;
 background: var(--fondo-panel);
 font-size: 0.75rem;
 text-transform: uppercase;
 color: var(--texto-secundario);
}

td.descripcion {
 white-space: normal;
 max-width: 260px;
}

.estado-pill {
 padding: 3px 10px;
 border-radius: 999px;
 font-size: 0.75rem;
 font-weight: 600;
}
.estado-pill.Pendiente { background: var(--badge-amarillo-fondo); color: var(--amarillo); }
.estado-pill.Gestionar { background: var(--badge-azul-fondo); color: var(--azul-oscuro); }
.estado-pill.Cerrado { background: var(--badge-verde-fondo); color: var(--verde); }

.fila-atrasada {
 background: var(--fila-atrasada-fondo) !important;
}
.fila-atrasada td {
 background: var(--fila-atrasada-fondo);
}
.fila-atrasada-amarilla {
 background: var(--fila-atrasada-amarilla-fondo) !important;
}
.fila-atrasada-amarilla td {
 background: var(--fila-atrasada-amarilla-fondo);
}
.fila-atrasada-roja {
 background: var(--fila-atrasada-roja-fondo) !important;
}
.fila-atrasada-roja td {
 background: var(--fila-atrasada-roja-fondo);
}

.sin-reclamacion {
 color: var(--texto-secundario);
 font-style: italic;
 font-size: 0.8rem;
}

.avisos-contenedor {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 gap: 10px;
 margin-bottom: 16px;
}
.avisos-contenedor.oculto {
 display: none;
}

/* Cajita de aviso: por defecto es una pastilla pequeña que solo enseña el
   numero (el color ya distingue avisos normales de importantes). Al abrirla
   crece con una transicion suave y muestra el titulo y la lista completa. */
.aviso-caja {
 background: var(--banner-aviso-fondo);
 border: 1px solid var(--banner-aviso-borde);
 color: var(--banner-aviso-texto);
 border-radius: 999px;
 width: 56px;
 overflow: hidden;
 transition: width 0.28s ease, border-radius 0.28s ease;
}
.aviso-caja.oculto {
 display: none;
}
.aviso-caja.abierta {
 width: min(360px, 100%);
 border-radius: 12px;
}
.aviso-caja-amarilla {
 --banner-aviso-fondo: var(--banner-aviso-amarillo-fondo);
 --banner-aviso-borde: var(--banner-aviso-amarillo-borde);
 --banner-aviso-texto: var(--banner-aviso-amarillo-texto);
}
.aviso-caja-importante {
 --banner-aviso-fondo: var(--banner-aviso-importante-fondo);
 --banner-aviso-borde: var(--banner-aviso-importante-borde);
 --banner-aviso-texto: var(--banner-aviso-importante-texto);
}
.aviso-caja-resumen {
 all: unset;
 box-sizing: border-box;
 width: 100%;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 7px 15px;
 font-weight: 600;
 color: inherit;
 user-select: none;
}
.aviso-caja-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 24px;
 height: 24px;
 padding: 0 6px;
 border-radius: 999px;
 background: var(--banner-aviso-texto);
 color: var(--fondo-panel);
 font-size: 0.85rem;
 font-weight: 700;
 flex-shrink: 0;
}
.aviso-caja-titulo {
 max-width: 0;
 opacity: 0;
 overflow: hidden;
 white-space: nowrap;
 transition: max-width 0.25s ease, opacity 0.2s ease;
}
.aviso-caja.abierta .aviso-caja-titulo {
 max-width: 220px;
 opacity: 1;
 transition: max-width 0.25s ease 0.05s, opacity 0.25s ease 0.1s;
}
.aviso-caja-panel {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s ease;
}
.aviso-caja.abierta .aviso-caja-panel {
 max-height: 280px;
 overflow-y: auto;
 transition: max-height 0.35s ease 0.05s;
}
.aviso-caja-lista {
 margin: 0;
 padding: 0 16px 12px 32px;
 font-size: 0.85rem;
}

.importancia-col {
 text-align: center;
 white-space: nowrap;
}

.importancia-icono {
 cursor: pointer;
 font-size: 1.2rem;
 color: var(--icono-inactivo); /* gris: no marcado */
 user-select: none;
 transition: color 0.15s, transform 0.1s;
 display: inline-block;
}
.importancia-icono:hover {
 transform: scale(1.15);
}
.importancia-icono.amarillo {
 color: var(--icono-importancia-amarillo);
}
.importancia-icono.rojo {
 color: var(--rojo);
}
.importancia-icono.bloqueado {
 cursor: default;
 color: var(--gris-fondo);
}
.importancia-icono.bloqueado:hover {
 transform: none;
}

.tabla-header-acciones {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 8px;
 flex-wrap: wrap;
 min-width: 0;
 flex: 1 1 100%;
 width: 100%;
}

.tabs {
 display: flex;
 gap: 4px;
 margin-bottom: 16px;
 border-bottom: 1px solid var(--gris-borde);
}

.tab-btn {
 border: none;
 background: transparent;
 padding: 10px 16px;
 font-size: 0.9rem;
 font-weight: 600;
 color: var(--texto-secundario);
 cursor: pointer;
 border-bottom: 2px solid transparent;
}
.tab-btn:hover { color: var(--azul); }
.tab-btn.active {
 color: var(--azul);
 border-bottom-color: var(--azul);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

#orden-select, #orden-select-int, #orden-select-aviso, #filtro-quirofano-int, #filtro-importancia, #filtro-importancia-int, #filtro-importancia-aviso, #filtro-usuario, #filtro-usuario-int, #filtro-usuario-aviso {
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 padding: 6px 8px;
 font-size: 0.8rem;
 color: var(--texto);
 background-color: var(--fondo-input);
 cursor: pointer;
 max-width: 100%;
 box-sizing: border-box;
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 background-image:
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 4 21 4 14 12.5 14 19 10 21 10 12.5 3 4'/%3E%3C/svg%3E"),
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
 background-repeat: no-repeat, no-repeat;
 background-position: 8px center, right 8px center;
 background-size: 13px 13px, 12px 12px;
 padding-left: 28px;
 padding-right: 24px;
}

#idioma-select {
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 padding: 6px 8px;
 font-size: 0.8rem;
 color: var(--texto);
 background: var(--fondo-input);
 cursor: pointer;
 max-width: 100%;
 box-sizing: border-box;
}

.check-ocultar {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 0.8rem;
 color: var(--texto);
 cursor: pointer;
 white-space: nowrap;
}
.check-ocultar input[type="checkbox"] {
 cursor: pointer;
}

.fecha-celda, .fecha-celda-int, .fecha-celda-aviso, .reclamacion-celda, .reclamacion-celda-int, .reclamacion-celda-aviso {
 cursor: pointer;
 border-radius: 6px;
 transition: background 0.15s;
}
.fecha-celda:hover, .fecha-celda-int:hover, .fecha-celda-aviso:hover, .reclamacion-celda:hover, .reclamacion-celda-int:hover, .reclamacion-celda-aviso:hover {
 background: var(--celda-hover-fondo);
}

.fecha-input {
 border: 1px solid var(--azul);
 border-radius: 6px;
 padding: 4px 6px;
 font-size: 0.85rem;
 font-family: inherit;
}

.descripcion-celda-int, .descripcion-celda-aviso, .observaciones-celda, .observaciones-celda-aviso {
 cursor: pointer;
 border-radius: 6px;
 transition: background 0.15s;
}
.descripcion-celda-int:hover, .descripcion-celda-aviso:hover, .observaciones-celda:hover, .observaciones-celda-aviso:hover {
 background: var(--celda-hover-fondo);
}

.descripcion-input {
 width: 100%;
 min-width: 220px;
 min-height: 60px;
 border: 1px solid var(--azul);
 border-radius: 6px;
 padding: 6px 8px;
 font-size: 0.85rem;
 font-family: inherit;
 resize: vertical;
}

.btn-icono {
 border: 1px solid var(--gris-borde);
 background: var(--fondo-input);
 border-radius: 8px;
 padding: 6px 10px;
 font-size: 1.1rem;
 line-height: 1;
 cursor: pointer;
}
.btn-icono:hover {
 background: var(--fondo-hover);
}

.btn-peligro {
 background: var(--rojo);
 color: white;
 border: none;
 padding: 10px 16px;
 border-radius: 8px;
 cursor: pointer;
 font-weight: bold;
 width: 100%;
}
.btn-peligro:hover {
 background: #b91c1c;
}

/* ---------- MODAL DE AJUSTES ---------- */
.modal-overlay {
 position: fixed;
 inset: 0;
 background: var(--sombra-overlay);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 2000;
 padding: 16px;
}
.modal-overlay.oculto {
 display: none;
}

.modal {
 background: var(--fondo-panel);
 border-radius: 12px;
 padding: 20px;
 width: 100%;
 max-width: 380px;
 max-height: 90vh;
 overflow-y: auto;
 box-shadow: 0 10px 30px var(--sombra-modal);
}

.modal-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 16px;
}
.modal-header h2 {
 margin: 0;
 font-size: 1.1rem;
}

.modal-cerrar {
 border: none;
 background: transparent;
 font-size: 1.1rem;
 cursor: pointer;
 padding: 4px 8px;
 border-radius: 6px;
 color: var(--texto);
}
.modal-cerrar:hover {
 background: var(--gris-fondo);
}

.modal-seccion {
 margin-bottom: 18px;
}
.modal-seccion:last-child {
 margin-bottom: 0;
}
.modal-seccion label {
 display: block;
 font-size: 0.85rem;
 font-weight: 600;
 margin-bottom: 6px;
 color: var(--texto);
}

.modal-seccion select,
.modal-seccion input[type="text"] {
 width: 100%;
 border: 1px solid var(--gris-borde);
 border-radius: 8px;
 padding: 8px 10px;
 font-size: 0.9rem;
 background: var(--fondo-input);
}

.modal-fila {
 display: flex;
 gap: 8px;
}
.modal-fila input {
 flex: 1;
 min-width: 0;
}
.modal-fila button {
 background: var(--azul);
 color: white;
 border: none;
 border-radius: 8px;
 padding: 0 14px;
 font-weight: 600;
 cursor: pointer;
}
.modal-fila button:hover {
 background: var(--azul-oscuro);
}

.modal-ayuda {
 margin: 6px 0 0 0;
 font-size: 0.75rem;
 color: var(--texto-secundario);
}
@media (max-width: 800px) {
 main { flex-direction: column; }

 /* En pantallas estrechas el chat y la tabla se apilan, asi que el
    desplegable se contrae/expande en alto en vez de en ancho. */
 .chat-panel { flex-basis: auto; width: 100%; max-height: 620px; }
 .chat-panel.chat-colapsado { max-height: 56px; }

 /* Botones y pestañas mas grandes y faciles de tocar */
 .tab-btn {
  flex: 1;
  text-align: center;
  padding: 14px 12px;
  font-size: 1rem;
 }

 .chat-form button,
 #btn-ajustes,
 .btn-peligro,
 .paginacion button {
  min-height: 44px;
 }

 .paginacion {
  order: 2;
 }
 .paginacion span {
  flex: 1 1 100%;
  order: -1;
 }

 .chat-form input {
  padding: 12px 14px;
 }

 .chat-form button {
  padding: 0 20px;
 }

 /* Los filtros y el orden se apilan a lo ancho en vez de apretarse en una fila */
 .tabla-header {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
 }

 .tabla-header-acciones {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
 }

 .tabla-header-acciones select,
 .check-ocultar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: none;
  min-height: 44px;
 }

 .tabla-header-acciones select {
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
 }

 .tabla-header-acciones .input-busqueda {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: none;
 }

 .stats-bar {
  gap: 8px;
 }
 .stat-chip {
  flex: 1 1 auto;
 }

 #orden-select, #orden-select-int, #orden-select-aviso, #filtro-quirofano-int, #filtro-importancia, #filtro-importancia-int, #filtro-importancia-aviso, #filtro-usuario, #filtro-usuario-int, #filtro-usuario-aviso {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 26px;
  min-height: 44px;
 }

 /* Casilla de "Ocultar cerrados" con una zona de toque comoda */
 .check-ocultar {
  padding: 8px 10px;
  background: var(--check-ocultar-fondo);
  border-radius: 8px;
  border: 1px solid var(--gris-borde);
 }
 .check-ocultar input[type="checkbox"] {
  width: 20px;
  height: 20px;
 }

 /* Estrella de importancia mas grande, mas facil de acertar con el dedo */
 .importancia-icono {
  font-size: 1.6rem;
  padding: 6px;
 }

 /* Fecha, reclamacion, observaciones/descripcion: mas aire para tocar */
 .fecha-celda, .fecha-celda-int, .fecha-celda-aviso, .reclamacion-celda, .reclamacion-celda-int, .reclamacion-celda-aviso,
 .descripcion-celda-int, .descripcion-celda-aviso, .observaciones-celda, .observaciones-celda-aviso {
  padding: 12px 10px;
 }

 table {
  font-size: 0.9rem;
 }

 th, td {
  padding: 10px 8px;
 }

 .aviso-caja-resumen {
  min-height: 36px;
 }

 header h1 {
  font-size: 1.1rem;
 }

 #idioma-select {
  min-height: 40px;
 }
}

/* ---------- SELECTOR DE TEMAS (con previsualizacion de color) ---------- */
.tema-selector {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
 gap: 10px;
 margin-top: 6px;
}

.tema-opcion {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 padding: 10px 6px;
 border: 2px solid var(--gris-borde);
 border-radius: 12px;
 background: var(--fondo-input);
 color: var(--texto);
 cursor: pointer;
 font: inherit;
 font-size: 0.78rem;
 line-height: 1.2;
 text-align: center;
 transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.tema-opcion:hover {
 border-color: var(--azul-oscuro);
 transform: translateY(-1px);
}

.tema-opcion:focus-visible {
 outline: 2px solid var(--azul);
 outline-offset: 2px;
}

.tema-opcion.activo {
 border-color: var(--azul);
 background: var(--fondo-hover);
 box-shadow: 0 0 0 1px var(--azul);
}

.tema-opcion-nombre {
 word-break: break-word;
}

.tema-swatch {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 border: 1px solid rgba(127, 127, 127, 0.35);
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 flex-shrink: 0;
}

.tema-opcion.activo .tema-swatch {
 box-shadow: 0 0 0 2px var(--fondo-panel), 0 0 0 4px var(--azul);
}

/* Cada muestra combina, en diagonal, el color de fondo y el color de acento
   de su tema — fijos, para que se vea igual sin importar el tema activo. */
.tema-swatch-claro { background: linear-gradient(135deg, #f3f4f6 50%, #2563eb 50%); }
.tema-swatch-oscuro { background: linear-gradient(135deg, #0f172a 50%, #3b82f6 50%); }
.tema-swatch-azul { background: linear-gradient(135deg, #0b1d33 50%, #38bdf8 50%); }
.tema-swatch-verde { background: linear-gradient(135deg, #0b1f17 50%, #34d399 50%); }
.tema-swatch-violeta { background: linear-gradient(135deg, #1a1233 50%, #a78bfa 50%); }
.tema-swatch-sepia { background: linear-gradient(135deg, #f4ecd8 50%, #b45309 50%); }
.tema-swatch-rosa { background: linear-gradient(135deg, #2a1220 50%, #f472b6 50%); }
.tema-swatch-naranja { background: linear-gradient(135deg, #241407 50%, #fb923c 50%); }
.tema-swatch-turquesa { background: linear-gradient(135deg, #072220 50%, #2dd4bf 50%); }
.tema-swatch-neon { background: linear-gradient(135deg, #0a0014 50%, #00f0ff 50%); box-shadow: 0 0 7px rgba(0, 240, 255, 0.65); }
.tema-swatch-synthwave { background: linear-gradient(135deg, #1a0b2e 50%, #ff36ab 50%); box-shadow: 0 0 7px rgba(255, 54, 171, 0.65); }
.tema-swatch-matrix { background: linear-gradient(135deg, #000800 50%, #00ff41 50%); box-shadow: 0 0 7px rgba(0, 255, 65, 0.65); }
.tema-swatch-pizarra { background: linear-gradient(135deg, #e2e8f0 50%, #475569 50%); }
.tema-swatch-menta { background: linear-gradient(135deg, #ecfdf5 50%, #059669 50%); }
.tema-swatch-contraste { background: linear-gradient(135deg, #000000 50%, #66d9ff 50%); border-color: #94a3b8; }