/* ══════════════════════════════════════════════════════════════════════
   Simulador de examen mamario (simulador.js) · piel «Vocación» en rosa
   Filos finos, vidrio apenas, nada brilla. Color por cómo se encontró:
   rosa = palpación (masas) · oro = piel/inspección · lila = pezón ·
   celeste = adenopatías · hueso apagado = regiones, cicatriz, prótesis.
   La disposición depende del ANCHO DEL COMPONENTE (clases que pone el JS:
   .angosto < 760 px, .tira < 640 px), nunca del ancho de la ventana.
   ══════════════════════════════════════════════════════════════════ */

/* ── vista suelta #/examen ─────────────────────────────────────────── */
.sim-vista{max-width:1200px;margin:0 auto;padding:0 14px 44px}
@media(min-width:600px){.sim-vista{padding:0 24px 56px}}
@media(min-width:1180px){.sim-vista{margin:0 0 0 32px}}
.sim-cab{padding:22px 0 12px}
.sim-cab h1{font-size:clamp(30px,7.6vw,46px);margin:0 0 10px;outline:none}
.sim-bajada{font-size:17px;line-height:1.55;color:#e6d9df;max-width:62ch;margin:0}
.sim-cab-b{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:16px}
.sim-legal{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--hueso-apagado);margin:18px 0 0;max-width:72ch}
.sim-cab-b .sim-c{display:none}
.sim-enlace{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 4px;font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--rosa-claro);text-decoration:none;border:0}
.sim-enlace:hover{color:#fff;text-decoration:underline}
.sim-enlace svg{width:16px;height:16px;flex:0 0 auto}
@media(max-width:599.98px){
  .sim-cab{padding-top:16px}
  .sim-bajada{font-size:15.5px}
  .sim-cab-b{gap:6px 8px;margin-top:12px}
  .sim-cab-b .sim-l{display:none}.sim-cab-b .sim-c{display:inline}
  .sim-cab-b .sim-b{min-height:44px;padding:6px 12px;font-size:13.5px}
  .sim-cab-b .sim-enlace{font-size:13.5px}
}

/* ── el componente ─────────────────────────────────────────────────── */
.sim{font-family:var(--sans);color:var(--hueso);overflow-wrap:break-word}
.sim *{box-sizing:border-box}
.sim h2,.sim h3{font-family:var(--display)}

/* botones propios (pisan el botón rosa global de la guía) */
.sim button{font-family:var(--sans);letter-spacing:0;box-shadow:none}
.sim .sim-b,.sim a.sim-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 14px;
  border-radius:var(--r-chico);border:.75px solid var(--filo);background:rgba(255,255,255,.06);color:var(--hueso);
  font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer}
