/* ═══════════════════════════════════════════════
   intro-base.css — Variables, reset, splash, login
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&family=Exo+2:wght@300;600;800&family=Caveat:wght@400;600&display=swap');

/* ── VARIABLES GLOBALES ── */
:root {
  --cyan:       #00f0ff;
  --cyan-dim:   rgba(0,240,255,0.12);
  --blue:       #0ea5e9;
  --blue-dark:  #0284c7;
  --gold:       #f59e0b;
  --red:        #ef4444;
  --green:      #10b981;
  --dark:       #020617;
  --panel:      rgba(6,10,28,0.97);
  --text:       #e2e8f0;
  --muted:      #64748b;
  --excel-green:#217346;

  --font-ui:    'Rajdhani', sans-serif;
  --font-mono:  'Share Tech Mono', monospace;
  --font-main:  'Exo 2', sans-serif;
  --font-hand:  'Caveat', cursive;

  --ease-out:   cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100vw; height:100vh;
  overflow:hidden;
  background:#000;
  font-family:var(--font-main);
  color:var(--text);
  cursor:none;
}

/* ── SCANLINES ── */
body::before {
  content:'';
  position:fixed; inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px
  );
  pointer-events:none;
  z-index:9000;
}

/* ── CURSOR ── */
#cursor-dot {
  position:fixed; width:8px; height:8px;
  background:var(--cyan); border-radius:50%;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px var(--cyan);
}
#cursor-ring {
  position:fixed; width:32px; height:32px;
  border:1px solid rgba(0,240,255,0.5); border-radius:50%;
  pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
  transition:width .15s, height .15s, border-color .15s;
}

/* ── TRANSITION OVERLAY ── */
#transition-overlay {
  position:fixed; inset:0; z-index:9500;
  background:radial-gradient(ellipse at center, #010820 0%, #000 100%);
  opacity:1; transition:opacity .9s ease;
  pointer-events:none;
}
#transition-overlay.clear { opacity:0; }

/* ── AUDIO TOGGLE ── */
#audio-toggle {
  position:fixed; bottom:22px; right:22px; z-index:8500;
  background:rgba(6,10,28,0.92);
  border:1px solid rgba(0,240,255,0.3);
  border-radius:50%; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; cursor:none;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:0 4px 15px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,240,255,.08);
}
#audio-toggle:hover {
  border-color:var(--cyan);
  box-shadow:0 0 20px rgba(0,240,255,0.25);
}

/* ── SHARED BUTTON STYLES ── */
.btn-primary {
  background:linear-gradient(135deg, var(--blue), var(--blue-dark));
  border:none; border-radius:8px;
  color:white; font-family:var(--font-ui);
  font-weight:700; font-size:14px;
  letter-spacing:3px; text-transform:uppercase;
  padding:13px; cursor:none; width:100%;
  transition:all .25s;
  box-shadow:0 4px 20px rgba(14,165,233,0.3);
}
.btn-primary:hover {
  box-shadow:0 8px 30px rgba(14,165,233,0.5);
  transform:translateY(-2px);
}
.btn-primary:active { transform:scale(0.98); }

.hidden { display:none !important; }

/* ═══════════════════════════════════════════════
   AREA SELECT — CINEMATIC PANELS
═══════════════════════════════════════════════ */

#area-select{
  position:fixed;inset:0;z-index:2000;
  display:none;flex-direction:column;
  background:#000;overflow:hidden;
}
#area-select.active{display:flex;animation:winMaximize .4s cubic-bezier(.22,1,.36,1) both;}
@keyframes winMaximize{from{opacity:0;transform:scale(.97) translateY(-6px);}to{opacity:1;transform:none;}}

/* ── AREA SELECT — Win11 App Shell ── */
.ase-titlebar{border-radius:0!important;}
.ase-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  height:36px;padding:0 16px;
  background:rgba(26,26,36,.97);
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}
.ase-tleft{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:3px;
  color:rgba(255,255,255,.45);
}
.ase-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  animation:hudblink 2s ease-in-out infinite;
}
@keyframes hudblink{0%,100%{opacity:1}50%{opacity:.3}}
.ase-tright{
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:rgba(255,255,255,.35);
}
.ase-tright span{color:var(--cyan);font-weight:700;}
.ase-statusbar{
  display:flex;align-items:center;gap:8px;
  height:22px;padding:0 16px;
  background:rgba(20,20,28,.98);
  border-top:1px solid rgba(255,255,255,.04);
  font-family:var(--font-mono);font-size:9px;letter-spacing:2px;
  color:rgba(255,255,255,.2);flex-shrink:0;
}
.asb-sep{color:rgba(255,255,255,.1);}

