/* human-rounds.css — sistema de diseño compartido (2026-08-01: renombrado
   desde sacoturno.css, la marca del fork original — Ivan: "el nombre público
   es Human Rounds, afuera Sacoturno no existe"; las clases `stz-*` de adentro
   quedan igual, sólo el nombre del archivo cambió).
   ÚNICA fuente de los tokens y de los componentes reutilizables. Lo enlazan
   todas las páginas (index, directorio, app, panel) y las páginas server-render
   de server.py. Las clases canónicas son `stz-*` (las del handoff de Claude
   Design). Donde había forks (`.rb-*` en rubricador, clases sueltas en app.html)
   se convergen acá. El layout específico de cada página queda en su propio
   <style>; esto es solo lo compartido. */

/* Tokens (custom properties, ambos temas) viven en tokens.css — extracción
   verbatim, Tier 5 slice 1 (docs/roadmap/tier5-frontend-design.md). Este
   archivo sigue siendo el único que enlazan las páginas; el import trae los
   tokens antes de cualquier regla de componente. Ruta relativa a propósito
   (no absoluta): Storybook/Vite la resuelve directo del disco sin depender
   de ningún server; server.py sirve `/static/tokens.css` como passthrough
   literal para cuando el propio human-rounds.css se sirve fingerprinted en
   `/static/human-rounds.<hash8>.css` (ver static_fingerprint.py). */
@import url("tokens.css");
*{box-sizing:border-box;}
::selection{background:var(--selection);}
/* Un link se reconoce por el COLOR de la marca, no por el subrayado (Ivan,
   2026-08-06: "the links shouldn't be underlined, they should be colored").
   Sin esta regla base, cualquier <a> sin clase propia caía en el azul
   subrayado del navegador — que además ignora el tema, así que en pinamar y
   en humanrounds se veía el mismo azul ajeno. El subrayado queda para el
   hover, que es cuando confirma que eso se puede apretar. */
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-hover);text-decoration:underline;}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font);
  /* NINGUNA línea termina en una palabra sola (Ivan, 2026-08-01: "there is one
     line which breaks just one word to a new line… especially if there is a
     space to the right"). `pretty` es exactamente eso: el navegador reparte el
     último renglón para que no quede una viuda, sin tocar el markup. Va en
     body porque se hereda: cualquier bloque de texto nuevo lo trae puesto y no
     hay que acordarse regla por regla. Los títulos de 2-3 líneas piden
     `balance` (renglones parejos), que se aplica abajo, en los headings. */
  text-wrap:pretty;}
h1,h2,h3,h4,.tile-titulo,.pt-title,.mt-h1{text-wrap:balance;}

/* ---- nav / marca ---- */
.stz-mark{width:45px;height:45px;background:url(/logo.png) center/contain no-repeat;flex-shrink:0;}
/* Nav STICKY: Jorge Lucero (contraparte técnica del hospital) pidió que el
   botón de chat quede alcanzable mientras se scrollea la página — el
   lanzador flotante de esquina que hacía eso YA SE SACÓ a propósito
   (Ivan, 2026-08-01) y no vuelve; la barra de navegación es la única
   entrada que queda al chat, así que ES la barra la que se queda fija
   (Ivan, 2026-08-05). Una sola regla acá cubre TODAS las páginas: es
   `#stznav` (el host que monta nav.js), no una clase que nav.js agrega
   recién al montar — así la barra ya nace sticky incluso durante el primer
   paint, antes de que el script corra. `sticky`, no `fixed`: sigue en el
   flujo del documento y no rompe las reservas de layout que ya evitan CLS
   (`#stznav:empty{min-height:69px}` en patient_site.py). El z-index le gana
   a la barra de búsqueda sticky de la portada (`.searchbar`, z-index:5) y a
   cualquier contenido normal; se queda por debajo de modales/diálogos. */
#stznav{position:sticky;top:0;z-index:20;}
/* Logo POR TEMA (parte de la identidad, no sólo el color): el tema "pinamar"
   usa el emblema municipal de Pinamar; el "humanrounds" la marca de Human
   Rounds (las figuras en ronda) en SVG — el mismo trazo que el favicon
   público, más nítido a este tamaño que el PNG de logo.png (que sigue siendo
   el fallback de la regla base y el que usa seo.py como og:image, un formato
   que las redes sociales no leen si es vectorial). Antes ahí vivía el
   corazón con el pulso de "Sana" — la marca vieja, que ya no existe afuera.
   Cubre tanto .stz-mark (sacoturno) como .stznav-mark (nav.js) — la mayor
   especificidad ([data-theme] + clase) gana sobre la regla base de cada uno. */
:root[data-theme="pinamar"] .stz-mark,
:root[data-theme="pinamar"] .stznav-mark{background-image:url(/pinamar-emblema.svg);}
:root[data-theme="humanrounds"] .stz-mark,
:root[data-theme="humanrounds"] .stznav-mark{background-image:url(/logo.svg);}
.stz-navlink{font-size:13.5px;font-weight:500;color:var(--text-2);text-decoration:none;padding:7px 11px;border-radius:8px;transition:background .12s,color .12s;}
.stz-navlink:hover{background:var(--bg-2);color:var(--text);}
.stz-enter{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;text-decoration:none;
  font:600 13.5px var(--font);letter-spacing:-.01em;padding:8px 14px;border-radius:9px;transition:filter .12s,transform .1s;}
