/* ═══════════════════════════════════════════════
   intro-components.css — Escena, sprite, diálogo, paneles, tutorial
═══════════════════════════════════════════════ */

/* ── ESCENA PRINCIPAL ── */
#intro-scene {
  position:fixed; inset:0; z-index:5000;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .8s ease, visibility 0s linear .8s;
}
#intro-scene.active { opacity:1; visibility:visible; pointer-events:all; transition:opacity .8s ease, visibility 0s linear 0s; }

#scene-bg {
  position:absolute; inset:0;
  background-image:url('../assets/img/bg-intro.jpg');
  background-size:cover; background-position:center;
}
#scene-bg::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(2,6,23,.55) 0%, transparent 25%, transparent 55%, rgba(2,6,23,.92) 100%),
    linear-gradient(90deg,  rgba(2,6,23,.3) 0%, transparent 15%, transparent 85%, rgba(2,6,23,.3) 100%);
}

/* ── PARTÍCULAS ── */
#particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.particle  {
  position:absolute; width:2px; height:2px;
  background:var(--cyan); border-radius:50%;
  opacity:0; animation:particleFloat linear infinite;
}

/* ── HUD SUPERIOR ── */
#scene-hud {
  position:absolute; top:0; left:0; right:0;
  padding:18px 30px;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg, rgba(2,6,23,.85) 0%, transparent 100%);
  z-index:10;
}
.hud-badge {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13px;
  letter-spacing:2px; color:rgba(0,240,255,.75);
  background:rgba(0,240,255,.06);
  border:1px solid rgba(0,240,255,.15);
  border-radius:6px; padding:6px 14px;
}
.hud-gold { color:rgba(251,191,36,.9) !important; border-color:rgba(251,191,36,.2) !important; background:rgba(251,191,36,.06) !important; }
.hud-dot  {
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  animation:dotBlink 2s ease-in-out infinite;
  box-shadow:0 0 10px var(--green);
}
.esc-hint {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:2px; color:rgba(255,255,255,.4);
}
.esc-key {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  border-radius:5px; padding:4px 12px;
  font-size:13px; color:rgba(255,255,255,.65);
}

/* ══════════════════════════════════════════════
   SPRITE — mitad superior visible, pies ocultos
══════════════════════════════════════════════ */
#sprite-container {
  position:absolute;
  top:auto;
  bottom:130px;           /* ancla desde el diálogo hacia arriba */
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  pointer-events:none;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.85));
  animation:spriteBreathe 4s ease-in-out infinite;
  transition:filter .4s ease;
}
#sprite-container.speaking {
  filter:
    drop-shadow(0 0 28px rgba(0,240,255,.3))
    drop-shadow(0 20px 50px rgba(0,0,0,.85));
}
#sprite-container.shake {
  animation:spriteShake .45s ease both;
}

#silvia-sprite {
  /* sprites de medio cuerpo — aspect-ratio bloqueado para evitar saltos de tamaño entre expresiones */
  height:90vh;
  width:calc(90vh * (513 / 768));  /* proporciones fijas */
  aspect-ratio:513 / 768;
  max-height:none;
  object-fit:contain;
  display:block;
  transition:opacity .3s ease;
}

/* ══════════════════════════════════════════════
   DIÁLOGO
══════════════════════════════════════════════ */
#dialogue-box {
  position:absolute; bottom:0; left:0; right:0; z-index:30;
}
.dialogue-inner {
  background:linear-gradient(180deg, rgba(4,8,25,.9) 0%, rgba(2,5,18,.98) 100%);
  border-top:1px solid rgba(0,240,255,.22);
  padding:28px 40px 26px;
  position:relative; backdrop-filter:blur(14px);
  min-height:155px; cursor:none;
}
.dialogue-inner::before {
  content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan) 30%, var(--blue) 70%, transparent);
}
.dialogue-inner::after {
  content:''; position:absolute; top:14px; right:14px;
  width:22px; height:22px;
  border-top:1px solid rgba(0,240,255,.3);
  border-right:1px solid rgba(0,240,255,.3);
}

#speaker-tab {
  position:absolute; top:-42px; left:40px;
  background:linear-gradient(135deg, rgba(14,165,233,.95), rgba(2,132,199,.95));
  padding:8px 28px 8px 20px;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
  border:1px solid rgba(0,240,255,.4); border-bottom:none;
  min-width:200px;
}
#speaker-name {
  font-family:var(--font-ui); font-weight:700;
  font-size:16px; letter-spacing:3px; color:white; text-transform:uppercase;
}
.speaker-role {
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:2px; color:rgba(255,255,255,.55);
  text-transform:uppercase; margin-top:1px;
}

#emotion-tag {
  position:absolute; top:16px; right:44px;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:2px; color:var(--muted);
  text-transform:uppercase; padding:4px 12px;
  border:1px solid rgba(255,255,255,.08); border-radius:4px;
  transition:all .35s ease;
}

#dialogue-text {
  font-size:clamp(16px, 1.9vw, 20px);
  line-height:1.85; color:#dde8f8;
  letter-spacing:.3px; min-height:3.5em;
  padding-right:160px; padding-top:2px;
}

#progress-dots { display:flex; gap:6px; position:absolute; bottom:22px; left:40px; }
.prog-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.12); transition:all .3s ease;
}
.prog-dot.active { background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.prog-dot.done   { background:rgba(0,240,255,.3); }

#continue-hint {
  position:absolute; bottom:20px; right:28px;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:2px; color:rgba(0,240,255,.5);
  text-transform:uppercase;
  opacity:0; transition:opacity .3s;
  animation:hintBounce 1s ease-in-out infinite alternate;
}
#continue-hint.show { opacity:1; }
.hint-key {
  background:rgba(0,240,255,.08);
  border:1px solid rgba(0,240,255,.25);
  border-radius:4px; padding:2px 9px;
  font-size:11px; color:var(--cyan);
}

/* ══════════════════════════════════════════════
   PANEL FLOTANTE (derecha) — contenedor
══════════════════════════════════════════════ */
#info-panel {
  position:absolute;
  bottom:170px; left:2.5%;
  width:420px; z-index:35;
  opacity:0; pointer-events:none;
  transform:translateY(70px) rotate(-3deg);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
#info-panel.show {
  opacity:1; pointer-events:all;
  transform:translateY(0) rotate(1.2deg);
}
.panel-mode { width:100%; }