/* ══════════════════════════════════
   PANELS CONTAINER
══════════════════════════════════ */
.asp-panels{
  flex:1;display:flex;flex-direction:row;overflow:hidden;position:relative;
}

/* ── Individual panel ── */
.asp-panel{
  flex:1;position:relative;overflow:hidden;
  transition:flex .65s cubic-bezier(.4,0,.2,1);
  cursor:none;
}
.asp-panel.asp-open{flex:3.8;}

/* Background image */
.asp-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:filter .65s ease, transform .75s cubic-bezier(.4,0,.2,1);
  filter:brightness(.2) saturate(.5);
  transform:scale(1.0);
}
.asp-panel.asp-open .asp-bg{
  filter:brightness(.42) saturate(.8);
  transform:scale(1.0);
}
/* ── HOVER ZOOM — se aplica a todos los paneles ── */
.asp-panel:hover .asp-bg{
  transform:scale(1.08) !important;
}

/* Locked panel: extra dark */
.asp-panel.asp-locked .asp-bg{
  filter:brightness(.12) saturate(0);
}
.asp-panel.asp-locked.asp-open .asp-bg{
  filter:brightness(.25) saturate(.25);
}

/* Bottom fog */
.asp-panel::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:65%;
  background:linear-gradient(to top,rgba(2,6,23,.98) 0%,rgba(2,6,23,.4) 60%,transparent 100%);
  pointer-events:none;z-index:2;
}

/* Left accent stripe (open panel) */
.asp-panel.asp-open::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:3px;
  background:linear-gradient(to bottom,transparent,var(--cyan) 35%,var(--cyan) 65%,transparent);
  z-index:9;opacity:.8;
}
.asp-panel.asp-locked.asp-open::before{
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.2) 35%,rgba(255,255,255,.2) 65%,transparent);
}

/* ── COLLAPSED LABEL ── */
.asp-label{
  position:absolute;bottom:52px;left:0;right:0;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  z-index:5;transition:opacity .35s ease;pointer-events:none;
}
.asp-panel.asp-open .asp-label{opacity:0;}
.asp-label-icon{font-size:26px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.9));}
.asp-label-name{
  font-family:var(--font-ui);font-size:13px;font-weight:700;
  letter-spacing:4px;color:rgba(255,255,255,.7);text-transform:uppercase;white-space:nowrap;
}
.asp-label-status{font-family:var(--font-mono);font-size:8px;letter-spacing:3px;text-transform:uppercase;}
.asp-label-status.available{color:var(--cyan);}
.asp-label-status.wip{color:rgba(255,255,255,.3);}

/* Hover on collapsed panels */
.asp-panel:not(.asp-open):hover .asp-bg{
  filter:brightness(.28) saturate(.5) !important;transform:scale(1.02);
}
.asp-panel:not(.asp-open):hover .asp-label-name{color:rgba(255,255,255,.95);}

/* ── DETAIL PANEL ── */
.asp-detail{
  position:absolute;inset:0;padding:28px 30px 20px;
  display:flex;flex-direction:column;gap:14px;
  z-index:6;opacity:0;transition:opacity .4s ease .25s;
  pointer-events:none;overflow-y:auto;
}
.asp-detail::-webkit-scrollbar{width:3px;}
.asp-detail::-webkit-scrollbar-thumb{background:rgba(0,240,255,.2);border-radius:2px;}
.asp-panel.asp-open .asp-detail{opacity:1;pointer-events:all;}

/* Detail header */
.asp-d-badge{
  font-family:var(--font-mono);font-size:9px;letter-spacing:4px;
  color:var(--cyan);text-transform:uppercase;margin-bottom:8px;
}
.asp-d-badge.locked{color:rgba(255,255,255,.3);}
.asp-d-title{
  font-family:var(--font-ui);font-size:clamp(26px,3.2vw,42px);
  font-weight:700;line-height:1.05;letter-spacing:1px;
  color:#fff;text-transform:uppercase;margin-bottom:6px;
}
.asp-d-title span{color:var(--cyan);display:block;}
.asp-locked .asp-d-title span{color:rgba(255,255,255,.45);}
.asp-d-sub{
  font-family:var(--font-main);font-size:11px;color:rgba(255,255,255,.4);line-height:1.5;
}
.asp-d-rule{
  height:1px;
  background:linear-gradient(to right,rgba(0,240,255,.4),rgba(0,240,255,.1),transparent);
  flex-shrink:0;margin:2px 0;
}
.asp-locked .asp-d-rule{background:linear-gradient(to right,rgba(255,255,255,.15),transparent);}

/* Detail body */
.asp-d-body{flex:1;display:flex;flex-direction:column;gap:16px;min-height:0;}

