/* ============================================================
   Estética de programador (inspirada en GitHub Dark / Light).
   Verde = acción principal (como "Run"), azul = selección, ámbar = advertencia.
   Títulos y números en JetBrains Mono, texto en IBM Plex Sans.
   ============================================================ */
:root{
  --bg:#f6f8fa; --surface:#ffffff; --surface-2:#f0f3f6; --border:#d1d9e0; --border-2:#c4ccd5;
  --text:#1f2328; --muted:#59636e; --faint:#818b98;
  --accent:#1f883d; --accent-text:#0969da; --accent-soft:#ddf4ff;
  --good:#1f883d; --good-text:#1a7f37; --good-soft:#dafbe1;
  --warn-text:#9a6700; --warn-soft:#fff8c5;
  --crit:#cf222e; --crit-text:#d1242f; --crit-soft:#ffebe9;
  --s-ok:#0969da; --s-no:#bc4c00;
  --code-bg:#ffffff; --code-head:#f6f8fa; --out-bg:#f6f8fa; --viewer:#eaeef2;
  --glow:rgba(9,105,218,.10);
  --sx-kw:#cf222e; --sx-str:#0a3069; --sx-fn:#8250df; --sx-num:#0550ae; --sx-type:#953800; --sx-com:#6e7781; --sx-pre:#cf222e; --sx-var:#1f2328; --sx-op:#cf222e;
  --display:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1117; --surface:#151b23; --surface-2:#1c232d; --border:#262e38; --border-2:#353e4a;
  --text:#e6edf3; --muted:#9198a1; --faint:#656d76;
  --accent:#238636; --accent-text:#4493f8; --accent-soft:rgba(56,139,253,.15);
  --good:#2ea043; --good-text:#56d364; --good-soft:rgba(46,160,67,.15);
  --warn-text:#e3b341; --warn-soft:rgba(187,128,9,.18);
  --crit:#da3633; --crit-text:#ff7b72; --crit-soft:rgba(248,81,73,.15);
  --s-ok:#4493f8; --s-no:#db6d28;
  --code-bg:#0d1117; --code-head:#151b23; --out-bg:#0b0f14; --viewer:#0b0f14;
  --glow:rgba(68,147,248,.14);
  --sx-kw:#ff7b72; --sx-str:#a5d6ff; --sx-fn:#d2a8ff; --sx-num:#79c0ff; --sx-type:#ffa657; --sx-com:#8b949e; --sx-pre:#ff7b72; --sx-var:#e6edf3; --sx-op:#ff7b72;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0d1117; --surface:#151b23; --surface-2:#1c232d; --border:#262e38; --border-2:#353e4a;
  --text:#e6edf3; --muted:#9198a1; --faint:#656d76;
  --accent:#238636; --accent-text:#4493f8; --accent-soft:rgba(56,139,253,.15);
  --good:#2ea043; --good-text:#56d364; --good-soft:rgba(46,160,67,.15);
  --warn-text:#e3b341; --warn-soft:rgba(187,128,9,.18);
  --crit:#da3633; --crit-text:#ff7b72; --crit-soft:rgba(248,81,73,.15);
  --s-ok:#4493f8; --s-no:#db6d28;
  --code-bg:#0d1117; --code-head:#151b23; --out-bg:#0b0f14; --viewer:#0b0f14;
  --glow:rgba(68,147,248,.14);
  --sx-kw:#ff7b72; --sx-str:#a5d6ff; --sx-fn:#d2a8ff; --sx-num:#79c0ff; --sx-type:#ffa657; --sx-com:#8b949e; --sx-pre:#ff7b72; --sx-var:#e6edf3; --sx-op:#ff7b72;
  color-scheme:dark;
}

