/* Mi área — capa propia sobre test-app.css (tokens y componentes del test). */
body { background:var(--white); min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--accent); }
.top { background:var(--navy); padding:12px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; position:sticky; top:0; z-index:5; }
.logo { display:flex; align-items:center; gap:9px; text-decoration:none; }
.logo-text { color:#fff; font-weight:700; font-size:1.1rem; letter-spacing:-.3px; }
.tabs { display:flex; gap:4px; margin-left:auto; overflow-x:auto; }
.tabs a { color:rgba(255,255,255,.75); text-decoration:none; font-size:.92rem; font-weight:600; padding:8px 13px; border-radius:8px; white-space:nowrap; }
.tabs a:hover { color:#fff; background:rgba(255,255,255,.08); }
.tabs a.on { color:var(--navy); background:var(--accent-light); }
.wrap { flex:1; width:100%; max-width:900px; margin:0 auto; padding:30px 22px 60px; }
h1 { font-size:1.65rem; color:var(--navy); letter-spacing:-.5px; margin-bottom:6px; line-height:1.25; }
h2 { font-size:1.18rem; color:var(--navy); margin:30px 0 12px; }
.sub { color:var(--gray); font-size:.95rem; margin-bottom:20px; }
.pie { background:var(--navy); color:rgba(255,255,255,.55); text-align:center; padding:20px; font-size:.82rem; line-height:2; }
.pie a { color:rgba(255,255,255,.78); text-decoration:none; margin:0 8px; }

/* Acceso */
.acceso { max-width:460px; margin:40px auto; }
.acceso label { display:block; font-weight:600; color:var(--navy); margin-bottom:6px; font-size:.93rem; }
.acceso input { width:100%; padding:13px 15px; border:2px solid var(--arena); border-radius:9px; font:inherit; font-size:1rem; margin-bottom:12px; background:#fff; color:var(--text); }
.acceso input.cod { text-align:center; letter-spacing:.4em; font-size:1.4rem; font-weight:700; }
.acceso input:focus { outline:none; border-color:var(--accent); }
.acceso .btn { width:100%; }
.err { color:var(--ko); font-size:.92rem; min-height:22px; margin:4px 0 8px; }
.nota { font-size:.86rem; color:var(--gray); margin-top:16px; }

/* Tarjetas */
.semana { background:var(--navy); color:#fff; border-radius:16px; padding:22px 24px; margin-bottom:22px; }
.semana .k { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-light); font-weight:700; }
.semana h2 { color:#fff; margin:6px 0 14px; font-size:1.3rem; }
.semana .acciones { display:flex; gap:10px; flex-wrap:wrap; }
.semana .btn.sec { color:#fff; border-color:rgba(255,255,255,.35); }
.semana .btn.sec:hover { background:rgba(255,255,255,.08); }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:8px; }

.lista-temas { list-style:none; display:grid; gap:8px; }
.lista-temas button { width:100%; display:flex; align-items:center; gap:14px; text-align:left; background:#fff; border:1px solid var(--arena); border-radius:12px; padding:13px 16px; font:inherit; color:var(--text); cursor:pointer; }
.lista-temas button:hover:not(:disabled) { border-color:var(--brand-500); background:var(--gray-light); }
.lista-temas button:disabled { cursor:default; opacity:.55; background:var(--gray-light); }
.lista-temas .num { flex:0 0 38px; height:38px; border-radius:10px; background:var(--brand-100); color:var(--navy); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.92rem; }
.lista-temas .actual .num { background:var(--accent); color:#fff; }
.lista-temas .tit { flex:1; font-weight:600; color:var(--navy); font-size:.96rem; line-height:1.35; }
.lista-temas .tit small { display:block; font-weight:400; color:var(--gray); font-size:.8rem; margin-top:2px; }
.lista-temas .pct { font-size:.82rem; color:var(--gray); white-space:nowrap; font-variant-numeric:tabular-nums; }
.etq { display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; background:var(--accent); color:#fff; border-radius:5px; padding:2px 7px; margin-left:6px; vertical-align:2px; }

.recursos { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:6px 0 10px; }
.recurso { display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--arena); border-radius:12px; padding:14px; font:inherit; text-align:left; cursor:pointer; color:var(--navy); font-weight:600; font-size:.93rem; }
.recurso:hover { border-color:var(--accent); background:var(--gray-light); }
.recurso .ic { flex:0 0 36px; height:36px; border-radius:9px; background:var(--brand-100); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.volver { background:none; border:none; font:inherit; color:var(--gray); cursor:pointer; padding:0; margin-bottom:14px; font-size:.9rem; }
.volver:hover { color:var(--accent); }
.caja { background:var(--gray-light); border-radius:14px; padding:18px 20px; margin:16px 0; }
.caja p:last-child { margin-bottom:0; }

/* Visor de Drive */
.visor { position:fixed; inset:0; background:rgba(20,30,40,.72); z-index:20; display:flex; align-items:center; justify-content:center; padding:14px; }
.visor[hidden] { display:none; }
.visor-caja { background:#fff; border-radius:14px; width:min(1000px,100%); height:min(92vh,100%); display:flex; flex-direction:column; overflow:hidden; }
.visor-cab { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; background:var(--navy); color:#fff; font-size:.92rem; }
.visor-cab a { color:var(--accent-light); margin-right:12px; }
.visor-cab button { background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; padding:4px 8px; }
.visor iframe { flex:1; border:0; width:100%; }

.ios { background:var(--brand-100); padding:12px 20px; display:flex; gap:12px; align-items:center; justify-content:space-between; font-size:.9rem; }
.ios[hidden] { display:none; }
.ios p { margin:0; }

.modo small { display:block; margin-top:6px; font-size:.76rem; color:var(--accent-ink); font-weight:600; }
@media (max-width:640px){
  .top { padding:10px 14px; gap:10px; }
  .tabs { margin-left:0; width:100%; }
  .tabs a { flex:1; text-align:center; padding:8px 6px; }
  .wrap { padding:22px 16px 48px; }
  h1 { font-size:1.4rem; }
}
.selector select { min-width:0; width:100%; flex:1 1 200px; }
.app, .wrap > h1 { scroll-margin-top:130px; }
html, body { overflow-x:hidden; }
.tabs[hidden], [hidden] { display:none !important; }