/* What you'll learn */
.asp-learn{display:flex;flex-direction:column;gap:6px;}
.asp-learn-h{
  font-family:var(--font-mono);font-size:8px;letter-spacing:3px;
  color:rgba(0,240,255,.55);text-transform:uppercase;margin-bottom:2px;
}
.asp-li{
  font-family:var(--font-main);font-size:11.5px;color:rgba(215,230,255,.78);
  padding:5px 10px;background:rgba(0,240,255,.05);
  border-left:2px solid rgba(0,240,255,.3);border-radius:0 3px 3px 0;line-height:1.35;
}
.asp-li.muted{
  color:rgba(255,255,255,.28);background:rgba(255,255,255,.02);
  border-left-color:rgba(255,255,255,.1);
}

/* Boss silhouettes */
.asp-bosses{display:flex;flex-direction:column;gap:6px;}
.asp-bosses-h{
  font-family:var(--font-mono);font-size:8px;letter-spacing:3px;
  color:rgba(0,240,255,.55);text-transform:uppercase;
}
.asp-locked .asp-bosses-h{color:rgba(255,255,255,.2);}
.asp-boss-row{display:flex;gap:8px;align-items:flex-end;justify-content:space-between;}
.asp-boss-row.single{justify-content:center;}
.asp-boss{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  max-width:120px;
}
.asp-boss-row.single .asp-boss{max-width:150px;}
.asp-boss-img{
  width:100%;
  height:22vh;            /* ← GRANDE como en el trailer */
  object-fit:contain;object-position:bottom;
  filter:brightness(0);  /* ← silueta negra */
  opacity:.9;
  transition:filter .3s ease, opacity .3s ease;
}
.asp-boss-row.single .asp-boss-img{height:26vh;}
.asp-boss-dept{
  font-family:var(--font-mono);font-size:8px;letter-spacing:2px;
  color:var(--cyan);text-transform:uppercase;
}
.asp-locked .asp-boss-dept{color:rgba(255,255,255,.2);}
.asp-boss-name{font-family:var(--font-main);font-size:10px;color:rgba(255,255,255,.45);text-align:center;}

/* Coming soon pill */
.asp-coming-soon{
  font-family:var(--font-mono);font-size:9px;letter-spacing:3px;
  color:rgba(255,255,255,.22);text-align:center;
  padding:10px;border:1px solid rgba(255,255,255,.07);
  border-radius:3px;background:rgba(255,255,255,.02);flex-shrink:0;
}

/* Enter button */
.asp-btn-enter{
  width:100%;padding:13px 20px;flex-shrink:0;margin-top:4px;
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  border:none;border-radius:3px;
  font-family:var(--font-ui);font-size:13px;font-weight:700;
  letter-spacing:3px;color:#fff;text-transform:uppercase;
  cursor:none;transition:all .25s;
  box-shadow:0 4px 24px rgba(14,165,233,.4);
}
.asp-btn-enter:hover{box-shadow:0 6px 36px rgba(14,165,233,.7);transform:translateY(-2px);}
.asp-btn-enter:active{transform:scale(.98);}

/* ── Hero boss — centrado en el panel, siempre visible, a color ── */
.asp-hero-boss{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);   /* centrado horizontal */
  height:88%;width:auto;
  max-width:none;               /* sin límite de ancho */
  object-fit:contain;object-position:bottom center;
  filter:none;                  /* A COLOR — sin silueta */
  opacity:.18;                  /* visible incluso en estado colapsado */
  z-index:4;
  pointer-events:none;
  transition:opacity .55s ease .15s, filter .55s ease .15s;
}
/* Panel abierto → jefe a plena visibilidad */
.asp-panel.asp-open .asp-hero-boss{
  opacity:.88;
}
/* Hover en panel cerrado → ligero preview */
.asp-panel:not(.asp-open):hover .asp-hero-boss{
  opacity:.38;
}
/* Paneles bloqueados: desaturados y más oscuros */
.asp-panel.asp-locked .asp-hero-boss{
  filter:brightness(.4) saturate(.1);
  opacity:.2;
}
.asp-panel.asp-locked.asp-open .asp-hero-boss{
  opacity:.55;
  filter:brightness(.55) saturate(.3);
}
.asp-panel.asp-locked:not(.asp-open):hover .asp-hero-boss{
  opacity:.32;
  filter:brightness(.45) saturate(.15);
}

/* Detail column on the LEFT — sólo ocupa el 52% izquierdo */
.asp-detail.asp-detail-left{
  inset:0 48% 0 0;
  overflow-y:auto;
}

