/* ═══════════════════════════════════════════════════════════════════════
   THE LAST CLICK — skin visual "Windows XP Luna"
   Esta hoja SOLO cambia apariencia. No se ha tocado ningún archivo .js:
   toda clase que el motor genera dinámicamente (bg-indigo-700, rounded,
   shadow-2xl, text-gray-500, text-[13px]…) se sigue usando tal cual;
   lo que cambia es a qué color/forma apunta esa clase (ver el remapeo de
   Tailwind en el <head> de index.html) y el aspecto de los elementos
   propios de la app (.window, .verbo, .opcion, .taskbar-item…).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* superficies */
    --xp-face: #ECE9D8;         /* gris-beige de ventanas/paneles (Luna) */
    --xp-face-light: #F6F4EA;
    --xp-face-white: #FFFFFF;
    --xp-groove: #ACA899;       /* línea de relieve media */
    --xp-groove-dark: #716F64;  /* línea de relieve oscura */
    --xp-groove-light: #FFFFFF; /* línea de relieve clara (bisel superior) */
    --xp-border-8: #C7C3B4;
    --xp-border-9: #D8D5C6;

    /* texto (de más a menos énfasis) */
    --xp-text: #17170F;
    --xp-text-2: #242419;
    --xp-text-3: #33332A;
    --xp-text-4: #4A4A3D;
    --xp-text-5: #63635A;
    --xp-text-6: #83837A;
    --xp-text-7: #948F7C;

    /* azules Luna */
    --xp-blue: #0A246A;
    --xp-blue-2: #0F3FA8;
    --xp-blue-3: #1450C4;
    --xp-blue-4: #2B6FDE;
    --xp-blue-titlebar-top: #4B9EFF;
    --xp-blue-titlebar: #1560D4;
    --xp-blue-titlebar-end: #0A3E9E;
    --xp-blue-inactive-top: #B4C7E7;
    --xp-blue-inactive: #8296C6;
    --xp-selection: #316AC5;
    --xp-selection-bg: #C1D2EE;

    /* barra de tareas */
    --xp-taskbar-top: #4C94F7;
    --xp-taskbar: #2D63D0;
    --xp-taskbar-dark: #0F3AA0;
    --xp-taskbar-darkest: #041C6B;

    /* start / éxito */
    --xp-green-light: #A9E786;
    --xp-green: #4E9A2A;
    --xp-green-dark: #276B12;

    /* estados semánticos */
    --xp-amber: #A66B00;
    --xp-amber-2: #C98A00;
    --xp-orange: #B45A00;
    --xp-orange-2: #D4741A;
    --xp-red: #B00000;
    --xp-red-2: #D42A2A;
    --xp-rose: #C43A5C;
    --xp-violet: #5C3FA0;
    --xp-violet-2: #7B5AC4;
    --xp-fuchsia: #A6338F;
    --xp-sky: #0E76BC;
    --xp-sky-2: #2C93D8;
    --xp-cyan: #147A8C;

    --xp-warning-bg: #FFFBDD;
    --xp-warning-border: #E8DFA0;
    --xp-error-bg: #FFF0F0;
    --xp-tooltip-bg: #FFFFE1;

    --xp-font: Tahoma, 'MS Sans Serif', Arial, sans-serif;
    --xp-font-mono: Consolas, 'Courier New', monospace;

    /* ---- Retro Game GUI: identidad propia para boot/login/menú/pausa/resultados,
       deliberadamente distinta del azul de ventana XP (ese se reserva para las
       apps de escritorio simuladas: Jira/Teams/Outlook…, que deben seguir
       pareciendo software corporativo real). Este es el "chrome" del videojuego. */
    --game-void: #04061a;         /* fondo más profundo, casi negro-azulado */
    --game-bg-1: #0a1650;
    --game-bg-2: #141b3d;
    --game-panel-top: #2c3a6e;
    --game-panel: #1a2244;
    --game-panel-deep: #0e1430;
    --game-border: #6f8fe8;       /* borde con leve resplandor */
    --game-border-dim: #3a4a8c;
    --game-accent: #4fe0c0;       /* cian-verde, acento tipo HUD */
    --game-accent-2: #ffce3d;     /* dorado, selección/énfasis */
    --game-text: #eaf0ff;
    --game-text-dim: #9aa8d6;
    --game-glow: rgba(111,143,232,.45);
    --game-glow-accent: rgba(79,224,192,.5);
}