/* ---------- tipografía de terminal ---------- */
h1,h2,.brand,.kpi .v,.lvt,.lvn,.cnum,.stat .v,.auth-side h1{font-family:var(--display);letter-spacing:-.02em}
h1{font-weight:700}
.eyebrow,.ssect,.sectionl,.lbl,.tb th,.lpb h3{font-family:var(--display);letter-spacing:.04em}
.btn{font-family:var(--font);border-radius:6px}
.btn.quiet{background:var(--surface-2)}
.pill{border-radius:6px;font-family:var(--display);font-weight:600;letter-spacing:0;font-size:.68rem}
.card,.kpi,.skcard{border-radius:8px}
.logo{background:var(--accent);color:#fff;border-radius:6px}

/* cursor que parpadea en la marca */
.brand::after{content:'_';color:var(--good-text);margin-left:-6px;animation:parpadeo 1.1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}

/* ---------- tema del editor (CodeMirror) con los colores de sintaxis ---------- */
.cm-s-oc.CodeMirror{background:var(--code-bg);color:var(--sx-var)}
.cm-s-oc .CodeMirror-gutters{background:var(--code-bg);border-right:1px solid var(--border)}
.cm-s-oc .CodeMirror-linenumber{color:var(--faint)}
.cm-s-oc .CodeMirror-cursor{border-left:2px solid var(--good-text)}
.cm-s-oc .CodeMirror-selected,.cm-s-oc.CodeMirror-focused .CodeMirror-selected{background:var(--accent-soft)}
.cm-s-oc .CodeMirror-activeline-background{background:var(--surface-2)}
.cm-s-oc .CodeMirror-matchingbracket{color:var(--good-text)!important;outline:1px solid var(--good);background:var(--good-soft)}
.cm-s-oc .cm-keyword{color:var(--sx-kw)}
.cm-s-oc .cm-string,.cm-s-oc .cm-string-2{color:var(--sx-str)}
.cm-s-oc .cm-def{color:var(--sx-fn)}
.cm-s-oc .cm-number,.cm-s-oc .cm-atom{color:var(--sx-num)}
.cm-s-oc .cm-type,.cm-s-oc .cm-variable-3{color:var(--sx-type)}
.cm-s-oc .cm-comment{color:var(--sx-com);font-style:italic}
.cm-s-oc .cm-meta{color:var(--sx-pre)}
.cm-s-oc .cm-operator{color:var(--sx-op)}
.cm-s-oc .cm-builtin{color:var(--sx-fn)}
.cm-s-oc .cm-variable,.cm-s-oc .cm-variable-2,.cm-s-oc .cm-property{color:var(--sx-var)}
.cm-s-oc .cm-bracket{color:var(--muted)}
.edhead .fn{color:var(--text)}
.edhead .fn::before{content:'● ';color:var(--warn-text);font-size:.7em}

/* ---------- brillo que sigue al mouse en las tarjetas ---------- */
.card,.kpi{position:relative}
.kpi::before,.card.brilla::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 45%)}
.kpi:hover::before,.card.brilla:hover::before{opacity:1}
.kpi{transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .2s}
.kpi:hover{transform:translateY(-2px);border-color:var(--accent-text)}

/* ---------- saludo tipo terminal ---------- */
.prompt{font-family:var(--display);color:var(--good-text);margin-right:.35em}
.cursor{display:inline-block;width:.55em;height:1em;background:var(--good-text);vertical-align:-.12em;margin-left:2px;animation:parpadeo 1.1s steps(1) infinite}
.racha-fuego{display:inline-block;animation:llama 1.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes llama{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.18) rotate(4deg)}}