.sim .sim-b:hover,.sim a.sim-b:hover{background:rgba(255,255,255,.1);border-color:var(--filo-luz);color:#fff}
.sim .sim-b svg{width:17px;height:17px;flex:0 0 auto}
.sim .sim-b-prim{background:var(--rosa);border-color:var(--rosa);color:#2a0b19;font-weight:600}
.sim .sim-b-prim:hover{background:var(--rosa-claro);border-color:var(--rosa-claro);color:#2a0b19}
.sim .sim-b-chico{min-height:44px;padding:6px 12px;font-size:13px}
.sim .sim-b-peligro{color:#ffc2c8;border-color:rgba(255,125,135,.5);background:rgba(255,125,135,.08)}
.sim .sim-b-peligro:hover{background:rgba(255,125,135,.16);border-color:#FF7D87;color:#fff}
.sim .sim-b:disabled{opacity:.45;cursor:default}
/* los mismos botones en la cabecera de la vista (fuera de .sim) */
.sim-cab-b .sim-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 14px;
  border-radius:var(--r-chico);border:.75px solid var(--filo);background:rgba(255,255,255,.06);color:var(--hueso);
  font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.2;cursor:pointer}
.sim-cab-b .sim-b:hover{background:rgba(255,255,255,.1);border-color:var(--filo-luz);color:#fff}
.sim-cab-b .sim-b svg{width:17px;height:17px;flex:0 0 auto;color:var(--rosa)}

/* rótulo de paso: número en pentágono (eco de «reglas de oro») */
.sim-paso{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rosa)}
.sim-paso span{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;font-family:var(--display);font-size:15px;letter-spacing:0;
  color:#2a0b19;background:var(--rosa);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);padding-top:2px}
.sim-paso em{font-style:normal;font-weight:500;letter-spacing:.06em;text-transform:none;color:var(--hueso-apagado);font-size:12.5px}
.sim.angosto .sim-paso{flex-wrap:wrap;row-gap:2px}
.sim.angosto .sim-paso em{flex-basis:100%;padding-left:34px}

/* aviso del varón: breve, siempre visible */
.sim-varon{margin:8px 2px 0;font-size:12.5px;line-height:1.45;color:var(--hueso-apagado)}
.sim-varon a{color:var(--rosa-claro);font-weight:600;border-bottom:1px solid rgba(250,211,226,.45);text-decoration:none;
  display:inline-block;min-height:24px;line-height:24px;padding:0 2px}
.sim-varon a:hover{color:#fff}

/* herramientas: grilla completa con lugar; en el teléfono, dos filas que se deslizan */
.sim-herrs{margin:4px 0 14px}
.sim-herr-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:6px;padding:2px}
/* tarjeta = herramienta + «?» a la derecha (franja propia: no se toca uno por el otro) */
.sim-herr-c{position:relative;display:flex;min-width:0}
.sim .sim-herr-c>.sim-herr{flex:1 1 auto;min-width:0;padding-right:42px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.sim .sim-herr-q{position:absolute;top:1px;right:1px;bottom:1px;width:36px;min-height:44px;padding:0;margin:0;display:grid;place-items:center;
  border:0;border-left:.75px solid var(--filo);border-radius:0 var(--r-chico) var(--r-chico) 0;background:transparent;color:var(--rosa-claro);cursor:help;
  font:inherit;box-shadow:none;transition:background .15s}
.sim .sim-herr-q span{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;border:.75px solid var(--filo-luz);
  font-family:var(--display);font-style:italic;font-size:14.5px;font-weight:600;line-height:1;padding-top:1px;transition:background .15s,border-color .15s}
.sim .sim-herr-q:hover{background:rgba(244,166,196,.08)}
.sim .sim-herr-q:hover span,.sim .sim-herr-q[aria-expanded="true"] span{background:rgba(244,166,196,.18);border-color:var(--rosa);color:#fff}
.sim .sim-herr-q:focus-visible{outline:2px solid var(--rosa-claro);outline-offset:-3px}
@media(pointer:coarse){.sim .sim-herr-q{width:44px}.sim .sim-herr-c>.sim-herr{padding-right:50px}}
.sim .sim-herr{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;min-height:52px;padding:6px 10px;
  border-radius:var(--r-chico);border:.75px solid var(--filo);background:rgba(255,255,255,.035);color:var(--hueso-apagado);
  font-size:12.5px;font-weight:500;line-height:1.22;text-align:left;white-space:normal;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.sim .sim-herr:hover{background:rgba(244,166,196,.08);border-color:var(--filo-luz);color:var(--hueso)}
.sim .sim-herr[aria-pressed="true"]{background:rgba(244,166,196,.16);border-color:var(--rosa);color:#fff;box-shadow:inset 0 0 0 1px var(--rosa)}
.sim-herr .sim-ico{width:26px;height:26px;flex:0 0 auto}
.sim.tira .sim-herr-l{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:154px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px 8px;
  scrollbar-width:thin;scrollbar-color:var(--filo-luz) transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.sim.tira .sim-herr-l.al-fin{-webkit-mask-image:none;mask-image:none}
.sim.tira .sim-herr-l::-webkit-scrollbar{height:5px}
.sim.tira .sim-herr-l::-webkit-scrollbar-thumb{background:var(--filo-luz);border-radius:var(--r-pill)}
.sim.tira .sim-herr-c{scroll-snap-align:start}
.sim.tira .sim-herr{min-height:56px;height:100%;padding:6px 8px;gap:7px;font-size:11.5px;line-height:1.18}
.sim.tira .sim-herr-c>.sim-herr{padding-right:46px}
.sim.tira .sim-herr .sim-ico{width:24px;height:24px}
@media(pointer:coarse){.sim.tira .sim-herr-c>.sim-herr{padding-right:50px}}

/* cuerpo: maqueta + panel */
.sim-cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.sim:not(.angosto) .sim-cuerpo{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:22px}
.sim-col-mod,.sim-col-pan{min-width:0}
.sim-col-mod{container-type:inline-size;container-name:simmod}

/* controles: deshacer/rehacer adelante cuando no entra todo en una fila (nunca quedan solos abajo);
   con lugar, una sola fila y a la derecha */
.sim-ctl{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.sim-grupo{display:inline-flex;flex-wrap:nowrap}
.sim-hist{order:-1}
@container simmod (min-width:515px){
  .sim-ctl{flex-wrap:nowrap}
  .sim-hist{order:0;margin-left:auto}
}
.sim .sim-tg{min-height:44px;padding:6px 9px;border:.75px solid var(--filo);background:rgba(255,255,255,.04);color:var(--hueso-apagado);
  font-size:13px;font-weight:500;border-radius:0;margin-left:-.75px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap}
.sim .sim-tg:first-child{border-radius:var(--r-chico) 0 0 var(--r-chico);margin-left:0}
.sim .sim-tg:last-child{border-radius:0 var(--r-chico) var(--r-chico) 0}
.sim .sim-tg:only-child{border-radius:var(--r-chico)}
.sim .sim-tg:hover{color:var(--hueso);background:rgba(244,166,196,.08)}
.sim .sim-tg[aria-pressed="true"]{background:rgba(244,166,196,.16);color:#fff;border-color:rgba(244,166,196,.6);position:relative;z-index:1}
.sim .sim-tg:disabled{opacity:.4;cursor:default}
.sim .sim-tg svg{width:16px;height:16px}
.sim .sim-tg.sim-ic{min-width:44px;padding:6px 10px}
.sim .sim-tg:focus-visible{position:relative;z-index:2}
.sim-rehacer svg{transform:scaleX(-1)}
@media(max-width:400px){.sim .sim-tg{padding:6px 9px;font-size:12.5px}}

/* la maqueta */
.sim-marco{position:relative;border-radius:var(--r-panel);border:.75px solid var(--filo-luz);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 62%,rgba(224,69,123,.10),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:var(--hondo)}
.sim-svg{display:block;width:100%;height:auto;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.sim-svg.armado{touch-action:none;cursor:crosshair}
.sim-svg.arrastrando,.sim-svg.arrastrando .sim-h{cursor:grabbing}
.sim-svg text{font-family:var(--sans);pointer-events:none}
/* --k = unidades del dibujo por píxel: los rótulos se ven siempre al mismo tamaño real (≥ 10 px) */
.sim-svg .t-mama{font-size:calc(var(--k,1.6) * 11px);font-weight:600;letter-spacing:.2em;fill:#F7EEF2;fill-opacity:.82}
.sim-svg .t-vista{font-family:var(--display);font-style:italic;font-size:calc(var(--k,1.6) * 11.5px);fill:#C9B9C1}
.sim-svg .t-cuad{font-size:calc(var(--k,1.6) * 11.5px);font-weight:600;letter-spacing:.08em;fill:#F4A6C4;fill-opacity:.78;transition:fill-opacity .2s}
.sim-svg .t-cuad.cerca,.sim-svg .t-reg.cerca{fill-opacity:.22}
.sim-svg .t-ei{font-size:calc(var(--k,1.6) * 10px);font-weight:600;letter-spacing:.08em;fill:#C9B9C1;fill-opacity:.75}
.sim-svg .t-hora{font-family:var(--display);font-size:calc(var(--k,1.6) * 10.5px);font-weight:600;fill:#EBD3A0}
.sim-svg .t-reg{font-size:calc(var(--k,1.6) * 10px);font-weight:600;letter-spacing:.08em;fill:#C9B9C1;fill-opacity:.8}
.sim-svg.zoom .t-vista{display:none}
.sim.angosto .sim-svg .t-mama{font-size:calc(var(--k,3) * 10px)}
.sim.angosto .sim-svg .t-vista{font-size:calc(var(--k,3) * 10px)}
.sim.angosto .sim-svg .t-hora{font-size:calc(var(--k,3) * 10px)}
.sim .sim-pap,.sim-mini .sim-pap{display:none}
.sim-h{cursor:grab;touch-action:none;outline:none}
.sim-h .sim-dib{pointer-events:none}
.sim-h .sim-hit{fill:#000;fill-opacity:0}
.sim-h .sim-foco{fill:none;stroke:var(--rosa-claro);stroke-width:2.5;vector-effect:non-scaling-stroke;opacity:0;pointer-events:none}
.sim-h:focus-visible .sim-foco{opacity:1}
.sim-h .sim-anillo{fill:none;stroke:#F7EEF2;stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;pointer-events:none}
.sim-h.sel .sim-dib{filter:drop-shadow(0 0 3px rgba(244,166,196,.55))}
.sim-svg.armado .sim-h{cursor:crosshair}

.sim-pista{min-height:22px;margin:8px 2px 0;font-size:13.5px;line-height:1.4;color:var(--hueso-apagado)}
.sim-pista.activa{color:var(--rosa-claro)}
.sim-pista.aviso{color:var(--oro-claro)}
.sim-pista:empty::before{content:'Elegí qué encontraste y tocá la maqueta. Tocá un hallazgo para editarlo o arrastralo para moverlo.'}

/* leyenda */
.sim-ley{margin-top:10px;border:.75px solid var(--filo);border-radius:var(--r-chico);background:rgba(255,255,255,.02)}
.sim-ley summary,.sim-bloque>summary,.sim-sug>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 14px;
  font-weight:600;font-size:14px;color:var(--rosa-claro);list-style-position:inside}
.sim-ley summary span,.sim-bloque>summary span{font-weight:400;color:var(--hueso-apagado);font-size:13px}
.sim-ley-c{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:2px 14px 16px}
.sim:not(.angosto) .sim-ley-c{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sim:not(.angosto) .sim-ley-g:first-child{grid-row:span 3}
.sim-ley-g ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px 12px}
.sim-ley-g ul+ul{margin-top:6px}
.sim-ley-g li{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.3;color:var(--hueso-apagado);min-width:0}
.sim-ley-g li .sim-ico{flex:0 0 auto}
.sim-ley-t{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--hueso);display:flex;align-items:center}
.sim-ley-s{margin:10px 0 6px;font-size:12px;color:var(--hueso-apagado);font-style:italic}
.sim-ley-g ul.sim-ley-fila{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sim-ley-fila li{flex-direction:column;align-items:center;text-align:center;gap:4px;font-size:11.5px}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;flex:0 0 auto}
.sw-rosa{background:var(--rosa)}.sw-oro{background:var(--oro)}.sw-lila{background:#CDA5F7}.sw-azul{background:#A9C8DA}

/* panel lateral */
.sim-bloque{border:.75px solid var(--filo);border-radius:var(--r-chico);background:rgba(255,255,255,.025);margin:0 0 12px}
.sim-bloque-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 6px 14px}
.sim-h2{font-size:19px;margin:0;display:flex;align-items:center;gap:8px}
.sim-cuenta{font-family:var(--sans);font-size:12px;font-weight:600;min-width:24px;height:22px;padding:0 7px;border-radius:var(--r-pill);
  display:inline-grid;place-items:center;background:rgba(244,166,196,.16);color:var(--rosa-claro)}
.sim-tope{margin:2px 12px 6px 14px;padding:8px 12px;border-radius:var(--r-chico);border:.75px solid rgba(214,182,122,.5);background:rgba(214,182,122,.08);
  font-size:13px;line-height:1.45;color:var(--oro-claro)}
.sim-tope[hidden]{display:none}
.sim-lista-l{list-style:none;margin:0;padding:4px 10px 10px;display:grid;gap:6px}
.sim .sim-item{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left;min-height:54px;padding:8px 12px;border-radius:var(--r-chico);
  border:.75px solid var(--filo);background:rgba(255,255,255,.03);color:var(--hueso);font-size:14px;font-weight:600;cursor:pointer}
.sim .sim-item:hover{border-color:var(--filo-luz);background:rgba(244,166,196,.07)}
.sim .sim-item[aria-pressed="true"]{border-color:var(--rosa);background:rgba(244,166,196,.12)}
.sim-item>span{min-width:0;display:flex;flex-direction:column;gap:2px}
.sim-item b{font-weight:600}
.sim-item small{font-size:12.5px;font-weight:400;color:var(--hueso-apagado);line-height:1.35}
.sim-item .sim-ico{flex:0 0 auto}
.sim-vacio{font-size:13.5px;line-height:1.5;color:var(--hueso-apagado);padding:4px 4px 6px}

.sim-form-c,.sim-gen-c{padding:4px 14px 16px;display:grid;gap:12px}
.sim-fila{display:flex;flex-wrap:wrap;gap:10px}
.sim-campo{display:flex;flex-direction:column;gap:5px;flex:1 1 130px;min-width:0;font-size:12.5px;font-weight:500;color:var(--hueso-apagado);margin:0}
.sim-campo small{font-weight:400;opacity:.85}
.sim-campo[hidden]{display:none}
.sim input[type="text"],.sim select{width:100%;min-height:44px;padding:8px 10px;border-radius:var(--r-chico);border:.75px solid var(--filo-luz);
  background:rgba(0,0,0,.28);color:var(--hueso);font-family:var(--sans);font-size:15px;line-height:1.3}
.sim select{appearance:auto}
.sim option{background:#21171E;color:#F7EEF2}
.sim input[type="text"]::placeholder{color:var(--hueso-apagado);opacity:.7}
.sim input[type="text"]:focus,.sim select:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px rgba(244,166,196,.25)}
.sim input[type="text"]:focus-visible,.sim select:focus-visible{outline:2px solid var(--rosa-claro);outline-offset:1px}
.sim input[type="range"]{width:100%;min-height:44px;accent-color:var(--rosa)}
.sim-chk{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 0;font-size:14px;line-height:1.4;color:var(--hueso);cursor:pointer}
.sim-chk input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--rosa)}
.sim-f-ayuda{margin:-4px 0 0}
.sim-form-c .sim-b-prim{justify-self:start}

/* ficha del hallazgo */
.sim-ficha{border:.75px solid var(--filo-luz);border-top:2px solid var(--rosa);border-radius:var(--r-panel);background:var(--solido);margin:0 0 12px;
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
.sim-ficha-cab{position:relative;top:0;z-index:1;display:flex;align-items:center;gap:12px;padding:14px 14px 12px 16px;background:var(--solido);
  border-bottom:.75px solid var(--filo);border-radius:var(--r-panel) var(--r-panel) 0 0}
.sim-ficha-cab .sim-ico{flex:0 0 auto}
.sim-ficha-tit{min-width:0;flex:1 1 auto}
.sim-ficha-tit h3{font-size:20px;line-height:1.15;margin:0;outline:none}
.sim-ficha-loc{margin:3px 0 0;font-size:13px;line-height:1.35;color:var(--rosa-claro)}
.sim-asa{display:none}
.sim-ficha-c{padding:6px 16px 16px}
.sim-nota{margin:8px 0 2px;padding:9px 12px;border-radius:var(--r-chico);border:.75px solid rgba(214,182,122,.45);background:rgba(214,182,122,.07);
  font-size:13px;line-height:1.45;color:var(--oro-claro)}
.sim-ubic{border:0;margin:10px 0 0;padding:0;min-width:0}
.sim-ubic legend,.sim-seg legend{padding:0;margin:0 0 7px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rosa)}
.sim-ubic legend small{font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--hueso-apagado)}
.sim-ubic .sim-fila{flex-wrap:nowrap;gap:8px}
.sim-ubic .sim-campo{flex:1 1 0}
.sim-ubic .sim-c-hora{flex:0 0 78px}.sim-ubic .sim-c-dist{flex:0 0 104px}
.sim-tam{margin-top:12px}
.sim-ficha-c>.sim-campo{margin-top:12px}
.sim-seg{border:0;margin:14px 0 0;padding:0;min-width:0}
.sim-seg-o{display:flex;flex-wrap:wrap;gap:6px}
.sim-seg-o label{position:relative;display:inline-flex;cursor:pointer}
.sim-seg-o input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sim-seg-o span{display:inline-flex;align-items:center;min-height:44px;padding:7px 12px;border-radius:var(--r-chico);border:.75px solid var(--filo);
  background:rgba(255,255,255,.04);font-size:13.5px;line-height:1.25;color:var(--hueso-apagado);transition:background .15s,color .15s,border-color .15s}
.sim-seg-o label:hover span{border-color:var(--filo-luz);color:var(--hueso)}
.sim-seg-o input:checked+span{background:var(--rosa);border-color:var(--rosa);color:#2a0b19;font-weight:600}
.sim-seg-o input:focus-visible+span{outline:2px solid var(--rosa-claro);outline-offset:2px}
.sim-ficha-pie{margin-top:18px;padding-top:14px;border-top:.75px solid var(--filo);display:flex;flex-wrap:wrap;gap:8px}

/* contenedor angosto: la ficha es una hoja inferior (no modal: la maqueta sigue a la vista arriba).
   Depende solo de .angosto (lo decide el JS por el ancho del componente). --sim-hoja-b = alto de la
   barra fija de Guardar de la consulta, para no taparla. */
.sim.angosto .sim-ficha{position:fixed;left:0;right:0;bottom:var(--sim-hoja-b,0px);z-index:45;margin:0;max-height:min(50vh,470px);overflow:auto;overscroll-behavior:contain;
  border-radius:var(--r-panel) var(--r-panel) 0 0;border-left:0;border-right:0;border-bottom:0;box-shadow:0 -1px 0 rgba(0,0,0,.6),0 -18px 40px rgba(0,0,0,.5);
  padding-bottom:env(safe-area-inset-bottom)}
.sim.angosto .sim-ficha-cab{padding-top:18px;position:sticky}
.sim.angosto .sim-asa{display:block;position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:var(--r-pill);background:var(--filo-luz)}
.sim.angosto.con-ficha{padding-bottom:calc(min(50vh,470px) + var(--sim-hoja-b,0px) + 12px)}
/* la animación de entrada de .vista deja un transform (identidad) que vuelve «fixed» relativo a la sección:
   mientras la hoja está abierta se apaga (la animación ya terminó; no se nota) */
.vista:has(.sim.angosto.con-ficha){animation:none!important;transform:none!important}

/* ── ayuda didáctica «Qué es · cómo reconocerlo» (oro = lo que se aprende) ──
   Con lugar vive arriba de la columna derecha; en el teléfono, debajo de la maqueta (lo mueve el JS):
   franja de 3 líneas + «Ver más». Plegada (preferencia de la pestaña): solo el título y «Mostrar». */
.sim-ayuda{margin:0 0 12px;border:.75px solid rgba(214,182,122,.42);border-left:2px solid var(--oro);border-radius:var(--r-chico);
  background:linear-gradient(135deg,rgba(214,182,122,.08),rgba(255,255,255,.02) 62%)}
.sim-ayuda[hidden]{display:none}
.sim.angosto .sim-ayuda{margin:10px 0 0}
.sim-ay-cab{display:flex;align-items:center;gap:10px;padding:10px 10px 6px 12px}
.sim-ay-cab .sim-ico{flex:0 0 auto}
.sim-ay-tit{min-width:0;flex:1 1 auto}
.sim-ay-ojo{margin:0 0 1px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-claro)}
.sim-ay-h{font-family:var(--display);font-size:18px;line-height:1.2;margin:0;outline:none;color:var(--hueso)}
.sim-ay-h:focus-visible{outline:2px solid var(--rosa-claro);outline-offset:2px}
.sim .sim-ay-plegar{flex:0 0 auto}
.sim-ayuda.plegada .sim-ay-cab{padding-bottom:10px}
.sim-ay-c{padding:0 12px 10px}
.sim-ay-c[hidden]{display:none}
.sim-ay-def{margin:0 0 8px;font-size:14.5px;line-height:1.5;color:#efe4e9}
.sim-ay-def b,.sim-ay-l b,.sim-ay-dudas b,.sim-ay-conf b{color:var(--hueso);font-weight:600}
.sim .sim-ay-mas{display:none;min-height:44px;width:100%;justify-content:flex-start;padding:4px 0;margin:0;border:0;border-top:.75px solid rgba(214,182,122,.28);
  border-radius:0;background:none;color:var(--oro-claro);font-size:13.5px;font-weight:600;text-align:left;box-shadow:none}
.sim .sim-ay-mas::after{content:'';width:7px;height:7px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.sim .sim-ay-mas[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.sim .sim-ay-mas:hover{color:#fff;background:none}
/* teléfono: tres líneas y «Ver más» */
.sim.angosto .sim-ay-mas{display:flex}
.sim.angosto .sim-ayuda:not(.abierta) .sim-ay-def{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;margin-bottom:4px}
.sim.angosto .sim-ayuda:not(.abierta) .sim-ay-s{display:none}
.sim.angosto .sim-ay-cab{padding-top:8px}
.sim.angosto .sim-ay-def{font-size:14px}
/* secciones */
.sim-ay-d{border-top:.75px solid rgba(214,182,122,.28)}
.sim-ay-d>summary,.sim-ay-f>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;padding:4px 0;
  font-size:13.5px;font-weight:600;color:var(--rosa-claro)}
.sim-ay-d>summary::-webkit-details-marker,.sim-ay-f>summary::-webkit-details-marker{display:none}
.sim-ay-d>summary::before{content:'';flex:0 0 auto;width:7px;height:7px;margin:0 4px 0 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s}
.sim-ay-d[open]>summary::before{transform:rotate(45deg)}
.sim-ay-d>summary:hover{color:#fff}
.sim-ay-al>summary{color:#ffc2c8}
.sim-ay-l{margin:0 0 10px;padding:0 0 0 18px;display:grid;gap:6px}
.sim-ay-l li{font-size:13.5px;line-height:1.5;color:#e7dce1}
.sim-ay-l li::marker{color:var(--oro)}
.sim-ay-al .sim-ay-l li::marker{color:#FF7D87}
.sim-ay-dudas{margin:0 0 10px}
.sim-ay-dudas dt{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--hueso);margin:8px 0 2px}
.sim-ay-dudas dt:first-child{margin-top:0}
.sim-ay-dudas dd{margin:0;font-size:13.5px;line-height:1.5;color:#e7dce1}
.sim-ay-conf{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.sim-ay-conf li{padding:9px 11px;border-radius:var(--r-chico);border:.75px solid var(--filo);background:rgba(255,255,255,.025)}
.sim-ay-conf p{margin:0;font-size:13.5px;line-height:1.5;color:#e7dce1}
.sim .sim-ay-cambiar{margin-top:8px;max-width:100%;text-align:left;white-space:normal}
.sim .sim-ay-cambiar svg{width:15px;height:15px;color:var(--rosa)}
.sim-ay-ref{margin:0 0 6px!important}
.sim-ay-pie{margin:8px 0 0;padding-top:8px;border-top:.75px solid rgba(214,182,122,.28);font-size:12.5px;line-height:1.45;color:var(--hueso-apagado)}
/* la misma ayuda dentro de la ficha del hallazgo */
.sim-ay-f{margin:6px 0 4px;border:.75px solid rgba(214,182,122,.38);border-radius:var(--r-chico);background:rgba(214,182,122,.05)}
.sim-ay-f>summary{padding:4px 12px;color:var(--oro-claro)}
.sim-ay-f>summary svg{width:17px;height:17px;flex:0 0 auto}
.sim-ay-f>summary small{font-weight:400;font-size:12.5px;color:var(--hueso-apagado)}
.sim-ay-f>summary:hover{color:#fff}
.sim-ay-f-c{padding:0 12px 10px}

/* «Así se escribe» */
.sim-texto{margin-top:20px;padding:16px 16px 6px;border-radius:var(--r-panel);border:.75px solid rgba(214,182,122,.45);
  background:linear-gradient(135deg,rgba(214,182,122,.09),rgba(255,255,255,.02) 58%)}
@media(min-width:600px){.sim-texto{padding:20px 22px 8px}}
.sim-texto-cab{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;flex-wrap:wrap;margin-bottom:8px}
.sim-texto-cab .sim-paso{margin:0;color:var(--oro-claro)}
.sim-texto-cab .sim-paso span{background:var(--oro)}
.sim-texto-acc{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.sim-texto-acc .sim-guardar:empty{display:none}
.sim.tira .sim-texto-acc .sim-guardar .sim-b{padding:8px 12px;font-size:13.5px}
.sim .sim-copiar.ok{background:#93D9B2;border-color:#93D9B2}
.sim-informe{padding:14px 16px 4px;border-radius:var(--r-chico);background:rgba(0,0,0,.24);border:.75px dashed rgba(214,182,122,.35)}
.sim-informe p{font-family:var(--display);font-size:17px;line-height:1.62;color:#efe4e9;margin:0 0 11px}
.sim-informe b{color:var(--rosa-claro);font-weight:600}
.sim-aviso-t{font-size:13px;line-height:1.5;color:var(--hueso-apagado);margin:12px 0 10px}
.sim-aviso-t b{color:var(--hueso)}

/* «Lo que este hallazgo te sugiere» */
.sim-sug{margin:4px 0 12px;border-top:.75px solid rgba(214,182,122,.3)}
.sim-sug[hidden]{display:none}
.sim-sug>summary{padding:6px 0;color:var(--hueso)}
.sim-n-al{font-size:12px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);background:rgba(255,125,135,.14);color:#ffc2c8;border:.75px solid rgba(255,125,135,.45)}
.sim-sug-c{padding:0 0 6px}
.sim-banda-al{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;padding:11px 14px;border-radius:var(--r-chico);
  border:.75px solid rgba(255,125,135,.45);border-left:3px solid #FF7D87;background:rgba(255,125,135,.07)}
.sim-banda-al svg{width:20px;height:20px;flex:0 0 auto;color:#FF7D87;margin-top:1px}
.sim-banda-al p{margin:0;font-size:14px;line-height:1.5}
.sim-sug-l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sim-sug-l li{padding:12px 14px;border-radius:var(--r-chico);border:.75px solid var(--filo);background:rgba(255,255,255,.025)}
.sim-sug-l li.alarma{border-color:rgba(255,125,135,.4);box-shadow:inset 3px 0 0 #FF7D87}
.sim-sug-l p{margin:0 0 6px;font-size:14px;line-height:1.5;color:#e7dce1}
.sim-sug-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sim-sug-cab b{font-family:var(--display);font-size:17px;color:var(--hueso)}
.sim-sug-cab span{color:var(--hueso-apagado);font-size:13px;flex-basis:100%;padding-left:34px;margin-top:-4px}
.sim-signos b{color:#ffc2c8}
.sim-sug-ref{display:flex;flex-wrap:wrap;gap:2px 16px;margin:4px 0 0!important}
.sim-sug-ref a{display:inline-flex;align-items:center;gap:7px;min-height:44px;border:0;font-size:13.5px;font-weight:600;color:var(--rosa-claro)}
.sim-sug-ref a:hover{color:#fff}
.sim-sug-ref a svg{width:16px;height:16px;flex:0 0 auto}
.sim-banda-al a{border-bottom:1px solid rgba(250,211,226,.45)}
.sim-pie-sug{font-size:13px;line-height:1.5;color:var(--hueso-apagado);margin:12px 0 4px}

/* miniatura (la usa PACIENTES) */
.sim-mini{display:block;max-width:100%;height:auto}

/* colores forzados y menos movimiento */
@media(forced-colors:active){
  .sim .sim-herr,.sim .sim-tg,.sim .sim-item,.sim-seg-o span,.sim .sim-b{border:1px solid ButtonText}
  .sim .sim-herr-q span,.sim-ayuda{border:1px solid ButtonText}
  .sim .sim-herr[aria-pressed="true"],.sim .sim-tg[aria-pressed="true"],.sim-seg-o input:checked+span{outline:2px solid Highlight}
  .sim-h:focus-visible .sim-foco{stroke:Highlight}
}
@media(prefers-reduced-motion:reduce){.sim *,.sim *::before,.sim *::after{transition:none!important;animation:none!important}}

/* impresión: versión clara para papel (estilo.css vuelve todo transparente): sin sombra,
   contorno de mama #9b2c57, rótulos #1b1218, torso tenue; nada de controles */
@media print{
  .sim-herrs,.sim-ctl,.sim-col-pan,.sim-ley,.sim-pista,.sim-texto-acc,.sim-cab-b,.sim-aviso-t,.sim-sug,.sim-legal,.sim-varon,
  .sim-ayuda,.sim-ay-f,.sim-herr-q{display:none!important}
  .sim-cuerpo{display:block!important}
  .sim.angosto.con-ficha{padding-bottom:0!important}
  .sim-marco{border:1px solid #b9a8b1!important;background:#fff!important;break-inside:avoid;box-shadow:none!important}
  .sim .sim-osc,.sim-mini .sim-osc{display:none!important}
  .sim .sim-pap,.sim-mini .sim-pap{display:inline!important}
  .sim-svg .sim-sombra{display:none}
  .sim-svg text{fill:#1b1218!important;fill-opacity:.85!important}
  .sim-svg .t-cuad.cerca,.sim-svg .t-reg.cerca{fill-opacity:.3!important}
  .sim-torso,.sim-torso path{stroke:#8a7a83!important;stroke-opacity:.35!important}
  .sim-c-cuad path,.sim-c-cuad circle{stroke:#9b2c57!important;stroke-opacity:.45!important}
  .sim-c-reg ellipse{stroke:#6e5a66!important;stroke-opacity:.55!important;fill:none!important}
  .sim-c-reloj line{stroke:#8f6a1c!important}
  .sim-h .sim-foco,.sim-h .sim-anillo{display:none}
  .sim-texto{border:0;background:none;padding:0}
  .sim-informe{background:none;border:0;padding:0}
  .sim-informe p{color:#000;font-size:11.5pt}
  .sim-informe b{color:#000}
}