/* ── NOTEBOOK ── */
.notebook {
  background:#fffdf5;
  border-radius:3px 8px 8px 3px;
  box-shadow:-6px 0 0 #c8a86b, 0 8px 30px rgba(0,0,0,.55);
  position:relative; overflow:hidden;
}
.notebook::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    180deg, transparent, transparent 27px,
    rgba(100,150,255,.12) 27px, rgba(100,150,255,.12) 28px
  );
  top:50px; pointer-events:none;
}
.notebook::after {
  content:''; position:absolute;
  top:0; left:24px; bottom:0; width:1px;
  background:rgba(220,80,80,.3); pointer-events:none;
}
.notebook-rings {
  position:absolute; left:-4px; top:0; bottom:0; width:14px;
  display:flex; flex-direction:column;
  justify-content:space-around; padding:12px 0;
  pointer-events:none; z-index:5;
}
.ring {
  width:14px; height:14px;
  border:3px solid #8a7a5a;
  border-radius:50%; background:#fffdf5;
}
.notebook-header {
  background:linear-gradient(135deg,#1e3a5f,#0f2040);
  padding:16px 20px 16px 34px;
  display:flex; align-items:center; gap:12px;
  border-bottom:2px solid rgba(0,240,255,.2);
}
.notebook-icon  { font-size:22px; }
.notebook-title { font-family:var(--font-hand); font-size:22px; font-weight:600; color:var(--cyan); }
.notebook-body  { padding:14px 18px 18px 34px; }
.notebook-item  { display:flex; align-items:flex-start; gap:12px; padding:8px 0; }
.notebook-num   { font-family:var(--font-hand); font-size:22px; font-weight:600; color:#c8a86b; min-width:28px; }
.notebook-text  { font-family:var(--font-hand); font-size:20px; color:#2a2a2a; line-height:1.5; }
.tape {
  position:absolute; top:-8px; right:20px;
  width:50px; height:20px;
  background:rgba(220,200,150,.55);
  transform:rotate(-3deg); border-radius:2px;
}

/* ── EXCEL CARD ── */
.excel-card {
  background:#fff;
  border-radius:8px;
  box-shadow:0 8px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1);
  overflow:hidden;
}
.excel-header {
  background:var(--excel-green);
  padding:14px 18px;
  display:flex; align-items:center; gap:12px;
}
.excel-logo-img {
  width:36px; height:36px;
  object-fit:contain; flex-shrink:0;
}
.excel-logo-fallback {
  align-items:center; gap:10px;
  font-family:var(--font-ui); font-size:15px;
  font-weight:700; color:white; letter-spacing:1px;
}
.excel-icon-box {
  width:36px; height:36px;
  background:rgba(255,255,255,.15);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900; color:white;
}
.excel-header-text { flex:1; }
.excel-title {
  font-family:var(--font-ui); font-weight:700;
  font-size:19px; letter-spacing:2px; color:white;
}
.excel-sub {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:2px; color:rgba(255,255,255,.65);
  margin-top:2px; text-transform:uppercase;
}
.excel-body { padding:14px 18px 18px; background:#f8fef8; }
.excel-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:9px 0;
  border-bottom:1px solid rgba(33,115,70,.1);
}
.excel-item:last-child { border-bottom:none; }
.excel-num  {
  font-family:var(--font-mono); font-size:14px;
  color:var(--excel-green); font-weight:700; min-width:26px;
}
.excel-text {
  font-family:var(--font-main); font-size:16px;
  color:#1a3a2a; line-height:1.5;
}

/* ══════════════════════════════════════════════
   NAME INPUT
══════════════════════════════════════════════ */
#name-input-overlay {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.95);
  z-index:40; width:380px;
  opacity:0; pointer-events:none;
  transition:all .4s var(--ease-out);
}
#name-input-overlay.show {
  opacity:1; pointer-events:all;
  transform:translate(-50%,-50%) scale(1);
}
.name-card {
  background:var(--panel);
  border:1px solid rgba(0,240,255,.25);
  border-radius:14px; overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.8);
}
.name-card-top { height:3px; background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),transparent); }
.name-card-body { padding:32px 28px; text-align:center; }
.name-card-label {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:3px; color:var(--cyan);
  text-transform:uppercase; margin-bottom:8px;
}
.name-card-title {
  font-family:var(--font-ui); font-weight:700;
  font-size:20px; letter-spacing:2px; color:white; margin-bottom:6px;
}
.name-card-sub {
  font-size:13px; color:var(--muted);
  font-style:italic; margin-bottom:24px; line-height:1.5;
}
#agent-name-input {
  width:100%;
  background:rgba(0,240,255,.05);
  border:1px solid rgba(0,240,255,.25);
  border-radius:8px; color:white;
  font-family:var(--font-mono); font-size:18px;
  padding:14px; text-align:center;
  letter-spacing:3px; outline:none; cursor:none;
  transition:all .2s; margin-bottom:0;
}
#agent-name-input:focus {
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,240,255,.1);
}
#agent-name-input::placeholder { color:rgba(255,255,255,.2); font-size:14px; letter-spacing:1px; }
#btn-confirm-name { margin-top:16px; background:linear-gradient(135deg,#10b981,#059669); box-shadow:0 4px 20px rgba(16,185,129,.3); }
#btn-confirm-name:hover { box-shadow:0 8px 30px rgba(16,185,129,.5); }

/* ══════════════════════════════════════════════
   TUTORIAL INTERACTIVO
══════════════════════════════════════════════ */
#tutorial-interactive {
  position:absolute; inset:0; z-index:38;
  background:rgba(2,6,23,.97);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:8px;
}
#tutorial-interactive.show { display:flex; }

.tut-screen {
  width:100%; max-width:1400px;
  background:rgba(6,10,28,.98);
  border:1px solid rgba(0,240,255,.2);
  border-radius:16px; overflow:hidden;
  box-shadow:0 0 80px rgba(0,240,255,.07);
  animation:panelIn .4s var(--ease-out) both;
}

.tut-header {
  background:linear-gradient(135deg,rgba(14,165,233,.15),rgba(0,240,255,.05));
  border-bottom:1px solid rgba(0,240,255,.15);
  padding:14px 24px;
  display:flex; justify-content:space-between; align-items:center;
}
.tut-rec {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:3px; color:rgba(0,240,255,.7);
  text-transform:uppercase;
}
.tut-step-badge {
  font-family:var(--font-ui); font-weight:700;
  font-size:13px; letter-spacing:2px; color:var(--cyan);
  background:rgba(0,240,255,.1);
  border:1px solid rgba(0,240,255,.2);
  border-radius:6px; padding:4px 14px;
}

