/* OPERACIÓN VIDA SOCIAL — hojas de estilo, sin frameworks ni dependencias */
:root {
  color-scheme: dark;
  --bg: #090e1c; --panel: #111a2b; --panel-2: #172136;
  --border: #303b51; --muted: #8596af; --text: #f2f6ff;
  --cyan: #75d9f9; --green: #a8f38b; --pink: #ff7f96; --yellow: #f7d87b;
  --purple: #c2a0ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text);
  font-family: "Arial", "Helvetica Neue", system-ui, sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
::selection { background: var(--cyan); color: var(--bg); }

.space-noise { position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(ellipse at 80% 5%, #1735518f 0, transparent 33%),
    radial-gradient(ellipse at 0% 90%, #37224286 0, transparent 35%),
    linear-gradient(180deg, #0b1121, #080c18 86%);
}
.space-noise::after { content:""; position:absolute; inset:0; opacity:.20;
  background-image: radial-gradient(#9ab4dd 0.75px,transparent 1px); background-size: 26px 26px;
  mask-image: linear-gradient(180deg, black, transparent 85%); }
.orbit { position: fixed; z-index: -2; border: 1px solid #4b639537; border-radius: 50%; pointer-events:none; }
.orbit-one { width: 800px; height: 800px; top: -500px; right: -230px; transform: rotate(-20deg); }
.orbit-two { width: 930px; height: 930px; bottom: -720px; left: -380px; }
#confetti { position: fixed; z-index: 30; inset: 0; pointer-events:none; width:100%;height:100%; }
.app-shell { max-width: 1370px; margin: auto; padding: 0 40px; }
.topbar { min-height: 100px; border-bottom: 1px solid #ffffff17; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; font-size:12px; font-weight:800; letter-spacing: .13em; line-height:1.3; }
.brand-icon { background: #dcff9c; color: #17261c; width: 39px; height:39px; display:grid; place-items:center;
  font-size:25px; font-weight:900; clip-path: polygon(50% 0,100% 23%,100% 77%,50% 100%,0 77%,0 23%); }
.brand strong { color: #baff9b; }
.brand small { display:block; color:var(--muted); font-size:8px; letter-spacing:.14em; margin-top:4px; }
.topbar-right { display:flex; align-items:center; gap:24px; }
.live-status { color:#a9c1a6; letter-spacing:.12em; font-size:10px; font-weight:700; white-space:nowrap; }
.pulse-dot { display:inline-block; background:#a7ff92; width:7px;height:7px;border-radius:50%;box-shadow:0 0 13px #a9ff89;margin-right:8px;animation:glow 2.2s infinite; }
.sound-button { background:transparent; color:#9eb3cb; border:1px solid #3b4659; border-radius:5px; padding:11px 13px; font-size:11px; font-weight:800; letter-spacing:.06em; }
.sound-button:hover, .sound-button[aria-pressed="true"] { color:var(--green);border-color:#a8f38b80; }

.main-content { padding: 52px 0 20px; }
.heading-row { display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:34px; }
.eyebrow { display:flex;align-items:center;gap:10px;color:var(--cyan);letter-spacing:.2em;font-size:10px;font-weight:800;margin-bottom:20px; }
.eyebrow-line { background:var(--cyan);height:1px;width:30px; }
h1, h2, p { margin-top:0; }
h1, h2 { letter-spacing:-.055em; }
h1 { font-family: Impact, "Arial Narrow", sans-serif; font-stretch:condensed;font-size:clamp(46px,5.5vw,78px);line-height:.98;margin-bottom:18px; font-weight:900; }
h1>span { display:block;color:var(--green); }
.punctuation { color:var(--pink); }
.headline-subtitle { color:#b9c4d4;font-size:14px;margin:0; }
.mission-stamp { align-self:center;flex: 0 0 104px; height:104px; border:2px dashed #d89c6d73;border-radius:50%;
  display:flex; flex-direction:column;align-items:center;justify-content:center;transform:rotate(12deg);color:#f4be95;letter-spacing:.17em;font-size:12px; }
.mission-stamp strong {font-size:16px;letter-spacing:.06em}.mission-stamp small {font-size:9px; margin-top:5px;}
.dashboard {display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);align-items:start;gap:21px;}
.left-column{min-width:0}.panel {border:1px solid var(--border);background:linear-gradient(155deg, #192439e8, #0e1627f5 70%);border-radius:9px;box-shadow:0 18px 70px #00000040;position:relative;overflow:hidden;}
.panel::before {content:"";position:absolute;pointer-events:none;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#84c7f44d,transparent);}
.screen{padding:31px 34px 34px;min-height:595px;animation:screenIn .36s ease both;}
.section-heading {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.chip {display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid #4b536a;background:#283347;
  color:#bfcaed;border-radius:3px;font-size:10px;line-height:1;font-weight:900;letter-spacing:.08em;}
.chip-warning {background:#38272d;border-color:#704550;color:#ffafa6;}
.chip-blue{background:#15354a;border-color:#296480;color:#8adaf9;}
.chip-purple{background:#312441;border-color:#5e4680;color:#dfbfff;}
.chip-green {background:#223d32;border-color:#507f67;color:#a8f38b;}
.serial{font-size:10px;letter-spacing:.09em;color:#758aa3;font-family:monospace;}
.warning-icon{margin:27px 0 21px;width:52px;height:52px;display:grid;place-items:center;
  border:1.5px solid #ffb1a6; transform:rotate(45deg);color:#ffb1a6;font-size:36px;font-weight:700;}
.warning-icon::first-letter {transform:rotate(-45deg);}
.intro-screen h2 {max-width:610px;font-size:clamp(29px,3.1vw,46px);line-height:1.08;margin-bottom:19px;font-weight:950;}
.intro-screen h2 em{font-style:normal;color:#ff9a8f;}
.intro-screen p {font-size:14px;color:#aebdd2;line-height:1.76;margin-bottom:12px;}
.intro-screen p strong {color:#fff;}
.rules {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:28px 0 23px;}
.rules > div {border:1px solid #364258;background:#111c2e9e;border-radius:5px;padding:13px 11px;min-height:102px;display:flex;flex-direction:column;gap:5px;}
.rules-symbol{font-weight:900;font-size:20px;line-height:1.05;}
.positive,.good{color:var(--green)}.negative,.bad{color:var(--pink)}.neutral{color:var(--yellow)}
.rules strong{font-size:11px;letter-spacing:.09em}.rules small{color:var(--muted);font-size:10px;line-height:1.3}
.primary-button {width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px;
  background:var(--green);color:#0b1a18;border:0;border-radius:4px;padding:18px 20px;
  font-weight:950;letter-spacing:.055em;font-size:12px;text-decoration:none;transition:filter .2s,transform .2s,box-shadow .2s;}
.primary-button:hover {filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 10px 32px #b4ff9c26;}
.primary-button:active{transform:translateY(0);}
.primary-button span:last-child{font-size:19px;line-height:1;}
.fine-print {font-size:10px!important;color:#6f849b!important;margin:12px 0 0!important;line-height:1.5!important;text-align:center;}

.ticket-panel {padding:25px 25px 23px;min-height:595px;}
.ticket-topline{display:flex;justify-content:space-between;align-items:center;margin:25px 0 16px;}
.mini-label{font-family:monospace;color:#91a0b8;letter-spacing:.08em;font-size:9px;margin-bottom:7px;}
.ticket-topline h2{margin:0;font-size:23px;letter-spacing:-.035em;}
.blink-cursor{color:var(--cyan);animation:cursor 1.1s step-end infinite;}
.lock-icon{display:grid;place-items:center;width:35px;height:35px;border:1px solid #647089;color:#b8a9e8;border-radius:50%;font-size:25px;}
.ticket-frame {height:326px;position:relative;overflow:hidden;background:#121725;border:1px solid #617084;
  isolation:isolate;border-radius:5px;box-shadow:inset 0 0 38px #0307128a;}
.ticket-frame.is-portrait {width:min(100%,380px);height:auto;aspect-ratio:1653 / 2339;margin-inline:auto;}
.ticket-frame::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#00000019 4px);opacity:.5;}
.ticket-placeholder {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;background:radial-gradient(ellipse at center,#263a58,#101a2e 62%,#0b1423);overflow:hidden;text-align:center;}
.placeholder-orbit {width:245px;height:245px;position:absolute;border:1px solid #72bbed46;border-radius:50%;transform:rotate(-24deg) scaleX(1.5);}
.placeholder-orbit::after{content:"";position:absolute;inset:22px;border:1px dashed #78c7ed4d;border-radius:50%;}
.placeholder-label {color:var(--cyan);font-family:monospace;font-size:9px;letter-spacing:.28em;z-index:1;}
.placeholder-symbol {font-size:55px;color:#bfeaf7;line-height:1.1;z-index:1;text-shadow:0 0 20px #75d9f988;}
.ticket-placeholder strong {font-size:20px;letter-spacing:.04em;z-index:1;}
.ticket-placeholder>span:nth-last-of-type(2){color:#becfe0;font-size:9px;letter-spacing:.16em;z-index:1;}
.placeholder-barcode{font-family:monospace;color:#71a8c4;font-size:17px;letter-spacing:1px;z-index:1;opacity:.6;}
.ticket-image {width:100%;height:100%;display:block;object-fit:contain;background:#0a101c;}
.tile-grid {position:absolute;z-index:5;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));}
.tile {background:linear-gradient(145deg,#2b3851,#172235 66%);border:1px solid #465775;position:relative;transition:opacity .53s ease,transform .53s ease,background .3s;}
.tile::after{content:"+";position:absolute;left:8px;top:4px;font-size:10px;color:#7791af88;font-family:monospace;}
.tile:nth-child(3n){background:linear-gradient(130deg,#283346,#18283b);}
.tile:nth-child(7n)::after{content:"·"}
.tile.revealed {opacity:0;transform:scale(.72);pointer-events:none;}
.tile.recovered {animation:restore .38s ease;}
.secure-strip {position:absolute;z-index:6;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;height:31%;background:repeating-linear-gradient(-45deg,#0b1022fa,#0b1022fa 10px,#1c2240fa 10px,#1c2240fa 20px);border-top:2px solid var(--pink);
  text-align:center;box-shadow:0 -8px 30px #03051191;}
.secure-strip span{color:#ffc6cf;font-size:11px;font-weight:900;letter-spacing:.1em;}
.secure-strip small{color:#b3a9b9;font-size:9px;letter-spacing:.09em;}
.ticket-frame.is-unlocked {border-color:var(--green);box-shadow:0 0 0 1px #96f4874d,0 0 42px #96f48719;}
.ticket-frame.is-unlocked .ticket-image {animation:ticketPop .85s ease both;}
.ticket-completed{position:absolute;z-index:7;top:11px;right:11px;transform:rotate(3deg);font-size:10px;background:#122818;
  padding:7px 9px;border:1px solid #a8f38b;color:var(--green);font-weight:900;letter-spacing:.09em;}
.reveal-info{margin:25px 0 21px;}
.reveal-info>div:first-child{display:flex;justify-content:space-between;gap:10px;color:#97abc5;letter-spacing:.1em;font-size:10px;font-weight:800;}
.reveal-info>div:first-child strong{color:#e5ebf8;font-family:monospace;font-size:13px;letter-spacing:0;}
.progress-track{height:10px;background:#0b1322;border:1px solid #39495c;border-radius:10px;margin-top:13px;overflow:hidden;}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#5cbcd5,var(--green));box-shadow:0 0 18px #99f5ad82;transition:width .5s ease;}
.percent-line{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:9px;}
.percent-line strong {color:var(--green);font-family:monospace;font-size:18px;}
.percent-line span {font-size:9px;color:#899ab1;letter-spacing:.09em;text-align:right;}
.stats-grid {display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #303d56;background:#0e1829;border-radius:4px;}
.stat {display:flex;align-items:center;flex-direction:column;padding:13px 5px;gap:7px;}
.stat+.stat{border-left:1px solid #303d56;}
.stat span {font-size:9px;letter-spacing:.11em;color:#8097b3;}
.stat strong {font-family:monospace;font-size:25px;line-height:1.1;}
.ai-message{display:flex;gap:12px;align-items:flex-start;margin-top:17px;padding:15px;border-radius:4px;
  border:1px solid #38536c;background:#1830475c;min-height:77px;}
.ai-avatar{display:grid;place-items:center;border:1px solid #7ab3c4;color:#98d5e3;width:32px;height:32px;flex:0 0 32px;border-radius:4px;font-weight:900;font-size:11px;}
.ai-message small{color:#afcfe5;font-size:9px;font-weight:800;letter-spacing:.06em;}
.online-indicator{color:var(--green);margin-left:6px;}
.ai-message p{margin:6px 0 0;font-size:12px;line-height:1.52;color:#d0dbe8;}
.admin-tools {margin-top:16px;padding:13px;background:#322b1a;border:1px dashed #d8ae62;border-radius:4px;}
.admin-tools label {display:block;font-size:10px;color:#ffe0a1;font-weight:bold;margin-bottom:10px;}
.admin-tools input{font-size:11px;max-width:100%;color:#fff;}
.admin-tools small{color:#ddc8a3;display:block;line-height:1.6;margin-top:8px;font-size:10px;}
.admin-tools code{color:#fff;}

.question-top{margin:36px 0 14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px;}
.question-kicker{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.12em;}
.difficulty{color:#9e8da2;font-size:9px;letter-spacing:.08em;}
.question-title{font-size:clamp(24px,2.7vw,39px);line-height:1.15;margin-bottom:24px;font-weight:900;min-height:95px;}
.answer-options{display:grid;gap:11px;}
.answer-button{display:flex;align-items:center;gap:15px;text-align:left;width:100%;border:1px solid #39485f;background:#101d30;color:#f0f4fa;
  border-radius:4px;padding:13px 15px;min-height:66px;font-size:13px;line-height:1.35;transition:background .15s,border-color .15s,transform .15s;}
.answer-button:not(:disabled):hover{background:#23354a;border-color:var(--cyan);transform:translateX(3px);}
.answer-button:disabled{cursor:default;opacity:.76;}
.answer-button:focus-visible{opacity:1;}
.answer-button.correct {border-color:var(--green);background:#243b31;color:#d8ffd5;opacity:1;}
.answer-button.incorrect {border-color:var(--pink);background:#402532;color:#ffdae0;opacity:1;}
.answer-key{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid #55647b;
  font-family:monospace;font-size:13px;font-weight:900;color:var(--cyan);border-radius:3px;}
.correct .answer-key{border-color:var(--green);color:var(--green);}
.incorrect .answer-key{border-color:var(--pink);color:var(--pink);}
.answer-copy{flex:1;}
.answer-status{font-weight:900;margin-left:auto;font-size:19px;}
.answer-feedback{margin:17px 0;background:#1d2a3d;border:1px solid #45607b;border-radius:5px;padding:15px;animation:screenIn .25s ease;}
.answer-feedback.success{border-color:#426b49;background:#21372d;}
.answer-feedback.failure{border-color:#7c4851;background:#3b2631;}
.feedback-heading{font-size:13px;font-weight:900;letter-spacing:.035em;margin-bottom:7px;}
.answer-feedback.success .feedback-heading{color:var(--green)}
.answer-feedback.failure .feedback-heading{color:#ffb1b9}
.answer-feedback p{color:#d4dfef;font-size:12px;line-height:1.6;margin:0;}
.next-button {margin-top:17px;background:var(--cyan);}
.keyboard-tip{text-align:center;color:#788ca5;font-size:9px;letter-spacing:.04em;margin-top:22px;line-height:1.5;}
kbd{display:inline-block;border:1px solid #4b5c72;background:#1c2c40;border-radius:3px;padding:1px 5px;color:#e6f4ff;margin:0 2px;font-size:10px;}

.win-screen{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at 50% 30%,#2c4152,#11192c 60%);}
.trophy{font-size:67px;color:#ffde81;text-shadow:0 0 48px #ffc86e;animation:bob 3s ease-in-out infinite;}
.win-pretitle{color:var(--cyan);letter-spacing:.22em;font-weight:900;font-size:10px;margin:0;}
.win-screen h2{font-size:clamp(28px,3.2vw,45px);line-height:1.13;margin:0;}
.win-copy{font-size:14px;line-height:1.65;max-width:430px;color:#bdcde2;margin:0;}
.win-copy.smaller{font-size:12px;}
.win-glow{color:var(--green);font-weight:950;letter-spacing:.02em;font-size:clamp(18px,2.15vw,28px);text-shadow:0 0 26px #a8f38b77;margin:11px 0;}
.win-actions{width:min(390px,100%);display:grid;gap:10px;margin-top:7px;}
.download-button{background:var(--green);}
.secondary-button{padding:13px 15px;background:transparent;border:1px solid #536781;color:#b6cce0;border-radius:4px;letter-spacing:.07em;font-size:11px;font-weight:900;}
.secondary-button:hover{border-color:var(--cyan);color:var(--cyan);}
.footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#62768e;border-top:1px solid #ffffff12;
  margin-top:34px;padding:21px 2px 30px;letter-spacing:.09em;font-size:9px;}
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,130px);z-index:40;background:#162c34;
  border:1px solid #7cc8af;padding:12px 18px;border-radius:5px;color:#e0fff3;font-size:12px;box-shadow:0 15px 35px #0008;max-width:90vw;
  transition:transform .3s ease;pointer-events:none;text-align:center;}
.toast.show{transform:translate(-50%,0);}
.shake{animation:shake .38s ease;}
.pop{animation:ticketPop .45s ease;}
@keyframes glow{50%{opacity:.4;box-shadow:0 0 0 4px #a9ff8929;}}
@keyframes cursor{50%{opacity:0;}}
@keyframes screenIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:translateY(0);}}
@keyframes restore{50%{background:#723746;}}
@keyframes ticketPop{0%{transform:scale(.98);filter:brightness(1.5);}100%{transform:scale(1);filter:brightness(1);}}
@keyframes bob{50%{transform:translateY(-8px);}}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}50%{transform:translateX(5px);}75%{transform:translateX(-3px);}}
@media (max-width: 1000px){
  .app-shell{padding:0 25px}.dashboard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
  .screen{padding:24px;min-height:610px}.ticket-panel{padding:21px;}
  .intro-screen h2{font-size:31px}.rules{gap:6px}.rules>div{padding:11px 7px;}
  .ticket-frame{height:300px}.question-title{font-size:27px;}
}
@media (max-width: 760px){
  .app-shell{padding:0 16px}.topbar{min-height:80px}.topbar-right{gap:10px}.live-status{display:none}
  .main-content{padding-top:31px}.heading-row{margin-bottom:26px}.mission-stamp{width:76px;height:76px;flex:0 0 76px;font-size:9px}
  .mission-stamp strong{font-size:12px}.dashboard{display:flex;flex-direction:column;}
  .left-column{width:100%;order:2}.ticket-panel{order:1;width:100%;min-height:auto;}
  .ticket-frame{height:250px}.screen{min-height:auto;padding:24px 22px;}
  .intro-screen h2{font-size:30px}.ticket-topline{margin:17px 0 12px}.reveal-info{margin:17px 0}
  .ai-message{margin-top:13px}.footer{flex-direction:column;text-align:center;gap:9px;}
  .question-title{min-height:0;margin:0 0 24px;}
  .warning-icon{margin:25px 0 21px;}
}
@media (max-width: 460px){
  .topbar{gap:6px}.brand{font-size:10px;gap:8px}.brand small{font-size:7px;letter-spacing:.04em}
  .brand-icon{width:31px;height:31px;font-size:20px}.sound-button{font-size:10px;padding:9px 7px}
  h1{font-size:43px}.heading-row{align-items:flex-end}.mission-stamp{width:64px;height:64px;flex-basis:64px;font-size:8px}
  .mission-stamp strong{font-size:10px}.mission-stamp small{margin:2px 0 0;font-size:7px}
  .headline-subtitle{font-size:12px}.eyebrow{letter-spacing:.09em;font-size:9px}
  .ticket-panel{padding:18px 16px}.ticket-frame{height:228px}.ticket-topline h2{font-size:20px}
  .rules small{font-size:9px}.rules strong{font-size:10px}.rules>div{min-height:98px}
  .screen{padding:20px 17px}.intro-screen h2{font-size:27px}
  .intro-screen p{font-size:12px}.question-title{font-size:26px}.answer-button{font-size:12px;padding:11px;gap:10px;min-height:60px}
  .answer-key{width:29px;height:29px;flex-basis:29px;}
  .secure-strip span{font-size:10px}.secure-strip small{font-size:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
}