/* Hover: panel click hint */
.asp-panel:not(.asp-open){cursor:none;}
.asp-panel:not(.asp-open) .asp-click-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:8px;letter-spacing:2px;
  color:rgba(255,255,255,.25);white-space:nowrap;z-index:5;
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.asp-panel:not(.asp-open):hover .asp-click-hint{opacity:1;}

/* ═══════════════════════════════════════════════
   PRE-MISSION SCREEN — Logística preview
═══════════════════════════════════════════════ */
#logistica-preview,
#turismo-preview,
#energia-preview,
#mineria-preview{
  position:fixed;inset:0;z-index:3000;
  display:none;flex-direction:column;
  background:rgba(0,0,0,.97);
  backdrop-filter:blur(0px);
  opacity:0;transition:opacity .45s ease;
}
#logistica-preview.show,
#turismo-preview.show,
#energia-preview.show,
#mineria-preview.show{display:flex;}
#logistica-preview.visible,
#turismo-preview.visible,
#energia-preview.visible,
#mineria-preview.visible{opacity:1;}

/* Win11 Preview Titlebar */
.lp-win-titlebar{
  display:flex;align-items:center;
  height:32px;padding:0 0 0 16px;
  background:rgba(28,28,38,.98);
  border-bottom:1px solid rgba(255,255,255,.05);
  gap:8px;flex-shrink:0;position:relative;
}
.lp-win-titlebar::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--sector-c,#00f0ff);
}
.lp-wt-icon{font-size:14px;margin-left:4px;}
.lp-wt-title{
  flex:1;font-size:12px;font-weight:400;
  color:rgba(255,255,255,.72);
  font-family:'Segoe UI',var(--font-ui);letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lp-wt-ctrls{display:flex;height:100%;margin-left:auto;}
.lp-wt-ctrl,.lp-wt-close{
  width:46px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;
  color:rgba(255,255,255,.6);font-size:12px;cursor:none;
  transition:background .1s,color .1s;
}
.lp-wt-ctrl:hover{background:rgba(255,255,255,.1);color:#fff;}
.lp-wt-close:hover{background:#c42b1c;color:#fff;}

/* Main panels area */
.lp-panels{
  flex:1;display:flex;flex-direction:row;overflow:hidden;gap:0;
}

/* Each module card */
.lp-card{
  flex:1;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  border-right:1px solid rgba(255,255,255,.06);
}
.lp-card:last-child{border-right:none;}

/* BG per card */
.lp-card-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:brightness(.25) saturate(.5);
  transition:filter .5s ease;
}
.lp-card:hover .lp-card-bg{filter:brightness(.35) saturate(.7);}

/* Card gradient overlay */
.lp-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(2,6,23,.98) 0%,rgba(2,6,23,.5) 50%,transparent 100%);
  pointer-events:none;z-index:1;
}

/* Card content */
.lp-card-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  height:100%;padding:0 20px 20px;
}

/* Module number badge */
.lp-mod-num{
  position:absolute;top:16px;left:20px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:3px;
  color:rgba(0,240,255,.5);font-weight:700;
}

/* Boss portrait — large, colored (NO silhouette here) */
.lp-boss-wrap{
  flex:1;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:0;
  overflow:hidden;   /* recorta si la imagen supera la altura del wrapper */
  position:relative; /* establece contexto de desbordamiento */
}
.lp-boss-img{
  height:63vh;          /* sin max-width → la altura manda, wrapper recorta */
  width:auto;
  max-width:none;
  display:block;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.9));
  transform-origin:bottom center;
  transition:transform .4s ease;
}
.lp-card:hover .lp-boss-img{transform:translateY(-8px);}

/* Beatriz (M02) — tamaño natural */
.lp-panels .lp-card:nth-child(2) .lp-boss-img{
  transform:scale(1);
}
.lp-panels .lp-card:nth-child(2):hover .lp-boss-img{
  transform:scale(1) translateY(-8px);
}

/* Card footer text */
.lp-card-foot{
  flex-shrink:0;padding-top:12px;
  border-top:1px solid rgba(0,240,255,.1);
}
.lp-dept{
  font-family:var(--font-ui);font-size:17px;font-weight:700;
  letter-spacing:4px;color:#fff;text-transform:uppercase;margin-bottom:3px;
}
.lp-boss-name{
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:var(--cyan);margin-bottom:6px;
}
.lp-desc{
  font-family:var(--font-main);font-size:11px;color:rgba(200,220,255,.55);
  line-height:1.55;
}