/* ───────────────────────── Base ───────────────────────── */
* {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--xp-font);
}
html, body { height: 100%; }
body {
    overflow: hidden;
    font-family: var(--xp-font) !important;
    font-size: 12px;
    background: var(--xp-face);
    color: var(--xp-text);
}
::selection { background: var(--xp-selection); color: #fff; }

/* el editor y la terminal siguen siendo monoespaciados */
.font-mono, #vscode-content, .terminal-line, #terminal-input { font-family: var(--xp-font-mono) !important; }

/* ---------- Escritorio: "Bliss" hecho con gradientes, sin imagen externa ---------- */
.desktop {
    background:
        radial-gradient(ellipse 70% 55% at 50% 6%, rgba(255,255,255,.6), rgba(255,255,255,0) 62%),
        linear-gradient(180deg, #1c5bc4 0%, #3d7fe0 16%, #6fa8ef 34%, #a9d0f5 50%, #d8ecf7 60%, #eef8ea 63%),
        linear-gradient(180deg, transparent 63%, #9ecf6c 66%, #78b246 80%, #55932c 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

/* ---------- HUD: barra de estado superior (no es la taskbar de XP: es el panel
   diegético del juego, así que se resuelve como una toolbar/status-bar clásica) ---------- */
.hud {
    background: linear-gradient(180deg, var(--xp-face-light), var(--xp-border-8));
    border-bottom: 1px solid var(--xp-groove-dark);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 4px rgba(0,0,0,.25);
    color: var(--xp-text-3);
}
.hud-cell {
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 2px 6px; border-radius: 2px;
    border: 1px solid transparent;
    position: relative;
}
.hud-cell:hover { border-color: var(--xp-groove); background: rgba(255,255,255,.5); }
.hud-bar {
    height: 10px; width: 60px; border-radius: 1px; overflow: hidden; position: relative;
    background: var(--xp-face-white);
    border: 1px solid var(--xp-groove-dark);
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.35);
}
.hud-bar > div { height: 100%; transition: width .4s ease, background .4s ease; }
.hud-bar::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 5px);
}

/* tooltip clásico XP (fondo amarillo pálido) para las celdas del HUD */
.hud-cell[title] { cursor: default; }
.hud-cell[title]:hover::after {
    content: attr(title);
    position: absolute; top: 100%; left: 0; margin-top: 4px;
    background: var(--xp-tooltip-bg); color: #000;
    border: 1px solid #000; padding: 2px 6px;
    font-size: 11px; white-space: normal; width: max-content; max-width: 220px;
    box-shadow: 2px 2px 4px rgba(0,0,0,.35);
    z-index: 200; pointer-events: none;
}

/* ---------- Escritorio: iconos (placa con relieve detrás del glifo, para que
   lean como iconos de un SO y no como un glifo suelto sobre el papel tapiz) ---------- */
.desktop-icon { width: 82px; text-align: center; padding: 8px; border-radius: 2px; transition: background .05s; }
.desktop-icon i {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    width: 42px; height: 42px;
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(255,255,255,.65), rgba(255,255,255,.12));
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -6px 10px rgba(0,0,0,.08);
}
/* brillo diagonal "prerenderizado", como los iconos pulidos de juegos de PC 2000s */
.desktop-icon i::after {
    content: ''; position: absolute; inset: -30% -10% auto -10%; height: 55%;
    background: linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 60%, rgba(255,255,255,0) 100%);
    transform: rotate(-8deg); pointer-events: none;
}
.desktop-icon span {
    color: #fff; text-shadow: 1px 1px 2px #000, 0 0 3px #000;
    display: inline-block; margin-top: 2px; padding: 1px 3px;
}
.desktop-icon:hover { background: rgba(49,106,197,.35); outline: 1px dotted rgba(255,255,255,.6); }
.desktop-icon:hover span { background: var(--xp-selection); border-radius: 1px; text-shadow: none; }

/* ---------- Barra de tareas ---------- */
.taskbar {
    background: linear-gradient(180deg, var(--xp-taskbar-top) 0%, var(--xp-taskbar) 12%, var(--xp-taskbar-dark) 85%, var(--xp-taskbar-darkest) 100%);
    border-top: 1px solid #7fb2ff;
    box-shadow: 0 -1px 0 rgba(255,255,255,.25) inset, 0 -2px 6px rgba(0,0,0,.35);
}
.taskbar-item {
    padding: 4px 9px; border-radius: 2px; transition: background .05s;
    border: 1px solid transparent;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
}
.taskbar-item:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); }
.taskbar-item.activa {
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
    border: 1px solid rgba(0,0,0,.45);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,.6);
}
.taskbar-badge {
    position: absolute; top: -3px; right: -3px;
    background: var(--xp-red-2); color: #fff; font-size: 9px; line-height: 1;
    padding: 2px 4px; border-radius: 8px; font-weight: 700;
    border: 1px solid #7a0000;
}

/* botón START, verde y tridimensional, con la punta redondeada característica */
#btn-iniciar {
    background: linear-gradient(180deg, var(--xp-green-light) 0%, var(--xp-green) 45%, #2f7a17 55%, var(--xp-green-dark) 100%) !important;
    border: 1px solid #1c4d0c !important;
    border-radius: 3px 14px 14px 3px !important;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), inset -2px -2px 4px rgba(0,0,0,.3), 1px 1px 3px rgba(0,0,0,.5) !important;
    color: #fff !important;
    font-style: italic; font-weight: 700 !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    padding: 3px 14px 3px 10px !important;
}
#btn-iniciar:hover { filter: brightness(1.08); }
#btn-iniciar:active { box-shadow: inset 2px 2px 5px rgba(0,0,0,.55) !important; transform: translateY(1px); }