.stz-enter:hover{filter:brightness(1.08);}
.stz-enter:active{transform:translateY(1px);}

/* ---- fila / listado de médicos ---- */
.stz-row{transition:background .12s cubic-bezier(.18,.78,.28,1);}
.stz-row:hover{background:var(--row-hover);}
.stz-link{cursor:pointer;border:0;background:none;padding:0;font:inherit;text-align:left;color:inherit;text-decoration:none;}
.stz-name{color:var(--text);font-weight:600;letter-spacing:-.01em;border-bottom:1px solid transparent;display:inline-block;max-width:100%;width:fit-content;transition:color .12s,border-color .12s;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stz-row:hover .stz-name{color:var(--accent);}
.stz-name:hover{color:var(--accent);border-bottom-color:var(--accent);}
.stz-esp{color:var(--accent);border-bottom:1px dashed color-mix(in oklch,var(--accent) 40%,transparent);display:inline-block;max-width:100%;width:fit-content;transition:border-color .12s;cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stz-esp:hover{border-bottom-color:var(--accent);}
.stz-rate{display:inline-flex;align-items:center;gap:2px;font:600 11.5px/1 var(--font-mono);color:var(--warn);white-space:nowrap;}
.stz-go{display:inline-flex;align-items:center;gap:5px;font:600 12.5px var(--font);color:var(--text-3);text-decoration:none;
  padding:6px 9px;border-radius:7px;border:1px solid transparent;transition:background .12s,color .12s,border-color .12s;white-space:nowrap;}
.stz-row:hover .stz-go{color:var(--accent);}
.stz-go:hover{background:var(--panel);border-color:var(--accent);color:var(--accent);}

/* ---- input de búsqueda ---- */
.stz-input{font-size:13.5px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--text);font-family:inherit;}
.stz-input::placeholder{color:var(--text-4);}
.stz-input:focus{outline:none;border-color:var(--focus-border);box-shadow:0 0 0 3px var(--focus-ring);}

/* ---- dropdowns de filtro (especialidad / clínica / obra social / profesión) ---- */
.stz-dd{position:relative;}
.stz-ddbtn{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;padding:9px 12px;border:1px solid var(--border);
  border-radius:9px;background:var(--panel);color:var(--text);cursor:pointer;min-width:150px;transition:border-color .12s,box-shadow .12s;font-family:inherit;}
.stz-ddbtn:hover{border-color:var(--border-strong);}
.stz-ddbtn.on{border-color:var(--focus-border);box-shadow:0 0 0 3px var(--focus-ring);}
.stz-ddbtn.act{color:var(--accent);font-weight:600;}
.stz-ddbtn .lbl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stz-caret{color:var(--text-3);font-size:10px;}
.stz-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:var(--panel);border:1px solid var(--border-strong);border-radius:11px;
  box-shadow:0 16px 44px -14px rgba(30,20,12,.4);padding:6px;min-width:240px;max-height:400px;overflow:auto;animation:stzpop .14s ease;}
@keyframes stzpop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stz-cat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:7px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--text);}
.stz-cat:hover{background:var(--row-hover);}
.stz-cat.sel{background:var(--accent-soft);color:var(--accent);}
.stz-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px 6px 24px;border-radius:7px;cursor:pointer;
  font-size:12.5px;color:var(--text-2);}
.stz-sub:hover{background:var(--row-hover);color:var(--text);}
.stz-sub.sel{color:var(--accent);font-weight:600;}
.stz-count{font:600 11px/1 var(--font-mono);color:var(--text-3);background:var(--bg-2);border-radius:20px;padding:3px 7px;min-width:24px;text-align:center;}
.stz-clirate{font:600 11px/1 var(--font-mono);color:var(--warn);}
.stz-ddback{position:fixed;inset:0;z-index:35;}

/* ---- chips de filtro activo ---- */
.stz-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--accent);background:var(--accent-soft);
  border:1px solid color-mix(in oklch,var(--accent) 24%,transparent);border-radius:7px;padding:5px 9px;}
.stz-chipx{border:0;background:none;cursor:pointer;color:var(--accent);font-size:14px;line-height:1;padding:0;display:flex;}

/* entrevista previa (modules/intake/): the .iv-* rules that used to live
   here (a bare-class, pre-redesign version of the interview chat) were
   removed 2026-08-01 — dead weight that was actively leaking (a stale
   `.iv-input{flex:1;...}` silently capped the redesigned auto-grow
   textarea back to ~75px, since a property a more-specific #iv-host rule
   doesn't itself declare still cascades in from a less-specific one).
   The real, current rules live in entrevista.css, scoped under #iv-host —
   see docs/architecture/entrevista-previa.md. */