/* Layout: editor a la izquierda (frases), vista del cuento a la derecha; la vista es lo que se imprime. */
:root{
  /* Paleta de PictoFichas: naranja teja, turquesa, amarillo, rosa salmón, azul y marino sobre crema.
     --accent es el turquesa oscuro (texto, enlaces, foco); --accent-fill el turquesa de los botones, con texto marino. */
  --bg:#fff6ea; --paper:#ffffff; --fg:#1b2a4a; --muted:#5e6577; --line:#eadfcf;
  --accent:#0e7268; --accent-fill:#35b9ac; --accent-ink:#1b2a4a; --soft:#e3f5f2; --warn:#b8441e;
  --naranja:#c44a22; --amarillo:#ffc93c; --amarillo-suave:#fff0c2; --rosa:#f4a39a; --azul:#4a9bf5;
  --ui:"Sora",system-ui,sans-serif; --story:"Atkinson Hyperlegible",Verdana,sans-serif;
  --picto:120px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#16213a; --paper:#1f2c4a; --fg:#f3eee6; --muted:#a9b1c2; --line:#33415f; --accent:#4fd1c5; --accent-fill:#4fd1c5; --accent-ink:#10192e;
  --soft:#22384a; --warn:#ffb38a; --naranja:#b5441f; --amarillo-suave:#3a3420; color-scheme:dark } }
:root[data-theme="dark"]{ --bg:#16213a; --paper:#1f2c4a; --fg:#f3eee6; --muted:#a9b1c2; --line:#33415f; --accent:#4fd1c5; --accent-fill:#4fd1c5; --accent-ink:#10192e;
  --soft:#22384a; --warn:#ffb38a; --naranja:#b5441f; --amarillo-suave:#3a3420; color-scheme:dark }

/* ---- Puente con Pico CSS: Pico toma nuestros tokens; aquí van solo las correcciones de convivencia ---- */
:root{
  --pico-font-family: var(--ui); --pico-font-size: 14px; --pico-line-height: 1.45; --pico-spacing: .75rem;
  --pico-block-spacing-vertical: 0; --pico-border-radius: 8px;
  --pico-form-element-spacing-vertical: .45rem; --pico-form-element-spacing-horizontal: .7rem;
  --pico-background-color: var(--bg); --pico-color: var(--fg); --pico-muted-color: var(--muted); --pico-muted-border-color: var(--line);
  --pico-primary: var(--accent); --pico-primary-background: var(--accent-fill); --pico-primary-border: var(--accent-fill); --pico-primary-hover: var(--accent);
  --pico-primary-hover-background: color-mix(in srgb, var(--accent-fill) 88%, black); --pico-primary-inverse: var(--accent-ink);
  --pico-primary-focus: color-mix(in srgb, var(--accent) 35%, transparent);
  --pico-form-element-background-color: var(--paper); --pico-form-element-border-color: var(--line); --pico-form-element-color: var(--fg);
  --pico-form-element-focus-color: var(--accent); --pico-form-element-active-border-color: var(--accent);
  --pico-card-background-color: var(--paper); --pico-card-border-color: var(--line); --pico-modal-overlay-background-color: rgba(0,0,0,.4);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --pico-primary-hover-background: color-mix(in srgb, var(--accent-fill) 85%, white); } }
:root[data-theme="dark"]{ --pico-primary-hover-background: color-mix(in srgb, var(--accent-fill) 85%, white); }
input:not([type=checkbox],[type=radio]),select,textarea{margin-bottom:0}
input[type=checkbox]{width:1.15em;height:1.15em;margin:0}
label{font-size:12px;color:var(--muted);margin-bottom:4px;letter-spacing:.02em}
button,[type=button]{width:auto;font-size:13px;line-height:1.2;padding:.45rem .9rem;margin:0}
:is(button,[type=button]):where(:not(.primary,.secondary,.outline,.contrast,.ghost,.enlace-texto,[role=tab])){background:var(--paper);border-color:var(--line);color:var(--fg)}
:is(button,[type=button]):where(:not(.primary,.secondary,.outline,.contrast,.ghost,.enlace-texto,[role=tab])):hover{background:var(--soft);border-color:var(--accent)}
button.ghost,[type=button].ghost{background:transparent;border-color:transparent;color:var(--accent)}
button.ghost:hover{background:var(--soft)}
button.secondary.outline{--pico-color:var(--accent);--pico-border-color:var(--accent)}
select.tipo{padding:2px 24px 2px 8px;font-size:11px;height:auto;width:auto;border:0;background-color:var(--soft);color:var(--accent);font-weight:600}
dialog article{width:min(460px,92vw);margin:0;padding:18px;background:var(--paper);color:var(--fg);border:1px solid var(--line)}
dialog.ancho article{width:min(760px,94vw)}
dialog article h3{font-size:17px;margin:0 0 6px;--pico-typography-spacing-top:0}
dialog article p{margin:0 0 10px}
dialog article table td, dialog article table th{padding:3px 4px;background:transparent}
h1,h2,h3{--pico-typography-spacing-top:0;margin-bottom:0}
p{margin-bottom:0}
header{--pico-block-spacing-vertical:0}
.frase .top{flex-wrap:wrap}
.frase .top span{white-space:nowrap}

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 var(--ui)}
button,input,select,textarea{font:inherit;color:inherit}
button.primary{background:var(--accent-fill);color:var(--accent-ink);border-color:var(--accent-fill);font-weight:600}
button.ghost{border-color:transparent;background:transparent;color:var(--accent)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,select,textarea{width:100%}
textarea{resize:vertical;min-height:52px;font-family:var(--story);font-size:15px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;letter-spacing:.02em}

header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--paper)}
header h1{font-size:17px;margin:0 12px 0 0;font-weight:700}
header .grow{flex:1}

