/* pildoras.css — Píldoras Formativas.
 *
 * Se carga DESPUÉS de shared.css y escuela.css: la carcasa de la lección
 * (cabecera, cuerpo, .clave, tablas) es la de la Escuela de IA, y aquí sólo va
 * lo propio de una píldora. Colores de la paleta del sitio por variable; los
 * tonos de alerta son los mismos rojo/ámbar/gris que ya usan .prohibido y el
 * resto de avisos. Nada del dorado/verde oscuro de Boticaflash.
 */

.pf-sub{margin:.35rem 0 .2rem;color:var(--text-secondary);font-size:1.02rem}
.lec-head .pf-sub{color:rgba(255,255,255,.88)}
.pf-lead{font-size:1.06rem}

/* ── hub ── */
.pf-cuenta{font-size:.78rem;font-weight:600;color:var(--text-secondary);background:var(--bg-section);border-radius:999px;padding:.1rem .6rem}
.pf-lista{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr))}
.pf-lista li{margin:0}
.pf-lista a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .8rem;padding:.8rem .95rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);text-decoration:none;color:var(--text)}
.pf-lista a:hover,.pf-lista a:focus-visible{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.pf-nombre{font-weight:700;grid-column:1}
.pf-desc{grid-column:1;font-size:.88rem;color:var(--text-secondary)}
.pf-acceso{grid-column:2;grid-row:1;align-self:start;font-size:.72rem;font-weight:700;border-radius:999px;padding:.12rem .55rem;white-space:nowrap}
.pf-acceso--libre{background:var(--primary-light);color:var(--primary-dark)}
.pf-acceso--cuenta{background:var(--bg-section);color:var(--text-secondary)}
.pf-hecha{grid-column:2;grid-row:2;font-size:.75rem;font-weight:700;color:var(--primary-dark);white-space:nowrap}
.pf-resumen{margin:1.2rem 0;padding:.7rem .95rem;border-radius:var(--radius);background:var(--primary-light);color:var(--primary-dark)}
.pf-resumen p{margin:0}

/* ── píldora ── */
.pf-si li::marker{color:var(--primary)}
.pf-no li::marker{color:var(--irpf)}
.pf-alertas{list-style:none;padding:0;margin:.8rem 0}
.pf-alertas li{margin:.55rem 0;padding:.7rem .9rem;border-left:4px solid var(--text-light);border-radius:0 8px 8px 0;background:var(--bg-section);line-height:1.6}
.pf-alerta--alta{border-left-color:#b91c1c !important;background:#fef2f2 !important}
.pf-alerta--media{border-left-color:var(--ss) !important;background:#fffbeb !important}
.pf-nivel{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-right:.3rem;color:var(--text-secondary)}
.pf-alerta--alta .pf-nivel{color:#b91c1c}
.pf-alerta--media .pf-nivel{color:#b45309}
.pf-cin dt{font-weight:700;margin-top:.8rem}
.pf-cin dd{margin:.2rem 0 0}
.pf-pasos li{margin:.45rem 0}
.pf-rutina{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1rem;margin:.6rem 0 1rem}
.pf-rutina-col{border:1px solid var(--border);border-radius:var(--radius-lg);padding:.9rem 1rem;background:var(--bg-card);min-width:0}
.pf-rutina-col h3{margin:0 0 .5rem;font-size:1rem;display:flex;align-items:center;gap:.45rem}
.pf-rutina-col ol{margin:0;padding-left:1.3rem}
.pf-rutina-col li{margin:.55rem 0;line-height:1.5}
.pf-rutina-porque{display:block;font-size:.88rem;color:var(--text-secondary);margin-top:.15rem}
.pf-conclusion{font-weight:600}
table.qe th[scope="row"]{text-align:left;font-weight:700}

/* ── test ── */
.pf-test{margin-top:2.4rem;padding:1.2rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card)}
.pf-preguntas{padding-left:1.3rem}
.pf-q{margin:1.1rem 0}
.pf-q fieldset{border:0;margin:0;padding:0;min-width:0}
.pf-q-enun{font-weight:700;padding:0;margin-bottom:.45rem}
.pf-op{display:flex;gap:.55rem;align-items:flex-start;padding:.5rem .65rem;margin:.35rem 0;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:var(--bg)}
.pf-op input{margin-top:.25rem;flex:none}
.pf-op span{min-width:0;overflow-wrap:anywhere}
.pf-op--correcta{border-color:var(--primary);background:var(--primary-light)}
.pf-op--elegida{border-color:var(--irpf);background:#fef2f2}
.pf-exp{margin:.5rem 0 0;padding:.55rem .75rem;border-radius:8px;background:var(--bg-section);font-size:.92rem}
.pf-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 0}
.pf-btn{display:inline-block;background:var(--primary-dark);color:#fff;border:none;border-radius:9px;padding:.62rem 1.15rem;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.pf-btn--alt{background:var(--bg-card);color:var(--primary-dark);border:1px solid var(--primary)}
.pf-nota{padding:.65rem .85rem;border-radius:8px;margin:.9rem 0 0}
.pf-nota--ok{background:var(--primary-light);color:var(--primary-dark)}
.pf-nota--mal{background:#fffbeb;color:#92400e}
.pf-aviso-test{color:#92400e}
.pf-guardado{color:var(--primary-dark);font-size:.9rem}
.pf-fallo{color:#991b1b;font-size:.9rem}

/* ── muro, progreso y avisos ── */
.pf-muro{margin:2rem 0;padding:1.1rem 1.15rem;border:1px solid var(--primary);border-radius:var(--radius-lg);background:var(--bg-gradient-from)}
.pf-muro-tit{font-weight:800;color:var(--primary-dark);margin:0 0 .4rem}
.pf-muro-nota{font-size:.88rem;color:var(--text-secondary)}
.pf-progreso{margin:2rem 0 0;padding:.7rem .95rem;border-radius:var(--radius);background:var(--bg-section);font-size:.93rem}
.pf-progreso p{margin:0}
.pf-aviso{margin-top:1.6rem;font-size:.86rem;color:var(--text-secondary)}
.pf-vista-previa{margin:0 0 1.2rem;padding:.6rem .85rem;border-radius:8px;background:#fffbeb;border:1px dashed var(--ss);font-size:.88rem;color:#92400e}
.pf-vecinos{display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.pf-vecinos a{font-weight:600;text-decoration:none;color:var(--primary-dark);overflow-wrap:anywhere}
.pf-volver a{font-weight:700;text-decoration:none;color:var(--primary-dark)}

.dark-mode .pf-alerta--alta{background:#2a1212 !important}
.dark-mode .pf-alerta--media{background:#2a2009 !important}
.dark-mode .pf-op--elegida{background:#2a1212}
.dark-mode .pf-op--correcta,.dark-mode .pf-resumen,.dark-mode .pf-nota--ok,.dark-mode .pf-acceso--libre{background:#0d2620;color:#6ee7b7}
.dark-mode .pf-nota--mal,.dark-mode .pf-vista-previa{background:#2a2009;color:#fcd34d}
.dark-mode .pf-muro-tit,.dark-mode .pf-btn--alt,.dark-mode .pf-vecinos a,.dark-mode .pf-volver a,.dark-mode .pf-hecha{color:#6ee7b7}

/* ── protocolo de mostrador (#111) ── */
.pf-rama{margin:.9rem 0;padding:.85rem 1rem;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:0 var(--radius) var(--radius) 0;background:var(--bg-card)}
.pf-rama h3{margin:0 0 .4rem;font-size:1rem}
.pf-rama ul{margin:0;padding-left:1.2rem}
.pf-rama li{margin:.35rem 0}
.pf-perfiles dt{color:var(--primary-dark)}
.pf-hoja{margin-top:2.2rem;padding:1.1rem 1.15rem;border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--bg-card)}
.pf-hoja h2{margin-top:.2rem}
.pf-hoja-marca{margin:0;font-size:.78rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.pf-hoja-intro{font-size:.9rem;color:var(--text-secondary)}

/* Imprimir sólo la hoja: el resto de la página se oculta mientras la clase
   está puesta (la pone y la quita assets/js/pildoras.js). */
@media print{
  html.pf-imprimiendo body *{visibility:hidden}
  html.pf-imprimiendo .pf-hoja,html.pf-imprimiendo .pf-hoja *{visibility:visible}
  html.pf-imprimiendo .pf-hoja{position:absolute;left:0;top:0;width:100%;border:0;padding:0;background:#fff;color:#000}
  html.pf-imprimiendo .pf-hoja .pf-btns{display:none}
  html.pf-imprimiendo .pf-hoja li{font-size:12pt;line-height:1.5}
}

/* ── publicaciones para redes ── */
.pf-temas{columns:2 220px;padding-left:1.2rem;margin:.8rem 0 1.4rem}
.pf-temas li{break-inside:avoid;margin:.2rem 0}
.pf-mes{margin-top:2rem}
.pf-mes h3{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:1.2rem}
.pf-post{margin:.8rem 0;padding:.9rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card)}
.pf-post h4{margin:.1rem 0 .4rem;font-size:1.02rem}
.pf-post-tipo{margin:0;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--primary-dark)}
.pf-post-texto p{margin:.35rem 0}
.pf-post-formato{font-size:.84rem;color:var(--text-secondary);margin:.5rem 0 0}
.dark-mode .pf-perfiles dt,.dark-mode .pf-post-tipo{color:#6ee7b7}


/* ── hub rediseñado (#112): hero, familias, categorías plegables ── */
.pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pf-hero .pf-hero-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;max-width:1100px;margin:0 auto}
.pf-hero-txt{min-width:0;flex:1 1 320px}
.pf-hero-art{flex:0 1 300px;width:300px;max-width:42%;height:auto}
.pf-hub{max-width:1100px}
.pf-hub .pf-lead{max-width:62ch}

.pf-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:.8rem;margin:1.4rem 0}
.pf-tool{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.2rem .85rem;align-items:center;padding:.95rem 1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);text-decoration:none;color:var(--text);transition:transform .15s,box-shadow .15s,border-color .15s}
.pf-tool:hover,.pf-tool:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--primary)}
.pf-tool-ico{grid-row:1/3;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;font-size:1.15rem;background:linear-gradient(135deg,var(--primary),var(--primary-dark))}
.pf-tool--redes .pf-tool-ico{background:linear-gradient(135deg,#0ea5e9,#0369a1)}
.pf-tool--labs .pf-tool-ico{background:linear-gradient(135deg,#f59e0b,#b45309)}
.pf-tool-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pf-tool-txt small{color:var(--text-secondary);font-size:.84rem;line-height:1.4}
.pf-tool .pf-acceso{grid-column:3;grid-row:1}

.pf-buscador{margin:1.6rem 0 .4rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-section)}
.pf-buscador label{display:block;font-weight:700;margin-bottom:.45rem}
.pf-buscador-fila{display:flex;flex-wrap:wrap;gap:.55rem}
.pf-buscador input{flex:1 1 220px;min-width:0;padding:.65rem .8rem;border:1px solid var(--border);border-radius:9px;font:inherit;background:var(--bg-card);color:var(--text)}
.pf-buscador .pf-btn{padding:.55rem .95rem;font-size:.9rem}
.pf-buscar-estado{margin:.45rem 0 0;font-size:.88rem;color:var(--text-secondary);min-height:1.2em}

.pf-fam{margin-top:2.2rem;padding:1.1rem 1.1rem 1.2rem;border-radius:var(--radius-lg);border:1px solid var(--border);border-top:5px solid var(--fam,var(--primary));background:var(--bg-card)}
.pf-fam--empieza{--fam:#059669}.pf-fam--medicamentos{--fam:#2563eb}.pf-fam--naturales{--fam:#65a30d}.pf-fam--piel{--fam:#db2777}
.pf-fam-cab{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}
.pf-fam-cab h2{margin:0;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:1.35rem}
.pf-fam-cab p{margin:.2rem 0 0;color:var(--text-secondary);font-size:.93rem}
.pf-fam-ico{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:16px;color:#fff;font-size:1.3rem;background:var(--fam,var(--primary))}

.pf-cat{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);margin:.55rem 0;overflow:hidden}
.pf-cat[open]{border-color:var(--fam,var(--primary));box-shadow:var(--shadow-sm)}
.pf-cat>summary{display:flex;align-items:center;gap:.8rem;padding:.8rem .95rem;cursor:pointer;list-style:none}
.pf-cat>summary::-webkit-details-marker{display:none}
.pf-cat>summary::after{content:"";flex:none;width:.55rem;height:.55rem;margin-left:.2rem;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(45deg);transition:transform .18s}
.pf-cat[open]>summary::after{transform:rotate(-135deg)}
.pf-cat>summary:hover{background:var(--bg-section)}
.pf-cat>summary:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.pf-cat-ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;color:var(--fam,var(--primary));background:var(--bg-section);font-size:1rem}
.pf-cat-nom{flex:1;min-width:0;font-weight:700;display:flex;flex-direction:column;line-height:1.25}
.pf-cat-nom small{font-weight:400;font-size:.82rem;color:var(--text-secondary);margin-top:.1rem}
.pf-cat>summary .pf-cuenta{flex:none}
.pf-cat-prog{flex:none;font-size:.74rem;font-weight:700;color:var(--primary-dark)}
.pf-cat-prog:empty{display:none}
.pf-cat>.pf-lista{margin:0;padding:0 .95rem .95rem}
.pf-cat li[hidden],.pf-cat[hidden],.pf-fam[hidden]{display:none}

/* ── cuadros legales y patrocinio ── */
.pf-legal{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 1.2rem;padding:.8rem .95rem;border-radius:var(--radius);border:1px solid #bfdbfe;background:#eff6ff;color:#1e3a8a;font-size:.88rem;line-height:1.55}
.pf-legal p{margin:0}
.pf-legal>i{margin-top:.2rem;flex:none}
.pf-legal--hub{margin-top:2rem}
.pf-patrocinio{margin:0 0 1rem;padding:.8rem .95rem;border-radius:var(--radius);border:2px solid #f59e0b;background:#fffbeb;color:#78350f;font-size:.9rem}
.pf-patrocinio p{margin:.2rem 0 0}
.pf-patrocinio-tit{font-weight:800;margin:0 !important}
.pf-patro-chip{grid-column:1/-1;font-size:.72rem;font-weight:700;color:#92400e}
.dark-mode .pf-legal{background:#0f1f3a;border-color:#1e3a8a;color:#bfdbfe}
.dark-mode .pf-patrocinio{background:#2a2009;color:#fcd34d}

@media (max-width:640px){
  .pf-hero .pf-hero-in{flex-direction:column-reverse;align-items:flex-start}
  .pf-hero-art{width:190px;max-width:60%;align-self:flex-end}
  .pf-fam{padding:.9rem .7rem 1rem}
  .pf-cat>summary{flex-wrap:wrap}
  .pf-cat-nom{flex-basis:calc(100% - 100px)}
  .pf-tool{grid-template-columns:auto minmax(0,1fr)}
  .pf-tool .pf-acceso{grid-column:2;grid-row:auto;justify-self:start}
}

/* ── escáner de trípticos y página de laboratorios ── */
.pf-scan-form{display:grid;gap:.6rem;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);margin:0 0 1rem}
.pf-scan-form input[type=file]{max-width:100%;font:inherit}
.pf-scan-pildora{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);padding:1rem}
.pf-scan-pildora h2{margin-top:0}
.pf-scan-q{border:1px solid var(--border);border-radius:var(--radius);margin:.7rem 0;padding:.7rem .9rem;min-width:0}
.pf-scan-q legend{font-weight:700;padding:0 .3rem}
.pf-scan-q label{display:block;margin:.3rem 0}
.pf-scan-exp{margin:.4rem 0 0;color:var(--text-muted);font-size:.92rem}
.pf-scan-error{color:#b91c1c;font-weight:600}
.pf-lab-sec{margin:1.5rem 0}
.pf-lab-sec--no-hacemos li::marker{color:#b91c1c}
.pf-lab-sec--hacemos li::marker{color:var(--primary-dark)}
.pf-lab-form{display:grid;gap:.8rem;max-width:100%}
.pf-lab-form label{display:grid;gap:.25rem;font-weight:600}
.pf-lab-form input[type=text],.pf-lab-form input[type=email],.pf-lab-form select,.pf-lab-form textarea{width:100%;box-sizing:border-box;font:inherit;padding:.55rem .7rem;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text)}
.pf-lab-form .pf-lab-acepto{display:flex;gap:.5rem;align-items:flex-start;font-weight:500}
.dark-mode .pf-scan-error{color:#fca5a5}

.pf-ia{border:1px solid var(--border);border-radius:12px;padding:1rem;margin:0 0 1.25rem}
.pf-ia input[type=text],.pf-ia select,.pf-ia input[type=number]{max-width:100%;font:inherit;padding:.4rem .5rem;border:1px solid var(--border);border-radius:8px;background:var(--bg-card,#fff);color:var(--text)}
.pf-ia input[type=text]{width:100%;box-sizing:border-box}.pf-ia input[type=number]{width:4.5rem}
.pf-ia-salida{width:100%;box-sizing:border-box;font:inherit;font-size:.85rem;margin-top:.5rem}