/* ============================================================
   PLATAFORMA YURUSTI · Sistema de diseño
   ============================================================ */
:root{
  --paper:#F4F7F9;      /* fondo general */
  --card:#FFFFFF;       /* tarjetas */
  --ink:#17242F;        /* texto principal */
  --muted:#5A6B7A;      /* texto secundario */
  --line:#DCE4EA;       /* bordes */
  --accent:#0E7FC0;     /* azul principal */
  --accent-dark:#0A659A;
  --accent-soft:#E3F0F9;
  --sidebar:#123047;    /* azul marino del menú */
  --sidebar-ink:#C9DAE8;
  --ok:#1E8E5A; --ok-soft:#E2F3EA;
  --warn:#DE8E07; --warn-soft:#FBF1DC;
  --danger:#C43D3D; --danger-soft:#F9E8E8;
  --radius:10px;
  --shadow:0 1px 3px rgba(18,48,71,.08);
  --font-display:'Lexend','Segoe UI',system-ui,sans-serif;
  --font-body:'Source Sans 3','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.25;margin:0 0 .4em}
h1{font-size:1.55rem;font-weight:700}
h2{font-size:1.2rem;font-weight:600}
h3{font-size:1.02rem;font-weight:600}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:.3em 0 .9em}

/* ---------- Estructura de la aplicación ---------- */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.main{min-width:0;display:flex;flex-direction:column}
.content{padding:26px 30px 60px;max-width:1200px;width:100%}