main{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:0;min-height:calc(100% - 58px)}
@media (max-width:860px){ main{grid-template-columns:1fr} }
#editor{padding:16px max(16px,env(safe-area-inset-left,0px));border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px;min-width:0}
#preview{padding:20px max(16px,env(safe-area-inset-right,0px)) 40px 20px;min-width:0;overflow-x:auto}

.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frase{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--paper);display:flex;flex-direction:column;gap:8px}
.frase .top{display:flex;align-items:center;gap:6px}
.frase .top span{font-size:12px;color:var(--muted);flex:1}
.frase .top button{padding:3px 8px;font-size:12px}
.tipo{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--soft);color:var(--accent);font-weight:600;border:0}
.status{font-size:12px;color:var(--muted);min-height:16px}
.status.err{color:var(--warn)}

/* Cuento */
.cuento{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:28px;max-width:900px;margin:0 auto;font-family:var(--story)}
.cuento h2{font-size:28px;margin:0 0 4px;text-wrap:balance}
.cuento .sub{color:var(--muted);margin:0 0 22px;font-family:var(--ui);font-size:13px}
.bloque{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px dashed var(--line);break-inside:avoid}
.bloque:first-of-type{border-top:0}
.pictos{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.slot{position:relative;width:var(--picto);text-align:center}
.slot .img{width:var(--picto);height:var(--picto);border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.slot .img img{width:100%;height:100%;object-fit:contain;display:block}
.slot .img.empty{color:var(--muted);font-size:12px;font-family:var(--ui);padding:6px;background:var(--soft)}
.slot .palabra{display:block;font-weight:700;font-size:16px;margin-top:4px;word-break:break-word}
.slot.oculto .img{opacity:.25}
.texto{font-size:22px;line-height:1.4}
.nivel-1 .slot:not(.oculto)~.slot:not(.oculto){}
.cuento{--picto:calc(120px * var(--escala,1))}
.cuento.nivel-3{--picto:calc(84px * var(--escala,1))} .cuento.nivel-3 .texto{font-size:26px}
.cuento.nivel-1 .texto{font-size:20px}

.popover{position:absolute;z-index:5;top:calc(var(--picto) + 4px);left:0;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);width:300px;text-align:left;font-family:var(--ui)}
.popover .cands{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.popover .cands img{width:60px;height:60px;border:2px solid transparent;border-radius:8px;background:#fff;cursor:pointer;object-fit:contain}
.popover .cands img.sel{border-color:var(--accent)}
.popover .buscar{display:flex;gap:6px}
.popover .acciones{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.popover button{font-size:12px;padding:4px 8px}

.lista-bib{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.lista-bib .item{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.lista-bib .item b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-bib .item small{color:var(--muted)}
.lista-bib button{padding:3px 8px;font-size:12px}
#lector{position:fixed;inset:0;z-index:50;background:var(--paper);color:var(--fg);display:flex;flex-direction:column;font-family:var(--story)}
.lector-top{display:flex;gap:12px;align-items:center;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);font-family:var(--ui);font-size:14px}
.lector-top label{display:inline-flex;gap:6px;align-items:center;margin:0;font-size:13px}
.lector-top select{width:auto;max-width:200px}
.lector-centro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:20px;overflow:auto}
.lector-centro .pictos{justify-content:center;--picto:min(22vw,200px)}
.lector-centro .slot .palabra{font-size:clamp(16px,2.6vw,26px)}
.lector-centro .texto{font-size:clamp(26px,4.5vw,52px);text-align:center;max-width:22ch;line-height:1.3;text-wrap:balance}
.lector-centro .slot .img{cursor:default}
.lector-nav{display:flex;gap:16px;align-items:center;justify-content:center;padding:14px;border-top:1px solid var(--line);font-family:var(--ui)}
.lector-nav button{font-size:22px;padding:14px 28px;border-radius:14px;min-width:88px}
.lector-nav #lectorPos{font-size:16px;color:var(--muted);min-width:60px;text-align:center}
.lector-nav .hablando{outline:3px solid var(--accent)}
#lector[hidden]{display:none}
@media print{#lector{display:none !important}}
.gasto{font-weight:400;color:var(--muted);font-size:12px}
.credit{text-align:center;color:var(--muted);font-size:11px;margin-top:16px;font-family:var(--ui)}
.credit a{color:inherit}

@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff;color:#000}
  header,#datos,#editor,.credit-screen{display:none !important}
  main{display:block} #preview{padding:0;overflow:visible}
  .cuento{border:0;padding:0;max-width:none;--picto:calc(34mm * var(--escala,1))}
  .cuento.nivel-3{--picto:calc(24mm * var(--escala,1))}
  .slot-nuevo{display:none !important}
  .slot .img{border-color:#999}
  .slot.oculto{display:none}
  .popover{display:none}
}

/* Sesión, cuenta y administración */
.muted{color:var(--muted)}
.ayuda{font-size:13px;color:var(--muted);margin:0 0 10px}
.num{text-align:right;font-variant-numeric:tabular-nums}
#acceso{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:16px;padding:16px;overflow-y:auto}
.logo-acceso{width:min(300px,72vw);height:auto;flex:none}
/* En modo oscuro, «Historias» (turquesa oscuro) no se leería sobre el azul marino: el logo va sobre una placa crema */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .logo-acceso{background:#fff6ea;border-radius:18px;padding:14px 18px} }
:root[data-theme="dark"] .logo-acceso{background:#fff6ea;border-radius:18px;padding:14px 18px}
#acceso[hidden]{display:none}
.tarjeta{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px;width:min(380px,100%);display:flex;flex-direction:column;gap:12px}
.tarjeta[hidden]{display:none}
.tarjeta h1{font-size:22px;margin:0}
.tarjeta .ayuda{margin:0}
.pestanas{display:flex;gap:4px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.pestanas [role=tab]{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:6px 10px;color:var(--muted)}
.pestanas [role=tab][aria-selected=true]{border-bottom-color:var(--accent);color:var(--fg);font-weight:600}
dialog.ancho{width:min(860px,94vw)}
.fila-form{display:grid;grid-template-columns:1.2fr 1.6fr .9fr .9fr auto;gap:8px;align-items:end}
@media (max-width:640px){ .fila-form{grid-template-columns:1fr 1fr} }
.enlace{border:1px solid var(--accent);background:var(--soft);border-radius:10px;padding:10px;margin-top:10px;font-size:13px}
.tabla-scroll{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;margin-top:6px;font-size:13px}
.tabla th{font-weight:400;color:var(--muted);text-align:left;padding:4px 6px}
.tabla td{padding:4px 6px;border-top:1px solid var(--line);vertical-align:middle}
.tabla td input,.tabla td select{padding:3px 6px;min-width:90px}
.tabla td.acciones{white-space:nowrap}
.tabla td.acciones button{padding:3px 8px;font-size:12px;margin-left:4px}
.tabla tr.inactivo td{opacity:.5}
summary{cursor:pointer;font-size:13px}
@media print{#acceso{display:none !important}}
[hidden]{display:none !important}
#dlgBib article{width:min(600px,94vw);max-width:none}
.enlace-texto{border:0;background:none;padding:0;color:var(--accent);text-decoration:underline;font:inherit;cursor:pointer}
.aviso{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--warn);color:var(--paper);font-size:11px;font-weight:700;text-align:center}
.aviso-texto{color:var(--warn)}
.tabla tr.pendiente td{background:var(--soft)}

/* Correcciones tras integrar Pico */
body>header{padding-block:10px}  /* Pico anula el relleno vertical de body>header */
.lista-bib .item b{flex:1 1 8em}  /* que el título no se encoja a cero */
dialog.ancho article{width:min(900px,96vw);max-width:none}
.tabla .num{white-space:nowrap}
@media print{
  /* En modo oscuro Pico colorea los títulos en claro: en papel, todo en negro */
  .cuento,.cuento h2,.cuento .texto,.cuento .palabra{color:#000 !important}
  .cuento{background:#fff}
}

/* ---- Colores de PictoFichas ---- */
body>header{background:var(--naranja);border-bottom:0}
body>header h1{color:#fff;font-size:18px}
body>header :is(button,select):not(.primary){background:#fff6ea;border-color:transparent;color:#1b2a4a}
body>header :is(button,select):not(.primary):hover{background:#fff;border-color:#fff}
body>header button.primary{background:var(--amarillo);border-color:var(--amarillo);color:#1b2a4a}
body>header button.primary:hover{background:#ffd76a;border-color:#ffd76a}
body>header .gasto{color:#5e6577}
.ia-panel{border:2px solid var(--amarillo);background:var(--amarillo-suave)}
.aviso{background:var(--naranja);color:#fff}

/* Cada tipo de frase con un color del cartel (texto en el color normal: contraste ≥ 10:1 en claro) */
select.tipo{color:var(--fg)}
select.tipo[data-tipo=descriptiva]{background-color:color-mix(in srgb, var(--azul) 22%, var(--paper))}
select.tipo[data-tipo=perspectiva]{background-color:color-mix(in srgb, var(--rosa) 32%, var(--paper))}
select.tipo[data-tipo=directiva]{background-color:color-mix(in srgb, var(--naranja) 22%, var(--paper))}
select.tipo[data-tipo=afirmativa]{background-color:color-mix(in srgb, var(--accent-fill) 25%, var(--paper))}
select.tipo[data-tipo=cooperativa]{background-color:color-mix(in srgb, var(--amarillo) 32%, var(--paper))}
input[type=file]::file-selector-button{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink)}

/* Logo flotando en la esquina inferior derecha (no captura clics; el modo lectura y la pantalla de acceso lo tapan) */
.logo-flotante{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:40;
  width:clamp(64px,7vw,96px);height:auto;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(27,42,74,.25));animation:flotar 4s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.logo-flotante{animation:none}}
@media print{.logo-flotante{display:none}}

/* Páginas de privacidad y patrocinio */
main.legal{display:block;max-width:800px;margin:0 auto;padding:28px 16px 48px;font-size:15px;line-height:1.6}
main.legal h1{font-size:28px;margin:0 0 18px}
main.legal h2{font-size:18px;margin:26px 0 8px}
main.legal p{margin:0 0 12px} main.legal ul{margin:0 0 12px;padding-left:1.2em} main.legal li{margin-bottom:4px}
main.legal a{color:var(--accent)}
body>header a.volver{color:#fff;font-weight:600;text-decoration:none} body>header a.volver:hover{text-decoration:underline}
.legal-pie{margin-top:36px !important;text-align:center;font-size:12px;color:var(--muted)}
.donar{display:flex;flex-direction:column;align-items:center;gap:10px;margin:24px 0}
.donar .bizum,.donar .paypal{display:inline-block;border-radius:30px;padding:14px 32px;font-size:16px;font-weight:700;text-decoration:none;border:0;min-width:260px;text-align:center}
.donar .bizum{background:var(--accent-fill);color:var(--accent-ink)}
.donar .paypal{background:#0070ba;color:#fff}
.donar .status{min-height:1.2em;margin:0}
.contacto{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:16px 20px;margin:8px 0 24px}
.contacto p{margin:4px 0}
.patrocinador{text-align:center} .patrocinador img{background:#fff;border-radius:12px;padding:8px;max-width:100%;height:auto}
.colaborar{display:flex;flex-direction:column;gap:14px}
.colaborar div{display:flex;gap:14px;align-items:flex-start}
.colaborar span{font-size:22px;line-height:1;padding:10px;border-radius:10px;background:var(--soft)}
.colaborar p{margin:0}
/* Enlaces legales en la app */
.enlaces-legales{font-size:12px;color:var(--muted);text-align:center;margin:0}
.enlaces-legales a{color:var(--accent)}
html{background:var(--bg)}  /* que el fondo crema siga al bajar en páginas largas */

/* Imágenes propias entre los pictos y tamaño de los pictos */
.cuento .slot .palabra{font-size:calc(16px * var(--escala,1))}
.slot-nuevo{position:relative;width:var(--picto);height:var(--picto);flex:none;display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--line);border-radius:10px;background:transparent;cursor:pointer}
.slot-nuevo .mas-icono{color:var(--muted);font-size:calc(28px * var(--escala,1));line-height:1;opacity:.7}
.slot-nuevo:hover,.slot-nuevo:focus-visible{border-color:var(--accent);background:var(--soft);outline:none}
.slot-nuevo:hover .mas-icono,.slot-nuevo:focus-visible .mas-icono{opacity:1;color:var(--accent)}
/* El menú se abre dentro del «+»: que no herede su tamaño de letra ni su cursor */
.slot-nuevo .popover{font-size:14px;color:var(--fg);cursor:auto;text-align:left}
.popover .acciones button{flex:1 1 auto}
.popover .buscar + .buscar{margin-top:6px}

/* Arrastrar para reordenar */
.frase .top .asa{cursor:grab;padding:2px 6px;font-size:16px;line-height:1;border-color:transparent;background:transparent;color:var(--muted);touch-action:none}
.frase .top .asa:hover{color:var(--accent);background:var(--soft)}
.cuento .slot{cursor:grab}
.arrastrando{opacity:.4}
.arrastrando .img{outline:2px dashed var(--accent);outline-offset:2px}
.sortable-fallback{opacity:.85 !important;transform:rotate(2deg)}  /* la copia que sigue al puntero */

/* Banda de datos del cuento, a todo el ancho */
#datos{display:grid;grid-template-columns:minmax(200px,2fr) minmax(150px,1.2fr) minmax(190px,1.2fr) minmax(130px,.8fr) auto;gap:12px 16px;align-items:end;
  padding:12px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px));background:var(--paper);border-bottom:1px solid var(--line)}
#datos .etiqueta{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;letter-spacing:.02em}
#datos .etiqueta small{font-size:inherit}
.foto-campo{display:flex;align-items:center;gap:8px;min-height:38px}
.foto-campo img,.foto-vacia{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--line)}
.foto-vacia{display:inline-flex;align-items:center;justify-content:center;background:var(--soft);font-size:18px}
.foto-campo button{white-space:nowrap}
@media (max-width:860px){ #datos{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ #datos{grid-template-columns:1fr} }

/* Barra superior y banda de datos fijas al desplazarse (la banda, justo debajo de la barra) */
body{height:auto;min-height:100%}  /* con height:100% el sticky se soltaba al pasar la primera pantalla */
body>header{position:sticky;top:0;z-index:30}
#datos{position:sticky;top:var(--alto-cabecera,58px);z-index:29;box-shadow:0 4px 10px -8px rgba(27,42,74,.35)}
@media print{ body>header,#datos{position:static} }
/* Botón «Aa» de cada frase (palabra bajo los pictos): encendido / apagado */
.frase .top .interruptor{font-weight:700;min-width:2.4em}
.frase .top .interruptor[aria-pressed=true]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink)}

/* Caja «Redactar con IA» */
.ia-panel{border-radius:12px;padding:0;display:block}
.ia-panel>summary{list-style:none;cursor:pointer;padding:10px 14px;display:flex;flex-direction:column;gap:1px}
.ia-panel>summary::-webkit-details-marker{display:none}
.ia-panel>summary::after{display:none}
.ia-panel>summary span{font-weight:700;font-size:15px;color:var(--fg);display:flex;justify-content:space-between}
.ia-panel>summary span::after{content:'▾';color:var(--muted);transition:transform .2s}
.ia-panel:not([open])>summary span::after{transform:rotate(-90deg)}
.ia-panel>summary small{font-size:12px;color:var(--muted)}
.ia-panel[open]>summary{border-bottom:1px solid color-mix(in srgb, var(--amarillo) 60%, transparent)}
.ia-cuerpo{padding:12px 14px 14px}
.tipos-material{border:0;padding:0;margin:0 0 12px;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tipos-material legend{font-size:12px;color:var(--muted);margin-bottom:4px;padding:0}
.tipos-material label{margin:0;cursor:pointer;color:var(--fg)}
.tipos-material input{position:absolute;opacity:0;pointer-events:none}
.tipos-material span{display:flex;flex-direction:column;gap:2px;height:100%;padding:8px;overflow-wrap:anywhere;border:2px solid var(--line);border-radius:10px;background:var(--paper);font-size:12px;line-height:1.25}
.tipos-material b{font-size:13px}
.tipos-material small{color:var(--muted);font-size:11px}
.tipos-material input:checked+span{border-color:var(--accent-fill);background:color-mix(in srgb, var(--accent-fill) 14%, var(--paper))}
.tipos-material input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.ia-panel #situacion{min-height:84px;margin-bottom:10px}
.ia-panel #contexto{margin-bottom:12px}
.ia-panel label small{font-size:inherit;opacity:.8}
.ia-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ia-acciones .primary{flex:1;padding:.6rem 1rem;font-size:14px}
.ayuda-tecla{font-size:11px;color:var(--muted)}
.ia-panel #iaStatus{margin:6px 0 0}
@media (max-width:420px){ .tipos-material{grid-template-columns:1fr} }
/* «¿Dónde ocurre?» */
.lugares{border:0;padding:0;margin:0 0 12px;min-width:0;display:flex;flex-wrap:wrap;gap:6px}
.lugares legend{font-size:12px;color:var(--muted);margin-bottom:4px;padding:0;width:100%}
.lugares legend small{font-size:inherit;opacity:.8}
.lugares label{margin:0;cursor:pointer;color:var(--fg)}
.lugares input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.lugares span{display:inline-block;padding:5px 10px;border:2px solid var(--line);border-radius:999px;background:var(--paper);font-size:12px;white-space:nowrap}
.lugares input:checked+span{border-color:var(--accent-fill);background:color-mix(in srgb, var(--accent-fill) 14%, var(--paper));font-weight:600}
.lugares input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.lugares #lugarOtro{flex:1 1 100%;margin-top:2px}
.lugares input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.companias #companiaOtro{flex:1 1 100%;margin-top:2px}
.calmas #calmaOtro{flex:1 1 100%;margin-top:2px}

/* Compartir la presentación */
.casilla{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg);margin:8px 0 0}
.compartir-botones{display:flex;gap:8px;flex-wrap:wrap}
.compartir-botones a{display:inline-block;padding:.45rem .9rem;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--fg);text-decoration:none;font-size:13px}
.compartir-botones a.boton-whatsapp{background:#25d366;border-color:#25d366;color:#0b2e18;font-weight:600}
/* Página de presentación pública (/h/<token>) */
#lector.presentacion{position:fixed;inset:0;display:flex}
.presentacion-logo{height:32px;width:auto}
#lector.presentacion .credit{margin:0;padding:6px 12px 10px}
#formCorreo button{width:auto}  /* Pico estira los botones de envío al 100% */