/* Tema compartido de la app SkillUp — diseño interno Brandooers (nuevo). Misma paleta que
   inicio/bienvenida/curso: oscuro por defecto, con modo claro opcional (data-theme="light").
   Mantiene los NOMBRES de token antiguos como alias para no tocar el markup de cada página. */
:root{
  color-scheme:dark;
  --bg:#1a1820;--panel:#221f2a;--ink:#F2EFF5;--body:#DAD4E2;--muted:#968EA4;
  --aub:#8a5f7c;--aub2:#C69CB8;--teal:#1a9aa0;--teal2:#3FD8E0;--gold:#F0C645;--green:#54C79A;--red:#E2506A;--amber:#E8A13C;
  --line:rgba(180,150,205,.16);--line-ui:#746A86;/* pack F (SU-043): 3:1 border for fields and outlined buttons (WCAG 1.4.11) */--soft:rgba(255,255,255,.05);--sh:0 24px 70px rgba(0,0,0,.5);
  --ff:'Inter',system-ui,-apple-system,sans-serif;--fh:var(--ff);/* round 4: one title style, the same sans as page titles */--fc:'Caveat',cursive;
  /* alias de compatibilidad con el markup antiguo */
  --dark:#171121;--dark2:#221f2a;--ink-mut:var(--muted);--white:var(--panel);--text:var(--ink);
  --warm:var(--soft);--mut:var(--muted);--p:var(--aub2);--t:var(--teal2);
  --grad:linear-gradient(120deg,var(--teal),var(--aub));--radius:18px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F3EFE7;--panel:#FFFFFF;--ink:#211E28;--body:#403A48;--muted:#837B90;
  --aub:#7A4E6B;--aub2:#8A5578;--teal:#0F7F86;--teal2:#0B6E78;--gold:#8A6B0E;--green:#2E9E73;--red:#C23A54;--amber:#B4710A;
  --muted:#6B6478;
  --line:rgba(70,50,90,.16);--line-ui:#8A8098;--soft:rgba(60,42,84,.05);--sh:0 18px 50px rgba(80,60,100,.12);
  --dark:#171121;--dark2:#FFFFFF;--warm:rgba(60,42,84,.05);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--ff);color:var(--body);line-height:1.6;font-variant-numeric:lining-nums;/* pack F (SU-199): zeros never look like «o» */-webkit-font-smoothing:antialiased;min-height:100dvh;
  background:radial-gradient(760px 460px at 50% -6%,rgba(113,75,103,.26),transparent 60%),var(--bg)}
a{text-decoration:none;color:inherit}
[hidden]{display:none!important}
.hand,.grad-text{font-family:var(--fc)}
.grad-text{color:var(--teal2)}

/* Cabecera de la app — logo real animado + navegación */
.topbar{position:sticky;top:env(safe-area-inset-top,0);z-index:50;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;background:var(--panel);border-bottom:1px solid var(--line)}
.topbar nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.topbar nav a{font-size:13.5px;font-weight:600;color:var(--muted);padding:8px 12px;border-radius:100px;transition:color .15s,background .15s}
.topbar nav a:hover{color:var(--ink);background:var(--soft)}
.blogo{display:inline-flex;align-items:baseline;font-weight:900;letter-spacing:-.02em;font-size:19px;color:var(--ink);user-select:none}
.blogo .beyes{display:inline-block;align-self:center;margin:0 1px}
.beyes .irisL,.beyes .irisR,.beyes .pupilL,.beyes .pupilR{transform-box:fill-box;transform-origin:center;animation:bBlink 5.4s infinite}
.beyes .socketL{transform-box:fill-box;transform-origin:center;animation:bBlinkL 5.4s infinite}
.beyes .socketR{transform-box:fill-box;transform-origin:center;animation:bBlinkR 5.4s infinite}
@keyframes bBlink{0%,91%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}98%{transform:scaleY(1)}}
@keyframes bBlinkL{0%,91%,100%{transform:translate(5px,0) scaleY(1)}95%{transform:translate(5px,0) scaleY(.08)}98%{transform:translate(5px,0) scaleY(1)}}
@keyframes bBlinkR{0%,91%,100%{transform:translate(53px,0) scaleY(1)}95%{transform:translate(53px,0) scaleY(.08)}98%{transform:translate(53px,0) scaleY(1)}}
.blogo .sk{font-family:var(--fc);font-size:16px;color:var(--teal2);margin-left:6px}

