/* 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");
/* Shared public footer: a continuation of the page, never a floating card.
   Qualify by body so this supersedes historical shell-local footer styles. */
/* COMPACT FOOTER (Ivan, 2026-10-17): a hairline divider separates it from the
   content above, and the links are ONE small grey line (13.5px, --text-2 for
   contrast) that only wraps on a phone. NO underline, in every theme (Ivan,
   same day: "it's obvious it's a footer"): the hover darkens the ink. The
   platform credit («Funciona con Human Rounds», only where the brand isn't
   Human Rounds) sits at the right end on a wide screen. Only the vertical
   margins are set: a left/right shorthand here (id specificity) beat the
   listing pages' centering margin, so the footer line started off-screen
   and stopped short (found 2026-10-21 checking Andrés's service pages). */
body footer.site,body footer.about-footer,body>.wrap>footer,#stzc-page>.wrap>footer{border:0;border-top:1px solid var(--border-strong);border-radius:0;box-shadow:none;background:transparent;margin-top:40px;margin-bottom:0;padding:10px 0 16px;display:flex;flex-direction:column;gap:6px;}
body footer.site .fmision{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-2);}
body footer.site .flinks{display:flex;flex-wrap:wrap;gap:0 20px;width:100%;}
body>.wrap>footer,#stzc-page>.wrap>footer{flex-direction:row;flex-wrap:wrap;gap:0 20px;}
body footer.site a,body footer.about-footer a,body>.wrap>footer a,#stzc-page>.wrap>footer a{display:inline-flex;align-items:center;min-height:30px;font-size:13.5px;color:var(--text-2);text-decoration:none;}
body footer.site a:hover,body footer.about-footer a:hover,body>.wrap>footer a:hover,#stzc-page>.wrap>footer a:hover{color:var(--text);}
body footer .fcredit{margin-left:auto;}
/* Aviso de la instalación (sitio.json priority_notice) y «Urgencias: 107»:
   primeras líneas de TODO pie público (templates/_site_footer_notice.html,
   Pinamar 2026-10-22). Es texto para leer, no letra chica: 15px en tinta
   plena, cada aviso en su propio renglón a todo el ancho del pie, aunque el
   pie sea una fila de links (páginas con listado, legales). El número de
   urgencias es un link del tamaño de su frase: su regla va DESPUÉS del bloque
   del tema humanrounds y con la misma especificidad que su variante con
   #stzc-page, así le gana a los 13,5px de los links del pie en los dos temas. */
body footer .fnotice{flex:0 0 100%;width:100%;margin:0 0 6px;font-size:15px;line-height:1.5;color:var(--text);text-wrap:pretty;}
/* PIE DEL TEMA humanrounds (Ivan, 2026-09-18: "make the footer also gray
   w half transparent underline and smaller font"): los links del pie
   entran al sistema del tema — texto en la escala gris (--text-2, la
   tinta al 50%), subrayado al 50% EXACTO de tinta (un paso más presente
   que el .26 del cuerpo), hover a tinta plena con el subrayado del
   tema. 13,5px como el resto de la letra chica; el piso táctil de 44px
   y el layout del pie no se tocan. El tema pinamar sigue con su pie
   coral: todo este bloque vive bajo el gate del tema. El subrayado se
   retiró el 2026-10-17 (Ivan: los links del pie no se subrayan). */
:root[data-theme="humanrounds"] body footer.site .fmision,
:root[data-theme="humanrounds"] body footer.about-footer .fmision,
:root[data-theme="humanrounds"] body>.wrap>footer .fmision,
:root[data-theme="humanrounds"] #stzc-page>.wrap>footer .fmision{font-size:13.5px;}
:root[data-theme="humanrounds"] body footer.site a,
:root[data-theme="humanrounds"] body footer.about-footer a,
:root[data-theme="humanrounds"] body>.wrap>footer a,
:root[data-theme="humanrounds"] #stzc-page>.wrap>footer a{
  font-size:13.5px;color:var(--text-2);
  text-decoration-line:none;}
:root[data-theme="humanrounds"] body footer.site a:hover,
:root[data-theme="humanrounds"] body footer.about-footer a:hover,
:root[data-theme="humanrounds"] body>.wrap>footer a:hover,
:root[data-theme="humanrounds"] #stzc-page>.wrap>footer a:hover{
  color:var(--text);}
:root body footer .fnotice.fnotice a,
:root #stzc-page footer .fnotice.fnotice a{display:inline;min-height:0;margin:0;font-size:inherit;}
/* Links embebidos en texto gris que todavía gritaban acento: heredan el color
   del párrafo y su señal es el subrayado tenue del tema (Ivan, 2026-09-18). */
:root[data-theme="humanrounds"] .tile-lede-a,
:root[data-theme="humanrounds"] .agenote a{
  color:inherit;text-decoration-line:var(--link-decoration);}
