/*!
 * DOCENCIA · Bloom, la era de la IA y SOLO
 * (c) 2026 L.D.G. Luis E. Maldonado Gil - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-DOC-BLOOM-2026-4417
 */
/* Colores del sistema de CodeLibri (Figma, «Paleta de Color»).

     UN TONO POR MARCO. Esta pieza cruza tres sistemas y el color dice de
     cuál se está hablando, en vez de decorar:

       Bloom  → magenta   (rampa secondary2)   qué operación mental
       SOLO   → turquesa  (rampa secondary)    cuánta profundidad
       IA     → oro       (rampa warning)      el verbo cuando media la IA

     El morado (rampa primary) se retira al cromo —héroe, títulos, foco,
     navegación—, así que cuando algo se pinta de color es porque pertenece
     a uno de los tres marcos. La escalera de SOLO recorre la rampa turquesa
     entera, y así la profundidad se lee dentro de su propio tono.

     Cuatro pasos por marco, y cada uno tiene su sitio por contraste: el
     base para texto pequeño sobre papel, el vivo para bordes y avisos, el
     claro SOLO sobre el fondo oscuro del héroe —ojo con esto, poner el
     oscuro ahí deja el rótulo en 1.8:1—, y el suave para tintes de fondo.

     Las barras de profundidad llevan el tono base aunque parezcan adorno:
     codifican el nivel, y contra la barra vacía necesitan 3:1. */
  :root{
    --morado:#3b2f87;
    --morado-2:#4d3caf;
    --morado-tinta:#2d2467;
    --morado-claro:#bbb1fb;

    /* Bloom: que operacion mental se activa */
    --bloom:#8c254d;
    --bloom-vivo:#e83e7f;
    --bloom-claro:#ffa9ca;
    --bloom-suave:#ffecf4;

    /* SOLO: cuanta profundidad evidencia la respuesta */
    --solo:#096455;
    --solo-vivo:#0fa98f;
    --solo-claro:#62f4db;
    --solo-suave:#e8fdfa;

    /* Los verbos cuando la IA entra al aula */
    --ia:#6b5000;
    --ia-vivo:#e8ae00;
    --ia-claro:#ffcc33;
    --ia-suave:#fff9e6;
    --papel:#f0eefe;
    --tarjeta:#ffffff;
    --tinta:#1a1430;
    --tenue:#5f5880;
    --linea:#e4e1f2;
    --linea-fuerte:#cfc9e6;
    --sombra:0 1px 2px rgba(45,36,103,.05),0 8px 28px rgba(45,36,103,.08);
    /* Sin llamadas fuera del dominio: la misma pila que el Aula para el
       titular y una serif del sistema para el texto corrido, que es lo
       que esta pieza pide por ser de lectura y no de proyeccion. */
    --sans:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
    --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--papel);color:var(--tinta);
    font-family:var(--serif);
    font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.ui{font-family:var(--sans)}
  .eyebrow{
    font-family:var(--sans);font-size:.72rem;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--morado-claro);
  }

  /* ---------- header ---------- */
  header.hero{
    background:linear-gradient(160deg,var(--morado-tinta),var(--morado) 62%,var(--morado-2));
    color:#f2eefc;padding:64px 32px 56px;position:relative;overflow:hidden;
  }
  header.hero::after{
    content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;
    border-radius:50%;border:1px solid rgba(255,204,51,.26);
    box-shadow:0 0 0 40px rgba(255,204,51,.06);
  }
  .hero-inner{max-width:1180px;margin:0 auto;position:relative;z-index:1}
  .hero h1{
    font-size:clamp(2rem,4.2vw,3.1rem);font-weight:700;line-height:1.08;
    margin:.35em 0 .3em;letter-spacing:-.01em;
  }
  .hero h1 em{font-style:normal;color:var(--ia-claro)}
  .hero h1 em.solo{color:var(--solo-claro)}
  .hero p.lead{
    max-width:60ch;font-size:1.08rem;color:#cfc9f2;margin:0;
  }
  .hero-meta{
    margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;font-family:var(--sans);
    font-size:.76rem;
  }
  .chip{
    border:1px solid rgba(240,238,254,.24);border-radius:999px;padding:6px 13px;
    color:#e0dbf8;letter-spacing:.02em;
  }
  .chip b{color:var(--morado-claro);font-weight:600}
  .chip.bloom b{color:var(--bloom-claro)}
  .chip.solo b{color:var(--solo-claro)}
  .chip.ia b{color:var(--ia-claro)}

  /* ---------- layout ---------- */
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;
    display:grid;grid-template-columns:206px 1fr;gap:44px;align-items:start}
  nav.side{
    position:sticky;top:24px;padding-top:40px;font-family:var(--sans);
  }
  nav.side .navlabel{
    font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--tenue);margin:0 0 14px 12px;
  }
  nav.side a{
    display:block;text-decoration:none;color:var(--tenue);font-size:.86rem;
    padding:8px 12px;border-left:2px solid var(--linea-fuerte);
    transition:color .18s,border-color .18s,background .18s;border-radius:0 6px 6px 0;
  }
  nav.side a:hover{color:var(--morado);background:rgba(45,36,103,.05)}
  nav.side a.active{color:var(--morado);border-left-color:var(--morado-2);font-weight:600;
    background:rgba(77,60,175,.07)}
  main{padding:40px 0 90px;min-width:0}

  section{margin-bottom:56px;scroll-margin-top:24px}
  section > h2{
    font-size:1.5rem;font-weight:600;color:var(--morado);margin:0 0 .35em;letter-spacing:-.01em;
  }
  section > .sub{color:var(--tenue);max-width:66ch;margin:0 0 26px}

  /* ---------- theory card / intro ---------- */
  .card{
    background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;
    padding:26px 28px;box-shadow:var(--sombra);
  }
  .howto{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .howto .item{display:flex;gap:14px;align-items:flex-start}
  .howto .badge{flex:none;margin-top:2px}
  .howto h3{font-size:.98rem;margin:0 0 3px;color:var(--morado);font-weight:600}
  .howto p{margin:0;font-size:.92rem;color:var(--tenue)}

  /* ---------- toggle ---------- */
  .toolbar{
    display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:20px;
  }
  .seg{
    display:inline-flex;background:#e8e5f6;border:1px solid var(--linea-fuerte);
    border-radius:10px;padding:3px;font-family:var(--sans);
  }
  .seg button{
    border:0;background:transparent;cursor:pointer;font-family:inherit;
    font-size:.82rem;font-weight:500;color:var(--tenue);padding:7px 15px;border-radius:7px;
    transition:all .16s;letter-spacing:.01em;
  }
  .seg button[aria-pressed="true"]{
    background:var(--morado);color:#fff;box-shadow:0 1px 3px rgba(45,36,103,.25);
  }
  .toolbar .hint{font-size:.83rem;color:var(--tenue);font-family:var(--sans)}

  /* ---------- interactive table ---------- */
  .btable{display:flex;flex-direction:column;gap:10px}
  .brow{
    background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;
    box-shadow:var(--sombra);overflow:hidden;transition:border-color .2s,box-shadow .2s;
  }
  .brow.flash{border-color:var(--morado-2);box-shadow:0 0 0 3px rgba(77,60,175,.18),var(--sombra)}
  .bhead{
    display:grid;grid-template-columns:60px 1.05fr 1.75fr 150px 34px;
    gap:18px;align-items:center;padding:16px 20px;cursor:pointer;width:100%;
    background:transparent;border:0;text-align:left;font-family:inherit;color:inherit;
  }
  .bhead:focus-visible{outline:2px solid var(--morado);outline-offset:-2px}
  .bhead .lvlname{font-family:var(--sans)}
  .bhead .lvlname .k{
    font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--bloom);display:block;margin-bottom:1px;
  }
  .bhead .lvlname .n{font-size:1.12rem;font-weight:600;color:var(--morado);line-height:1.1}
  .bhead .lvlname .g{font-size:.78rem;color:var(--tenue)}

  .verbs{font-size:.9rem;line-height:1.5}
  .verbs .set{display:none}
  .verbs .set.on{display:block}
  .verbs .tag{
    display:inline-block;background:#e8e5f6;color:var(--morado-2);border-radius:6px;
    padding:2px 8px;margin:2px 4px 2px 0;font-size:.8rem;font-family:var(--sans);
    font-weight:400;
  }
  .verbs.ia .set.ia .tag{background:var(--ia-suave);color:var(--ia)}

  .solocell{font-family:var(--sans)}
  .solocell .sname{font-size:.86rem;font-weight:600;color:var(--solo)}
  .solocell .depth{display:flex;gap:3px;margin-top:6px}
  .solocell .depth i{
    width:16px;height:5px;border-radius:3px;background:var(--linea-fuerte);display:block;
  }
  .solocell .depth i.f{background:var(--solo)}

  .chev{justify-self:end;color:var(--tenue);transition:transform .22s;flex:none}
  .brow.open .chev{transform:rotate(180deg)}

  /* expandable panel */
  .bpanel{
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;
    border-top:1px solid transparent;
  }
  .brow.open .bpanel{grid-template-rows:1fr;border-top-color:var(--linea)}
  .bpanel > div{overflow:hidden}
  .bpanel .inner{padding:22px 20px 24px 88px}
  .bpanel .desc{margin:0 0 18px;color:var(--tinta);max-width:70ch}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .mini{
    background:#faf9fe;border:1px solid var(--linea);border-radius:10px;padding:14px 16px;
  }
  .mini h4{
    font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.11em;
    text-transform:uppercase;color:var(--morado-2);margin:0 0 7px;
  }
  .mini h4.es-solo{color:var(--solo)}
  .mini p{margin:0;font-size:.9rem;color:var(--tinta)}
  .mini .tool{color:var(--morado-2);font-family:var(--sans);font-size:.78rem;font-weight:500}

  /* ---------- SOLO ladder ---------- */
  .ladder{display:flex;flex-direction:column;gap:8px}
  .rung{
    display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;
    border:1px solid var(--linea);border-radius:12px;padding:15px 20px;cursor:pointer;
    background:var(--tarjeta);transition:all .18s;font-family:inherit;text-align:left;width:100%;
  }
  .rung:focus-visible{outline:2px solid var(--solo);outline-offset:2px}
  .rung .num{
    width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--sans);font-weight:600;font-size:.9rem;flex:none;
  }
  .rung h3{font-family:var(--sans);font-size:1rem;margin:0;color:var(--solo);font-weight:600}
  .rung p{margin:3px 0 0;font-size:.87rem;color:var(--tenue);max-width:62ch}
  .rung .maps{
    font-family:var(--sans);font-size:.72rem;color:var(--tenue);text-align:right;
    line-height:1.3;flex:none;
  }
  .rung .maps b{color:var(--bloom);display:block;font-weight:600;font-size:.62rem;letter-spacing:.08em}
  .rung[data-active="true"]{border-color:var(--solo-vivo);box-shadow:0 0 0 3px rgba(15,169,143,.18)}
  /* depth tint on the number */
  .rung[data-solo="pre"] .num{background:#e8fdfa;color:#096455}
  .rung[data-solo="uni"] .num{background:#b6faef;color:#096455}
  .rung[data-solo="multi"] .num{background:#62f4db;color:#096455}
  .rung[data-solo="rel"] .num{background:#0c836f;color:#fff}
  .rung[data-solo="abs"] .num{background:#096455;color:#e8fdfa}
  .ladder-hint{font-size:.82rem;color:var(--tenue);margin:14px 0 0;font-family:var(--sans)}

  /* ---------- correspondence strip ---------- */
  .map-strip{overflow-x:auto;padding-bottom:6px}
  table.corr{border-collapse:collapse;width:100%;min-width:640px;font-size:.86rem}
  table.corr th,table.corr td{border:1px solid var(--linea);padding:11px 14px;text-align:left;vertical-align:top}
  table.corr thead th{
    background:var(--morado);color:#fff;font-family:var(--sans);font-weight:500;
    font-size:.74rem;letter-spacing:.05em;
  }
  table.corr td.solo{font-family:var(--sans);font-weight:600;color:var(--solo);white-space:nowrap}
  table.corr td.bloom b{color:var(--bloom);font-family:var(--sans);font-weight:600}
  table.corr tbody tr:nth-child(even){background:#faf9fe}

  /* ---------- note / refs ---------- */
  .note{background:var(--tarjeta);border:1px solid var(--linea);border-left:3px solid var(--morado-2);
    border-radius:0 12px 12px 0;padding:20px 24px}
  .note p{margin:0 0 12px}
  .note p:last-child{margin:0}
  .refs{margin-top:20px;font-size:.83rem;color:var(--tenue);font-family:var(--sans);line-height:1.7}
  .refs h3{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--morado);margin:0 0 8px}

  footer{border-top:1px solid var(--linea);padding:26px 32px;text-align:center;
    color:var(--tenue);font-family:var(--sans);font-size:.78rem}

  /* ---------- responsive ---------- */
  @media(max-width:900px){
    .wrap{grid-template-columns:1fr;gap:0;padding:0 20px}
    nav.side{display:none}
    .bhead{grid-template-columns:48px 1fr 30px;gap:12px}
    .bhead .verbs,.bhead .solocell{display:none}
    .bpanel .inner{padding:20px 18px}
    .howto,.grid2{grid-template-columns:1fr}
    header.hero{padding:48px 22px 44px}
  }

  /* ---------- print ---------- */
  @media print{
    body{background:#fff;font-size:11pt}
    header.hero{background:#fff;color:#000;padding:0 0 18px;border-bottom:2px solid var(--morado)}
    header.hero::after{display:none}
    .hero h1{color:var(--morado)}.hero h1 em{color:var(--ia)}.hero h1 em.solo{color:var(--solo)}
    .hero p.lead,.chip{color:#333}
    nav.side,.toolbar,.chev,.ladder-hint{display:none}
    .wrap{display:block;padding:0}
    .brow,.card,.rung,.note{box-shadow:none;break-inside:avoid}
    .bpanel{grid-template-rows:1fr!important}
    .verbs .set{display:block!important}
    .bhead{grid-template-columns:52px 1fr 1.4fr 130px}
    section{margin-bottom:24px}
  }