/* ---------- Menú lateral ---------- */
.sidebar{background:var(--sidebar);color:var(--sidebar-ink);display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;color:#fff}
.brand-logo{width:34px;height:34px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.brand-logo svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.04em}
.brand-sub{display:block;font-size:.66rem;color:var(--sidebar-ink);letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:var(--sidebar-ink);font-family:var(--font-display);font-size:.86rem;font-weight:500;text-decoration:none}
.nav a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav a.active{background:var(--accent);color:#fff}
.nav a.disabled{opacity:.42;pointer-events:none}
.nav .fase{margin-left:auto;font-size:.58rem;letter-spacing:.06em;background:rgba(255,255,255,.14);border-radius:99px;padding:2px 7px}
.sidebar-foot{font-size:.66rem;color:rgba(201,218,232,.55);padding:12px 10px 0;letter-spacing:.05em}

/* ---------- Barra superior ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-bottom:1px solid var(--line);padding:12px 30px;position:sticky;top:0;z-index:5}
.topbar h1{margin:0;font-size:1.12rem}
.topbar-user{display:flex;align-items:center;gap:12px;font-size:.9rem}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:.85rem}
.topbar-user .rol{display:block;font-size:.7rem;color:var(--muted);text-transform:capitalize}
.btn-salir{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 12px;background:none;cursor:pointer;font-family:var(--font-display)}
.btn-salir:hover{color:var(--danger);border-color:var(--danger)}

/* ---------- Componentes ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:6px 0 24px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--ink)}
.stat span{font-size:.82rem;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.badge{display:inline-block;font-family:var(--font-display);font-size:.68rem;font-weight:600;letter-spacing:.05em;border-radius:99px;padding:3px 10px}
.badge.azul{background:var(--accent-soft);color:var(--accent-dark)}
.badge.verde{background:var(--ok-soft);color:var(--ok)}
.badge.ambar{background:var(--warn-soft);color:var(--warn)}
.badge.gris{background:#EDF1F4;color:var(--muted)}
.lista-trimestres{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:6px}
.trimestre{border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.trimestre .num{font-family:var(--font-display);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark);font-weight:600}
.trimestre h4{margin:.15em 0 .2em;font-size:.94rem}
.trimestre span{font-size:.8rem;color:var(--muted)}

/* ---------- Formularios ---------- */
label{display:block;font-family:var(--font-display);font-size:.82rem;font-weight:500;margin:0 0 5px}
.input{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:11px 20px;font-family:var(--font-display);font-weight:600;font-size:.92rem;cursor:pointer}
.btn:hover{background:var(--accent-dark)}
.btn:focus-visible{outline:3px solid var(--accent-soft)}
.alert{border-radius:8px;padding:11px 14px;font-size:.9rem;margin-bottom:14px}
.alert.error{background:var(--danger-soft);color:var(--danger)}
.alert.ok{background:var(--ok-soft);color:var(--ok)}

/* ---------- Pantalla de login ---------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-side{background:var(--sidebar);color:#DCE9F4;display:flex;flex-direction:column;justify-content:center;padding:60px 64px}
.login-logos{display:flex;align-items:center;gap:20px;margin-bottom:28px}
.logo-yurusti{height:104px;width:auto;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.logo-sep{width:1px;height:60px;background:rgba(255,255,255,.25);flex:none}
.logo-versalles{height:52px;width:auto;max-width:min(46vw,300px);object-fit:contain}
.login-side h2{color:#fff;font-size:1.7rem;max-width:20ch}
.login-side p{color:#A9C2D6;max-width:44ch;font-size:.98rem}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--paper)}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px 36px;box-shadow:var(--shadow)}
.login-card h1{font-size:1.3rem;margin-bottom:2px}
.login-card .sub{color:var(--muted);font-size:.88rem;margin-bottom:22px}
.login-card form>div{margin-bottom:16px}
@media (max-width:860px){
  .login-wrap{grid-template-columns:1fr;min-height:100vh;grid-template-rows:auto 1fr}
  .login-side{padding:28px 22px 22px;align-items:center;text-align:center;justify-content:flex-start}
  .login-side p{display:none}
  .login-side h2{font-size:1.02rem;max-width:none;margin:0}
  .login-logos{margin-bottom:16px;gap:14px}
  .logo-yurusti{height:72px}
  .logo-sep{height:48px}
  .logo-versalles{height:38px}
}

/* ---------- Responsive general ---------- */
@media (max-width:900px){
  .app{grid-template-columns:64px 1fr}
  .nav a span,.brand-name,.brand-sub,.nav .fase,.sidebar-foot{display:none}
  .nav a{justify-content:center;padding:11px}
  .brand{justify-content:center;padding-bottom:14px}
  .content{padding:20px 16px 50px}
  .topbar{padding:12px 16px}
}

/* ---------- Currículo (Fase 2) ---------- */
.crumbs{font-family:var(--font-display);font-size:.78rem;color:var(--muted);margin-bottom:14px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent-dark)}
.crumbs .sep{opacity:.5}
.crumbs b{color:var(--ink);font-weight:600}
.prog-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:6px 0 24px}
.prog-link{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);display:block;text-decoration:none;color:var(--ink)}
.prog-link:hover{border-color:var(--accent);text-decoration:none}
.prog-link h3{margin:0 0 2px;font-size:.95rem}
.prog-link span{font-size:.78rem;color:var(--muted)}
.nivel-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nivel-card .meta{font-size:.85rem;color:var(--muted)}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--accent);color:var(--accent-dark);border-radius:8px;padding:8px 16px;font-family:var(--font-display);font-weight:600;font-size:.85rem;text-decoration:none;background:none;cursor:pointer}
.btn-ghost:hover{background:var(--accent-soft);text-decoration:none}
.cont-list{display:flex;flex-direction:column;margin-top:4px}
.cont-row{display:flex;align-items:center;gap:14px;padding:12px 6px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.cont-row:first-child{border-top:0}
.cont-row:hover{background:var(--accent-soft);text-decoration:none;border-radius:8px}
.cont-num{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:.82rem;flex:none}
.cont-row .titulo{flex:1;font-size:.95rem}
.cont-row .flecha{color:var(--muted);font-family:var(--font-display)}
.sab-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
@media (max-width:720px){.sab-grid{grid-template-columns:1fr}}
.sab{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--card)}
.sab .sab-label{display:inline-block;font-family:var(--font-display);font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;border-radius:99px;padding:3px 10px;margin-bottom:8px}
.sab p{margin:0;font-size:.95rem}
.sab.conocer .sab-label{background:#E7F0FF;color:#2A6FD4}
.sab.hacer .sab-label{background:#E7F6E7;color:#2E8B2E}
.sab.ser .sab-label{background:#FFF0E0;color:#B26105}
.sab.convivir .sab-label{background:#F9EAF9;color:#A63FA6}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}
.pager a{max-width:46%;font-size:.85rem}
.prog-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.prog-tabs a{font-family:var(--font-display);font-size:.84rem;font-weight:500;padding:7px 15px;border-radius:99px;border:1px solid var(--line);color:var(--muted);text-decoration:none;background:var(--card)}
.prog-tabs a:hover{border-color:var(--accent);color:var(--accent-dark)}
.prog-tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}
.prose{max-width:75ch}
.prose p{margin:.4em 0 1em}
.prose ul,.prose ol{padding-left:1.3em;max-width:70ch}
.prose li{margin:.4em 0}

/* ---------- Actividades y rúbricas (Fase 3) ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.filtros{display:flex;gap:10px;flex-wrap:wrap}
.filtros .input{width:auto;min-width:180px}
.act-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.act-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.act-card:hover{border-color:var(--accent);text-decoration:none}
.act-top{display:flex;justify-content:space-between;align-items:center}
.act-dur{font-family:var(--font-display);font-size:.75rem;color:var(--muted);font-weight:600}
.act-card h3{margin:0;font-size:1rem}
.act-obj{margin:0;font-size:.86rem;color:var(--muted);flex:1}
.act-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-top:4px}
.act-ruta{font-family:var(--font-display);font-size:.72rem;color:var(--accent-dark);font-weight:600}
.ficha-head{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ficha-datos{display:flex;gap:14px;align-items:center}
.dato{text-align:center;border:1px solid var(--line);border-radius:10px;padding:8px 16px}
.dato b{display:block;font-family:var(--font-display);font-size:1.3rem}
.dato span{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ficha-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.ficha-cols{grid-template-columns:1fr}}
.ficha-sec{font-size:.98rem;margin-bottom:8px}
.lista-mat{margin:0;padding-left:1.2em}
.lista-mat li{margin:.3em 0;font-size:.94rem}
.lista-pasos{margin:0;padding-left:1.4em;counter-reset:paso}
.lista-pasos li{margin:.55em 0;font-size:.95rem;padding-left:.3em}
.lista-pasos li::marker{font-family:var(--font-display);font-weight:700;color:var(--accent-dark)}
.ficha-cierre{margin-top:14px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;padding:10px 14px;font-size:.93rem}
.rubrica-tabla{border-collapse:collapse;width:100%;font-size:.88rem}
.rubrica-tabla th{background:var(--sidebar);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.8rem;padding:9px 12px;text-align:left;border:1px solid var(--sidebar)}
.rubrica-tabla th small{font-weight:400;opacity:.8}
.rubrica-tabla td{border:1px solid var(--line);padding:9px 12px;vertical-align:top}
.rubrica-tabla td.crit{font-weight:600;font-family:var(--font-display);font-size:.84rem;background:var(--paper);min-width:170px}
.rubrica-editor{border-collapse:collapse;width:100%}
.rubrica-editor th,.rubrica-editor td{border:1px solid var(--line);padding:8px;vertical-align:top;position:relative}
.rubrica-editor th{background:var(--paper)}
.rubrica-editor .btn-mini{position:absolute;top:4px;right:4px}
.rubrica-editor textarea{font-size:.86rem}
.rubrica-editor td.crit{background:var(--paper)}
.btn-mini{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:.7rem;line-height:1}
.btn-mini:hover{color:var(--danger);border-color:var(--danger)}
.btn-ghost.peligro{border-color:var(--danger);color:var(--danger)}
.btn-ghost.peligro:hover{background:var(--danger-soft)}
.oculto{display:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}
.hw-checks{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.check{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:.92rem;font-weight:400;margin:0}
.paso-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.paso-row .cont-num{margin-top:6px}
.paso-row .btn-mini{margin-top:8px;flex:none}
@media print{
  .sidebar,.topbar,.no-print{display:none !important}
  .app{display:block}
  .content{padding:0;max-width:none}
  .card{box-shadow:none;break-inside:avoid}
  body{background:#fff}
}

/* ---------- Grupos y calificación (Fase 4) ---------- */
.lista-est{margin:0;padding-left:1.4em}
.lista-est li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:.95rem}
.lista-est li form{margin:0}
.subgrupo{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:8px}
.subgrupo summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.95rem}
.subgrupo[open] summary{margin-bottom:10px}
.miembros{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px;max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.llenado-rapido{border-left:3px solid var(--accent)}
.est-card{padding:14px 18px}
.est-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.est-head b{font-family:var(--font-display);font-size:1rem}
.est-estado{font-family:var(--font-display);font-size:.74rem;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.est-estado.completo{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.est-estado.parcial{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.calif-tabla{width:100%;border-collapse:collapse}
.calif-tabla td{padding:7px 10px;border-top:1px solid var(--line);vertical-align:middle}
.calif-tabla td.crit{font-size:.85rem;font-family:var(--font-display);font-weight:500;max-width:280px}
.nivel-picks{display:flex;gap:8px;flex-wrap:wrap}
.nivel-pick input{position:absolute;opacity:0}
.nivel-pick span{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:5px 14px;font-size:.82rem;font-family:var(--font-display);cursor:pointer;user-select:none;background:var(--card)}
.nivel-pick input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
.nivel-pick input:focus-visible + span{outline:3px solid var(--accent-soft)}
.nivel-pick span:hover{border-color:var(--accent)}
.guardar-barra{position:sticky;bottom:0;background:var(--paper);padding:12px 0;border-top:1px solid var(--line)}

/* ---------- Color por módulo (Fase 5) ---------- */
.nav a svg{stroke:var(--mcol, currentColor)}
.nav a.active{background:var(--mcol, var(--accent));color:#fff}
.nav a.active svg{stroke:#fff}
.nav a:hover{background:rgba(255,255,255,.08)}
.topbar h1{display:flex;align-items:center;gap:10px}
.mod-dot{width:14px;height:14px;border-radius:5px;background:var(--mod, var(--accent));flex:none}
.crumbs b{color:var(--mod, var(--ink))}
.sec-color{color:var(--mod)}
.card-head h2{position:relative}

/* ---------- Bitácora, avance y reportes (Fase 5) ---------- */
.prog-track{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:6px 0}
.prog-track.grande{height:14px;margin-top:12px}
.prog-fill{height:100%;background:var(--ok);border-radius:99px;transition:width .3s}
.bit-linea{position:relative;padding-left:6px}
.bit-entrada{display:grid;grid-template-columns:74px 1fr;gap:14px;position:relative;padding-bottom:6px}
.bit-entrada::before{content:"";position:absolute;left:63px;top:8px;bottom:-6px;width:2px;background:var(--rail, #C7D3DC)}
.bit-entrada:last-child::before{display:none}
.bit-fecha{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 4px;height:fit-content;position:relative;z-index:1}
.bit-fecha b{display:block;font-family:var(--font-display);font-size:1.25rem;color:var(--mod, var(--accent-dark))}
.bit-fecha span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.bit-cuerpo{margin-bottom:10px}
.avance-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.avance-row .titulo{font-size:.93rem;flex:1;min-width:240px}
.estado-visto input:checked + span{background:var(--ok);border-color:var(--ok);color:#fff}
.estado-en_curso input:checked + span{background:var(--warn);border-color:var(--warn);color:#fff}
.estado-pendiente input:checked + span{background:var(--muted);border-color:var(--muted);color:#fff}
.avance-dash{display:grid;grid-template-columns:220px 1fr 130px;gap:14px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.avance-dash:first-of-type{border-top:0}
.avance-dash .nombre{font-family:var(--font-display);font-weight:600;font-size:.9rem}
.avance-dash .pct{font-size:.8rem;color:var(--muted);text-align:right;font-family:var(--font-display)}
@media (max-width:720px){.avance-dash{grid-template-columns:1fr;gap:4px}.avance-dash .pct{text-align:left}}

/* ---------- Pulido visual (Fase 5b): tipografía más suave ---------- */
h1{font-weight:600}
h2{font-weight:500}
h3,h4{font-weight:500}
.stat b{font-weight:600}
td:first-child{font-weight:500}
.badge{font-weight:500}
.btn,.btn-ghost{font-weight:500}
.rubrica-tabla th{font-weight:500}
.est-head b{font-weight:500}
.topbar-user strong{font-weight:600}

/* ---------- Entrada suave de tarjetas ---------- */
@media (prefers-reduced-motion: no-preference){
  .content .card,.content .stat,.content .act-card{animation:subir .38s ease both}
  .content .card:nth-child(2),.content .stat:nth-child(2){animation-delay:.05s}
  .content .card:nth-child(3),.content .stat:nth-child(3){animation-delay:.1s}
  .content .card:nth-child(4),.content .stat:nth-child(4){animation-delay:.15s}
  @keyframes subir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---------- Modales ---------- */
dialog.modal{border:0;border-radius:16px;padding:0;max-width:600px;width:calc(100% - 32px);
  box-shadow:0 24px 70px rgba(18,48,71,.28);background:var(--card);color:var(--ink)}
dialog.modal::backdrop{background:rgba(18,48,71,.45);backdrop-filter:blur(3px)}
@media (prefers-reduced-motion: no-preference){
  dialog.modal[open]{animation:modalIn .22s cubic-bezier(.2,.7,.3,1)}
  @keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.modal-head .mod-dot{width:12px;height:12px;border-radius:4px;background:var(--mod,var(--accent))}
.modal-body{padding:20px 24px 24px}
.modal-x{border:0;background:none;font-size:1.1rem;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:8px}
.modal-x:hover{background:var(--paper);color:var(--ink)}
.modal-pie{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
#modal-confirm .modal-body{text-align:center;padding:28px 26px 24px}
#modal-confirm .icono{width:52px;height:52px;border-radius:50%;background:var(--danger-soft);color:var(--danger);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 12px}
#modal-confirm p{font-size:1rem;margin:.2em 0 0}
#modal-confirm .modal-pie{justify-content:center;margin-top:20px}
.btn.rojo{background:var(--danger)}
.btn.rojo:hover{background:#A83434}

/* ---------- Mini gráficos en tarjetas de estadísticas ---------- */
.stat{display:flex;flex-direction:column;gap:6px}
.stat .fila{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.mini-bars{display:flex;align-items:flex-end;gap:3px;height:46px;min-width:80px}
.mini-bars i{flex:1;min-width:7px;border-radius:3px 3px 0 0;transform:scaleY(0);transform-origin:bottom;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.mini-bars.ya i{transform:scaleY(1)}
.mini-bars i:nth-child(2){transition-delay:.06s}.mini-bars i:nth-child(3){transition-delay:.12s}
.mini-bars i:nth-child(4){transition-delay:.18s}.mini-bars i:nth-child(5){transition-delay:.24s}
.mini-bars i:nth-child(6){transition-delay:.3s}
@media (prefers-reduced-motion: reduce){.mini-bars i{transform:scaleY(1);transition:none}}
.dona{width:56px;height:56px;flex:none}
.dona circle{fill:none;stroke-width:5;transition:stroke-dasharray .7s cubic-bezier(.2,.7,.3,1)}
.stat-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.stat-chips span{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--muted);font-family:var(--font-display)}
.stat-chips i{width:8px;height:8px;border-radius:3px;display:inline-block}
.prog-fill{transition:width .8s cubic-bezier(.2,.7,.3,1)}

/* ---------- Stat cards modernizadas (Fase 5c) ---------- */
.stat{position:relative;overflow:hidden;padding-top:15px}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--scol,var(--accent))}
.stat-top{display:flex;align-items:flex-start;gap:12px}
.stat-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;
  background:color-mix(in srgb, var(--scol, var(--accent)) 14%, #fff)}
.stat-ico svg{width:20px;height:20px;stroke:var(--scol,var(--accent));fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat-top b{font-size:1.6rem;line-height:1.1}
.hbar{display:flex;gap:2px;height:10px;border-radius:99px;overflow:hidden;background:var(--line);margin-top:10px}
.hbar i{height:100%;width:0;transition:width .7s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion: reduce){.hbar i{transition:none}}
.stat-vacio{margin-top:10px;font-size:.82rem}
.stat-vacio a{font-family:var(--font-display);font-weight:500}
.mini-bars i{background:var(--scol,var(--accent))}
.stat-top > div:not(.stat-ico):not(.mini-bars){min-width:0}
.stat-top span{display:block;font-size:.78rem;line-height:1.25}
.stat-top .mini-bars{min-width:56px;max-width:76px;justify-content:flex-end}
.mini-bars i{max-width:14px}

/* ---------- Niveles y ruta del proyecto (Fase 5d) ---------- */
.nivel-bloque{position:relative;overflow:hidden}
.nivel-bloque::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--ncol,var(--accent))}
.nivel-ico{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:color-mix(in srgb, var(--ncol, var(--accent)) 14%, #fff)}
.nivel-ico svg{width:17px;height:17px;stroke:var(--ncol,var(--accent));fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.trimestre{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
a.trimestre:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--ncol,var(--accent));
  box-shadow:0 6px 18px color-mix(in srgb, var(--ncol, var(--accent)) 18%, transparent)}
.num-chip{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:.9rem;
  background:color-mix(in srgb, var(--ncol, var(--accent)) 14%, #fff);color:var(--ncol,var(--accent-dark))}
a.trimestre h4{margin:0 0 1px}
a.trimestre > div{flex:1;min-width:0}
a.trimestre .flecha{color:var(--muted);opacity:0;transform:translateX(-4px);transition:all .18s ease;font-family:var(--font-display)}
a.trimestre:hover .flecha{opacity:1;transform:none;color:var(--ncol,var(--accent))}
@media (prefers-reduced-motion: no-preference){
  .lista-trimestres .trimestre{animation:subir .4s ease both}
  .lista-trimestres .trimestre:nth-child(2){animation-delay:.08s}
  .lista-trimestres .trimestre:nth-child(3){animation-delay:.16s}
}
.ruta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 0 2px}
.ruta-paso{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:86px;text-align:center}
@media (prefers-reduced-motion: no-preference){.ruta-paso{animation:aparecer .4s ease both}}
@keyframes aparecer{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.ruta-paso .punto{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:.88rem;border:2px dashed var(--line);color:var(--muted);background:var(--card)}
.ruta-paso.lista .punto{background:var(--pcol);border:0;color:#fff}
.ruta-paso .nombre{font-family:var(--font-display);font-size:.72rem;color:var(--muted);line-height:1.2}
.ruta-paso.lista .nombre{color:var(--ink)}
.ruta-linea{flex:1;min-width:14px;height:2px;background:var(--line);border-radius:99px;margin-bottom:22px}
.ruta-linea.lista{background:color-mix(in srgb, var(--ok) 45%, var(--line))}
@media (max-width:760px){.ruta{gap:10px}.ruta-linea{display:none}.ruta-paso{min-width:72px}}

/* ============================================================
   MODO OSCURO (activado con html[data-theme="dark"])
   ============================================================ */
html[data-theme="dark"]{
  --paper:#0F1820; --card:#16222C; --ink:#E4EDF4; --muted:#95A8B7;
  --line:#25333F; --rail:#33475A;
  --accent:#3E97D6; --accent-dark:#82C2EC; --accent-soft:#173349;
  --sidebar:#0C1926; --sidebar-ink:#9FB4C6;
  --ok:#43C088; --ok-soft:#123528;
  --warn:#F0A83A; --warn-soft:#3A2D13;
  --danger:#E36A6A; --danger-soft:#3D1D1D;
  --shadow:0 1px 3px rgba(0,0,0,.45);
}
html[data-theme="dark"] .input{background:#0F1B26;color:var(--ink)}
html[data-theme="dark"] .badge.gris{background:#22303C;color:#95A8B7}
html[data-theme="dark"] .stat-ico{background:color-mix(in srgb, var(--scol, var(--accent)) 24%, #16222C)}
html[data-theme="dark"] .num-chip,
html[data-theme="dark"] .nivel-ico{background:color-mix(in srgb, var(--ncol, var(--accent)) 24%, #16222C)}
html[data-theme="dark"] .num-chip{color:color-mix(in srgb, var(--ncol, var(--accent)) 70%, #fff)}
html[data-theme="dark"] a.trimestre:hover{box-shadow:0 6px 18px rgba(0,0,0,.5)}
html[data-theme="dark"] .ruta-paso .punto{background:var(--card)}
html[data-theme="dark"] .ruta-paso.lista .punto{background:var(--pcol);color:#0F1820}
html[data-theme="dark"] .hbar,html[data-theme="dark"] .prog-track{background:#22303C}
html[data-theme="dark"] .nivel-pick span{background:#101C27}
html[data-theme="dark"] .btn-salir{border-color:var(--line);color:var(--muted)}
html[data-theme="dark"] .modal-x:hover{background:#22303C}
html[data-theme="dark"] dialog.modal::backdrop{background:rgba(0,0,0,.6)}
html[data-theme="dark"] .rubrica-tabla th{background:#0C1926;border-color:#0C1926}
html[data-theme="dark"] .est-estado.completo{background:var(--ok-soft);color:var(--ok)}
html[data-theme="dark"] .est-estado.parcial{background:var(--warn-soft);color:var(--warn)}
html[data-theme="dark"] .login-form{background:var(--paper)}
/* chips pastel (competencias/hardware) legibles en oscuro: leve atenuación */
html[data-theme="dark"] .badge[style]{filter:saturate(.9) brightness(.96)}

/* ---------- Asistente de IA (Fase 6) ---------- */
.btn-ia{background:linear-gradient(120deg,#7C4DDB,#3E82E0);border:0}
.btn-ia:hover{background:linear-gradient(120deg,#6B3FC9,#2F6FC9)}
.ia-head{background:linear-gradient(120deg, color-mix(in srgb,#7C4DDB 12%, var(--card)), color-mix(in srgb,#3E82E0 12%, var(--card)))}
#ia-overlay{position:fixed;inset:0;z-index:60;background:rgba(12,25,38,.72);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:20px}
#ia-overlay[hidden]{display:none}
.ia-carta{background:var(--card);border-radius:20px;padding:40px 46px;text-align:center;max-width:420px;
  box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ia-robot{font-size:3rem;animation:flotar 2.2s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ia-carta h3{margin:10px 0 4px;font-size:1.1rem}
.ia-carta p{color:var(--muted);margin:0;font-size:.92rem;min-height:1.4em}
.ia-puntos{display:flex;gap:7px;justify-content:center;margin-top:16px}
.ia-puntos span{width:9px;height:9px;border-radius:50%;background:#7C4DDB;animation:pulso 1.2s ease-in-out infinite}
.ia-puntos span:nth-child(2){animation-delay:.2s;background:#5B67DE}
.ia-puntos span:nth-child(3){animation-delay:.4s;background:#3E82E0}
@keyframes pulso{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion: reduce){.ia-robot,.ia-puntos span{animation:none}}
.ia-banner{display:flex;gap:14px;align-items:flex-start;border-radius:12px;padding:16px 20px;margin-bottom:16px;
  background:linear-gradient(120deg, color-mix(in srgb,#7C4DDB 14%, var(--card)), color-mix(in srgb,#3E82E0 14%, var(--card)));
  border:1px solid color-mix(in srgb,#7C4DDB 35%, var(--line))}
.ia-banner-ico{font-size:1.5rem}
.ia-banner b{font-family:var(--font-display)}
.ia-banner p{margin:.2em 0 0;font-size:.9rem;color:var(--muted)}

/* ---------- Pastillas adaptativas al tema (.badge.tinta) ---------- */
.badge.tinta{
  background:color-mix(in srgb, var(--bcol, #7A8B99) 13%, #fff);
  color:color-mix(in srgb, var(--bcol, #7A8B99) 88%, #000);
}
html[data-theme="dark"] .badge.tinta{
  background:color-mix(in srgb, var(--bcol, #7A8B99) 26%, #131E28);
  color:color-mix(in srgb, var(--bcol, #7A8B99) 55%, #fff);
}
html[data-theme="dark"] .badge[style]{filter:none}
/* Etiquetas de saberes en modo oscuro */
html[data-theme="dark"] .sab.conocer .sab-label{background:color-mix(in srgb,#2A6FD4 26%,#131E28);color:color-mix(in srgb,#2A6FD4 55%,#fff)}
html[data-theme="dark"] .sab.hacer .sab-label{background:color-mix(in srgb,#2E9B4E 26%,#131E28);color:color-mix(in srgb,#2E9B4E 55%,#fff)}
html[data-theme="dark"] .sab.ser .sab-label{background:color-mix(in srgb,#C77712 26%,#131E28);color:color-mix(in srgb,#C77712 55%,#fff)}
html[data-theme="dark"] .sab.convivir .sab-label{background:color-mix(in srgb,#C24FC2 26%,#131E28);color:color-mix(in srgb,#C24FC2 55%,#fff)}

/* ---------- Guía técnica mBlock 5 (Fase 7) ---------- */
.guia-card{border-left:3px solid #7C4DDB}
.guia-sub{font-size:.9rem;margin:16px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}
.mb-programa{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:var(--paper);border-radius:10px;width:fit-content;max-width:100%}
.mb-bloque{position:relative;border-radius:5px;padding:8px 16px 8px 14px;font-family:var(--font-display);font-weight:500;font-size:.86rem;width:fit-content;max-width:100%;box-shadow:0 1px 0 rgba(0,0,0,.18)}
.mb-bloque::before{content:"";position:absolute;top:-3px;left:12px;width:22px;height:6px;background:inherit;border-radius:3px 3px 0 0}
.mb-bloque.hat{border-radius:14px 14px 5px 5px;margin-bottom:1px}
.mb-bloque.hat::before{display:none}
.mb-leyenda{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.mb-leyenda span{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--muted);font-family:var(--font-display)}
.mb-leyenda i{width:9px;height:9px;border-radius:3px;display:inline-block}
.guia-tip{background:var(--warn-soft);border-radius:8px;padding:9px 14px;font-size:.9rem;margin-bottom:7px}
html[data-theme="dark"] .mb-programa{background:#0F1B26}
html[data-theme="dark"] .guia-tip{background:#2E2410}