body:has(>.wrap>footer),body:has(>.about-footer),body:has(footer.site)>#stzc-page,body:has(.about-footer)>#stzc-page,body:has(#stznav)>#stzc-page:has(>.wrap>footer){min-height:100dvh;display:flex;flex-direction:column;}
body>.wrap:has(>footer),#stzc-page>.wrap:has(>footer){width:100%;flex:1;display:flex;flex-direction:column;padding-bottom:0;}
body>.wrap>footer,#stzc-page>.wrap>footer{margin-top:auto;padding-top:10px;}
body>.wrap:has(>footer)>:nth-last-child(2),#stzc-page>.wrap:has(>footer)>:nth-last-child(2){margin-bottom:40px;}
body>.about-wrap,#stzc-page>.about-wrap{flex:1;}
@media(max-width:600px){body footer.site,body footer.about-footer,body>.wrap>footer,#stzc-page>.wrap>footer{padding-bottom:76px;}body footer .fcredit{margin-left:0;}}
*{box-sizing:border-box;}
::selection{background:var(--selection);}
/* Cómo se reconoce un link lo decide el TEMA, en un solo lugar (Ivan,
   2026-09-14: "let's create the links… with less bright underlines and create
   some kind of hover so they look more active" — el patrón de Linear, y la
   vuelta de tuerca del "links never underlined" del 2026-08-06/07):
     · "pinamar" no define ningún --link*, así que el fallback deja el link
       con el COLOR del acento y SIN subrayado, exactamente como antes;
     · "humanrounds" define --link (tinta), --link-decoration (underline) y
       el par --link-underline / --link-underline-hover: el link es texto
       tinta con un subrayado tenue que se ENCIENDE en hover.
   En los dos casos la regla vive acá y en tokens.css: un componente NO
   escribe `text-decoration:underline` a mano (lo vigilan
   .claude/hooks/link-underline-guard.py y test/ui-evals.test.mjs eval 8), y
   un link ya visitado cambia a --link-visited para que el visitante mayor
   vea qué ya abrió. Un link nunca declara font-weight (Ivan, 2026-09-14):
   hereda el peso del texto que lo rodea — la tinta y el subrayado son la
   affordance visual. */
a{color:var(--link,var(--accent));text-decoration-line:var(--link-decoration,none);
  text-decoration-color:var(--link-underline,currentColor);text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-skip-ink:auto;
  transition:text-decoration-color .12s,color .12s;}
a:hover{color:var(--link-hover,var(--accent-hover));text-decoration-color:var(--link-underline-hover,currentColor);}
/* :where() deja la regla en especificidad (0,0,1): cualquier componente que
   pinte su propio link con una clase (.stznav-link, .tile-lede-a) le gana, y
   el ciruela de visitado queda para los links de contenido que viajan con el
   color global. Un a:visited pelado (0,1,1) le ganaba a TODA regla de una
   sola clase y teñía el menú entero. a:hover (0,1,1) también le gana, así
   que el hover sigue andando sobre un link visitado sin regla extra. */
a:where(:visited){color:var(--link-visited);}
/* Un teléfono nunca se corta a mitad de número («+54 / 2254 49-1777» en la
   pantalla sin turnos a 1440, 2026-10-17): todo link tel: va en una pieza. */
a[href^="tel:"]{white-space:nowrap;}
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: reference-deployment counterpart (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(--hover-bg);color:var(--hover-ink);}
/* Botón primario: la pastilla del tema. Los tres tokens --btn-* los define
   SÓLO "humanrounds" (negro + 999px, cursor.com); en "pinamar" no existen y
   el fallback deja el acento verde y el radio de siempre, sin mover un píxel.
   Mismo patrón en cada botón lleno del producto — ver tokens.css. */
.stz-enter{display:inline-flex;align-items:center;gap:7px;background:var(--btn-bg,var(--accent));color:var(--btn-fg,#fff);text-decoration:none;
  font:600 13.5px var(--font);letter-spacing:-.01em;padding:8px 14px;border-radius:var(--btn-radius,9px);transition:filter .12s,transform .1s,background .12s;}
.stz-enter:hover{background-image:var(--hover-fill);color:var(--btn-fg,#fff);}
.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(--hover-bg);}
.stz-link{cursor:pointer;border:0;background:none;padding:0;font:inherit;text-align:left;color:inherit;}
.stz-name{color:var(--text);font-weight:600;letter-spacing:-.01em;display:inline-block;max-width:100%;width:fit-content;transition:color .12s;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stz-row:hover .stz-name{color:var(--link,var(--accent));}
.stz-name:hover{color:var(--link,var(--accent));}
.stz-esp{color:var(--link,var(--accent));display:inline-block;max-width:100%;width:fit-content;cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stz-rate{display:inline-flex;align-items:center;gap:2px;font:600 13px/1 var(--font-mono);color:var(--warn);white-space:nowrap;}
.stz-go{display:inline-flex;align-items:center;gap:5px;font:600 13px 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(--link,var(--accent));}
.stz-go:hover{background:var(--hover-bg);border-color:var(--hover-bd);color:var(--hover-link);}

/* ---- input de búsqueda ----
   16px mínimo: menos dispara el zoom automático de iOS Safari al enfocar. */
.stz-input{font-size:16px;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(--hover-bd);}
.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:13px;}
.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(--hover-bg);}
.stz-cat.sel{background:var(--select-soft);color:var(--select);}
.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:13px;color:var(--text-2);}
.stz-sub:hover{background:var(--hover-bg);color:var(--hover-ink);}
.stz-sub.sel{color:var(--accent);font-weight:600;}
.stz-count{font:600 13px/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 13px/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:13px;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. */