/* reloj / bandeja del sistema */
.taskbar > div:last-child {
    background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.1));
    border-left: 1px solid rgba(0,0,0,.4);
    border-top: 1px solid rgba(255,255,255,.15);
    height: 100%;
    padding: 0 10px;
    color: #fff !important;
}

/* ---------- Ventanas ---------- */
.window {
    position: absolute;
    background: var(--xp-face);
    border-radius: 6px 6px 3px 3px;
    border: 1px solid var(--xp-blue);
    box-shadow: 2px 3px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 300px;
    min-height: 200px;
}
.window-header {
    background: linear-gradient(180deg, var(--xp-blue-titlebar-top) 0%, var(--xp-blue-titlebar) 18%, var(--xp-blue-titlebar) 55%, var(--xp-blue-titlebar-end) 100%) !important;
    padding: 3px 4px 3px 8px;
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--xp-blue);
    font-weight: 700;
    flex: 0 0 auto;
    color: #fff !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,.45);
}
.window-header * { color: #fff !important; }
.window-header:active { cursor: grabbing; }
.window-body { flex: 1 1 auto; overflow: hidden; display: flex; min-height: 0; background: var(--xp-face-white); }

/* controles de ventana (min/restaurar/cerrar) — decorativos salvo el de cerrar */
.win-controls { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.win-btn {
    width: 21px; height: 19px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #4f97f2, #1a5cc9) !important;
    border: 1px solid #0a2e6e !important;
    border-radius: 2px !important;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 rgba(0,0,0,.25) !important;
    font-size: 9px;
}
.win-btn i { color: #fff !important; text-shadow: none; }
.win-btn:hover { filter: brightness(1.15); }
.win-btn:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,.6) !important; }
.win-btn.win-close { background: linear-gradient(180deg, #f3897a, #d43f2a) !important; border-color: #7a1400 !important; }
.win-controls-dark .win-btn { background: linear-gradient(180deg, #3a3a3a, #1a1a1a) !important; border-color: #000 !important; }
.win-controls-dark .win-btn.win-close { background: linear-gradient(180deg, #f3897a, #d43f2a) !important; border-color: #7a1400 !important; }

/* la terminal conserva su chrome oscuro (consola real), pero con marco XP */
#terminal .window-header { background: linear-gradient(180deg,#3a3a3a,#161616) !important; border-bottom: 1px solid #000; }
#terminal { border-color: #000; }

/* ---------- Controles genéricos: botones, inputs, selects ---------- */
button {
    font-family: var(--xp-font);
    border-radius: 3px !important;
}
button:not(.close-window):not(.win-btn):not(.taskbar-item):not([data-app]) {
    background: linear-gradient(180deg, var(--xp-face-light), var(--xp-border-8)) ;
    border: 1px solid var(--xp-groove-dark);
    box-shadow: inset 1px 1px 0 var(--xp-groove-light), inset -1px -1px 0 var(--xp-groove);
    color: var(--xp-text-2);
}
button:not(.close-window):not(.win-btn):not(.taskbar-item):not([data-app]):hover:not(:disabled) {
    border-color: #3399FF;
    box-shadow: inset 1px 1px 0 var(--xp-groove-light), inset -1px -1px 0 var(--xp-groove), 0 0 0 1px rgba(51,153,255,.35);
}
button:not(.close-window):not(.win-btn):not(.taskbar-item):not([data-app]):active:not(:disabled) {
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.45) !important;
    transform: translateY(1px);
}
button:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 1px dotted var(--xp-text-4);
    outline-offset: -3px;
}

input[type="text"], input[type="search"], input[type="email"], input[type="password"], textarea, select {
    font-family: var(--xp-font);
    background: var(--xp-face-white);
    color: var(--xp-text);
    border: 1px solid var(--xp-groove-dark) !important;
    border-radius: 1px !important;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,.35);
}
input[type="text"]:disabled, textarea:disabled { background: var(--xp-border-9); color: var(--xp-text-6); }
input[type="text"]:focus, textarea:focus, select:focus { border-color: var(--xp-selection) !important; }

input[type="checkbox"], input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 13px; height: 13px; vertical-align: middle;
    background: var(--xp-face-white);
    border: 1px solid var(--xp-groove-dark);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,.3);
    display: inline-block; position: relative; cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked::after {
    content: '✓'; position: absolute; inset: -3px 0 0 1px; font-size: 12px; font-weight: 700; color: var(--xp-blue);
}
input[type="radio"]:checked::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--xp-blue);
}
select {
    padding-right: 18px;
    background-image: linear-gradient(180deg, var(--xp-face-light), var(--xp-border-8));
    background-repeat: no-repeat; background-position: right center; background-size: 16px 100%;
}

/* ---------- Botones de decisión grandes (CODIFICAR / INDAGAR / REFORMULAR) ---------- */
.verbo, .opcion {
    border: 1px solid var(--xp-groove-dark) !important;
    background: linear-gradient(180deg, var(--xp-face-light), var(--xp-face)) !important;
    box-shadow: inset 1px 1px 0 var(--xp-groove-light), inset -1px -1px 0 var(--xp-groove);
    transition: none;
    text-align: left;
}
.verbo:not(:disabled):hover, .opcion:not(:disabled):hover {
    background: var(--xp-selection-bg) !important;
    border-color: #3399FF !important;
    transform: none;
}
.verbo:not(:disabled):active, .opcion:not(:disabled):active {
    box-shadow: inset 1px 1px 4px rgba(0,0,0,.4) !important;
    transform: translateY(1px);
}
.verbo-codificar:not(:disabled):hover { border-color: var(--xp-amber) !important; }
.verbo-indagar:not(:disabled):hover { border-color: var(--xp-sky) !important; }
.verbo-reformular:not(:disabled):hover { border-color: var(--xp-violet) !important; }

/* ---------- Texto / etiquetas ---------- */
.terminal-line { white-space: pre-wrap; word-break: break-word; font-family: var(--xp-font-mono); }
.badge {
    background: var(--xp-face-white); border: 1px solid var(--xp-groove);
    padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 700;
}
.chip {
    background: var(--xp-selection-bg); border: 1px solid var(--xp-selection);
    color: var(--xp-blue); padding: 2px 7px; border-radius: 8px; font-size: 10px;
}

/* callout / moraleja: nota estilo "InfoTip" XP, fondo amarillo pálido */
.destacado {
    border-left: 4px solid var(--xp-amber);
    border-top: 1px solid var(--xp-warning-border); border-right: 1px solid var(--xp-warning-border); border-bottom: 1px solid var(--xp-warning-border);
    background: var(--xp-warning-bg);
    color: var(--xp-text-2);
}

/* diálogos (modal de consecuencias / informe final) */
.modal-cara {
    background: var(--xp-face);
    border: 2px solid var(--xp-blue);
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--xp-groove-light) inset;
    color: var(--xp-text-2);
}

