:root{
    --paper:#F4F5F8;--panel:#FFFFFF;--ink:#22262F;--muted:#656B78;--faint:#6B707D;--hair:#E5E7EE;--line2:#EEEFF4;
    --accent:#4C5FD5;--accent-d:#3A4BB8;--accent-tint:#EAECFB;
    --ok:#2E7D57;--warn:#B0742B;--danger:#D14343;
    --disp:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
    --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    --serif:Georgia,'Times New Roman',serif;
    --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
    --hdr:58px;--r:12px;--rs:8px;--sh:0 1px 2px rgba(28,33,39,.04),0 8px 24px rgba(28,33,39,.05);
  }
  *{box-sizing:border-box}html,body{margin:0;height:100%}
  /* Regla base para los enlaces. No había ninguna, así que todo <a> sin clase
     se quedaba con el subrayado del navegador. En las pantallas de la app no
     se notaba porque cada enlace lleva su clase, pero en las páginas escritas
     a mano (las cinco verticales, la calculadora) salía subrayado todo. El
     subrayado queda para el hover, que es donde comunica algo, y nunca en los
     botones. */
  a{text-decoration:none}

  /* --- modos y vista de lectura ------------------------------------------
     El modo no se señala solo con el interruptor, que se pierde de vista: se
     tiñe la barra, el título del documento y el párrafo bajo el cursor. El
     vino es tinte, no color de marca: no compite con el índigo de la app ni se
     confunde con el rojo de error ni con el verde de "guardado". */
  :root{ --vino:#7A2E45; --vino-tinte:#FBF3F5; --vino-linea:#EEDCE2 }

  .modobar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    padding:9px 12px;margin-bottom:20px;border-radius:999px;
    background:var(--paper);border:1px solid var(--hair)}
  .stage.modo-cod .modobar{background:var(--vino-tinte);border-color:var(--vino-linea)}
  .modosw{display:inline-flex;background:var(--panel);border:1px solid var(--hair);
    border-radius:999px;padding:3px}
  .modosw .modo{border:0;background:none;cursor:pointer;border-radius:999px;
    padding:6px 14px;font-family:var(--disp);font-size:12.5px;font-weight:600;
    color:var(--muted);letter-spacing:-.01em;transition:.14s}
  .modosw .modo.on{background:var(--ink);color:#fff}
  .stage.modo-cod .modosw .modo.on{background:var(--vino)}
  .modosw .modo:hover:not(.on){color:var(--ink)}
  .modo-dock{border:1px solid var(--hair);background:var(--panel);border-radius:9px;
    width:32px;height:32px;cursor:pointer;color:var(--faint);font-size:14px;line-height:1}
  .modo-dock.on{border-color:var(--vino);color:var(--vino);background:var(--vino-tinte)}
  .modo-dock:hover{color:var(--vino)}
  .coddock .cd-x{position:absolute;top:6px;right:6px;border:0;background:none;cursor:pointer;
    color:var(--faint);font-size:13px;line-height:1;padding:4px;border-radius:6px}
  .coddock .cd-x:hover{color:var(--vino);background:var(--vino-tinte)}
  .modohint{font-family:var(--sans);font-size:12.5px;color:var(--muted)}
  .stage.modo-cod .modohint{color:var(--vino)}

  .lecdoc{max-width:720px}
  .lechead{margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--line2)}
  .lechead h2{font-family:var(--disp);font-weight:800;font-size:21px;margin:0 0 5px;color:var(--ink)}
  .stage.modo-cod .lechead h2{color:var(--vino)}
  .lechead .meta{font-family:var(--mono);font-size:11px;color:var(--muted)}

  /* Los títulos llevan el nivel que detectó el indizador, igual que el índice
     del panel izquierdo: de otro modo un pliego se ve como texto plano. */
  .lecsec{font-family:var(--disp);color:var(--ink);margin:26px 0 10px;line-height:1.3}
  .lecsec.lvl0{font-weight:800;font-size:17px;padding-top:16px;border-top:1px solid var(--line2)}
  .lecsec.lvl1{font-weight:700;font-size:15px;margin-left:0}
  .lecsec.lvl2{font-weight:600;font-size:13.5px;color:var(--muted);margin-left:14px}

  /* la página, arriba y chica, como la referencia de los fragmentos */
  .lecpg{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;
    text-transform:uppercase;color:var(--faint);margin:18px 0 3px;user-select:none}

  /* aire entre párrafos: sin esto los títulos no se despegan del cuerpo */
  .lecpara{padding:7px 12px;margin:0 0 14px -12px;border-radius:var(--rs);
    font-family:var(--serif);font-size:15.5px;line-height:1.75;color:var(--ink)}
  .stage.modo-cod .lecpara:hover{background:var(--vino-tinte)}
  .lecpara.tiene{box-shadow:inset 3px 0 0 var(--tcp, var(--hair))}
  .leccods{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 3px;user-select:none}
  .leccod{font-family:var(--mono);font-size:10px;letter-spacing:.03em;
    color:var(--tcp, var(--muted));border:1px solid var(--tcp, var(--hair));
    border-radius:999px;padding:2px 8px;background:var(--panel);opacity:.85}
  /* Nada de sombreado ni subrayado sobre el texto: en un documento con mucho
     codificado, la mancha compite con la lectura y es justo lo que hay que
     hacer cómodo. Lo codificado se marca en el borde del párrafo, con el color
     del código, y el detalle por oración aparece al pasar el cursor. */
  .lecpara .hl{background:none;border-bottom:0;padding:0}
  .stage.modo-cod .lecpara .hl:hover{background:color-mix(in srgb, var(--tc) 14%, transparent);
    border-radius:2px}
  /* documentos largos: el navegador no maquetea lo que no se ve */
  .lecpara{content-visibility:auto;contain-intrinsic-size:auto 64px}
  .lecpara .seg{border-radius:2px}
  .stage.modo-cod .lecpara .seg:hover{background:rgba(122,46,69,.06)}
  /* la nota se marca con una pluma al final, no subrayando el texto */
  .lecpara .connota::after{content:'✒';font-family:var(--sans);font-size:10px;
    color:var(--vino);vertical-align:super;margin-left:2px}

  .coddock{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:9998;
    background:var(--panel);border:1px solid var(--vino-linea);border-radius:14px;
    padding:12px;width:186px;box-shadow:0 6px 24px rgba(28,33,39,.12)}
  .coddock .cd-tit{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
    letter-spacing:.09em;color:var(--vino);margin:0 0 9px 3px}
  .coddock .cd-b{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
    border:1px solid var(--hair);background:var(--paper);border-radius:9px;
    padding:9px 11px;margin-bottom:7px;cursor:not-allowed;opacity:.5;
    font-family:var(--sans);font-size:12.5px;color:var(--ink)}
  .coddock.listo .cd-b{cursor:pointer;opacity:1;background:var(--panel)}
  .coddock.listo .cd-b:hover{border-color:var(--vino);background:var(--vino-tinte)}
  .coddock .cd-b span{color:var(--vino);width:14px;text-align:center}
  .coddock .cd-pie{font-family:var(--sans);font-size:11px;color:var(--faint);
    line-height:1.4;margin:2px 3px 0}
  .coddock.listo .cd-pie{color:var(--vino)}
  @media(max-width:1180px){ .coddock{position:static;transform:none;width:auto;
    margin:0 0 16px;display:flex;align-items:center;gap:8px}
    .coddock .cd-tit,.coddock .cd-pie{display:none}
    .coddock .cd-b{margin:0;width:auto} }

  /* Recuadro grueso y no sombreado: el sombreado a veces no se distingue y
     obliga a barrer la página con la vista. Un borde se encuentra de un
     vistazo, y no depende de que el fondo contraste. */
  /* El recuadro va SIN separación: los párrafos llevan content-visibility, que
     recorta lo que se pinta fuera de la caja, y un outline separado se come el
     borde de la primera línea. Y la activa lleva además un fondo, que no se
     puede recortar: si el borde falla, igual se ve cuál es. */
  /* El recuadro va en el envoltorio y no en cada oración: así una cita de tres
     oraciones es UNA caja. box-decoration-break hace que, al partirse en varios
     renglones, cada trozo conserve su borde en vez de quedar abierto. */
  .lecpara .propgrupo{outline:2px solid var(--faint);border-radius:3px;padding:1px 3px;
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
  .lecpara .propgrupo.act{outline:3px solid var(--accent);
    background:color-mix(in srgb, var(--accent) 14%, transparent)}
  .stage.modo-cod .lecpara .propgrupo:hover{outline-color:var(--accent-d)}

  .revbar{position:fixed;z-index:9999;
    background:var(--panel);border:1px solid var(--hair);border-radius:14px;
    box-shadow:0 8px 30px rgba(28,33,39,.18);padding:12px 16px;
    max-width:min(360px, calc(100% - 32px))}
  /* respaldo: si no se pudo medir el fragmento, la barra vuelve al centro abajo */
  .revbar.centrada{left:50%;transform:translateX(-50%);bottom:22px;top:auto}
  /* NO repetir .revbar aquí: una segunda regla con la misma especificidad pisa
     el position:fixed de arriba y la barra se va al final de la página, fuera
     de la vista. Ya pasó. El position:relative que necesita la cruz se agregó
     a la regla original. */
  .revbar .rv-x{position:absolute;top:6px;right:8px;border:0;background:none;cursor:pointer;
    color:var(--faint);font-size:13px;line-height:1;padding:4px;border-radius:6px}
  .revbar .rv-x:hover{color:var(--danger);background:#FBEAEA}
  .revbar .rv-tit{font-family:var(--sans);font-size:12.5px;color:var(--muted);
    margin-bottom:9px;padding-right:22px}
  .revbar .rv-tit b{color:var(--ink)}
  .revbar .rv-bs{display:flex;gap:7px;flex-wrap:wrap}
  .revbar .rv-b{border:1px solid var(--hair);background:var(--panel);border-radius:9px;
    padding:7px 13px;cursor:pointer;font-family:var(--sans);font-size:12.5px;color:var(--ink)}
  .revbar .rv-b:hover{border-color:var(--accent);color:var(--accent)}
  .revbar .rv-si{border-color:var(--ok);color:var(--ok)}
  .revbar .rv-si:hover{background:#EAF5EF}
  .revbar .rv-no{border-color:var(--danger);color:var(--danger)}
  .revbar .rv-no:hover{background:#FBEAEA}
  .coddock .cd-sep{height:1px;background:var(--line2);margin:9px 2px}
  .coddock .cd-ia{cursor:pointer;opacity:1}
  .coddock .cd-ia span{color:var(--accent)}
  .coddock .cd-ia:hover{border-color:var(--accent);background:var(--accent-tint)}

  .btn-ayuda.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  body.ayuda [data-ayuda]{outline:1.5px dashed var(--accent);outline-offset:2px;
    border-radius:4px;cursor:help}
  .ayudatip{position:fixed;z-index:10002;max-width:300px;background:var(--ink);color:#fff;
    border-radius:11px;padding:11px 14px;font-family:var(--sans);font-size:12.5px;
    line-height:1.55;box-shadow:0 8px 28px rgba(28,33,39,.28);pointer-events:none}

  .ayudaflecha{position:fixed;z-index:10003;display:flex;align-items:flex-start;gap:8px;
    background:var(--accent);color:#fff;border-radius:12px;padding:11px 12px 11px 14px;
    max-width:270px;font-family:var(--sans);font-size:12.5px;line-height:1.5;
    box-shadow:0 10px 30px rgba(76,95,213,.34);animation:ayudaEntra .25s ease-out}
  .ayudaflecha::before{content:'';position:absolute;top:-7px;right:22px;
    border-left:8px solid transparent;border-right:8px solid transparent;
    border-bottom:8px solid var(--accent)}
  .ayudaflecha button{border:0;background:none;color:#fff;opacity:.75;cursor:pointer;
    font-size:13px;line-height:1;padding:2px 3px}
  .ayudaflecha button:hover{opacity:1}
  @keyframes ayudaEntra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  .codbtn{position:fixed;z-index:10001;background:var(--vino);color:#fff;border:0;
    border-radius:999px;padding:8px 15px;font-family:var(--disp);font-weight:600;
    font-size:12.5px;cursor:pointer;box-shadow:0 4px 16px rgba(122,46,69,.34)}
  .codbtn:hover{filter:brightness(1.08)}
  .codmenu{position:fixed;z-index:10000;background:var(--panel);border:1px solid var(--hair);
    border-radius:12px;box-shadow:0 6px 28px rgba(28,33,39,.16);padding:7px;
    min-width:276px;max-width:330px}
  .codmenu .cm-head{font-family:var(--mono);font-size:10px;text-transform:uppercase;
    letter-spacing:.08em;color:var(--vino);padding:5px 9px 4px}
  .codmenu .cm-cita{font-family:var(--serif);font-size:12.5px;line-height:1.5;
    color:var(--muted);padding:0 9px 9px;border-bottom:1px solid var(--line2);margin-bottom:6px}
  .codmenu .cm-ppal{font-weight:600}
  .codmenu .cm-ic{width:16px;text-align:center;color:var(--muted)}
  .codmenu .cm-n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
  .codmenu .cm-panel{display:none;padding:4px 2px 8px}
  .codmenu .cm-panel.on{display:block}
  .codmenu .cm-lista{max-height:210px;overflow:auto}
  .codmenu .cm-it{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
    border:0;background:none;cursor:pointer;padding:8px 9px;border-radius:8px;
    font-family:var(--sans);font-size:13.5px;color:var(--ink)}
  .codmenu .cm-it:hover{background:var(--paper)}
  .codmenu .cm-it i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .codmenu .cm-ok{margin-left:auto;color:var(--ok)}
  .codmenu .cm-quitar{color:var(--danger);font-size:12.5px}
  .codmenu .cm-sep{height:1px;background:var(--line2);margin:6px 0}
  .codmenu #cmPanelNuevo{display:none;gap:6px;padding:4px 2px 8px}
  .codmenu #cmPanelNuevo.on{display:flex}
  .codmenu #cmPanelNuevo input{flex:1;min-width:0;height:34px;font-size:13px}
  .codmenu #cmPanelNuevo .btn{height:34px;padding:0 13px;font-size:12.5px}

  #notaBg .notacita{font-family:var(--serif);font-size:13.5px;line-height:1.6;color:var(--muted);
    border-left:3px solid var(--vino);padding:8px 12px;margin:4px 0 14px;background:var(--paper);
    max-height:110px;overflow:auto}
  .chip-org{opacity:.75}
  /* chico en reposo para no ensuciar la pastilla, grande al acercarse: el mismo
     comportamiento que ya tiene la ✕ de quitar, así no inventa un gesto nuevo */
  .chip .chip-ia{opacity:.55;font-size:11px;transition:.14s;display:inline-block;
    transform-origin:center;cursor:pointer}
  .chip:hover .chip-ia{opacity:1;font-size:15px;transform:scale(1.12)}
  .chip .chip-ia:hover{opacity:1;font-size:17px}
  .chip .chip-mas{opacity:.45;font-size:13px;cursor:pointer;transition:.14s;letter-spacing:1px}
  .chip:hover .chip-mas{opacity:.9}
  .chip .chip-mas:hover{opacity:1;color:var(--accent)}
  .chip .chip-mas:hover::after{content:attr(data-tip);white-space:nowrap;
    position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 9px);
    background:var(--ink);color:#fff;border-radius:9px;padding:8px 12px;
    font-family:var(--sans);font-size:11.5px;font-weight:400;
    z-index:60;pointer-events:none;box-shadow:var(--sh)}
  .codmenu #cmRen{flex:1;min-width:0;height:34px;font-size:13px}
  .chip .chip-ia:hover::after{
    content:attr(data-tip);white-space:nowrap;
    position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 9px);
    background:var(--ink);color:#fff;border-radius:9px;padding:8px 12px;
    font-family:var(--sans);font-size:11.5px;font-weight:400;line-height:1.5;
    text-align:center;z-index:60;pointer-events:none;box-shadow:var(--sh)}
  .chip{position:relative}

  /* el asistente es de edición: codificando no cumple ninguna función */
  body.cod #chatbubble, body.cod .chatpane{display:none !important}

  .lecvacio{font-family:var(--sans);font-size:14px;color:var(--muted);line-height:1.7;max-width:560px}
  /* enlace con forma de botón de texto, para acciones secundarias */
  .k-linkbtn{background:none;border:0;padding:4px;cursor:pointer;font-family:var(--sans);
    font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
  .k-linkbtn:hover{color:var(--accent)}
  a:not(.btn):hover{text-decoration:underline}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
  .screen{min-height:100vh;display:none;flex-direction:column}.screen.on{display:flex}
  ::selection{background:var(--accent-tint)}
  /* Foco visible para quien navega con teclado. Varias reglas de abajo
     apagan el outline (inputs, párrafos editables): este lo devuelve solo
     cuando el foco llega por teclado, sin cambiar nada para el mouse. */
  :focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}

  header{display:flex;align-items:center;gap:9px;padding:11px 18px;border-bottom:1px solid var(--hair);background:var(--panel);position:sticky;top:0;z-index:5;flex-wrap:nowrap;min-width:0}
  header > *{flex-shrink:0}
  header .grow{flex:1 1 auto;min-width:4px}
  /* Altura y tipografía unificadas para TODO lo que va en la barra superior */
  header .btn,header .btn.ghost,header .pill,header .lang-btn,header .gacct,header .hilo-upgrade-btn,header .chg-pill,header .auth-mini{
    height:34px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
    padding:0 13px;font-size:12px;line-height:1;white-space:nowrap;border-radius:999px;gap:7px}
  header .btn,header .btn.ghost{font-family:var(--disp);font-weight:600}
  header .icon-btn{width:34px;padding:0;font-size:15px}
  header .gacct{flex:none}
  
  /* la barra tiene que entrar sin desbordar: vamos soltando lo menos crítico */
  
  
  @media(max-width:960px){header .lang-btn{padding:0 9px;gap:4px}header .lang-btn .js-lang-label{display:none}}
  @media(max-width:860px){header .gacct > span:last-child{display:none}header .gacct{max-width:34px;width:34px;padding:0}header .hilo-upgrade-btn span.up-txt{display:none}}
  /* Aun soltando etiquetas, con sesión iniciada la barra pasaba de 870 px y
     toda la página se podía arrastrar de costado. Desde 860 px la barra pasa
     a dos filas en vez de desbordar; en celular quedan los íconos. */
  @media(max-width:860px){header{flex-wrap:wrap;row-gap:8px}header > *{flex-shrink:1;min-width:0}}
  @media(max-width:620px){
    header{padding:9px 12px;gap:7px}
    header .btn.nav > span[data-i18n]{display:none}
    header .pill:has(#keystate){display:none}
  }

  /* cambios + historial, integrados en un solo control */
  .chg-pill{font-family:var(--mono);color:var(--accent);background:var(--panel);border:1px solid var(--accent);cursor:pointer;transition:border-color .15s,background .15s}
  .chg-pill:hover{background:var(--accent-tint)}
  .chg-pill:hover{border-color:var(--accent);background:var(--accent-tint)}
  .chg-sep{width:1px;height:15px;background:var(--hair);flex-shrink:0}
  .chg-hist{color:var(--ink)}
  .chg-lock{display:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-d);background:var(--accent-tint);padding:3px 6px;border-radius:999px}
  .chg-pill.is-locked .chg-hist{text-decoration:line-through;opacity:.5}
  .chg-pill.is-locked .chg-lock{display:inline-block}

  .brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink);cursor:pointer}
  .brand::before{content:"";width:22px;height:22px;flex-shrink:0;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17 C7 17 8 7 12 7 S17 17 21 17' fill='none' stroke='%234C5FD5' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='3' cy='17' r='2.2' fill='%234C5FD5'/%3E%3Ccircle cx='21' cy='17' r='2.2' fill='%234C5FD5'/%3E%3C/svg%3E")}
  .grow{flex:1}

  .btn{font-family:var(--disp);font-weight:600;font-size:13px;padding:9px 15px;border-radius:var(--rs);border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:background .15s,box-shadow .15s;box-shadow:0 1px 2px rgba(76,95,213,.25)}
  .btn:hover{background:var(--accent-d);border-color:var(--accent-d)}
  .btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--hair);box-shadow:none;font-weight:600}
  .btn.ghost:hover{border-color:var(--faint)}
  .btn.ghost.nav{color:var(--accent);border-color:var(--accent)}
  .btn.ghost.nav:hover{background:var(--accent-tint);border-color:var(--accent)}
  .back{font-family:var(--mono);font-size:12px;color:var(--accent);cursor:pointer;border:1px solid var(--accent);background:var(--panel);padding:7px 11px;border-radius:var(--rs)}
  .back:hover{background:var(--accent-tint)}
  .back-block{display:flex;align-items:center;gap:6px;width:100%;justify-content:flex-start;margin:0 0 16px;padding:10px 13px;
    font-family:var(--disp);font-weight:700;font-size:12.5px;color:var(--accent);
    background:var(--accent-tint);border-color:transparent;transition:background .15s,color .15s}
  .back-block:hover{background:var(--accent);color:#fff;border-color:transparent}

  input,textarea,select{font-family:var(--sans);font-size:13px;color:var(--ink);border:1px solid var(--hair);border-radius:var(--rs);background:var(--panel);outline:none;padding:9px 12px;transition:border-color .15s,box-shadow .15s}
  input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
  ::placeholder{color:var(--faint)}

  .pill{font-family:var(--mono);font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--hair);border-radius:999px;padding:6px 11px}
  .status-dot{width:8px;height:8px;border-radius:50%;background:var(--danger)}.status-dot.ok{background:var(--ok)}
  .hilo-upgrade-btn{display:none;align-items:center;gap:6px;font-family:var(--disp);font-weight:700;font-size:12px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-d));border:none;border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap}
  .hilo-upgrade-btn:hover{opacity:.9}
  /* El tachado se aplica al TEXTO, nunca al contenedor: text-decoration se
     propaga a los descendientes y no se puede cancelar con text-decoration:none,
     asi que un badge dentro de un elemento tachado sale tachado tambien. */
  .dl-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}
  .dl-opt .dl-txt{flex:1;min-width:0}
  .dl-tag{flex-shrink:0;display:none;font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
  .locked-feature{opacity:.6}
  .locked-feature .dl-txt{text-decoration:line-through}
  .locked-feature .dl-tag{display:inline-block;color:var(--accent-d);background:var(--accent-tint)}
  .locked-feature .dl-tag::after{content:'Premium'}

  .credit-feature .dl-tag{display:inline-block;color:#8A5A2E;background:#FBF0DD}
  .credit-feature .dl-tag::after{content:'1 crédito'}

  .wrap{flex:1;overflow-y:auto;padding:40px;max-width:1120px;margin:0 auto;width:100%}
  h1{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.02em;margin:0 0 6px}
  .sub{font-family:var(--sans);color:var(--muted);font-size:15px;margin-bottom:30px;max-width:640px;line-height:1.6}





  /* --- gestión pública: guardadas, edición y firma --- */
  .cad-fila{display:flex;align-items:center;gap:10px;background:var(--panel);
    border:1px solid var(--hair);border-radius:var(--rs);padding:10px 13px;margin:0 0 8px;max-width:820px}
  .cad-fila b{font-size:.95rem}
  .cad-fila .cu{font-family:var(--mono);font-size:11px;color:var(--muted)}
  .cad-el .tx{outline:none;border-radius:4px;padding:1px 3px;margin:0 -3px;display:inline-block}
  .cad-el .tx:focus{background:var(--accent-tint)}
  .cad-firma{font-family:var(--mono);font-size:11px;color:var(--ok);margin-top:8px;display:block}

  /* --- gestión pública: la espera de la segunda pasada ---
     Usa .modal-bg y .modal, que son las clases de los demás cuadros de la app.
     La primera versión inventó unas propias y el cuadro salía embutido en la
     página en vez de encima, que es justo lo contrario de lo que hace falta:
     mientras corre no hay nada más que hacer, y verlo mezclado con el
     contenido hace pensar que la pantalla quedó a medias. */
  .cad-esp-n{font-family:var(--mono);font-size:12px;color:var(--muted);margin:14px 0 6px}
  .cad-esp-barra{height:4px;background:var(--line2);border-radius:4px;overflow:hidden}
  .cad-esp-barra>div{height:100%;background:var(--accent);width:0;transition:width .3s}
  .cad-esp-it{font-size:.86rem;color:var(--muted);margin:7px 0 0}
  .cad-esp-it.ok{color:var(--ok)}
  .cad-esp-it.no{color:var(--warn)}
  /* --- gestión pública: la cadena completa --- */
  .cad-el.inf{border-left-color:var(--warn);border-left-style:dashed}
  .cad-el.preg{border-left-color:var(--ok)}
  .cad-franja{border-top:1px dashed var(--warn);color:var(--warn);font-size:.82rem;
    margin:14px 0 12px;padding-top:8px}
  .cad-ind{background:var(--paper);border-radius:var(--rs);padding:10px 12px;margin:4px 0 0}
  .cad-ind .fx{font-family:var(--mono);font-size:.82rem;color:var(--ink);display:block;margin:3px 0 8px}
  .cad-var{font-size:.82rem;color:var(--muted);display:block;margin:0 0 3px}
  .cad-var b{color:var(--ink);font-weight:600}
  .cad-var .est{font-family:var(--mono);font-size:.75rem;padding:1px 6px;border-radius:20px;margin-left:5px}
  .cad-var .e-existe{background:#E7F3ED;color:var(--ok)}
  .cad-var .e-programa{background:var(--accent-tint);color:var(--accent-d)}
  .cad-var .e-construir{background:#FBF3E6;color:var(--warn)}
  /* --- gestión pública: la cadena reconocida --- */
  .cad-cad{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);
    padding:16px 18px;margin:16px 0;max-width:820px;box-shadow:var(--sh)}
  .cad-cad h3{font-family:var(--disp);font-size:1rem;margin:0 0 12px}
  .cad-el{border-left:3px solid var(--accent);padding:2px 0 2px 11px;margin:0 0 11px}
  .cad-el .niv{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--faint)}
  .cad-el .cita{font-family:var(--mono);font-size:10.5px;color:var(--muted);display:block;margin-top:3px}
  .cad-hueco{border-left:3px dashed var(--hair);padding:2px 0 2px 11px;margin:0 0 11px;
    color:var(--muted);font-size:.88rem}
  .cad-apar{border-left:3px solid var(--faint);padding:2px 0 2px 11px;margin:0 0 11px;font-size:.9rem}
  .cad-apar .por{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
  /* --- gestión pública: la entrada del documento --- */
  .cad-error{background:#FBF3E6;border:1px solid #EBDCC1;color:#7A5117;
    border-radius:var(--rs);padding:10px 13px;margin:14px 0;font-size:.88rem;max-width:760px}
  .cad-cuenta{font-family:var(--mono);font-size:12px;color:var(--muted);margin:14px 0 0}
  .cad-muestra{background:var(--panel);border:1px solid var(--hair);border-radius:var(--rs);
    padding:14px;max-width:760px;max-height:220px;overflow:auto;white-space:pre-wrap;
    font-family:var(--serif);font-size:.9rem;line-height:1.5;margin:0}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
  .pcard{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:20px;cursor:pointer;display:flex;flex-direction:column;gap:9px;transition:box-shadow .15s,transform .12s,border-color .15s;position:relative;box-shadow:var(--sh)}
  .pcard:hover{box-shadow:0 10px 30px rgba(28,33,39,.10);transform:translateY(-3px);border-color:#D7DBE8}
  .pkind{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}
  .ptitle{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.3}
  .pmeta{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:auto}
  .pdel{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:12px;color:var(--faint);opacity:0;cursor:pointer}
  .pcard:hover .pdel{opacity:1}.pdel:hover{color:var(--danger)}
  .pnew{border:1.5px dashed var(--hair);background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-family:var(--disp);font-weight:600;font-size:14px;min-height:158px}
  .pnew:hover{border-color:var(--accent);color:var(--accent);box-shadow:none;transform:none}

  .modal-bg{position:fixed;inset:0;background:rgba(28,33,39,.42);z-index:50;display:none;align-items:center;justify-content:center;padding:20px}
  .modal-bg.on{display:flex}
  .modal{background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:26px;width:560px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 24px 70px rgba(28,33,39,.22)}
  .modal h3{font-family:var(--disp);font-weight:800;margin:0 0 4px;font-size:20px}
  .modal .lab{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:16px 0 6px;display:block}
  .modal textarea{width:100%;min-height:150px;font-family:var(--serif);font-size:14px;line-height:1.65;resize:vertical}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:22px}
  .hint{font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.55}
  .or{display:flex;align-items:center;gap:10px;color:var(--faint);font-family:var(--mono);font-size:10px;margin:16px 0}
  .or::before,.or::after{content:"";flex:1;height:1px;background:var(--hair)}

  .body{flex:1;display:flex;min-height:0}
  /* El panel acompaña la línea superior de lo que se ve. Antes quedaba arriba
     de todo y en un documento largo había que volver al principio cada vez que
     se quería tocar una pastilla o buscar un tema.
     align-self es imprescindible: como elemento flexible se estiraba a lo alto
     del contenedor y sticky no tenía contra qué pegarse. */
  .map{width:340px;border-right:1px solid var(--hair);background:var(--panel);padding:22px;
    overflow-y:auto;flex-shrink:0;
    position:sticky;top:var(--hdr);align-self:flex-start;max-height:calc(100vh - var(--hdr))}
  .stage{flex:1;overflow-y:auto;background:var(--paper)}
  /* En pantallas angostas el panel de 340 px dejaba el texto en una tira.
     Pasa arriba del texto, a todo el ancho, y queda SIEMPRE abierto: plegado
     detrás de un botón, nadie descubría que ahí se reúnen y guardan los temas.
     Lo que crece con el documento es la estructura (una fila por sección): esa
     tiene alto máximo y se desplaza sola, para que el texto no quede a dos
     pantallas de distancia. El botón de plegar ya no existe; la regla de abajo
     solo lo esconde si una página vieja quedó en la caché. */
  .map-toggle{display:none!important}
  @media(max-width:820px){
    .body{flex-direction:column}
    .map{width:auto;border-right:0;border-bottom:1px solid var(--hair);padding:14px 16px;
      position:static;align-self:stretch;max-height:none;overflow:visible}
    .stage{flex:none;overflow:visible}
    .map .back-block{margin-bottom:10px}
    .map #tree{max-height:168px;overflow-y:auto;overscroll-behavior:contain;
      border:1px solid var(--hair);border-radius:var(--rs);padding:4px 8px}
    .map .ribbon{margin-bottom:12px}
  }
  .eyebrow{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--faint);margin:2px 0 9px}
  .compose{display:flex;gap:7px;margin-bottom:8px}.compose input{flex:1}
  .chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
  .chip{font-family:var(--mono);font-size:11px;padding:5px 11px;border-radius:999px;border:1px solid;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .chip .rm{opacity:.5;font-size:12px}.chip .rm:hover{opacity:1}
  .summary{font-family:var(--sans);font-size:13px;line-height:1.55;margin-bottom:4px;color:var(--ink)}
  .fallnote{font-family:var(--mono);font-size:10px;color:var(--warn);margin:4px 0 8px;line-height:1.4}

  .ribbon{display:flex;gap:3px;height:46px;margin:6px 0 20px}
  .rib{flex:1;background:var(--paper);border:1px solid var(--hair);border-radius:4px;position:relative;cursor:pointer;overflow:hidden;transition:transform .1s}
  .rib:hover{transform:translateY(-2px)}
  .rib .fill{position:absolute;left:0;right:0;bottom:0}
  .rib .lab{position:absolute;top:3px;left:5px;font-family:var(--mono);font-size:8px;color:var(--faint)}

  .node{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--rs);cursor:pointer;border:1px solid transparent}
  .node:hover{background:var(--paper);border-color:var(--hair)}
  .node.lvl1{margin-left:16px}.node.lvl2{margin-left:32px}
  .node.empty{opacity:.5;cursor:default}.node.empty:hover{background:transparent;border-color:transparent}
  .node .name{font-family:var(--sans);font-size:13px;flex:1;color:var(--ink)}
  .node .pg{font-family:var(--mono);font-size:9px;color:var(--faint);margin-left:4px}
  .node .bar{width:56px;height:7px;background:var(--line2);border-radius:999px;overflow:hidden}
  .node .bar i{display:block;height:100%;border-radius:999px}
  .node .cnt{font-family:var(--mono);font-size:10px;color:var(--muted);width:16px;text-align:right}

  .unit{max-width:780px;margin:0 auto;padding:30px 32px 140px}
  .unithead{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
  .unithead h2{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.01em;margin:0}
  .unithead .meta{font-family:var(--mono);font-size:11px;color:var(--muted)}
  .unitsub{font-family:var(--sans);color:var(--muted);font-size:13.5px;line-height:1.55;margin-bottom:24px}
  .empty-unit{text-align:center;color:var(--muted);font-family:var(--sans);padding:70px 20px;line-height:1.7;font-size:14px}

  .grphead{position:sticky;top:0;background:var(--paper);padding:14px 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair);margin:8px 0 14px;z-index:2}
  .pcard2{position:relative;background:var(--panel);border:1px solid var(--hair);border-left:3px solid var(--accent);border-radius:var(--rs);padding:12px 16px 14px;margin-bottom:16px;transition:box-shadow .15s;box-shadow:var(--sh)}
  .pcard2:hover{box-shadow:0 6px 20px rgba(28,33,39,.08)}
  .pcard2.flash{box-shadow:0 0 0 3px var(--accent-tint)}
  .toprow{display:flex;align-items:center;gap:8px;margin-bottom:5px}
  .prov{font-family:var(--mono);font-size:9px;color:var(--faint)}
  .plabel{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;margin:6px 0 1px}
  .resmark{font-family:var(--mono);font-size:11px;color:var(--warn);background:#FBF4EC;border:1px dashed #E9D6BC;border-radius:var(--rs);padding:8px 11px;margin:5px 0}
  .resnote{color:#BFA588}
  .ctxpara{font-family:var(--serif);font-size:13.5px;line-height:1.75;color:var(--faint);outline:none;padding:5px 9px;border:1px dashed transparent;border-radius:var(--rs)}
  .ctxpara:hover{border-color:var(--hair);background:var(--paper)}
  .ctxpara:focus{border-color:var(--accent);background:var(--panel);color:var(--ink)}
  .mainpara{font-family:var(--serif);font-size:15.5px;line-height:1.9;color:var(--ink);outline:none;padding:7px 9px;border:1px solid transparent;border-radius:var(--rs);margin:2px 0}
  .mainpara:hover{border-color:var(--hair);background:var(--paper)}
  .mainpara:focus{border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 3px var(--accent-tint)}
  /* solo sombreado, sin subrayado: el borde inferior ensuciaba la lectura */
  .mainpara .hl{background:var(--accent-tint);border-radius:3px;padding:0 2px}

  .foot{display:flex;align-items:center;gap:8px;margin-top:10px;min-height:22px}
  .foot .sp{flex:1}
  .mini{font-family:var(--disp);font-weight:600;font-size:11px;padding:7px 13px;border-radius:var(--rs);cursor:pointer;border:none;color:#fff}
  .mini:hover{opacity:.9}
  .saved{font-family:var(--mono);font-size:9px;color:var(--ok);opacity:0;transition:opacity .2s}
  .saved.show{opacity:1}

  .drawer{position:fixed;right:0;top:0;bottom:0;width:340px;background:var(--panel);border-left:1px solid var(--hair);z-index:40;transform:translateX(100%);transition:transform .24s ease;padding:20px;overflow-y:auto;box-shadow:-12px 0 40px rgba(28,33,39,.10)}
  .drawer.open{transform:translateX(0)}
  .drawerhead{display:flex;align-items:center;margin-bottom:14px}
  .drawerhead .eyebrow{flex:1;margin:0}.drawerhead .x{cursor:pointer;color:var(--muted);font-family:var(--mono)}
  .chg{border:1px solid var(--hair);background:var(--panel);padding:11px;border-radius:var(--rs);margin-bottom:8px}
  .chg .id{font-family:var(--mono);font-size:9px;color:var(--faint);display:flex;justify-content:space-between;margin-bottom:5px}
  .chg .acts{display:flex;gap:12px;margin-top:4px}
  .chg .acts span{cursor:pointer;font-family:var(--mono);font-size:10px}.chg .go{color:var(--accent)}.chg .undo{color:var(--warn)}
  .chg .undo:hover,.chg .go:hover{text-decoration:underline}
  .chg .before{font-family:var(--serif);color:var(--danger);text-decoration:line-through;opacity:.65;font-size:12px;line-height:1.45}
  .chg .after{font-family:var(--serif);font-size:12px;line-height:1.45}
  .chg.undone{opacity:.55}

  .toast{position:fixed;bottom:22px;left:22px;background:var(--ink);color:#fff;font-family:var(--sans);font-size:12.5px;font-weight:500;padding:11px 16px;border-radius:10px;z-index:60;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;max-width:min(420px,calc(100vw - 44px));text-align:left;line-height:1.45;box-shadow:0 8px 30px rgba(0,0,0,.25)}
  .toast.show{opacity:1;transform:translateY(0)}
  @media(max-width:620px){.toast{left:12px;right:12px;bottom:12px;max-width:none}}
  .spin{display:inline-block;width:11px;height:11px;border:2px solid var(--hair);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;vertical-align:middle}
  @keyframes sp{to{transform:rotate(360deg)}}

  .chatbubble{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;box-shadow:0 10px 30px rgba(76,95,213,.4);z-index:45;transition:transform .12s}
  .chatbubble:hover{transform:scale(1.06)}
  .chatpanel{position:fixed;right:24px;bottom:24px;width:360px;max-width:92vw;height:500px;max-height:80vh;background:var(--panel);border:1px solid var(--hair);border-radius:16px;box-shadow:0 20px 60px rgba(28,33,39,.25);z-index:46;display:none;flex-direction:column;overflow:hidden}
  .chatpanel.on{display:flex}
  .chathead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--hair);font-family:var(--disp);font-weight:700;font-size:13px;color:var(--accent)}
  .chathead .x{cursor:pointer;color:var(--muted);font-family:var(--mono)}
  .chatmsgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
  .msg{font-size:13px;line-height:1.5;padding:9px 12px;border-radius:12px;max-width:86%;white-space:pre-wrap}
  .msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
  .msg.bot{align-self:flex-start;background:var(--paper);border:1px solid var(--hair);border-bottom-left-radius:4px}
  .msg.sys{align-self:center;font-family:var(--mono);font-size:10px;color:var(--faint);background:transparent;text-align:center}
  .chatinput{display:flex;gap:7px;padding:12px;border-top:1px solid var(--hair)}
  .chatinput input{flex:1}
  a{color:var(--accent)}

  /* ==================== PORTADA (#home) ==================== */
  #home{background:var(--paper)}
  #home header{gap:20px}
  .lp-nav{display:flex;align-items:center;gap:22px}
  .lp-nav a{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer}
  .lp-nav a:hover{color:var(--ink)}
  @media(max-width:900px){.lp-nav{display:none}}

  .lang{position:relative}
  .lang-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:500;font-size:13px;color:var(--muted);background:transparent;border:1px solid var(--hair);border-radius:999px;padding:7px 11px;cursor:pointer}
  .lang-btn:hover{border-color:var(--faint);color:var(--ink)}
  .lang-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--hair);border-radius:10px;box-shadow:var(--sh);padding:5px;display:none;z-index:60;min-width:140px}
  .lang-menu.on{display:block}
  .lang-menu button{display:flex;width:100%;align-items:center;gap:8px;border:none;background:transparent;font-family:var(--sans);font-size:13px;color:var(--ink);padding:8px 10px;border-radius:7px;text-align:left;cursor:pointer}
  .lang-menu button:hover{background:var(--paper)}
  .lang-menu button .fl{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--faint)}
  .lang-menu button.on{color:var(--accent);font-weight:600}

  .g-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:13px;color:var(--ink);background:var(--panel);border:1px solid var(--hair);border-radius:var(--rs);padding:10px 15px;cursor:pointer}
  .g-btn:hover{border-color:var(--faint);box-shadow:var(--sh)}
  .g-btn svg{display:block;flex-shrink:0}
  .auth-mini{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:500;font-size:13px;color:var(--muted);background:transparent;border:1px solid var(--hair);border-radius:999px;padding:7px 12px;cursor:pointer}
  .auth-mini:hover{border-color:var(--faint);color:var(--ink);background:var(--panel)}
  .auth-mini svg{display:block;flex-shrink:0}
  @media(max-width:620px){.auth-mini{display:none}}

  .lpwrap{max-width:1080px;margin:0 auto;width:100%;padding:0 32px}

  .hero{padding:60px 0 48px}
  .hero-center{max-width:780px;margin:0 auto;text-align:center}
  .hero-center .leadL{max-width:660px;margin-left:auto;margin-right:auto}
  .hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:46px;align-items:center}
  .eyebrowL{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
  .hero h1{font-family:var(--disp);font-weight:800;font-size:46px;line-height:1.06;letter-spacing:-.028em;margin:0 0 18px;color:var(--ink)}
  .hero h1 .m{color:var(--accent)}
  .leadL{font-family:var(--sans);font-size:16.5px;line-height:1.6;color:var(--muted);margin:0 0 26px;max-width:520px}
  .hero-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
  .trustL{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap}
  .pillL{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13px;color:var(--muted)}
  .pillL svg{flex-shrink:0}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero h1{font-size:35px}}

  /* generic section */
  .lp-sec{padding:70px 0;border-top:1px solid var(--hair)}
  .lp-head{text-align:center;max-width:660px;margin:0 auto 46px}
  #casos .lp-head{max-width:840px}
  .lp-kick{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
  .lp-head h2{font-family:var(--disp);font-weight:800;font-size:29px;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink)}
  .lp-head p{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--muted);margin:0}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
  .step{background:var(--panel);border:1px solid var(--hair);border-radius:14px;padding:24px 20px;box-shadow:var(--sh);display:flex;flex-direction:column}
  .step .n{font-family:var(--disp);font-weight:800;font-size:13px;width:30px;height:30px;border-radius:50%;background:var(--accent-tint);color:var(--accent-d);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .step h3{font-family:var(--disp);font-weight:700;font-size:16px;margin:0 0 9px;display:flex;align-items:center;gap:9px;color:var(--ink)}
  .step p{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--muted);margin:0}
  @media(max-width:1080px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.steps{grid-template-columns:1fr}}
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .case{background:var(--panel);border:1px solid var(--hair);border-radius:14px;padding:26px 24px;box-shadow:var(--sh)}
  .case .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:8px}
  .case h3{font-family:var(--disp);font-weight:700;font-size:16.5px;margin:0 0 9px;color:var(--ink);line-height:1.25}
  .case p{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 13px}
  .case .kw{display:flex;flex-wrap:wrap;gap:6px}
  .case .kw span{font-family:var(--sans);font-size:11px;color:var(--muted);background:var(--paper);border:1px solid var(--hair);border-radius:999px;padding:3px 9px}
  @media(max-width:760px){.cases{grid-template-columns:1fr}}

  /* enlaces entre paginas de funcion: el bloque "Con que se combina" */
  /* Va en la hoja compartida y no en cada pagina porque lo usan todas: las
     diecisiete de funcion y las seis verticales. Antes vivia duplicado dentro
     del <style> de /operacionalizar-variables/. */
  /* La barra de deshacer. Fija abajo y sin desaparecer sola: se va cuando se
     carga algo nuevo. */
  .hilo-deshacer{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:70;
    display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;
    border-radius:12px;padding:11px 14px 11px 18px;box-shadow:0 8px 28px rgba(0,0,0,.22);
    font-family:var(--sans);font-size:14px;max-width:min(92vw,560px)}
  .hilo-deshacer .btn{background:transparent;border:1px solid rgba(255,255,255,.45);
    color:#fff;padding:6px 14px;border-radius:9px;font-size:13px;flex:none}
  .hilo-deshacer .btn:hover{background:rgba(255,255,255,.14);border-color:#fff}
  .dash-barra{display:flex;gap:10px;align-items:center;margin:0 0 18px}
  #dashBuscar{flex:1;max-width:340px;font-family:var(--sans);font-size:14px;
    padding:9px 13px;border:1px solid var(--hair);border-radius:10px;background:var(--panel)}
  #dashBuscar:focus{outline:none;border-color:var(--accent)}
  /* Archivar es un botón con ícono y texto, siempre a la vista: antes era un
     cajón de 12 px que aparecía al pasar el mouse y en el celular nadie lo
     encontraba. */
  .parch{position:absolute;top:8px;right:38px;display:inline-flex;align-items:center;gap:6px;
    min-height:30px;padding:0 11px;border:1px solid var(--hair);border-radius:999px;
    background:var(--panel);color:var(--muted);font-family:var(--sans);font-size:12px;
    font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:.16s}
  .parch:hover,.parch:focus-visible{color:var(--accent);border-color:var(--accent);background:var(--accent-tint)}
  .pcard .pdel{top:8px;right:10px;min-width:24px;min-height:30px;display:inline-flex;align-items:center;justify-content:center}
  /* Borrar aparece al pasar el mouse o con el teclado; en pantallas táctiles, siempre. */
  .pcard:focus-within .pdel,.pdel:focus-visible{opacity:1}
  @media(hover:none){.pdel{opacity:1}}
  /* el tipo de trabajo deja lugar al botón */
  .pcard:not(.pfolder) .pkind{padding-right:140px}
  .reiniciar{width:100%;justify-content:center;margin:2px 0 14px;font-size:12.5px;
    color:var(--muted);border-color:var(--hair)}
  .reiniciar:hover{color:var(--danger);border-color:var(--danger)}
  .relacionadas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .relacionadas a{display:block;border:1px solid var(--hair);border-radius:12px;padding:15px 16px;text-decoration:none;background:var(--panel);transition:.16s}
  .relacionadas a:hover{border-color:var(--accent)}
  .relacionadas b{display:block;font-family:var(--disp);font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:4px}
  .relacionadas span{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--muted)}
  @media(max-width:760px){.relacionadas{grid-template-columns:1fr}}

  /* parrafo de cierre de una pagina de funcion, y su nota al pie */
  /* Misma razon que .relacionadas: lo usan /planeamiento/, /mapa-conceptual/ y
     /gestion-publica/. Las dos primeras lo tenian duplicado en su <style> y la
     tercera no lo tenia, asi que sus cuatro parrafos se veian con el estilo por
     defecto. Aca arriba las tres lo reciben igual. */
  .lr-p{font-family:var(--sans);font-size:15.5px;line-height:1.65;color:var(--ink);margin:0}
  .lr-nota{font-family:var(--sans);font-size:13px;color:var(--muted);margin:14px 0 0}

  /* security */
  .sec-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .sec-points{display:flex;flex-direction:column;gap:20px}
  .sec-pt{display:flex;gap:15px}
  .sec-pt .i{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:var(--accent-tint);display:flex;align-items:center;justify-content:center}
  .sec-pt h3{font-family:var(--disp);font-weight:700;font-size:16px;margin:0 0 5px;color:var(--ink)}
  .sec-pt p{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}
  .sec-vis{background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:34px 26px;box-shadow:var(--sh);text-align:center}
  .flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
  .flow .box{font-family:var(--disp);font-weight:700;font-size:13px;padding:14px 16px;border-radius:12px;border:1px solid var(--hair);background:var(--paper);color:var(--ink)}
  .flow .box.acc{background:var(--accent);color:#fff;border-color:var(--accent)}
  .flow .ar{font-family:var(--mono);color:var(--faint)}
  .flow-note{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:18px}
  @media(max-width:760px){.sec-grid{grid-template-columns:1fr;gap:30px}}

  /* pricing */
  .plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:800px;margin:0 auto}
  .plan{background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:30px 28px;box-shadow:var(--sh);display:flex;flex-direction:column}
  .plan.hot{border:1.5px solid var(--accent);box-shadow:0 10px 34px rgba(76,95,213,.14)}
  .plan .pt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:flex;align-items:center;gap:8px}
  .plan .badge{font-family:var(--mono);font-size:9px;background:var(--accent-tint);color:var(--accent-d);border-radius:999px;padding:2px 8px;letter-spacing:.06em}
  .plan .price{font-family:var(--disp);font-weight:800;font-size:34px;color:var(--ink);letter-spacing:-.02em}
  .plan .price small{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--faint)}
  .plan .pdesc{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin:6px 0 18px;line-height:1.55}
  .plan ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:11px}
  .plan li{font-family:var(--sans);font-size:13.5px;color:var(--ink);display:flex;gap:9px;align-items:flex-start;line-height:1.45}
  .plan li svg{flex-shrink:0;margin-top:2px}
  .plan .cta{margin-top:auto}
  @media(max-width:680px){.plans{grid-template-columns:1fr}}
  .credits-card{max-width:800px;margin:22px auto 0;background:var(--panel);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--sh);padding:22px 26px;display:flex;align-items:center;gap:18px}
  .credits-i{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:var(--accent-tint);display:flex;align-items:center;justify-content:center}
  .credits-txt{flex:1;min-width:0}
  .credits-txt h4{font-family:var(--disp);font-weight:700;font-size:15px;margin:0 0 4px;color:var(--ink)}
  .credits-txt p{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);margin:0}
  .credits-price{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--ink);white-space:nowrap}
  .credits-price small{font-family:var(--sans);font-weight:500;font-size:12.5px;color:var(--faint)}
  @media(max-width:680px){.credits-card{flex-wrap:wrap;text-align:left}.credits-price{margin-left:60px}}

  /* faq */
  .faq{max-width:760px;margin:0 auto}
  .qa{border-bottom:1px solid var(--hair)}
  .qa>button{width:100%;text-align:left;background:none;border:none;padding:20px 4px;font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink);display:flex;justify-content:space-between;gap:16px;cursor:pointer;align-items:center}
  .qa .pl{color:var(--accent);font-size:22px;transition:transform .25s;flex-shrink:0;line-height:1}
  .qa.open .pl{transform:rotate(45deg)}
  .qa .a{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .qa .a p{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--muted);margin:0 4px 20px}
  .qa.open .a{max-height:280px}

  /* site footer */
  .site-foot{background:#1C2127;color:#C7CBD6}
  .site-foot-main{max-width:1080px;margin:0 auto;padding:52px 32px 30px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
  .site-foot .fbrand{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:19px;color:#fff}
  .site-foot .fbrand::before{content:"";width:22px;height:22px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17 C7 17 8 7 12 7 S17 17 21 17' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='3' cy='17' r='2.2' fill='%23FFFFFF'/%3E%3Ccircle cx='21' cy='17' r='2.2' fill='%23FFFFFF'/%3E%3C/svg%3E")}
  .site-foot .ftag{font-family:var(--sans);font-size:13px;color:#8A90A0;margin-top:12px;line-height:1.6;max-width:260px}
  .site-foot h4{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8A90A0;margin:0 0 14px}
  .site-foot a.fl{display:block;font-family:var(--sans);font-size:13.5px;color:#C7CBD6;margin-bottom:9px;cursor:pointer}
  .site-foot a.fl:hover{color:#fff}
  .site-foot-bot{border-top:1px solid #2C333D}
  .site-foot-bot-in{max-width:1080px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .site-foot-bot .fmono{font-family:var(--mono);font-size:11px;color:#8A90A0}
  .site-foot-bot .sp{flex:1}
  @media(max-width:760px){.site-foot-main{grid-template-columns:1fr 1fr;gap:26px}}


/* ===== módulo graficar (mapa del hilo) ===== */
.gx-dest{display:flex;gap:6px;margin:2px 0 10px}
.gx-dest-b{flex:1;font-size:.82rem}
#gxWrap{position:fixed;inset:0;z-index:9000}
.gx-back{position:absolute;inset:0;background:rgba(34,38,47,.45)}
.gx-modal{position:absolute;inset:3vh 3vw;background:var(--panel);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px -20px rgba(34,38,47,.4)}
.gx-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.gx-title{font-family:var(--disp);font-size:1.05rem;color:var(--accent)}
.gx-meta{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.gx-seg{display:inline-flex;background:var(--line2);border-radius:9px;padding:3px;gap:3px}
.gx-seg button{border:0;background:transparent;color:var(--muted);padding:6px 13px;border-radius:7px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit}
.gx-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink)}
.gx-x{border:0;background:transparent;font-size:1.05rem;color:var(--muted);cursor:pointer;padding:4px 8px;font-family:inherit}
.gx-body{flex:1;display:grid;grid-template-columns:1fr 320px;gap:14px;padding:14px;min-height:0;overflow:hidden}
.gx-canvas{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;position:relative;min-height:340px}
#gxMap{display:block;width:100%;height:100%;touch-action:none;user-select:none}
.gx-zoom{display:inline-flex;background:var(--line2);border-radius:9px;padding:3px;gap:3px}
.gx-zoom button{border:0;background:transparent;color:var(--muted);padding:6px 11px;border-radius:7px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;min-width:30px}
.gx-zoom button:hover{background:var(--panel);color:var(--ink)}
.gx-tip{position:absolute;right:12px;bottom:10px;font-family:var(--mono);font-size:.66rem;color:var(--faint);pointer-events:none}
.gx-side{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:16px;overflow:auto}
.gx-empty{color:var(--faint);font-size:.86rem;line-height:1.55;text-align:center;padding:30px 6px;margin:0}
.gx-chip{display:inline-block;font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:10px}
.gx-side h3{font-family:var(--disp);font-size:1.02rem;margin:0 0 11px;line-height:1.3}
.gx-side h3[contenteditable="true"]{outline:0;border-bottom:1.5px dashed var(--accent)}
.gx-cita{font-family:var(--serif);font-size:.92rem;line-height:1.6;background:var(--panel);border-left:3px solid var(--hair);padding:10px 12px;margin:0 0 12px}
.gx-kv{display:flex;gap:8px;font-size:.77rem;margin-bottom:6px;align-items:baseline}
.gx-kv b{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);min-width:64px;font-weight:500}
.gx-kv span{color:var(--muted);font-family:var(--mono);font-size:.73rem}
.gx-acts{display:flex;gap:6px;flex-wrap:wrap;padding-top:13px;margin-top:11px;border-top:1px solid var(--hair)}
.gx-acts button{background:var(--panel);border:1px solid var(--hair);border-radius:8px;padding:7px 11px;font-size:.78rem;color:var(--muted);cursor:pointer;font-family:inherit}
.gx-acts button:hover{border-color:var(--accent);color:var(--accent)}
.gx-acts button.gx-dgr:hover{border-color:var(--danger);color:var(--danger)}
.gx-warn{margin-top:12px;padding:9px 11px;background:#FDF6E9;border:1px solid #EFE0C4;border-radius:var(--rs);font-size:.75rem;line-height:1.5;color:#7A5814}
@media(max-width:860px){.gx-body{grid-template-columns:1fr;grid-template-rows:1fr auto;overflow:auto}.gx-modal{inset:0;border-radius:0}.gx-canvas{height:52vh}.gx-side{max-height:40vh}}


/* ── botón graficar destacado ── */
.gx-cta{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  margin:8px 0 10px;padding:10px 14px;border:0;border-radius:10px;cursor:pointer;
  background:var(--accent);color:#fff;font-family:inherit;font-size:.86rem;font-weight:600;
  box-shadow:0 2px 0 var(--accent-d);transition:background .15s,transform .1s}
.gx-cta:hover{background:var(--accent-d)}
.gx-cta:active{transform:translateY(1px);box-shadow:none}
.gx-cta:disabled{opacity:.6;cursor:default;transform:none}
.gx-cta svg{flex:none}
.chip-map{font-size:.9em;opacity:.85}

/* ── cartel de progreso: no desaparece hasta que hay un resultado ── */
#gxProg{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9500;
  display:none;align-items:flex-start;gap:11px;max-width:min(460px,92vw);
  background:var(--panel);border:1px solid var(--hair);border-radius:12px;
  padding:13px 15px;box-shadow:0 14px 40px -12px rgba(34,38,47,.34)}
#gxProg.on{display:flex}
#gxProg .gxp-ico{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;
  border:2px solid var(--line2);border-top-color:var(--accent);animation:gxspin .8s linear infinite}
#gxProg.done .gxp-ico{border:0;animation:none;color:var(--ok);font-size:17px;line-height:1}
#gxProg.err  .gxp-ico{border:0;animation:none;color:var(--danger);font-size:17px;line-height:1}
@keyframes gxspin{to{transform:rotate(360deg)}}
#gxProg .gxp-txt{flex:1;min-width:0}
#gxProg b{display:block;font-size:.87rem;margin-bottom:2px}
#gxProg small{display:block;font-size:.78rem;color:var(--muted);line-height:1.45}
#gxProg .gxp-x{border:0;background:transparent;color:var(--faint);cursor:pointer;
  font-size:1rem;padding:0 2px;line-height:1;font-family:inherit}

.gx-cta-tip{margin:-4px 0 10px;font-size:.72rem;line-height:1.4;color:var(--faint);text-align:center}
.gx-cta-tip .chip-map{color:var(--accent);font-size:.9rem;vertical-align:-1px}

.gx-exp{border:1px solid var(--hair);background:var(--panel);color:var(--muted);
  padding:6px 13px;border-radius:9px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit}
.gx-exp:hover{border-color:var(--accent);color:var(--accent)}
.gx-expmenu{position:absolute;right:14px;top:52px;z-index:20;background:var(--panel);
  border:1px solid var(--hair);border-radius:11px;box-shadow:0 14px 40px -12px rgba(34,38,47,.32);
  padding:6px;min-width:262px}
.gx-expmenu button{display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:9px 11px;border-radius:8px;cursor:pointer;font-family:inherit}
.gx-expmenu button:hover{background:var(--accent-tint)}
.gx-expmenu b{display:block;font-size:.85rem;color:var(--ink);font-weight:600;margin-bottom:1px}
.gx-expmenu small{display:block;font-size:.75rem;color:var(--muted);line-height:1.35}
.gx-head{position:relative}

.gx-expsep{height:1px;background:var(--hair);margin:5px 8px}

.gx-expforma{display:flex;gap:4px;padding:4px;margin-bottom:4px;background:var(--line2);border-radius:9px}
.gx-expforma button{flex:1;border:0;background:transparent;color:var(--muted);padding:6px 10px;
  border-radius:7px;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;text-align:center}
.gx-expforma button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(34,38,47,.1)}
.gx-expforma button:hover:not(.on){color:var(--ink)}
.gx-expmenu button.gx-expsw{
  display:flex; align-items:flex-start; gap:9px;
}
.gx-expmenu button.gx-expsw > span:last-child{ flex:1; min-width:0 }

.gx-swbox{
  flex:0 0 auto; width:34px; height:19px; margin-top:2px;
  border-radius:999px; background:var(--line2);
  position:relative; transition:background .16s ease;
}
.gx-swbox::after{
  content:''; position:absolute; top:2px; left:2px;
  width:15px; height:15px; border-radius:50%;
  background:var(--panel); box-shadow:0 1px 2px rgba(34,38,47,.22);
  transition:transform .16s ease;
}
.gx-expmenu button.gx-expsw.on .gx-swbox{ background:var(--accent) }
.gx-expmenu button.gx-expsw.on .gx-swbox::after{ transform:translateX(15px) }
.gx-expmenu button.gx-expsw.on b{ color:var(--accent) }
#gxProg.pasos{max-width:min(430px,94vw);padding:16px 18px}
#gxProg.pasos .gxp-ico{border:0;animation:none;color:var(--accent);font-size:19px;font-weight:700;line-height:1}
#gxProg.pasos b{font-size:.95rem;margin-bottom:8px}
.gxp-ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.gxp-ol li{font-size:.85rem;color:var(--ink);line-height:1.45}
.gxp-ol li b{display:inline;font-size:inherit;font-weight:600;color:var(--accent)}
.gxp-nota{display:block;margin-top:10px;padding-top:9px;border-top:1px solid var(--line2);
  font-size:.78rem;color:var(--muted);line-height:1.45}

.modos{list-style:none;counter-reset:m;padding:0;margin:14px 0 26px;display:flex;flex-direction:column;gap:11px;max-width:760px}
.modos li{counter-increment:m;position:relative;padding-left:30px;font-size:.88rem;line-height:1.55;color:var(--muted)}
.modos li::before{content:counter(m);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent-d);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.modos b{color:var(--ink);font-weight:600}
.crumb{margin-bottom:6px}
.crumb a{color:var(--accent);font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.pcard.pfolder{background:var(--accent-tint);border-color:#CBD2F6}
/* Trabajo cuyo cuerpo está solo en memoria. No es un error de la app: es un
   estado del dato, y el usuario tiene que poder verlo sin abrir el trabajo. */
.pcard.priesgo{border-color:var(--danger);border-left:3px solid var(--danger)}
.pcard.priesgo .pkind{color:var(--danger);font-weight:600}
.priesgo-msg{font-size:12px;line-height:1.45;color:var(--danger)}
.pcard.pnewf{border-style:dashed}

.code-sug{position:absolute;left:0;right:96px;top:calc(100% + 6px);z-index:40;background:var(--panel);
  border:1px solid var(--hair);border-radius:11px;box-shadow:var(--sh);padding:6px;max-height:270px;overflow:auto}
.cs-head{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:6px 9px 7px}
.cs-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;
  background:transparent;padding:8px 9px;border-radius:8px;cursor:pointer;font-family:inherit;text-align:left}
.cs-item:hover{background:var(--accent-tint)}
.cs-item span{font-size:.87rem;color:var(--ink)}
.cs-item em{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--faint);white-space:nowrap}
.share-btn{display:inline-flex;align-items:center;gap:6px;border-color:var(--accent);color:var(--accent)}
.share-btn:hover{background:var(--accent-tint)}
.share-modal{max-width:430px}
.share-sub{font-size:.88rem;color:var(--muted);line-height:1.55;margin:0 0 16px}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-net{border:1px solid var(--hair);background:var(--panel);border-radius:10px;padding:11px 12px;
  font-size:.86rem;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.share-net:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
.share-note{margin:14px 0 0;font-size:.76rem;color:var(--faint);line-height:1.5}

/* hero: lista de capacidades pegada al párrafo */
.leadL:has(+ .heroChecks){margin-bottom:6px}
.heroChecks{list-style:none;margin:5px 0 26px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px 20px}
.heroChecks li{display:flex;align-items:center;gap:7px;font-size:.97rem;line-height:1.5;color:var(--muted)}
.heroChecks li::before{content:'';flex:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%234C5FD5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat}

/* lista de archivos en la carga múltiple */
.filelist{margin-top:8px;font-size:.79rem;color:var(--muted);display:flex;flex-direction:column;gap:2px;
  max-height:130px;overflow:auto}
.filelist b{color:var(--ink);font-size:.8rem;margin-bottom:3px}
.filelist span{padding-left:12px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filelist span::before{content:'·';position:absolute;left:3px}

/* botones de red con su color */
.share-net{display:flex;align-items:center;gap:9px;text-align:left}
.net-ico{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;background:var(--net);color:#fff}
.share-net[data-r="copiar"] .net-ico{background:var(--line2);color:var(--muted)}
.share-net:hover{border-color:var(--net)}

/* ═══ demo de la home ═══ */
/* ───── sección ───── */
.demo-sec{padding:clamp(22px,3vw,38px) 0 0;max-width:1240px;margin:0 auto}
.demo-sec h2{font-family:var(--disp);font-size:clamp(1.8rem,3.6vw,2.4rem);font-weight:800;
  letter-spacing:-.025em;text-align:center;margin:0 0 12px;line-height:1.15}
.demo-sub{text-align:center;color:var(--muted);font-size:1rem;margin:0 auto 24px}

.dm-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}
.dm-pill{background:var(--panel);border:1px solid var(--accent);color:var(--accent);
  padding:8px 17px;border-radius:999px;font-size:.87rem;font-weight:500;transition:.16s}
.dm-pill:hover{background:var(--accent-tint)}
.dm-pill[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ───── escenario con anotaciones al costado ───── */
.dm-stage{position:relative;display:grid;grid-template-columns:1fr 216px;gap:26px;align-items:start}
@media(max-width:1060px){.dm-stage{grid-template-columns:1fr;gap:18px}}

.dm-frame{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--panel);box-shadow:var(--sh)}
.dm-frame-bar{padding:12px 15px;border-bottom:1px solid var(--line2)}
.dm-url{display:inline-block;font-family:var(--mono);font-size:.75rem;color:var(--faint);
  border:1px solid var(--hair);border-radius:8px;padding:5px 13px}

.dm-app{display:grid;grid-template-columns:250px 1fr;min-height:440px}
@media(max-width:820px){.dm-app{grid-template-columns:1fr}}

/* sidebar */
.dm-side{background:#F7F8FC;border-right:1px solid var(--line2);padding:18px 16px}
@media(max-width:820px){.dm-side{border-right:none;border-bottom:1px solid var(--line2)}}
.dm-side-lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:8px}
.dm-trow{display:flex;gap:7px;margin-bottom:10px}
.dm-tin{flex:1;min-width:0;background:var(--panel);border:1px solid var(--hair);border-radius:9px;
  padding:9px 11px;font-size:.85rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-tin .dm-car{display:inline-block;width:1px;height:1em;background:var(--accent);vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.dm-reunir{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:9px 15px;
  font-size:.85rem;font-weight:600}
.dm-side-hint{font-size:.71rem;color:var(--faint);line-height:1.45;margin:0 0 15px}
.dm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.dm-tag{background:var(--panel);border:1px solid var(--hair);border-radius:999px;padding:4px 10px;
  font-size:.75rem;color:var(--muted)}
.dm-tag.on{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
.dm-tag.c2{border-color:#E4CBA6;color:#8C6A22}
.dm-tag.c3{border-color:#BFDCC4;color:#417A50}
.dm-tag.c4{border-color:#E7C3D2;color:#9C4667}
.dm-bal{border-top:1px solid var(--hair);padding-top:14px;font-size:.77rem;color:var(--muted);line-height:1.5}
.dm-bal b{color:var(--accent);font-weight:600}

/* panel principal */
.dm-main{padding:20px 22px;min-width:0}
@media(max-width:520px){.dm-main{padding:16px 14px}}
.dm-mhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.dm-mhead h3{font-family:var(--disp);font-size:1.32rem;font-weight:700;color:var(--accent);margin:0;letter-spacing:-.02em}
.dm-mmeta{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.dm-mdesc{font-size:.84rem;color:var(--muted);line-height:1.5;margin:0 0 14px}

.dm-tabs{display:inline-flex;background:var(--line2);border-radius:9px;padding:3px;gap:3px;margin-bottom:16px}
.dm-tabs button{border:none;background:transparent;color:var(--muted);padding:7px 15px;border-radius:7px;
  font-size:.82rem;font-weight:600;transition:.15s}
.dm-tabs button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(34,38,47,.09)}

.dm-pane{min-height:262px}
.dm-pane{position:relative}
.dm-mouse{position:absolute;left:0;top:0;z-index:5;opacity:0;pointer-events:none;
  transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(34,38,47,.28))}

.dm-frag-tx .ctx{color:var(--faint)}
.dm-frag-tx mark{background:var(--paper);color:var(--ink);padding:2px 3px;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dm-frag.edit .dm-frag-tx mark{background:#E7EAFB}
.dm-frag.edit{background:#FBFCFE;border-left-color:var(--accent);box-shadow:-2px 0 0 var(--accent)}
.frag-tx ins{text-decoration:none;background:#E6F2EC;color:#1F5E41;border-radius:3px;padding:1px 2px}


/* fragmentos */
.dm-frag{border-left:3px solid var(--hair);padding:2px 0 2px 14px;margin-bottom:14px;transition:border-color .3s}
.dm-frag.on{border-left-color:var(--accent)}
.dm-frag-meta{font-family:var(--mono);font-size:.69rem;color:var(--faint);margin-bottom:6px}
.dm-frag-tx{font-family:var(--serif);font-size:.93rem;line-height:1.62;color:#9AA0B0;margin:0;min-height:1.62em}
.dm-frag.on .frag-tx{color:var(--ink)}
.frag-tx mark{background:var(--paper);color:inherit;padding:1px 3px;border-radius:3px}
.dm-cursor{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-2px;
  margin-left:1px;animation:blink .9s step-end infinite}

/* mapa */
.dm-mapwrap{background:var(--paper);border:1px solid var(--hair);border-radius:var(--rs);padding:10px}
.dm-mapwrap svg{display:block;width:100%;height:auto}

/* cierre */
.dm-closing{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line2);font-size:.88rem;color:var(--muted);line-height:1.55}
.dm-closing svg{flex:none;margin-top:3px;color:var(--accent)}
.dm-closing b{color:var(--ink);font-weight:600}

/* anotaciones */
.dm-notes{display:flex;flex-direction:column;gap:28px;padding-top:64px}
.dm-note{position:relative;font-size:.83rem;line-height:1.5;color:var(--muted)}
.dm-note b{display:block;color:var(--ink);font-weight:700;font-family:var(--disp);font-size:.9rem;margin-bottom:3px}
.dm-note .dm-arrow{position:absolute;right:100%;top:6px;margin-right:6px;color:#C3C9DC}
@media(max-width:1060px){
  .dm-notes{flex-direction:row;flex-wrap:wrap;gap:16px;padding-top:0}
  .dm-note{flex:1 1 240px;background:var(--paper);border-radius:var(--rs);padding:14px 16px}
  .dm-note .dm-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* título del documento, ahora en el panel lateral */
.doc-title{font-family:var(--serif);font-size:15px;line-height:1.35;color:var(--ink);
  margin:12px 2px 16px;padding-bottom:12px;border-bottom:1px solid var(--hair);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doc-title:empty{display:none}

.pay-note{margin:10px 0 0;font-size:11.5px;line-height:1.45;color:var(--faint);text-align:center}
.paddle-box{display:flex;align-items:center;gap:14px;margin-top:18px;padding:16px 18px;
  background:var(--accent-tint);border:1px solid #CBD2F6;border-radius:14px;
  text-decoration:none;transition:.16s}
.paddle-box:hover{border-color:var(--accent);background:#E4E8FC}
.paddle-shield{flex:none;width:42px;height:42px;border-radius:11px;background:var(--panel);
  color:var(--accent);display:flex;align-items:center;justify-content:center}
.paddle-txt{flex:1;min-width:0}
.paddle-txt b{display:block;font-family:var(--disp);font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.paddle-txt span{display:block;font-size:12.5px;line-height:1.5;color:var(--muted)}
.paddle-go{flex:none;color:var(--accent);font-size:16px}
@media(max-width:560px){.paddle-box{flex-direction:column;text-align:center;gap:10px}.paddle-go{display:none}}