.tut-content {
  display:grid;
  grid-template-columns:1fr 400px;
  gap:0; min-height:560px;
}

.tut-image-wrap {
  position:relative; background:#0a0a0a;
  border-right:1px solid rgba(0,240,255,.1);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; min-height:560px;
}
.tut-image-wrap img {
  width:100%; height:100%;
  object-fit:contain; display:block;
  transition:opacity .4s ease;
}
.tut-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 80%, rgba(2,6,23,.4) 100%);
  pointer-events:none;
}

.tut-hud {
  display:flex; flex-direction:column;
  padding:24px 20px; gap:20px;
  background:rgba(4,8,24,.8);
}

.tut-sprite-small {
  width:100%; height:260px;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
  border-radius:8px;
  background:linear-gradient(180deg,rgba(0,240,255,.03),rgba(0,240,255,.07));
  border:1px solid rgba(0,240,255,.1);
}
.tut-sprite-small img {
  height:250px; width:auto;
  object-fit:contain; object-position:bottom;
}

.tut-speech {
  background:rgba(0,240,255,.05);
  border:1px solid rgba(0,240,255,.15);
  border-radius:10px; padding:16px; flex:1;
}
.tut-speaker {
  font-family:var(--font-ui); font-weight:700;
  font-size:12px; letter-spacing:3px; color:var(--cyan);
  text-transform:uppercase; margin-bottom:8px;
}
#tut-desc {
  font-size:18px; line-height:1.8; color:#c8d8f0;
}

#btn-tut-next {
  background:linear-gradient(135deg,#10b981,#059669);
  box-shadow:0 4px 20px rgba(16,185,129,.3);
  font-size:15px; padding:14px;
}
#btn-tut-next:hover { box-shadow:0 8px 30px rgba(16,185,129,.5); }

/* ══════════════════════════════════════════════
   PIZARRÓN / TABLERO DE MISIONES
══════════════════════════════════════════════ */
#mission-board {
  position:absolute; inset:0; z-index:45;
  background:
    linear-gradient(rgba(2,5,18,.72), rgba(2,5,18,.72)),
    url('../assets/img/bg-intro.jpg') center/cover no-repeat;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding:40px 20px 20px;
  animation:fadeInUp .5s var(--ease-out) both;
}
#mission-board::after {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, transparent 50%, rgba(0,0,0,.5) 100%);
  pointer-events:none;
}

/* Marco del tablero de anuncios */
.board-area {
  position:relative; z-index:2;
  background:
    radial-gradient(ellipse 3px 2px at 15% 30%, rgba(80,40,10,.5) 0%, transparent 100%),
    radial-gradient(ellipse 2px 4px at 55% 60%, rgba(100,55,15,.4) 0%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 80% 20%, rgba(90,50,12,.45) 0%, transparent 100%),
    linear-gradient(145deg, #c8985a 0%, #b07838 25%, #c4924e 50%, #a87030 75%, #c09050 100%);
  border:16px solid #7a4e1a;
  border-radius:4px;
  box-shadow:
    0 0 0 4px #5a3410,
    0 0 0 6px rgba(0,0,0,.4),
    0 20px 60px rgba(0,0,0,.7),
    inset 0 0 40px rgba(0,0,0,.15);
  padding:60px 80px 70px;
}

.board-header {
  text-align:center; margin-bottom:50px; position:relative; z-index:2;
}
.board-chalk-title {
  font-family:var(--font-hand);
  font-size:clamp(32px,5vw,56px);
  color:rgba(255,255,255,.88);
  letter-spacing:6px;
  text-shadow:1px 1px 0 rgba(255,255,255,.12), 2px 2px 4px rgba(0,0,0,.6);
}
.board-chalk-sub {
  font-family:var(--font-hand);
  font-size:18px;
  color:rgba(255,255,255,.45);
  margin-top:6px; letter-spacing:2px;
}

/* Tarjeta colgada */
#mission-card-hanging {
  position:relative; display:flex; flex-direction:column;
  align-items:center; cursor:none; z-index:2;
  animation:hangSway 4s ease-in-out infinite;
}
#mission-card-hanging:hover .mission-envelope { transform:scale(1.04); box-shadow:0 20px 60px rgba(0,0,0,.75), 0 0 30px rgba(245,158,11,.25); }

.hanging-pin {
  width:22px; height:22px;
  background:radial-gradient(circle at 35% 35%, #ff8a80, #c62828);
  border-radius:50%; z-index:5; position:relative;
  box-shadow:0 3px 10px rgba(0,0,0,.6), inset 0 -2px 4px rgba(0,0,0,.3);
}
.hanging-string {
  width:2px; height:46px;
  background:linear-gradient(180deg, #9e8a70, #6b5a44);
  margin:-2px auto 0;
}
.mission-envelope {
  background:linear-gradient(160deg, #f8edd8, #e5d2a8 60%, #d4bc85);
  border-radius:6px; padding:28px 40px;
  box-shadow:0 14px 45px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.15);
  text-align:center; min-width:340px;
  transition:transform .25s var(--ease-spring), box-shadow .25s;
  position:relative;
}
.mission-envelope::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    180deg, transparent, transparent 26px,
    rgba(180,160,120,.15) 26px, rgba(180,160,120,.15) 27px
  );
  border-radius:6px; pointer-events:none;
}
.envelope-badge {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:3px; color:#8b6210;
  text-transform:uppercase; margin-bottom:14px;
  padding:4px 10px; background:rgba(139,98,16,.12);
  border:1px solid rgba(139,98,16,.3); border-radius:4px;
  display:inline-block;
}
.envelope-title {
  font-family:var(--font-ui); font-weight:800;
  font-size:clamp(24px,3.5vw,36px);
  letter-spacing:4px; color:#2a1a04;
  margin-bottom:8px;
}
.envelope-client {
  font-family:var(--font-mono); font-size:12px;
  color:#6b5010; letter-spacing:2px; margin-bottom:16px;
}
.envelope-cta {
  font-family:var(--font-hand); font-size:17px;
  color:#8b6210; animation:dotBlink 1.8s ease-in-out infinite;
}