/* Bottom action bar */
.lp-action{
  flex-shrink:0;padding:16px 32px;
  background:rgba(2,6,23,.98);
  border-top:1px solid rgba(0,240,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.lp-action-note{
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:rgba(255,255,255,.3);
}
.lp-btn-start{
  font-family:var(--font-ui);font-size:14px;font-weight:700;
  letter-spacing:4px;color:#fff;text-transform:uppercase;
  padding:14px 48px;background:linear-gradient(135deg,#0ea5e9,#0284c7);
  border:none;border-radius:3px;cursor:none;
  box-shadow:0 4px 30px rgba(14,165,233,.45);
  transition:all .25s;
}
.lp-btn-start:hover{box-shadow:0 6px 48px rgba(14,165,233,.75);transform:translateY(-2px);}
.lp-btn-start:active{transform:scale(.98);}

/* ═══════════════════════════════════════════════
   SPLASH
═══════════════════════════════════════════════ */
#splash-screen {
  position:fixed; inset:0; z-index:8000;
  background:#000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:52px; overflow:hidden;
}

/* Win11 four-square logo */
.win-logo-4 {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4px; width:62px; height:62px;
  animation:fadeInUp .5s .5s both;
}
.wl4-q { border-radius:2px; }
.wl4-r { background:#F35325; }
.wl4-g { background:#81BC06; }
.wl4-b { background:#05A6F0; }
.wl4-y { background:#FFBA08; }

/* Loading dots */
.win-boot-dots {
  display:flex; gap:11px; align-items:center;
  animation:fadeInUp .4s 1s both;
}
.wbd {
  width:6px; height:6px; border-radius:50%;
  background:#fff;
  animation:winBootDot 1.4s ease-in-out infinite;
}
.wbd:nth-child(1){ animation-delay:0s;   }
.wbd:nth-child(2){ animation-delay:.14s; }
.wbd:nth-child(3){ animation-delay:.28s; }
.wbd:nth-child(4){ animation-delay:.42s; }
.wbd:nth-child(5){ animation-delay:.56s; }
@keyframes winBootDot {
  0%,80%,100% { opacity:.18; transform:scale(.65); }
  40%         { opacity:1;   transform:scale(1); }
}

/* ═══════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════ */
#login-screen {
  position:fixed; inset:0; z-index:6000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .8s ease, visibility 0s linear .8s;
  background:#000;
}
#login-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
}
#login-screen::before { display:none; }
#login-screen.active  { opacity:1; visibility:visible; pointer-events:all; transition:opacity .8s ease, visibility 0s linear 0s; }

.login-card {
  position:relative;
  background:rgba(7,12,26,.82);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(0,240,255,.22);
  border-radius:18px; width:420px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(0,240,255,.04),
    0 0 60px rgba(0,240,255,.09),
    0 0 120px rgba(167,139,250,.04),
    0 40px 80px rgba(0,0,0,.88);
  animation:cardIn .7s var(--ease-out) both;
}
.card-accent {
  height:3px;
  background:linear-gradient(90deg,#00f0ff,#f59e0b 33%,#a78bfa 66%,#10b981);
  background-size:300% 100%;
  animation:accentFlow 5s linear infinite;
}
@keyframes accentFlow {
  0%   { background-position:0% 0; }
  100% { background-position:300% 0; }
}

/* Chart-icon logo (replaces emoji) */
.login-charticon {
  display:flex; align-items:flex-end; gap:4px;
  width:44px; height:32px;
  margin:0 auto 14px;
  border-bottom:1px solid rgba(0,240,255,.25);
  padding:0 2px;
}
.lci-bar {
  flex:1; border-radius:2px 2px 0 0;
  animation:lciPulse 2.5s ease-in-out infinite;
}
.lci-bar:nth-child(1){ background:#00f0ff; animation-delay:0s;   }
.lci-bar:nth-child(2){ background:#f59e0b; animation-delay:.3s;  }
.lci-bar:nth-child(3){ background:#a78bfa; animation-delay:.6s;  }
.lci-bar:nth-child(4){ background:#10b981; animation-delay:.9s;  }
.lci-bar:nth-child(5){ background:#00f0ff; animation-delay:1.2s; }
@keyframes lciPulse {
  0%,100% { opacity:.55; }
  50%     { opacity:1;   }
}

/* Sector badge row */
.login-sectors {
  display:flex; gap:6px; justify-content:center;
  margin-bottom:22px;
}
.ls-badge {
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:2px;
  padding:3px 9px; border-radius:3px; border:1px solid;
}
.ls-badge[data-color="cyan"]   { border-color:rgba(0,240,255,.45);   color:#00f0ff;  background:rgba(0,240,255,.05); }
.ls-badge[data-color="gold"]   { border-color:rgba(245,158,11,.45);  color:#f59e0b;  background:rgba(245,158,11,.05); }
.ls-badge[data-color="purple"] { border-color:rgba(167,139,250,.45); color:#a78bfa; background:rgba(167,139,250,.05); }
.ls-badge[data-color="green"]  { border-color:rgba(16,185,129,.45);  color:#10b981; background:rgba(16,185,129,.05); }
.login-body { padding:40px 36px 36px; text-align:center; }
.login-icon  { font-size:42px; display:block; margin-bottom:14px; }
.login-title {
  font-family:var(--font-ui); font-weight:700;
  font-size:26px; letter-spacing:3px; color:white; margin-bottom:4px;
}
.login-subtitle {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:4px; color:var(--cyan);
  margin-bottom:18px; opacity:.8;
}

/* ── Lock Screen ── */
#lock-screen {
  position:absolute; inset:0; z-index:30;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:none; overflow:hidden;
  transition:transform .75s cubic-bezier(.4,0,.2,1);
}
#lock-screen.unlocking {
  transform:translateY(-100%);
  pointer-events:none;
}
.ls-wallpaper {
  position:absolute; inset:0;
  background:url('../assets/img/bg-intro.jpg') center/cover no-repeat;
}
.ls-wallpaper::after {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,.48);
}
.ls-content {
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; gap:8px;
  margin-bottom:56px;
}
.ls-time {
  font-family:'Segoe UI',var(--font-ui);
  font-size:clamp(80px,13vw,124px);
  font-weight:100; color:#fff;
  letter-spacing:-4px; line-height:1;
  text-shadow:0 2px 60px rgba(0,0,0,.25);
}
.ls-date {
  font-family:'Segoe UI',var(--font-ui);
  font-size:clamp(15px,1.8vw,21px);
  font-weight:300; color:rgba(255,255,255,.86);
  letter-spacing:.5px; text-transform:capitalize;
}
.ls-hint {
  position:absolute; bottom:80px; left:50%;
  transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:3px; color:rgba(255,255,255,.42);
  animation:lshintpulse 2.5s ease-in-out infinite;
  white-space:nowrap;
}
.ls-hint-dot {
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.42);
  animation:hudblink 2.5s ease-in-out infinite;
}
@keyframes lshintpulse{0%,100%{opacity:.4}50%{opacity:.95}}

/* ── Win11 Toast ── */
#win-toast {
  position:absolute; bottom:58px; right:8px; z-index:18;
  display:flex; align-items:flex-start; gap:12px;
  width:340px; padding:12px 14px;
  background:rgba(32,32,32,.95);
  backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  transform:translateX(110%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
#win-toast.show { transform:none; pointer-events:auto; }
.win-toast-icon { font-size:26px; flex-shrink:0; line-height:1; margin-top:3px; }
.win-toast-title {
  font-family:'Segoe UI',var(--font-ui);
  font-size:12px; font-weight:600;
  color:rgba(255,255,255,.9); margin-bottom:4px; letter-spacing:0;
}
.win-toast-msg {
  font-family:'Segoe UI',var(--font-ui);
  font-size:12px; color:rgba(255,255,255,.55);
  letter-spacing:0; line-height:1.4;
}

/* ── Login window close animation ── */
@keyframes winClose {
  to { opacity:0; transform:scale(.93) translateY(10px); }
}
.win-window.closing {
  animation:winClose .32s cubic-bezier(.4,0,1,1) forwards;
  pointer-events:none;
}

/* Íconos invisibles hasta el login */
.win-desktop:not(.unlocked) .win-icon {
  opacity:0; pointer-events:none;
}

/* ── Desktop icon stagger reveal ── */
@keyframes iconReveal {
  from { opacity:0; transform:translateY(14px) scale(.88); }
  to   { opacity:1; transform:none; }
}
.win-desktop.unlocked .win-icon {
  animation:iconReveal .45s cubic-bezier(.22,1,.36,1) both;
}
.win-desktop.unlocked .win-icon:nth-child(1){animation-delay:0s;}
.win-desktop.unlocked .win-icon:nth-child(2){animation-delay:.07s;}
.win-desktop.unlocked .win-icon:nth-child(3){animation-delay:.12s;}
.win-desktop.unlocked .win-icon:nth-child(4){animation-delay:.17s;}
.win-desktop.unlocked .win-icon:nth-child(5){animation-delay:.22s;}

/* ── ADT icon pulse after unlock ── */
@keyframes adtPulse {
  0%,100%{box-shadow:none;}
  50%{box-shadow:0 0 0 2px rgba(0,240,255,.5),0 0 22px rgba(0,240,255,.3);border-radius:4px;}
}
#icon-career.pulse { animation:adtPulse 1.4s ease-in-out 4; }

/* ── Win11 Desktop ── */
.win-wallpaper {
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 65% 70% at 60% 38%, rgba(0,72,200,.62) 0%, transparent 62%),
    radial-gradient(ellipse 55% 65% at 24% 65%, rgba(48,0,110,.58) 0%, transparent 58%),
    radial-gradient(ellipse 45% 40% at 82% 72%, rgba(0,130,175,.22) 0%, transparent 50%),
    linear-gradient(148deg, #08091a 0%, #050e26 40%, #0d0525 70%, #030812 100%);
}
#login-canvas { z-index:2; }

.win-desktop {
  position:absolute; top:24px; left:20px; z-index:3;
  display:flex; flex-direction:column; gap:6px;
}
.win-icon {
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  width:82px; padding:8px 4px 7px; border-radius:5px;
  border:1px solid transparent;
  transition:background .12s, border-color .12s; cursor:none;
  overflow:visible;
}
.win-icon:not(.wic-locked):hover {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.22);
}
.wi-img { font-size:30px; line-height:1; text-align:center; }
.wi-label {
  margin-top:5px; font-size:11px; line-height:1.3;
  color:rgba(255,255,255,.88); text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  font-family:'Segoe UI',var(--font-ui); font-weight:400; letter-spacing:0;
}

/* ── Top color accent strip ── */
.wic-top-accent {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--sc, rgba(255,255,255,.25));
  border-radius:5px 5px 0 0;
  opacity:0; transition:opacity .3s;
}
.win-icon:not(.wic-locked) .wic-top-accent { opacity:1; }

/* ── "NUEVO" badge ── */
.wic-new-badge {
  position:absolute; top:-7px; right:-7px;
  font-family:var(--font-mono); font-size:7px;
  letter-spacing:1px; font-weight:800;
  color:#020c1a; background:var(--cyan);
  padding:2px 5px; border-radius:10px; z-index:5;
  box-shadow:0 0 8px rgba(0,240,255,.6);
}

/* ── Primary career icon ── */
.wic-main {
  border:1px solid rgba(0,240,255,.2);
  background:rgba(0,240,255,.05);
}
.wic-main .wi-img { font-size:32px; filter:drop-shadow(0 0 10px rgba(0,240,255,.5)); }
.wic-main:not(.wic-locked):hover { background:rgba(0,240,255,.1); border-color:rgba(0,240,255,.4); }

/* ── Locked state ── */
.wic-locked .wi-img  { opacity:.3; filter:grayscale(1) brightness(.5); }
.wic-locked .wi-label { opacity:.3; }
.wic-locked { pointer-events:none; }
.wic-locked::after {
  content:'🔒'; position:absolute; bottom:30px; right:5px;
  font-size:9px; opacity:.5; pointer-events:none;
}

.win-window {
  position:relative; z-index:4;
  background:rgba(24,24,24,.94) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:8px !important; width:430px !important;
  overflow:hidden;
  box-shadow:0 16px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05) !important;
  animation:winWindowIn .45s var(--ease-out) both;
}
@keyframes winWindowIn {
  from { opacity:0; transform:scale(.96) translateY(12px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.win-titlebar {
  display:flex; align-items:center;
  height:32px; padding:0 0 0 12px;
  background:rgba(40,40,40,.98);
  gap:9px; user-select:none;
}
.wtb-icon { font-size:14px; line-height:1; }
.wtb-title {
  flex:1; font-size:12px; font-weight:400;
  color:rgba(255,255,255,.72);
  font-family:'Segoe UI',var(--font-ui); letter-spacing:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wtb-ctrls { display:flex; height:100%; margin-left:auto; }
.wtb-ctrl {
  width:46px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none;
  color:rgba(255,255,255,.65); font-size:12px; cursor:none;
  transition:background .1s, color .1s;
}
.wtb-ctrl:hover   { background:rgba(255,255,255,.1); color:#fff; }
.wtb-close:hover  { background:#c42b1c !important; color:#fff; }
.win-window .login-body { padding:22px 30px 26px; }

.win-taskbar {
  position:absolute; bottom:0; left:0; right:0; z-index:5;
  height:48px;
  background:rgba(20,20,20,.9);
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center;
}
.wt-center {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:2px;
}
.wt-start {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none;
  color:rgba(255,255,255,.88); border-radius:4px;
  cursor:none; transition:background .12s; margin-right:4px;
}
.wt-start:hover { background:rgba(255,255,255,.1); }
.wt-pin {
  width:42px; height:40px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; border:none; background:none;
  border-radius:4px; cursor:none; position:relative;
  transition:background .12s;
}
.wt-pin:hover { background:rgba(255,255,255,.1); }
.wt-pin::after {
  content:''; position:absolute; bottom:4px;
  left:50%; transform:translateX(-50%);
  width:4px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.6);
}
.wt-tray {
  position:absolute; right:0; height:100%;
  display:flex; align-items:center; gap:2px; padding:0 8px;
}
.wt-sys {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; border:none; background:none;
  border-radius:4px; cursor:none; transition:background .12s;
}
.wt-sys:hover { background:rgba(255,255,255,.1); }
.wt-clock-area {
  padding:4px 10px; border-radius:4px; text-align:right;
  cursor:none; transition:background .12s;
}
.wt-clock-area:hover { background:rgba(255,255,255,.1); }
#wt-time {
  font-size:12px; color:rgba(255,255,255,.88);
  font-family:'Segoe UI',var(--font-ui); font-weight:400; line-height:1.3;
}
#wt-date {
  font-size:10px; color:rgba(255,255,255,.65);
  font-family:'Segoe UI',var(--font-ui); font-weight:400; line-height:1.3;
}

.input-label {
  display:block; text-align:left;
  font-family:var(--font-ui); font-weight:600;
  font-size:11px; letter-spacing:2px;
  color:var(--muted); text-transform:uppercase;
  margin-bottom:8px;
}
.input-field {
  width:100%;
  background:rgba(0,240,255,0.04);
  border:1px solid rgba(0,240,255,0.15);
  border-radius:8px; color:white;
  font-family:var(--font-mono); font-size:15px;
  padding:13px 16px; letter-spacing:1px;
  outline:none; cursor:none;
  transition:all .2s ease;
}
.input-field:focus {
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,240,255,0.1);
  background:rgba(0,240,255,0.07);
}
.input-field::placeholder { color:rgba(255,255,255,0.2); }
.input-locked { opacity:.35; cursor:not-allowed; border-style:dashed; }
.input-group  { margin-bottom:16px; }

/* ── AUTH TABS ── */
.auth-tabs {
  display:flex;
  border:1px solid rgba(0,240,255,.15);
  border-radius:8px; overflow:hidden;
  margin-bottom:24px;
}
.auth-tab {
  flex:1; background:transparent; border:none;
  color:var(--muted); font-family:var(--font-ui);
  font-weight:700; font-size:12px; letter-spacing:2px;
  padding:10px; cursor:none; text-transform:uppercase;
  transition:all .2s;
}
.auth-tab.active {
  background:rgba(0,240,255,.1); color:var(--cyan);
}
.auth-tab:hover:not(.active) {
  background:rgba(0,240,255,.05); color:rgba(255,255,255,.6);
}

/* ── AUTH ERROR INLINE ── */
.auth-error {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.5px; color:var(--red);
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.2);
  border-radius:6px; padding:10px 14px;
  margin-bottom:14px; text-align:center; line-height:1.5;
}

/* ── SHAKE al error de validación ── */
.login-card.shake { animation:cardShake .45s ease both; }
@keyframes cardShake {
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-8px); }
  40%     { transform:translateX(8px); }
  60%     { transform:translateX(-5px); }
  80%     { transform:translateX(5px); }
}

.login-footer {
  margin-top:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.05);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:2px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* ═══════════════════════════════════════════════
   KEYFRAMES GLOBALES
═══════════════════════════════════════════════ */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeOut    { from{opacity:1} to{opacity:0} }
@keyframes lineExpand { to{width:300px} }
@keyframes loadFill   { to{width:100%} }
@keyframes gridMove   { from{transform:translate(0,0)} to{transform:translate(60px,60px)} }
@keyframes cardIn     { from{opacity:0;transform:translateY(24px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes accentPulse{ 0%,100%{opacity:.7} 50%{opacity:1;box-shadow:0 0 20px rgba(0,240,255,0.5)} }
@keyframes dotBlink   { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes hintBounce { from{transform:translateY(0)} to{transform:translateY(5px)} }
@keyframes spriteBreathe {
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%    {transform:translateX(-50%) translateY(-8px)}
}
@keyframes spriteShake {
  0%,100%{transform:translateX(-50%)}
  20%    {transform:translateX(calc(-50% - 8px))}
  40%    {transform:translateX(calc(-50% + 8px))}
  60%    {transform:translateX(calc(-50% - 5px))}
  80%    {transform:translateX(calc(-50% + 5px))}
}
@keyframes particleFloat {
  0%  {opacity:0;transform:translateY(0)}
  10% {opacity:.5}
  90% {opacity:.2}
  100%{opacity:0;transform:translateY(-120px)}
}
@keyframes panelIn { from{opacity:0;transform:scale(0.95) translateY(-10px)} to{opacity:1;transform:scale(1) translateY(0)} }