.wrap{max-width:820px;margin:0 auto;padding:32px 24px 60px}

/* Tarjetas */
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:18px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.card h2{font-family:var(--fh);font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card.dark{background:linear-gradient(160deg,#241a2b,#1b1622);color:var(--ink);border-color:rgba(255,255,255,.08)}
.card.dark h2{color:#fff}
.card.notice{background:linear-gradient(90deg,rgba(240,198,69,.10),rgba(240,198,69,.03));border-color:rgba(240,198,69,.35)}

.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.row:last-child{border-bottom:0}
.badge{font-size:11px;font-weight:700;padding:3px 11px;border-radius:100px;background:var(--soft);color:var(--aub2)}

/* Formularios */
label{display:block;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
input,textarea,select{width:100%;font-family:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--line-ui);border-radius:12px;background:var(--soft);color:var(--ink);margin-bottom:12px;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teal2);box-shadow:0 0 0 3px rgba(63,216,224,.14)}
textarea{min-height:88px;resize:vertical}
/* SUP-33F250D0: native <option>/<optgroup> popups must stay legible. Chrome on Windows paints the native popup on a
   WHITE background and ignores var(--panel) there, so with var(--ink) (near-white in the dark theme) the text was
   white-on-white. Use CONCRETE dark bg + light text with !important, and cover optgroup + checked. Identical rule in
   assess.css so every page (theme.css or assess.css) reads the same. */
select option,select optgroup,select.in option,select.in optgroup,option,optgroup{background-color:#1b1226!important;color:#E8ECF3!important}
option:checked,option:hover{background-color:#2a1f3a!important;color:#fff!important}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em;border-radius:100px;padding:12px 22px;cursor:pointer;border:0;transition:transform .15s,box-shadow .15s,opacity .15s;font-family:inherit}
/* Degradado oscurecido para que el texto BLANCO cumpla contraste AA (>=4,5:1) en ambos extremos (WCAG 1.4.3). */
.btn-grad{background:linear-gradient(120deg,#107079,#7a4e6b);color:#fff;box-shadow:0 6px 18px rgba(138,95,124,.35)}
.btn-grad:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(138,95,124,.5)}
.btn-grad:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn-gh{background:none;color:var(--teal2);border:1.5px solid var(--line-ui);padding:10.5px 20px}
.btn-gh:hover{background:var(--soft);border-color:var(--teal2)}
.btn-danger{background:var(--red);color:#fff}
.btn-ok{background:var(--green);color:#fff}
.btn-block{width:100%}
/* Foco de teclado visible en TODO lo interactivo (WCAG 2.4.7): antes dependía del anillo por defecto del navegador,
   que sobre fondo oscuro y degradados apenas se veía. */
:focus-visible{outline:2px solid var(--teal2);outline-offset:2px;border-radius:4px}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--teal2);outline-offset:3px}

.msg{font-size:13px;color:var(--muted);margin-top:8px}
.msg.err{color:var(--red)}
.risk{color:var(--red);font-weight:700}

/* ---- Responsive global (no rompe escritorio) ---- */
img,video{max-width:100%;height:auto}
table{max-width:100%}
@media(max-width:640px){
  .topbar{padding:11px 15px}
  .topbar nav{gap:2px}
  .topbar nav a{padding:7px 9px;font-size:12.5px}
  .wrap{padding:22px 15px 48px}
  .card{padding:17px;border-radius:15px}
  .card h2{font-size:16.5px}
  .btn{padding:11px 18px}
  /* tablas anchas: scroll horizontal propio en vez de romper la página */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}
@media(max-width:400px){
  .wrap{padding:20px 12px 44px}
  .card{padding:15px}
}