@keyframes hangSway {
  0%,100% { transform:rotate(-1.2deg) translateY(0); }
  50%      { transform:rotate(1.5deg)  translateY(-5px); }
}

/* Detalle de misión */
#mission-detail {
  position:absolute; inset:0; z-index:55;
  background:rgba(0,0,0,.82);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
  animation:fadeInUp .35s var(--ease-out) both;
}
.mission-detail-card {
  background:var(--panel);
  border:1px solid rgba(245,158,11,.3);
  border-radius:14px; width:min(700px,95vw);
  max-height:90vh; overflow-y:auto; overflow-x:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.92), 0 0 40px rgba(245,158,11,.06);
}
.detail-header {
  background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.04));
  border-bottom:1px solid rgba(245,158,11,.2);
  padding:22px 28px 18px; position:relative;
}
.detail-stamp-wrap { position:absolute; top:16px; right:24px; }
.detail-stamp {
  font-family:var(--font-mono); font-size:10px; letter-spacing:3px;
  color:var(--red); border:2px solid var(--red);
  padding:3px 10px; border-radius:4px;
  transform:rotate(-5deg); display:inline-block;
}
.detail-title {
  font-family:var(--font-ui); font-weight:700;
  font-size:clamp(18px,2.5vw,24px); letter-spacing:2px;
  color:var(--gold); margin-bottom:5px;
}
.detail-code {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:2px; color:var(--muted);
}
.detail-body { padding:22px 28px; }
.detail-section { margin-bottom:18px; }
.detail-label {
  font-family:var(--font-mono); font-size:10px; letter-spacing:3px;
  color:var(--cyan); text-transform:uppercase;
  margin-bottom:8px; padding-bottom:4px;
  border-bottom:1px solid rgba(0,240,255,.15);
}
.detail-text {
  font-size:15px; color:var(--text); line-height:1.75;
}
.detail-img-wrap {
  background:#050505; border-radius:8px;
  overflow:hidden; border:1px solid rgba(255,255,255,.08);
  margin-bottom:18px;
}
.detail-img {
  width:100%; display:block;
  max-height:200px; object-fit:cover;
}
.detail-img-label {
  font-family:var(--font-mono); font-size:10px; letter-spacing:2px;
  color:var(--muted); text-align:center; padding:7px;
}
.detail-reward {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(245,158,11,.07);
  border:1px solid rgba(245,158,11,.2);
  border-radius:8px; padding:12px 20px; margin-bottom:22px;
  font-family:var(--font-ui); font-size:13px; letter-spacing:2px; color:var(--muted);
}
.reward-amount {
  font-weight:700; font-size:20px; color:var(--gold);
}
.btn-accept {
  background:linear-gradient(135deg,#f59e0b,#d97706) !important;
  box-shadow:0 4px 20px rgba(245,158,11,.35) !important;
  margin:0 28px 28px; width:calc(100% - 56px);
}
.btn-accept:hover { box-shadow:0 8px 30px rgba(245,158,11,.6) !important; }

/* ══════════════════════════════════════════════
   ESCÁNER FTP — INTERFAZ DE COMPUTADORA
══════════════════════════════════════════════ */
#computer-interface {
  position:absolute; inset:0; z-index:45;
  background:#090d12;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  animation:fadeInUp .45s var(--ease-out) both;
}