/* Apilado crítico: las ventanas suben de z-index al enfocarlas (100+), así que los
   diálogos necesitan una cota propia muy por encima. Va aquí y no en clases de
   Tailwind para que siga funcionando aunque el CDN no cargue. */
#modal { z-index: 9000; }
#informe { z-index: 9500; }

/* ---------- VS Code (se conserva oscuro: es un editor de código dentro del SO,
   igual que un IDE real corriendo sobre XP — solo el marco de la ventana es Luna) ---------- */
.vscode-sidebar { background: #181818; color: #B7B7A8; width: 150px; flex: 0 0 auto; border-right: 1px solid #000; }

/* ---------- Outlook ---------- */
.outlook-email { border-bottom: 1px solid var(--xp-border-8); padding: 6px 8px; cursor: pointer; transition: none; }
.outlook-email:hover { background: var(--xp-selection-bg); }
.outlook-email.no-leido { background: #FFFDF0; font-weight: 700; }

/* ---------- Teams ---------- */
.teams-message { animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }
@keyframes pulso { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.escribiendo span { animation: pulso 1s infinite; }
.escribiendo span:nth-child(2) { animation-delay: .15s }
.escribiendo span:nth-child(3) { animation-delay: .3s }

/* ---------- Colores arbitrarios de Tailwind que el remapeo de temas no alcanza
   (usan hex literal entre corchetes: bg-[#…], así que se sobreescriben aquí) ---------- */
.bg-\[\#0052cc\] { background: linear-gradient(180deg, var(--xp-blue-titlebar-top), var(--xp-blue-titlebar) 30%, var(--xp-blue-titlebar-end)) !important; }
.bg-\[\#0f6cbd\] { background: linear-gradient(180deg, var(--xp-blue-titlebar-top), var(--xp-blue-titlebar) 30%, var(--xp-blue-titlebar-end)) !important; }
.bg-\[\#101319\] { background: var(--xp-face-light) !important; color: var(--xp-text-3) !important; }
.bg-\[\#101319\] .text-blue-200 { color: var(--xp-blue) !important; }
.bg-\[\#101319\] .text-gray-500 { color: var(--xp-text-6) !important; }
.bg-\[\#12151c\] { background: var(--xp-face-white) !important; border-color: var(--xp-border-8) !important; }
.bg-\[\#1a1c24\] { background: #1E1E1E !important; } /* panel del editor de código: se mantiene oscuro a propósito */

/* excepción puntual: el input de Teams necesita fondo blanco de campo de texto,
   aunque su clase de Tailwind (bg-gray-800) también se usa como color de borde en otros sitios */
#teams-input { background: var(--xp-face-white) !important; color: var(--xp-text) !important; }
/* icono decorativo grande (bandeja vacía de Jira): visible sobre el panel claro */
.fa-jira.text-gray-700 { color: #A9A9A9 !important; }

/* ---------- Scrollbars gruesos, estilo XP ---------- */
.scroll-fino { scrollbar-width: auto; scrollbar-color: var(--xp-groove) var(--xp-face); }
.scroll-fino::-webkit-scrollbar { width: 17px; height: 17px; }
.scroll-fino::-webkit-scrollbar-track { background: var(--xp-face-light); border-left: 1px solid var(--xp-border-8); }
.scroll-fino::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--xp-face-light), var(--xp-border-8));
    border: 1px solid var(--xp-groove-dark);
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--xp-groove);
}
.scroll-fino::-webkit-scrollbar-button {
    background: linear-gradient(180deg, var(--xp-face-light), var(--xp-border-8));
    border: 1px solid var(--xp-groove-dark);
    height: 16px; width: 16px;
}
#terminal .scroll-fino::-webkit-scrollbar-track,
#terminal .scroll-fino::-webkit-scrollbar-thumb,
#terminal .scroll-fino::-webkit-scrollbar-button { background: #1a1a1a; border-color: #000; }

/* ---------- Móvil: una app a la vez, a pantalla completa ---------- */
@media (max-width: 900px) {
    .window {
        position: fixed !important;
        top: 42px !important; left: 0 !important;
        width: 100% !important; height: calc(100% - 42px - 46px) !important;
        border-radius: 0; border-left: none; border-right: none;
    }
    .window-header { cursor: default; }
    .desktop { padding-top: 52px; }
    .hud-solo-desktop { display: none !important; }
}
@media (min-width: 901px) {
    .hud-solo-movil { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Portal de reclutamiento: pantalla de login + panel del reclutador.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Pantalla de login y main menu: chrome de VIDEOJUEGO, no de Windows.
   Fondo "espacio profundo" con estrellas CSS + resplandor central; el escritorio
   real vive detrás en el DOM y, antes de aplicar el rol, esta capa opaca lo tapa. ---------- */
#login-screen, #main-menu {
    background:
        radial-gradient(1px 1px at 8% 22%, rgba(255,255,255,.9), transparent),
        radial-gradient(1px 1px at 22% 68%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 55% 80%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 68% 30%, rgba(255,255,255,.9), transparent),
        radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,.6), transparent),
        radial-gradient(ellipse 70% 55% at 50% 38%, var(--game-glow), rgba(0,0,0,0) 68%),
        radial-gradient(ellipse 120% 90% at 50% 100%, var(--game-bg-2), var(--game-void) 70%);
    background-color: var(--game-void);
}
.login-topbar {
    flex: 0 0 auto; height: 40px; display: flex; align-items: center; padding: 0 16px;
    background: linear-gradient(180deg, var(--game-panel-top), var(--game-bg-1));
    color: var(--game-text); font-weight: 700; font-size: 13px; letter-spacing: .04em;
    text-shadow: 0 0 8px var(--game-glow-accent);
    border-bottom: 1px solid var(--game-border-dim);
}
.login-topbar-sep { opacity: .6; margin: 0 8px; }
.login-footer {
    flex: 0 0 auto; padding: 8px 16px; text-align: center;
    color: var(--game-text-dim); font-size: 10px;
}
/* panel de menú/login: metálico, con bisel de "control físico" y borde con resplandor,
   en vez del cuadro de diálogo blanco de Windows */
.login-panel, .menu-panel {
    background: linear-gradient(165deg, var(--game-panel-top) 0%, var(--game-panel) 45%, var(--game-panel-deep) 100%);
    border-radius: 10px;
    border: 1px solid var(--game-border);
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.6), 0 0 26px var(--game-glow),
        inset 0 1px 0 rgba(255,255,255,.25), inset 0 -20px 30px rgba(0,0,0,.35);
    padding: 24px 28px;
    width: 340px; max-width: 100%;
    text-align: center;
}
.login-h2 { font-size: 15px; font-weight: 700; color: var(--game-text); margin-bottom: 16px; text-shadow: 0 0 10px var(--game-glow-accent); letter-spacing: .03em; }
.login-avatars { display: flex; flex-direction: column; gap: 10px; }
button.login-avatar {
    display: flex !important; align-items: center; gap: 14px; text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.15)) !important;
    border: 1px solid var(--game-border-dim) !important;
    border-radius: 6px !important; padding: 10px 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -6px 10px rgba(0,0,0,.25) !important;
}
button.login-avatar:hover {
    background: linear-gradient(180deg, rgba(111,143,232,.35), rgba(111,143,232,.12)) !important;
    border-color: var(--game-accent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 14px var(--game-glow-accent) !important;
}
button.login-avatar:active { box-shadow: inset 1px 1px 6px rgba(0,0,0,.5) !important; }
.login-avatar-icon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--game-accent), #1a8f75);
    color: #06231c; font-size: 17px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 10px var(--game-glow-accent);
}
.login-avatar-label { font-size: 13px; font-weight: 700; color: var(--game-text); }
.login-avatar-lg {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center; font-size: 26px; color: #06231c;
    background: linear-gradient(145deg, var(--game-accent), #1a8f75);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 0 16px var(--game-glow-accent);
}
button.login-back {
    background: none !important; border: none !important; box-shadow: none !important;
    color: var(--game-accent) !important; font-size: 11px; padding: 0 !important; margin-bottom: 8px;
    align-self: flex-start; text-shadow: 0 0 6px var(--game-glow-accent);
}
button.login-back:hover { text-decoration: underline; }
.login-label { display: block; text-align: left; font-size: 11px; color: var(--game-text-dim); margin: 10px 0 3px; letter-spacing: .03em; }
.login-input {
    width: 100%; padding: 5px 7px !important;
    background: rgba(4,6,26,.55) !important; color: var(--game-text) !important;
    border: 1px solid var(--game-border-dim) !important;
    box-shadow: inset 1px 1px 4px rgba(0,0,0,.5) !important;
}
.login-input:focus { border-color: var(--game-accent) !important; box-shadow: inset 1px 1px 4px rgba(0,0,0,.5), 0 0 6px var(--game-glow-accent) !important; }
.login-error {
    margin-top: 10px; padding: 6px 8px; background: rgba(176,0,0,.25); border: 1px solid var(--xp-red-2);
    color: #ffb3b3; font-size: 11px; text-align: left; border-radius: 2px;
}
button.login-submit {
    display: block; width: 100%; margin-top: 16px !important;
    background: linear-gradient(180deg, var(--xp-green-light), var(--xp-green) 55%, var(--xp-green-dark)) !important;
    border: 1px solid var(--xp-green-dark) !important; color: #fff !important; font-weight: 700 !important;
    padding: 7px !important; text-shadow: 1px 1px 1px rgba(0,0,0,.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 12px rgba(78,154,42,.5) !important;
}
/* variante secundaria (metálica, sin verde), para acciones no primarias en pantallas de menú */
button.login-submit.login-submit-secondary {
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.2)) !important;
    border: 1px solid var(--game-border-dim) !important; color: var(--game-text) !important;
    text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.login-hint { margin-top: 12px; font-size: 10px; color: var(--game-text-dim); line-height: 1.5; }
.login-loading { display: flex; flex-direction: column; align-items: center; padding: 40px 28px; }
.login-spinner {
    width: 30px; height: 30px; border-radius: 50%;
    border: 3px solid var(--game-border-dim); border-top-color: var(--game-accent);
    box-shadow: 0 0 10px var(--game-glow-accent);
    animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Panel del reclutador (Recruitment Assessment Manager) ---------- */
.admin-menubar {
    flex: 0 0 auto; display: flex; gap: 2px; padding: 3px 6px;
    background: var(--xp-face-light); border-bottom: 1px solid var(--xp-border-8);
    font-size: 11px; color: var(--xp-text-2);
}
.admin-menubar span { padding: 2px 8px; border-radius: 2px; cursor: default; }
.admin-menubar span:hover { background: var(--xp-selection); color: #fff; }
.admin-toolbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 4px 6px;
    background: var(--xp-face); border-bottom: 1px solid var(--xp-border-8);
}
.admin-toolbar button {
    width: 24px; height: 22px; padding: 0 !important; font-size: 11px !important;
}
.admin-toolbar-sep { width: 1px; align-self: stretch; background: var(--xp-border-8); margin: 0 4px; }
.admin-search { flex: 1 1 auto; padding: 2px 6px !important; font-size: 11px !important; max-width: 220px; }
.admin-statusbar {
    flex: 0 0 auto; padding: 3px 8px; font-size: 10px; color: var(--xp-text-6);
    background: var(--xp-face-light); border-top: 1px solid var(--xp-border-9);
    box-shadow: inset 0 1px 0 #fff;
}

.admin-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.admin-table thead th {
    background: linear-gradient(180deg, var(--xp-face-light), var(--xp-border-8));
    border: 1px solid var(--xp-groove);
    padding: 4px 8px; text-align: left; font-weight: 700; color: var(--xp-text-2);
    position: sticky; top: 0;
}
.admin-table td { border: 1px solid var(--xp-border-9); padding: 4px 8px; color: var(--xp-text-2); }
.admin-table .admin-row { cursor: pointer; }
.admin-table .admin-row:hover td { background: var(--xp-selection-bg); }
.admin-table .admin-row.selected td { background: var(--xp-selection); color: #fff; }
.admin-empty { text-align: center; color: var(--xp-text-6); padding: 20px !important; font-style: italic; }
.admin-actions { display: flex; gap: 6px; margin-top: 8px; }
.admin-actions button { font-size: 11px !important; padding: 4px 10px !important; }
.demo-tag {
    font-size: 9px; color: var(--xp-text-6); border: 1px solid var(--xp-border-8);
    border-radius: 8px; padding: 0 5px; font-style: italic;
}

.status-pill, .result-pill {
    display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px;
    border: 1px solid transparent;
}
.status-ok, .result-ok { background: #DFF3D8; color: var(--xp-green-dark); border-color: var(--xp-green); }
.status-warn { background: var(--xp-warning-bg); color: var(--xp-amber); border-color: var(--xp-amber-2); }
.status-muted { background: var(--xp-face-light); color: var(--xp-text-6); border-color: var(--xp-border-8); }
.result-bad { background: var(--xp-error-bg); color: var(--xp-red); border-color: var(--xp-red-2); }

.admin-detail-head { display: grid; gap: 3px; margin-bottom: 10px; font-size: 12px; color: var(--xp-text-2); }
.admin-subtitle {
    font-size: 10px; font-family: var(--xp-font-mono); letter-spacing: .08em;
    color: var(--xp-blue-3); margin: 12px 0 4px; text-transform: uppercase;
}
.admin-box {
    background: var(--xp-face-white); border: 1px solid var(--xp-border-8); border-radius: 2px;
    padding: 8px 10px; font-size: 12px; color: var(--xp-text-2); line-height: 1.5;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   Capa "videojuego retro de PC": boot, main menu, pausa, CRT, resultados
   estilo stats-screen. Windows XP sigue siendo la base (mismas ventanas,
   mismos controles), esto es lo que la envuelve como si fuera un juego.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- transiciones cortas, nunca "modernas y suaves" ---------- */
.login-screen-fade, #login-screen, #main-menu, #boot-screen, #loading-screen { transition: opacity .15s linear; }

/* ---------- Boot ---------- */
#boot-screen { background: #000; cursor: pointer; }
.boot-lines {
    font-family: var(--xp-font-mono); font-size: 13px; line-height: 1.7;
    color: #6fdc6f; text-shadow: 0 0 4px rgba(111,220,111,.55);
    width: 520px; max-width: 90vw; white-space: pre-wrap;
}
.boot-lines .boot-ok { color: #9fe89f; float: right; }
.boot-cursor { display: inline-block; width: 8px; height: 14px; background: #6fdc6f; margin-left: 2px; animation: parpadeo 1s steps(1) infinite; vertical-align: -2px; }
@keyframes parpadeo { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* ---------- Main menu: el panel reutiliza .login-panel (mismo chrome de juego);
   aquí solo lo específico del título y de los ítems, ahora como botones 3D reales
   (relieve + resplandor de selección), no como una lista de texto plano. ---------- */
.menu-title {
    font-size: 17px; font-weight: 700; letter-spacing: .1em; text-align: center;
    color: var(--game-accent-2); margin-bottom: 4px; text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255,206,61,.55), 0 2px 2px rgba(0,0,0,.6);
}
.menu-player { text-align: center; font-size: 11px; color: var(--game-text-dim); margin-bottom: 16px; font-family: var(--xp-font-mono); letter-spacing: .06em; }
.menu-items { display: flex; flex-direction: column; gap: 8px; }
button.menu-item {
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.18)) !important;
    border: 1px solid var(--game-border-dim) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -8px 12px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.35) !important;
    text-align: left !important; padding: 9px 14px !important; font-size: 13px !important; font-weight: 700;
    border-radius: 4px !important;
    color: var(--game-text) !important; letter-spacing: .05em; text-transform: uppercase;
    display: flex !important; align-items: center; gap: 8px;
}
button.menu-item::before { content: '▸'; display: inline-block; width: 12px; color: var(--game-accent); font-weight: 700; opacity: 0; transition: opacity .1s; }
button.menu-item:hover:not(:disabled), button.menu-item:focus-visible:not(:disabled) {
    background: linear-gradient(180deg, rgba(79,224,192,.28), rgba(79,224,192,.08)) !important;
    border-color: var(--game-accent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 16px var(--game-glow-accent) !important;
    color: #fff !important;
}
button.menu-item:hover:not(:disabled)::before, button.menu-item:focus-visible:not(:disabled)::before { opacity: 1; }
button.menu-item:active:not(:disabled) { box-shadow: inset 0 2px 6px rgba(0,0,0,.55) !important; transform: translateY(1px); }
button.menu-item:disabled { opacity: .35; }
.menu-status {
    margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--game-border-dim);
    font-family: var(--xp-font-mono); font-size: 10px; color: var(--game-text-dim); text-align: center; letter-spacing: .1em;
}
.menu-status span { color: var(--game-accent); font-weight: 700; text-shadow: 0 0 8px var(--game-glow-accent); }
.login-status-ready {
    margin-top: 8px; font-family: var(--xp-font-mono); font-size: 10px; letter-spacing: .1em;
    color: var(--game-accent); text-align: center; text-shadow: 0 0 8px var(--game-glow-accent);
}

/* ---------- Loading (transición corta entre pantallas) ---------- */
#loading-screen { background: rgba(4,6,26,.88); }
#loading-screen .login-loading {
    background: linear-gradient(165deg, var(--game-panel-top), var(--game-panel-deep));
    border: 1px solid var(--game-border); border-radius: 8px; padding: 30px 40px;
    box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 20px var(--game-glow);
}

/* ---------- Options ---------- */
.options-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--game-border-dim); font-size: 12px; color: var(--game-text); }
.options-row:last-of-type { border-bottom: none; }

/* ---------- Mission status popover: HUD de videojuego flotante ---------- */
.status-popover {
    position: fixed; right: 12px; bottom: 54px; z-index: 9650;
    width: 230px;
    background: linear-gradient(165deg, var(--game-panel-top), var(--game-panel-deep));
    border: 1px solid var(--game-border);
    border-radius: 4px; box-shadow: 2px 3px 14px rgba(0,0,0,.6), 0 0 16px var(--game-glow);
    padding: 10px 12px; font-size: 11px;
}
.status-popover-title { font-weight: 700; letter-spacing: .08em; color: var(--game-accent-2); margin-bottom: 6px; font-size: 10px; text-shadow: 0 0 8px rgba(255,206,61,.5); }
.status-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: var(--game-text-dim); }
.status-row span { flex: 0 0 auto; }
.status-row b { color: var(--game-text); font-family: var(--xp-font-mono); text-align: right; word-break: break-word; }
.status-progress-bar { height: 8px; border: 1px solid var(--game-border-dim); background: rgba(0,0,0,.4); margin: 4px 0 6px; box-shadow: inset 1px 1px 0 rgba(0,0,0,.3); }
.status-progress-bar > div { height: 100%; background: linear-gradient(180deg, var(--game-accent), #1a8f75); box-shadow: 0 0 6px var(--game-glow-accent); }

/* ---------- Stats screen dentro del informe final: pantalla de puntuación de
   videojuego, deliberadamente oscura y con resplandor, en contraste con el resto
   del informe (que sigue leyendo como "reporte corporativo" XP a propósito). ---------- */
.stats-box {
    border: 1px solid var(--game-border); border-radius: 6px;
    background: linear-gradient(165deg, var(--game-panel-top), var(--game-panel-deep));
    box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.4), 0 0 22px var(--game-glow), inset 0 1px 0 rgba(255,255,255,.15);
    padding: 14px 18px; font-family: var(--xp-font-mono); font-size: 12px; color: var(--game-text-dim);
    margin-bottom: 14px;
}
.stats-box-title {
    text-align: center; font-weight: 700; letter-spacing: .14em; color: var(--game-accent-2);
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--game-border-dim);
    text-shadow: 0 0 10px rgba(255,206,61,.5);
}
.stats-line { display: flex; justify-content: space-between; padding: 2px 0; }
.stats-line span { letter-spacing: .04em; }
.stats-line b { color: var(--game-text); }
.stats-score { font-size: 26px; font-weight: 700; color: var(--game-accent); text-align: center; margin: 2px 0 8px; text-shadow: 0 0 14px var(--game-glow-accent); }
.stats-bar-label { font-size: 10px; letter-spacing: .1em; color: var(--game-text-dim); margin-top: 8px; }
.stats-bar-track { height: 12px; border: 1px solid var(--game-border-dim); background: rgba(0,0,0,.45); margin-top: 4px; box-shadow: inset 1px 1px 0 rgba(0,0,0,.4); }
.stats-bar-fill { height: 100%; background: repeating-linear-gradient(90deg, var(--game-accent) 0 6px, #1a8f75 6px 8px); box-shadow: 0 0 8px var(--game-glow-accent); }
.result-stamp {
    display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: .14em;
    padding: 5px 16px; border: 2px solid; border-radius: 3px; transform: rotate(-3deg);
    margin-bottom: 10px; text-transform: uppercase;
}
.result-stamp.win { color: #b6ffcf; border-color: var(--game-accent); background: rgba(79,224,192,.16); box-shadow: 0 0 14px var(--game-glow-accent); text-shadow: 0 0 8px rgba(79,224,192,.6); }
.result-stamp.lose { color: #ffb3b3; border-color: var(--xp-red-2); background: rgba(176,0,0,.18); box-shadow: 0 0 14px rgba(212,42,42,.4); text-shadow: 0 0 8px rgba(212,42,42,.5); }

/* ---------- CRT: scanlines + viñeta + glow muy sutiles, nunca sobre la legibilidad -----------
   Deliberadamente SIN mix-blend-mode: sobre un overlay position:fixed a z-index altísimo,
   apilado por encima de otras capas fixed (login/menú/boot/diálogos), ese modo de mezcla
   puede renderizar mal (a veces como negro sólido) según navegador/GPU. Composición normal
   con alfa bajo consigue el mismo efecto sin ese riesgo. */
#crt-overlay {
    position: fixed; inset: 0; z-index: 10060; pointer-events: none;
    background:
        repeating-linear-gradient(180deg, rgba(0,0,0,.05) 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 2px),
        radial-gradient(ellipse 120% 100% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.10) 100%);
}
body.crt-off #crt-overlay { display: none; }

/* transición corta al pulsar botones: un pequeño destello, no un fade moderno */
@keyframes destello { 0% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
button:active:not(:disabled) { animation: destello .12s ease-out; }