/* yoire.com — sistema de tema compartido (claro/oscuro). Un único origen de paleta.
   Lo referencian index/sprints/reflexion via <link rel="stylesheet" href="/ctf/theme.css">.
   Tokens accesibles: en tema claro el verde es más oscuro (texto ≥4.5:1); el neón
   sólo se usa como acento/fondo, y el texto sobre botón neón usa --neon-ink. */
:root{
  --bg:#0a0e14; --bg2:#0f1620; --panel:#121a26; --panel2:#16202e; --line:#1f2c3d;
  --txt:#c7d2e0; --dim:#7d8fa6;
  --neon:#39ff14; --neon-ink:#06210a; --neon2:#00e5ff;
  --warn:#ffb627; --red:#ff4d6d; --purple:#b388ff; --purple-ink:#1a0e2e;
  --grad:#10202c; --navbg:rgba(10,14,20,.85);
}
[data-theme="light"]{
  --bg:#f4f6fb; --bg2:#ffffff; --panel:#ffffff; --panel2:#eef2f8; --line:#cdd6e3;
  --txt:#1c2530; --dim:#566476;
  --neon:#167a0a; --neon-ink:#ffffff; --neon2:#0a6e98;
  --warn:#8a5a00; --red:#cc2742; --purple:#6f3fce; --purple-ink:#ffffff;
  --grad:#dfe7f3; --navbg:rgba(244,246,251,.88);
}
/* botón de tema compartido (icono 🌙/☀️) */
.themebtn{background:transparent;border:1px solid var(--line);color:var(--dim);cursor:pointer;
  font-size:15px;border-radius:6px;padding:4px 9px;line-height:1;font-family:inherit}
.themebtn:hover{color:var(--txt);border-color:var(--purple)}
.themebtn:focus-visible{outline:2px solid var(--neon2);outline-offset:2px}

/* Scrollbars acordes al tema (claro/oscuro). color-scheme hace que el navegador pinte de
   oscuro las barras/controles nativos cuando el tema es oscuro; el bloque ::-webkit-scrollbar
   + scrollbar-color da el acabado pulido con la propia paleta. Vale para todas las páginas y
   para el iframe de herramientas (también cargan este theme.css). */
:root{ color-scheme: dark; }
[data-theme="light"]{ color-scheme: light; }
*{ scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line); border:2px solid transparent; background-clip:padding-box; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--dim); }
::-webkit-scrollbar-corner{ background:transparent; }

/* Tooltips tipo bocadillo de cómic — .tt[data-tip] + #tt-bubble (position:fixed, escapa overflow) */
.tt{cursor:help;border-bottom:1.5px dashed var(--acc,var(--neon));display:inline}
#tt-bubble{position:fixed;z-index:99999;pointer-events:none;
  background:#fefde0;color:#111;border:2.5px solid #1a1a1a;border-radius:8px;
  padding:5px 10px;font-size:.78em;font-family:system-ui,-apple-system,sans-serif;
  white-space:nowrap;box-shadow:2px 2px 0 #1a1a1a;line-height:1.4;
  opacity:0;transition:opacity .15s;--arr:50%}
#tt-bubble::after{content:'';position:absolute;left:var(--arr);transform:translateX(-50%);
  top:100%;border:6px solid transparent;border-top:9px solid #fefde0}
#tt-bubble.vis{opacity:1}