.scanner-frame {
  width:100%; max-width:1100px;
  background:#0c111a;
  border:1px solid rgba(0,240,255,.18);
  border-radius:14px; overflow:hidden;
  box-shadow:0 0 80px rgba(0,240,255,.06), 0 40px 80px rgba(0,0,0,.85);
  animation:panelIn .4s var(--ease-out) both;
  display:flex; flex-direction:column;
}
.scanner-topbar {
  background:#141c28;
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:11px 18px;
  display:flex; align-items:center; gap:14px;
}
.comp-dots { display:flex; gap:7px; }
.comp-dots span { width:13px; height:13px; border-radius:50%; }
.comp-dots span:nth-child(1) { background:#ff5f57; }
.comp-dots span:nth-child(2) { background:#febc2e; }
.comp-dots span:nth-child(3) { background:#28c840; }
.scanner-topbar-title {
  flex:1; font-family:var(--font-mono); font-size:11px;
  letter-spacing:2px; color:rgba(255,255,255,.35);
  text-transform:uppercase; text-align:center;
}
.scanner-topbar-status {
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:1px; color:rgba(0,240,255,.5);
}
.status-dot-green {
  width:8px; height:8px; border-radius:50%;
  background:#10b981; box-shadow:0 0 8px #10b981;
  animation:dotBlink 2s ease-in-out infinite;
}

.scanner-body {
  display:grid; grid-template-columns:1fr 70px 1fr;
  align-items:stretch; min-height:320px;
}
.scanner-panel {
  padding:22px 18px;
  display:flex; flex-direction:column; gap:12px;
  background:rgba(255,255,255,.01);
}
.scanner-panel-label {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:3px; color:var(--muted); text-transform:uppercase;
  text-align:center; padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Upload idle zone */
.upload-idle {
  flex:1; display:flex; align-items:center; justify-content:center;
}
.upload-idle-inner {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border:2px dashed rgba(0,240,255,.22);
  border-radius:14px; padding:28px 20px;
  width:100%; cursor:pointer;
  transition:all .25s;
  background:rgba(0,240,255,.02);
}
.upload-idle-inner:hover,
.upload-idle-inner.drag-over {
  border-color:rgba(0,240,255,.5);
  background:rgba(0,240,255,.07);
  box-shadow:0 0 30px rgba(0,240,255,.08);
  border-style:solid;
}
.upload-idle-icon { font-size:40px; }
.upload-idle-title {
  font-family:var(--font-ui); font-size:15px; font-weight:700;
  letter-spacing:1px; color:rgba(0,240,255,.7); text-align:center;
}
.upload-idle-sub {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:1px; color:var(--muted); text-align:center;
}

/* File packet */
.file-packet {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  background:rgba(0,240,255,.05);
  border:2px solid rgba(0,240,255,.3);
  border-radius:12px; padding:18px;
  cursor:grab; user-select:none;
  transition:all .25s;
}
.file-packet:hover {
  background:rgba(0,240,255,.10);
  border-color:rgba(0,240,255,.6);
  box-shadow:0 0 30px rgba(0,240,255,.15);
}
.file-packet.dragging { opacity:.35; cursor:grabbing; }
.fp-icon { font-size:48px; }
.fp-body { text-align:center; }
.fp-name {
  font-family:var(--font-mono); font-size:12px;
  color:white; letter-spacing:1px; word-break:break-all;
}
.fp-meta {
  font-family:var(--font-mono); font-size:10px;
  color:rgba(0,240,255,.5); letter-spacing:1px; margin-top:4px;
}
.fp-drag-hint {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:2px; color:rgba(0,240,255,.6);
  animation:chArrFlow 1.4s ease-in-out infinite;
}
.fp-arrow { font-size:18px; }

/* Transfer channel */
.scanner-channel {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  background:rgba(0,240,255,.015);
  border-left:1px solid rgba(0,240,255,.06);
  border-right:1px solid rgba(0,240,255,.06);
  padding:12px 0; position:relative;
}
.channel-line {
  position:absolute; top:0; bottom:0; left:50%;
  width:1px; background:rgba(0,240,255,.08); transform:translateX(-50%);
}
.channel-arrows {
  display:flex; flex-direction:column; gap:4px;
  position:relative; z-index:2;
}
.ch-arr {
  font-size:20px; color:rgba(0,240,255,.3);
  display:block; text-align:center;
  animation:chArrFlow 1.6s ease-in-out infinite;
}
.ch-arr:nth-child(2) { animation-delay:.25s; }
.ch-arr:nth-child(3) { animation-delay:.5s; }
@keyframes chArrFlow {
  0%,100% { color:rgba(0,240,255,.15); transform:translateX(0); }
  50%      { color:rgba(0,240,255,.7);  transform:translateX(3px); }
}
.channel-label {
  font-family:var(--font-mono); font-size:8px;
  letter-spacing:3px; color:rgba(0,240,255,.25);
  text-transform:uppercase; position:relative; z-index:2;
  writing-mode:vertical-lr; margin-top:8px;
}

/* Scanner drop zone */
.scanner-drop-zone {
  flex:1; display:flex; align-items:center; justify-content:center;
  border:2px dashed rgba(0,240,255,.15);
  border-radius:12px; position:relative; overflow:hidden;
  transition:all .25s; min-height:200px;
}
.scanner-drop-zone.drag-over {
  border-color:var(--cyan); border-style:solid;
  background:rgba(0,240,255,.05);
  box-shadow:0 0 40px rgba(0,240,255,.15);
}
.scanner-drop-zone.success  { border-color:var(--green); border-style:solid; background:rgba(16,185,129,.04); }
.scanner-drop-zone.scan-error { border-color:var(--red); border-style:solid; background:rgba(239,68,68,.04); }

/* SDZ idle */
.sdz-idle {
  display:flex; flex-direction:column;
  align-items:center; gap:10px; padding:20px;
  position:relative; width:100%;
}
.scanner-grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,240,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.04) 1px, transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.sdz-icon { font-size:42px; position:relative; z-index:2; }
.sdz-title {
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:2px; color:rgba(0,240,255,.55);
  position:relative; z-index:2; text-align:center;
}
.sdz-sub {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:1px; color:var(--muted);
  position:relative; z-index:2; text-align:center;
}

/* SDZ scanning */
.sdz-scanning {
  display:flex; flex-direction:column;
  align-items:center; gap:12px; padding:20px;
  position:relative; width:100%;
}
.scan-beam {
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow:0 0 12px var(--cyan), 0 0 30px rgba(0,240,255,.4);
  animation:scanBeamMove 1.4s ease-in-out infinite;
}
@keyframes scanBeamMove {
  0%   { top:0%;   opacity:1; }
  45%  { top:100%; opacity:1; }
  50%  { opacity:0; }
  55%  { top:0%;   opacity:0; }
  60%  { opacity:1; }
  100% { top:100%; opacity:1; }
}
.scan-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,240,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.06) 1px, transparent 1px);
  background-size:20px 20px; pointer-events:none;
  animation:scanGridPulse 1.4s ease-in-out infinite;
}
@keyframes scanGridPulse {
  0%,100% { opacity:.5; }
  50%      { opacity:1; }
}
.scan-progress-wrap {
  width:80%; height:6px; background:rgba(255,255,255,.07);
  border-radius:4px; overflow:hidden; position:relative; z-index:2;
}
.scan-bar-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--cyan), var(--blue));
  border-radius:4px; box-shadow:0 0 12px var(--cyan);
  transition:width .3s ease;
}
.scan-message {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:2px; color:var(--cyan);
  position:relative; z-index:2; text-align:center;
  animation:dotBlink 1s ease-in-out infinite;
}

/* Scanner result */
.scanner-result {
  padding:22px 28px 24px;
  border-top:1px solid rgba(255,255,255,.07);
  text-align:center;
  animation:fadeInUp .4s var(--ease-out) both;
}
.sr-icon { font-size:46px; margin-bottom:8px; }
.sr-text {
  font-family:var(--font-ui); font-weight:700;
  font-size:clamp(16px,2.2vw,22px); letter-spacing:2px; color:var(--green);
  margin-bottom:4px;
}
.sr-sub {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:2px; color:var(--muted); margin-bottom:14px;
}
#btn-comp-continue {
  max-width:320px; margin:0 auto;
  background:linear-gradient(135deg,#10b981,#059669);
  box-shadow:0 4px 20px rgba(16,185,129,.3);
}

/* Lista de errores de validación */
.error-list {
  text-align:left; margin:10px 0 6px;
  border:1px solid rgba(239,68,68,.25);
  border-radius:8px; padding:14px 18px;
  background:rgba(239,68,68,.05);
  max-height:180px; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
}
.error-item {
  font-family:var(--font-main); font-size:13px;
  color:#fca5a5; line-height:1.5;
}
.result-btns {
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:4px;
}
.btn-comp-ok { max-width:280px; }
.btn-retry {
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.3);
  border-radius:8px; color:var(--red);
  font-family:var(--font-ui); font-weight:700;
  font-size:13px; letter-spacing:2px;
  padding:12px 24px; cursor:none; transition:all .2s;
  text-transform:uppercase;
}
.btn-retry:hover { background:rgba(239,68,68,.22); border-color:var(--red); }