/* ---------- consola: compilando como en la terminal ---------- */
.term{font-family:var(--mono);font-size:.82rem;line-height:1.75;background:var(--out-bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.term .ln{opacity:0;animation:aparecer .25s ease forwards}
.term .ln:nth-child(2){animation-delay:.35s}.term .ln:nth-child(3){animation-delay:.8s}.term .ln:nth-child(4){animation-delay:1.3s}
.term .p{color:var(--good-text)}
.term .c{color:var(--sx-com)}
@keyframes aparecer{to{opacity:1}}

/* casos que se revelan de a uno */
.case.rev{opacity:0;animation:revelar .35s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(var(--i)*110ms)}
@keyframes revelar{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* sello de ACEPTADO */
.sello{position:absolute;left:50%;top:42%;z-index:20;pointer-events:none;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:.08em;
  color:var(--good-text);border:4px solid var(--good-text);border-radius:12px;padding:6px 22px;background:color-mix(in srgb,var(--surface) 80%,transparent);
  transform:translate(-50%,-50%) rotate(-8deg);animation:sellar 1.6s cubic-bezier(.2,.7,.3,1.3) forwards}
@keyframes sellar{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(2.4)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(.94)}26%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}

/* error: sacudida */
.verdict.no{animation:sacudir .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes sacudir{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.cm-errline{animation:flash 1s ease 2}
@keyframes flash{50%{background:color-mix(in srgb,var(--crit) 34%,transparent)}}

/* ---------- festejo de tema completo ---------- */
.festejo{position:fixed;inset:0;z-index:96;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .3s ease both;padding:20px}
.festejo .caja{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:30px 34px;text-align:center;max-width:440px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:subir .5s cubic-bezier(.2,.7,.3,1.3) both}
.festejo .trofeo{font-size:3.4rem;line-height:1;display:inline-block;animation:trofeo 1.2s cubic-bezier(.2,.7,.3,1.4) both}
.festejo h2{font-size:1.35rem;margin:14px 0 6px}
.festejo p{color:var(--muted);margin:0 0 18px}
.festejo .cod{font-family:var(--mono);font-size:.8rem;color:var(--good-text);margin-bottom:14px}
@keyframes subir{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
@keyframes trofeo{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.25) rotate(10deg)}100%{transform:scale(1) rotate(0)}}

/* ---------- ingreso: código que se escribe solo ---------- */
.auth-side{background:#0d1117;color:#e6edf3}
.auth-side .logo{background:#238636;color:#fff}
.auth-side p{color:#9198a1}
.auth-side::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(68,147,248,.18) 1px,transparent 1px);background-size:22px 22px;animation:deriva 30s linear infinite}
@keyframes deriva{to{background-position:220px 110px}}
.auth-side>*{position:relative}
.auth-code{color:#8b949e;min-height:13.5em}
.auth-code .k{color:#ff7b72}.auth-code .f{color:#d2a8ff}.auth-code .n{color:#79c0ff}.auth-code .t{color:#ffa657}
.auth-code .cursor{background:#56d364}
.auth-side h1 .ac{color:#56d364}

@media (prefers-reduced-motion:reduce){
  .brand::after,.cursor,.racha-fuego,.auth-side::before{animation:none}
  .term .ln,.case.rev{opacity:1}
  .sello{display:none}
}
.rp{position:relative}
#saludo .ac,.welcome .ac{color:var(--good-text)}
/* sin ligaduras: que "<=" y "++" se vean tal cual se escriben */
.CodeMirror,pre,code,.sig,.term,.auth-code,textarea,.kbd{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}

/* ---------- cronómetro del ejercicio ---------- */
.timer{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);background:var(--surface);border-radius:999px;padding:3px 10px 3px 5px;font-family:var(--mono);font-size:.8rem;color:var(--text);cursor:pointer;transition:border-color .2s,background .2s,color .2s;margin-left:6px}
.timer svg{width:18px;height:18px;transform:rotate(-90deg)}
.timer .tr{fill:none;stroke:var(--surface-2);stroke-width:3}
.timer .tv{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .6s linear,stroke .3s}
.timer .tm{color:var(--faint);font-size:.72rem}
.timer.cerca{border-color:var(--warn-text);color:var(--warn-text)}
.timer.cerca .tv{stroke:var(--warn-text)}
.timer.pasado{border-color:var(--crit-text);color:var(--crit-text);background:var(--crit-soft);animation:latido 1.6s ease-in-out infinite}
.timer.pasado .tv{stroke:var(--crit-text)}
.timer.fin{border-color:var(--good-text);color:var(--good-text);background:var(--good-soft)}
.timer.fin .tv{stroke:var(--good-text)}
.timer.pausa:not(.fin){opacity:.7}
.timer.oculto .tv{stroke:var(--faint)}
.timer.oculto{color:var(--muted);font-family:var(--font);font-size:.76rem}
@keyframes latido{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px var(--crit-soft)}}
@media (max-width:600px){.timer .tm{display:none}}

/* ---------- mascota (al estilo vscode-pets) ---------- */
/* Franja al pie del menú lateral por donde pasea. Solo la mascota recibe clics. */
.mascota{position:fixed;left:0;bottom:0;z-index:60;width:var(--side);height:56px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--surface) 45%);border-right:1px solid var(--border)}
.mascota .m-pet{position:absolute;left:4px;bottom:6px;width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;will-change:transform}
.mascota .m-pet svg{display:block;position:relative;z-index:1;image-rendering:pixelated}
.mascota .m-pet:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:6px}
.mascota .m-sombra{position:absolute;left:5px;right:5px;bottom:-3px;height:5px;border-radius:50%;background:rgba(0,0,0,.22)}
[data-theme="dark"] .mascota .m-sombra{background:rgba(0,0,0,.5)}
/* capas */
.mascota .c-parpadeo,.mascota .c-feliz,.mascota .c-dormido,.mascota .c-sudor,.mascota .c-colaB{display:none}
.mascota .c-colaA{animation:m-colaA .8s steps(1) infinite}
.mascota .c-colaB{display:inline;animation:m-colaB .8s steps(1) infinite}
.mascota .m-pet[data-modo="corre"] .c-colaA,.mascota .m-pet[data-modo="corre"] .c-colaB,.mascota .m-pet[data-reaccion="feliz"] .c-colaA,.mascota .m-pet[data-reaccion="feliz"] .c-colaB{animation-duration:.3s}
@keyframes m-colaA{0%{visibility:visible}50%{visibility:hidden}}
@keyframes m-colaB{0%{visibility:hidden}50%{visibility:visible}}
.mascota .m-pet[data-modo="duerme"] .c-colaA{animation:none}
.mascota .m-pet[data-modo="duerme"] .c-colaB{display:none}
.mascota .m-pet.parpadea .c-parpadeo{display:inline}
.mascota .m-pet[data-reaccion="feliz"] .c-feliz,.mascota .m-pet[data-modo="duerme"] .c-dormido{display:inline}
.mascota .m-pet[data-reaccion="preocupado"] .c-sudor{display:inline}
/* camina a saltitos; las animaciones van en el svg para no pisar el translateX del paseo */
.mascota .m-pet[data-modo="camina"] svg{animation:m-paso .36s ease-in-out infinite}
.mascota .m-pet[data-modo="corre"] svg{animation:m-paso .2s ease-in-out infinite}
.mascota .m-pet[data-modo="duerme"] svg{animation:m-respira 3s ease-in-out infinite;transform-origin:50% 100%}
.mascota .m-pet.salta svg,.mascota .m-pet[data-reaccion="feliz"] svg{animation:m-salto .45s ease 3}
.mascota .m-pet[data-reaccion="preocupado"] svg{animation:m-tiembla .35s ease 3}
@keyframes m-paso{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes m-respira{0%,100%{scale:1 1}50%{scale:1.03 .96}}
@keyframes m-salto{0%,100%{translate:0 0}45%{translate:0 -12px}}
@keyframes m-tiembla{0%,100%{translate:0 0}25%{translate:-2px 0}75%{translate:2px 0}}
/* zzz y "···" */
.mascota .m-zzz{position:absolute;left:32px;top:-8px;font-family:var(--mono);font-weight:700;font-size:10px;color:var(--accent-text);display:none;z-index:2}
.mascota .m-zzz i{font-style:normal;position:absolute;left:7px;top:-8px;font-size:12px}
.mascota .m-pet[data-modo="duerme"] .m-zzz{display:block;animation:m-zzz 2.4s ease-in-out infinite}
@keyframes m-zzz{0%{opacity:0;transform:translateY(3px)}30%,70%{opacity:1}100%{opacity:0;transform:translateY(-5px)}}
.mascota .m-pet[data-reaccion="pensando"]::after{content:'···';position:absolute;left:34px;top:-6px;z-index:2;font-family:var(--mono);font-weight:800;font-size:12px;color:var(--muted);overflow:hidden;width:0;white-space:nowrap;animation:m-puntos 1s steps(4) infinite}
@keyframes m-puntos{to{width:18px}}
/* globo de diálogo */
.mascota .m-burbuja{position:absolute;bottom:56px;width:max-content;max-width:min(220px,calc(100vw - 24px));background:var(--surface);color:var(--text);border:1.5px solid var(--text);border-radius:8px;padding:6px 9px;font-size:.74rem;line-height:1.35;box-shadow:2px 2px 0 var(--text);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.mascota .m-burbuja.ver{opacity:1;transform:none}
.mascota .m-corazon{position:absolute;bottom:42px;color:#ff7b9c;font-size:11px;animation:m-corazon 1.3s ease-out forwards}
@keyframes m-corazon{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-30px) scale(1.1)}}
.side{padding-bottom:72px}
/* En celular el menú está oculto: pasea por una franja chica en la esquina inferior derecha. */
@media (max-width:900px){
  .mascota{left:auto;right:0;width:150px;height:50px;background:none;border:0}
  .mascota .m-burbuja{right:6px;left:auto!important;bottom:50px}
  body:has(.ide) .mascota{bottom:58px}
  .side{padding-bottom:28px}
}
@media (prefers-reduced-motion:reduce){.mascota *{animation:none!important}}

/* ---------- ranking ---------- */
.podio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;max-width:640px;margin:6px auto 18px}
.escalon{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;animation:subir .6s cubic-bezier(.2,.8,.3,1.2) both}
.escalon.p1{animation-delay:.15s}.escalon.p2{animation-delay:.3s}.escalon.p3{animation-delay:.45s}
.escalon b{font-size:.88rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.escalon .pts{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.escalon .pava{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:700;background:var(--surface-2);border:2px solid var(--border-2)}
.escalon.p1 .pava{width:64px;height:64px;border-color:#e3b341;box-shadow:0 0 0 4px color-mix(in srgb,#e3b341 25%,transparent)}
.escalon.p2 .pava{border-color:#adb5bd}.escalon.p3 .pava{border-color:#d08b52}
.escalon .med{position:absolute;right:-8px;bottom:-6px;font-size:1.2rem}
.escalon.p1 .med{animation:brillo-med 2.4s ease-in-out infinite}
.escalon .base{width:100%;border-radius:10px 10px 0 0;display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:1.4rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-bottom:0;margin-top:6px}
.escalon.p1 .base{height:96px;background:linear-gradient(to bottom,color-mix(in srgb,#e3b341 22%,var(--surface)),var(--surface));color:#e3b341}
.escalon.p2 .base{height:70px}.escalon.p3 .base{height:52px}
.escalon.yo .pava{border-color:var(--accent-text)}
.escalon.vacio{visibility:hidden}
@keyframes subir{from{opacity:0;transform:translateY(24px)}}
@keyframes brillo-med{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-12deg) scale(1.15)}}
.tb.rank tbody tr{animation:aparecer .4s ease both;animation-delay:calc(var(--i) * 40ms)}
.tb.rank tr.yo td{background:color-mix(in srgb,var(--accent-text) 10%,transparent)}
.tb.rank .pos{font-family:var(--mono);font-weight:700;width:56px}
@keyframes aparecer{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.escalon,.tb.rank tbody tr,.escalon .med{animation:none}}

/* ---------- pie de página: créditos ---------- */
.pie{margin:28px auto 6px;padding:16px 12px 4px;max-width:1240px;border-top:1px dashed var(--border-2);text-align:center;font-family:var(--mono);font-size:.76rem;color:var(--faint);letter-spacing:.01em;line-height:1.8}
.pie .c{color:var(--good-text);opacity:.75}
.pie b{color:var(--muted);font-weight:700}
.pie .sep{opacity:.5;margin:0 2px}
.pie a{color:var(--accent-text);text-decoration:none;border-bottom:1px dotted currentColor;transition:color .2s,border-color .2s}
.pie a:hover{color:var(--text);border-bottom-style:solid}
.pie .firma{font-weight:800;letter-spacing:.08em;background:linear-gradient(90deg,var(--good-text),var(--accent-text),var(--good-text));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .8s ease}
.pie:hover .firma{background-position:100% 0;animation:firma-brillo 2.4s linear infinite}
@keyframes firma-brillo{to{background-position:-200% 0}}
/* en el ingreso va al pie de la columna del formulario */
.auth-main .pie{border-top:0;margin:18px 0 0;padding:0 12px}
@media (prefers-reduced-motion:reduce){.pie:hover .firma{animation:none}}