/* Componentes reutilizables de los temas (opcionales: cada tema enlaza este archivo si los usa).
   Requiere las variables de color del tema (--teal, --teal-soft, --ink, --muted, --line, --panel). */

/* ---- Hilos dobles en paralelo: dos .hilo seguidos, uno al lado del otro ---- */
.hilos-par{ display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 14px; }
.hilos-par .hilo{ margin:0; flex:1 1 230px; }

/* ---- Desplegable "Ventana clínica" (<details>/<summary>) ---- */
.saber-mas{ border:1.5px solid #2C6E6A; border-radius:14px; background:var(--panel); margin:36px 0 0; overflow:hidden; }
.saber-mas > summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; background:var(--teal-soft); color:#2C6E6A; font-size:15.5px; font-weight:600; line-height:1.4; cursor:pointer; }
.saber-mas > summary::-webkit-details-marker{ display:none; }
.saber-mas > summary:focus-visible{ outline:2px solid #2C6E6A; outline-offset:-4px; border-radius:12px; }
.saber-mas > summary .chev{ width:20px; height:20px; flex-shrink:0; transition:transform .2s ease; }
.saber-mas[open] > summary .chev{ transform:rotate(180deg); }
.saber-mas[open] > summary{ border-bottom:1px solid #2C6E6A; }
.saber-mas-body{ padding:20px 18px 22px; }
.saber-mas-body h3{ font-family:'Fraunces', serif; font-weight:500; font-size:18px; line-height:1.3; margin:22px 0 12px; }
.saber-mas-body h3:first-of-type{ margin-top:6px; }
.saber-mas-body p{ font-size:16px; line-height:1.7; margin:0 0 14px; }

/* ---- Figuras: siempre al ancho disponible, sin desplazamiento lateral ---- */
.figure img, .figure svg{ display:block; width:100%; max-width:100%; height:auto; }
.figure svg{ margin:0 auto; border:1px solid var(--line); border-radius:10px; background:#fff; }
/* Figuras verticales: en escritorio no más de ~520 px de ancho, centradas; en móvil, al 100 % */
.figure.vertical img, .figure.vertical svg{ max-width:min(100%, 520px); margin:0 auto; }

/* ---- Toca para ampliar (lightbox.js) ---- */
.lb-trigger{ display:block; width:100%; padding:0; margin:0; border:0; background:none; font:inherit; color:inherit; cursor:zoom-in; border-radius:10px; }
.lb-trigger:focus-visible{ outline:2px solid #2C6E6A; outline-offset:3px; }
.figure p.lb-hint{ font-size:12.5px; font-weight:600; line-height:1.4; color:#D98F35; text-align:center; margin:8px 0 0; }
.figure .lb-hint + .caption{ margin-top:2px; }
.lb{ position:fixed; inset:0; z-index:1000; background:rgba(12,22,21,0.94); }
.lb[hidden]{ display:none; }
.lb-stage{ position:absolute; inset:56px 10px 10px; display:flex; align-items:center; justify-content:center; overflow:auto; }
.lb-stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:6px; }
.lb-stage svg{ flex:none; max-width:100%; max-height:100%; background:#fff; border-radius:6px; }
.lb-close{ position:absolute; top:10px; right:10px; width:40px; height:40px; border:0; border-radius:50%; background:#fff; color:#132A28; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.lb-close:focus-visible{ outline:3px solid #D98F35; outline-offset:2px; }
html.lb-open, html.lb-open body{ overflow:hidden; }

/* ---- Cabecera de columnas del mapa final ---- */
.map-row.map-head{ padding:0 0 8px; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.map-row.map-head .what, .map-row.map-head .does{ color:var(--muted); font-weight:600; }

/* ---- "Pruébalo en casa" y "¿Mito o realidad?": mismo ancho, márgenes y letra que "Curiosidad" ---- */
.prueba, .mito{ font-size:14px; line-height:1.55; color:var(--ink); margin:10px 0 0; padding:10px 14px; }
.problem .prueba, .problem .mito{ margin:12px 0 0; }
.block .prueba + .callout, .block .mito + .callout{ margin-top:16px; }
.prueba{ background:#EAF4E6; border-left:4px solid #2E8B57; border-radius:2px 8px 8px 2px; }
.prueba .label{ font-weight:600; color:#2E6B3F; }
/* Icono de matraz dibujado en código (sin imágenes externas) */
.prueba .label::before{ content:""; display:inline-block; width:15px; height:15px; margin-right:5px; vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6B3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6.5L4.6 18.8A1.5 1.5 0 0 0 5.9 21h12.2a1.5 1.5 0 0 0 1.3-2.2L14 9.5V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E") no-repeat center / contain; }
.mito{ background:#F3EEF8; border:1px solid #D8C8E8; border-radius:8px; }
.mito .label{ font-weight:600; color:#5E3A82; }
.mito .veredicto{ display:inline-block; background:#7B4FA0; color:#fff; font-weight:600; font-size:12px; line-height:1.5; padding:1px 9px; border-radius:12px; margin:0 2px; white-space:nowrap; }

/* ---- Desplegable "Ecosistema celular": mismo <details> que la Ventana clínica, en verde, con fichas de célula ---- */
.ecosistema{ border-color:#2E8B57; }
.ecosistema > summary{ background:#EAF4E6; color:#2E6B3F; }
.ecosistema > summary:focus-visible{ outline-color:#2E8B57; }
.ecosistema[open] > summary{ border-bottom-color:#2E8B57; }
.ecosistema + .saber-mas{ margin-top:16px; }
.ficha{ border:1px solid #CFE3D3; border-radius:12px; background:#FBFDFB; padding:14px 16px; margin:0 0 16px; }
.ficha-cab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; padding-bottom:8px; margin-bottom:12px; border-bottom:1px solid #CFE3D3; }
.saber-mas-body h3.ficha-nombre{ font-size:18px; font-weight:600; color:#2E6B3F; margin:0; }
.ficha-slogan{ font-style:italic; font-size:14.5px; line-height:1.4; color:var(--muted); }
.ficha-esq{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.ficha-sil{ flex:0 0 170px; }
.ficha-sil svg{ display:block; width:170px; max-width:100%; height:auto; }
.saber-mas-body .ficha-esq p{ flex:1 1 auto; min-width:0; font-size:15px; line-height:1.55; margin:0; }
.ficha-lista{ margin:0 0 12px; padding-left:20px; }
.ficha-lista li{ font-size:15px; line-height:1.6; margin-bottom:6px; }
.saber-mas-body p.ficha-falla{ background:#FCEDEA; color:#8A2E2A; border-radius:8px; font-size:13.5px; line-height:1.45; padding:8px 10px; margin:0; }
@media (max-width:520px){
  .ficha-esq{ flex-direction:column; align-items:flex-start; gap:8px; }
  .ficha-sil{ flex:none; }
}