/* Botón de descarga en misión */
.btn-download-data {
  background:linear-gradient(135deg, rgba(0,240,255,.15), rgba(14,165,233,.2)) !important;
  border:1px solid rgba(0,240,255,.3) !important;
  color:var(--cyan) !important;
  box-shadow:none !important;
  margin:0 28px 12px; width:calc(100% - 56px);
}
.btn-download-data:hover {
  background:linear-gradient(135deg, rgba(0,240,255,.25), rgba(14,165,233,.3)) !important;
  box-shadow:0 4px 20px rgba(0,240,255,.15) !important;
}

/* ══════════════════════════════════════════════
   SELECCIÓN DE CARRERA — 4 PANELES
══════════════════════════════════════════════ */
#career-select {
  position:absolute; inset:0; z-index:45;
  background:#020608;
  display:flex; flex-direction:column;
  overflow:hidden;
  animation:winMaximize .45s cubic-bezier(.22,1,.36,1) both;
}

/* Win11 titlebar for career-select */
.cs-titlebar { border-radius:0 !important; }
.cs-statusbar { position:relative; z-index:10; }

/* 4 split panels row */
.career-panels-container {
  flex:1; display:flex; overflow:hidden;
}
.career-panel {
  flex:1; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  cursor:pointer;
  transition:flex .5s cubic-bezier(.4,0,.2,1),box-shadow .4s ease;
  border-right:1px solid rgba(255,255,255,.06);
  border-top:2px solid transparent;
}
.career-panel:last-child { border-right:none; }

/* Colored top border + glow per career */
.career-panel[data-career="logistica"]{border-top-color:rgba(0,240,255,.3);}
.career-panel[data-career="turismo"]  {border-top-color:rgba(16,185,129,.3);}
.career-panel[data-career="energia"]  {border-top-color:rgba(245,158,11,.3);}
.career-panel[data-career="mineria"]  {border-top-color:rgba(167,139,250,.3);}
.career-panel[data-career="logistica"]:hover{border-top-color:rgba(0,240,255,.9);box-shadow:inset 0 0 80px rgba(0,240,255,.06);}
.career-panel[data-career="turismo"]:hover  {border-top-color:rgba(16,185,129,.9);box-shadow:inset 0 0 80px rgba(16,185,129,.06);}
.career-panel[data-career="energia"]:hover  {border-top-color:rgba(245,158,11,.9);box-shadow:inset 0 0 80px rgba(245,158,11,.06);}
.career-panel[data-career="mineria"]:hover  {border-top-color:rgba(167,139,250,.9);box-shadow:inset 0 0 80px rgba(167,139,250,.06);}
.career-panel:hover { flex:1.9; }

/* Animated background layer — usa imagen personalizada + zoom en hover */
.panel-bg-anim {
  position:absolute; inset:-4%; z-index:0;
  background-size:cover; background-position:center;
  filter:brightness(.28) saturate(.6);
  transition:filter .6s ease, transform .7s ease;
  transform:scale(1); transform-origin:center;
}
.career-panel:hover .panel-bg-anim {
  filter:brightness(.55) saturate(1.3);
  transform:scale(1.08);
}

/* Imágenes de fondo por carrera (el usuario las coloca en assets/img/) */
.panel-bg-logistica { background-image:url('../assets/img/bg-logistica.jpg'); }
.panel-bg-turismo   { background-image:url('../assets/img/bg-turismo.jpg'); }
.panel-bg-energia   { background-image:url('../assets/img/bg-energia.jpg'); }
.panel-bg-mineria   { background-image:url('../assets/img/bg-mineria.jpg'); }

/* Fallback de color si la imagen no carga */
.panel-bg-logistica { background-color:#061228; }
.panel-bg-turismo   { background-color:#031610; }
.panel-bg-energia   { background-color:#1a1102; }
.panel-bg-mineria   { background-color:#180303; }

/* Boss image — silhouette by default, full color on hover */
.panel-boss-silhouette {
  position:absolute; bottom:0; left:50%;
  transform:translateX(-50%);
  height:88%; width:auto; max-width:92%;
  object-fit:contain; object-position:bottom;
  filter:brightness(0) contrast(1) opacity(.35);
  transition:filter .55s ease, transform .55s ease;
  z-index:2; pointer-events:none;
}
.career-panel:hover .panel-boss-silhouette {
  filter:brightness(1) contrast(1) opacity(1);
  transform:translateX(-50%) scale(1.04);
}

/* Static label (hidden when hovered) */
.panel-static-label {
  position:absolute; bottom:0; left:0; right:0; z-index:4;
  display:flex; flex-direction:column; align-items:center;
  padding:18px 10px;
  background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, transparent 100%);
  transition:opacity .3s ease;
}
.career-panel:hover .panel-static-label { opacity:0; pointer-events:none; }
.panel-dept-abbr {
  font-family:var(--font-ui); font-size:12px; font-weight:800;
  letter-spacing:4px; color:rgba(255,255,255,.75); text-transform:uppercase;
}
.panel-reveal-hint {
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:3px; color:rgba(255,255,255,.28); margin-top:4px;
  animation:dotBlink 2s ease-in-out infinite;
}

/* Hover content overlay */
.panel-hover-content {
  position:absolute; bottom:0; left:0; right:0; z-index:5;
  display:flex; flex-direction:column; align-items:center;
  padding:18px 14px 22px;
  background:linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 65%, transparent 100%);
  opacity:0; transform:translateY(14px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none; gap:5px;
}
.career-panel:hover .panel-hover-content {
  opacity:1; transform:translateY(0); pointer-events:all;
}

/* Dept badge per career */
.phc-dept {
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:4px; text-transform:uppercase;
  padding:3px 10px; border-radius:3px; margin-bottom:2px;
}
.panel-dept-logistica { color:#00f0ff; background:rgba(0,240,255,.1); border:1px solid rgba(0,240,255,.3); }
.panel-dept-turismo   { color:#10b981; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); }
.panel-dept-energia   { color:#f59e0b; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); }
.panel-dept-mineria   { color:#a78bfa; background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.3); }

.phc-boss-name {
  font-family:var(--font-ui); font-size:16px; font-weight:800;
  letter-spacing:2px; color:white; text-align:center;
}
.phc-quote {
  font-family:var(--font-mono); font-size:10px;
  color:rgba(255,255,255,.5); text-align:center;
  font-style:italic; padding:0 8px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.btn-ver-detalles {
  margin-top:10px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);
  border-radius:6px; color:white;
  font-family:var(--font-ui); font-size:11px; font-weight:700;
  letter-spacing:2px; padding:8px 18px;
  cursor:pointer; transition:all .2s; text-transform:uppercase;
}
.btn-ver-detalles:hover {
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.6);
  box-shadow:0 0 20px rgba(255,255,255,.1);
}

/* ── Career Detail Modal — PANTALLA COMPLETA ── */
.career-modal-overlay {
  position:absolute; inset:0; z-index:60;
  display:flex; align-items:stretch;
  overflow:hidden;
  animation:fadeInUp .3s var(--ease-out) both;
}

/* Imagen de fondo a pantalla completa con zoom suave */
.modal-full-bg {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transform-origin:center;
  animation:modalBgZoom 8s ease-in-out infinite alternate;
}
@keyframes modalBgZoom {
  0%   { transform:scale(1); }
  100% { transform:scale(1.07); }
}

/* Gradiente oscuro encima de la imagen */
.modal-full-bg-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    105deg,
    rgba(0,0,0,.93) 0%,
    rgba(0,0,0,.74) 36%,
    rgba(0,0,0,.30) 64%,
    rgba(0,0,0,.62) 100%
  );
}

/* Contenedor transparente a pantalla completa */
.career-modal-card {
  position:relative; z-index:2;
  width:100%; display:flex; align-items:stretch;
  background:transparent;
}

.modal-close-btn {
  position:absolute; top:20px; right:24px; z-index:10;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.22);
  border-radius:6px; color:rgba(255,255,255,.75);
  font-size:16px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.modal-close-btn:hover { background:rgba(255,255,255,.18); color:white; }

/* Columna izquierda — imagen del jefe a altura completa */
.modal-boss-col {
  width:360px; flex-shrink:0; position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.modal-boss-img {
  height:88vh; width:auto; max-width:none;
  object-fit:contain; object-position:bottom;
  position:relative; z-index:1;
  filter:drop-shadow(0 0 60px rgba(0,0,0,.9));
}

/* Columna derecha — contenido de texto */
.modal-info-col {
  flex:1; padding:55px 50px 40px;
  overflow-y:auto; display:flex; flex-direction:column; gap:14px;
  background:transparent;
}

/* Badges */
.modal-dept-badge {
  font-family:var(--font-mono); font-size:10px; letter-spacing:4px;
  padding:4px 12px; border-radius:4px; display:inline-block;
  text-transform:uppercase; font-weight:700;
}
.modal-dept-logistica { color:#38bdf8; background:rgba(14,165,233,.1); border:1px solid rgba(14,165,233,.2); }
.modal-dept-turismo   { color:#34d399; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.2); }
.modal-dept-energia   { color:#fbbf24; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2); }
.modal-dept-mineria   { color:#f87171; background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.2); }

.modal-career-title {
  font-family:var(--font-ui); font-size:24px; font-weight:800;
  letter-spacing:2px; color:white; margin:0;
}
.modal-boss-name-line {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:2px; color:rgba(255,255,255,.5); text-transform:uppercase;
}
.modal-boss-quote {
  font-family:var(--font-mono); font-size:14px;
  color:rgba(255,255,255,.72); font-style:italic;
  border-left:3px solid rgba(255,255,255,.25);
  padding-left:16px; line-height:1.65; margin:0;
}
.modal-desc-text {
  font-size:15px; color:rgba(220,235,255,.85); line-height:1.8; margin:0;
}
.modal-resps-list {
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:14px 18px;
  display:flex; flex-direction:column; gap:6px;
}
.modal-resps-title {
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:3px; color:rgba(255,255,255,.4); text-transform:uppercase; margin-bottom:5px;
}
.modal-resp-item {
  font-family:var(--font-mono); font-size:12px;
  color:rgba(210,228,248,.8); line-height:1.5;
}
.modal-meta-row {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; margin-top:2px;
}
.modal-salary-info {
  font-family:var(--font-mono); font-size:14px;
  color:var(--gold); font-weight:700;
}
.modal-diff-badge {
  font-family:var(--font-mono); font-size:11px;
  padding:4px 10px; border-radius:4px;
  background:rgba(239,68,68,.1); color:#f87171;
  border:1px solid rgba(239,68,68,.25);
}
.modal-apply-btn { font-size:14px; letter-spacing:2px; margin-top:auto; }

/* ── Tipografías por especialidad ── */

/* Logística: industrial, bold, azul frío */
.modal-theme-logistica .modal-career-title {
  font-family:'Impact','Arial Narrow',var(--font-ui);
  letter-spacing:5px; color:#7dd3fc;
}
.modal-theme-logistica .modal-boss-quote {
  border-left-color:rgba(56,189,248,.55);
  font-family:var(--font-mono);
}

/* Turismo: elegante, serif italic */
.modal-theme-turismo .modal-career-title {
  font-family:'Georgia','Times New Roman',serif;
  font-style:italic; letter-spacing:3px; color:#6ee7b7;
}
.modal-theme-turismo .modal-boss-quote {
  border-left-color:rgba(52,211,153,.55);
  font-style:italic; font-family:'Georgia',serif;
}

/* Energía: monospace digital con glow */
.modal-theme-energia .modal-career-title {
  font-family:var(--font-mono); font-size:19px;
  letter-spacing:4px; color:#fde68a;
  text-shadow:0 0 20px rgba(251,191,36,.45);
}
.modal-theme-energia .modal-boss-quote {
  border-left-color:rgba(245,158,11,.55);
  font-family:var(--font-mono);
}

/* Minería: pesado, mayúsculas, rojo tierra */
.modal-theme-mineria .modal-career-title {
  font-family:'Arial Black','Impact',var(--font-ui);
  letter-spacing:6px; text-transform:uppercase; color:#fca5a5;
}
.modal-theme-mineria .modal-boss-quote {
  border-left-color:rgba(239,68,68,.55);
  font-family:var(--font-mono); font-weight:700;
}

/* Applied confirm bar */
.career-applied-bar {
  position:absolute; bottom:0; left:0; right:0; z-index:55;
  background:rgba(4,8,20,.97); border-top:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(14px); padding:16px 36px;
  display:flex; justify-content:space-between; align-items:center;
  animation:fadeInUp .35s var(--ease-out) both;
}
.career-applied-info { display:flex; align-items:center; gap:14px; }
.applied-label {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:2px; color:rgba(148,163,184,.6); text-transform:uppercase;
}
.applied-name {
  font-family:var(--font-ui); font-size:16px; font-weight:700;
  letter-spacing:2px; color:var(--cyan);
}
.career-submit-btn { font-size:13px; padding:13px 34px; white-space:nowrap; }
#btn-career-confirm:disabled {
  opacity:.3; cursor:not-allowed;
  transform:none !important; box-shadow:none !important;
}
/* ══════════════════════════════════════════════
   CAREER CONFIRM SCREEN — inmersiva: jefe centrado, pregunta animada, SÍ/NO
══════════════════════════════════════════════ */
#career-confirm-screen {
  position: absolute; inset: 0; z-index: 60;
  overflow: hidden;
  animation: fadeIn .45s ease both;
}
#career-confirm-screen.hidden { display: none; }

/* Fondo: imagen de la rama con degradado de color encima */
.ccs-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(3px) brightness(.45);
  transform: scale(1.06);
}
.ccs-color-wash {
  position: absolute; inset: 0;
  opacity: .55;
}
.ccs-color-wash.dept-logistica { background: linear-gradient(160deg,rgba(14,165,233,.7),rgba(2,6,22,.9)); }
.ccs-color-wash.dept-energia   { background: linear-gradient(160deg,rgba(245,158,11,.7),rgba(2,6,22,.9)); }
.ccs-color-wash.dept-mineria   { background: linear-gradient(160deg,rgba(139,92,246,.7),rgba(2,6,22,.9)); }
.ccs-color-wash.dept-turismo   { background: linear-gradient(160deg,rgba(16,185,129,.7),rgba(2,6,22,.9)); }

/* Jefe centrado y grande */
.ccs-boss {
  position: absolute; bottom: 0;
  left: 50%; transform: translateX(-50%);
  height: 88vh; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 80px rgba(0,0,0,.95)) drop-shadow(0 40px 60px rgba(0,0,0,.8));
  pointer-events: none;
  animation: ccsBossIn .7s var(--ease-out, cubic-bezier(.22,.68,0,1.2)) both;
}
@keyframes ccsBossIn {
  from { opacity:0; transform: translateX(-50%) scale(.9) translateY(40px); }
  to   { opacity:1; transform: translateX(-50%) scale(1) translateY(0); }
}

/* Pregunta animada arriba */
.ccs-question-wrap {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 42px 40px 0;
  text-align: center;
  pointer-events: none;
  animation: ccsQIn .6s var(--ease-out, cubic-bezier(.22,.68,0,1.2)) .15s both;
}
@keyframes ccsQIn {
  from { opacity:0; transform: translateY(-24px); }
  to   { opacity:1; transform: translateY(0); }
}
.ccs-q-pre {
  font-family: var(--font-mono, 'Share Tech Mono', monospace);
  font-size: 11px; letter-spacing: 5px; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: 10px;
}
.ccs-question {
  font-family: var(--font-head, 'Exo 2', sans-serif);
  font-size: clamp(22px, 3.5vw, 40px); font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 60px rgba(0,0,0,.9), 0 4px 20px rgba(0,0,0,.8);
  animation: ccsTextPulse 2.5s ease-in-out infinite;
}
@keyframes ccsTextPulse {
  0%,100% { text-shadow: 0 0 60px rgba(0,0,0,.9), 0 4px 20px rgba(0,0,0,.8); }
  50%     { text-shadow: 0 0 80px rgba(0,0,0,.9), 0 4px 40px rgba(0,0,0,.8), 0 0 120px rgba(255,255,255,.06); }
}
.ccs-career-name {
  font-family: var(--font-head, 'Exo 2', sans-serif);
  font-size: clamp(28px, 4.5vw, 52px); font-weight: 900;
  letter-spacing: 6px; text-transform: uppercase;
  margin-top: 6px;
  animation: ccsTextPulse 2.5s ease-in-out .4s infinite;
}
.ccs-career-name.dept-logistica { color: #38bdf8; text-shadow: 0 0 60px rgba(56,189,248,.5); }
.ccs-career-name.dept-energia   { color: #fbbf24; text-shadow: 0 0 60px rgba(251,191,36,.5); }
.ccs-career-name.dept-mineria   { color: #a78bfa; text-shadow: 0 0 60px rgba(167,139,250,.5); }
.ccs-career-name.dept-turismo   { color: #34d399; text-shadow: 0 0 60px rgba(52,211,153,.5); }

/* SÍ / NO — laterales, sin caja */
.ccs-choice-si,
.ccs-choice-no {
  position: absolute; bottom: 8vh;
  font-family: var(--font-head, 'Exo 2', sans-serif);
  font-size: clamp(48px, 8vw, 96px); font-weight: 900;
  letter-spacing: 4px; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: transform .2s, text-shadow .2s, color .2s;
  animation: ccsChoiceIn .6s var(--ease-out, cubic-bezier(.22,.68,0,1.2)) .3s both;
}
@keyframes ccsChoiceIn {
  from { opacity:0; transform: translateY(30px); }
  to   { opacity:1; transform: translateY(0); }
}
.ccs-choice-si {
  left: 6vw;
  color: rgba(255,255,255,.7);
  text-shadow: 0 0 40px rgba(0,0,0,.8);
}
.ccs-choice-no {
  right: 6vw;
  color: rgba(255,255,255,.3);
  text-shadow: 0 0 40px rgba(0,0,0,.8);
}
.ccs-choice-si:hover {
  color: #4ade80;
  text-shadow: 0 0 40px rgba(74,222,128,.6), 0 0 80px rgba(74,222,128,.3);
  transform: scale(1.08) translateY(-4px);
}
.ccs-choice-no:hover {
  color: #f87171;
  text-shadow: 0 0 40px rgba(248,113,113,.6), 0 0 80px rgba(248,113,113,.3);
  transform: scale(1.08) translateY(-4px);
}

/* Advertencia sutil abajo centro */
.ccs-warning {
  position: absolute; bottom: calc(8vh - 36px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono, 'Share Tech Mono', monospace);
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(251,113,133,.5); white-space: nowrap;
  pointer-events: none;
}

/* badge y dialog (unused in new design, kept for JS compat) */
.ccs-badge-dept { display: none; }
.ccs-dialog     { display: none; }
.ccs-btns       { display: none; }
.ccs-btn-confirm, .ccs-btn-cancel { display: none; }