/* 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. */

/* ===== TEMAS (2026-07-16) =========================================
   Dos temas conmutables desde el admin (Configuración): la identidad
   visual entera —paleta + tipografía— sale de tokens, así que cambiar
   `data-theme` en <html> re-skinea TODO el sitio de una.
     · "pinamar" = verde + Ubuntu (handoff Claude Design, DEFAULT)
     · "humanrounds" = papel + bermellón + Manrope (la marca pública real,
       la misma que sirve humanrounds.org — es el tema de la demo pública)
   El tema activo lo inyecta el servidor en <html data-theme="…"> (tema.py),
   sin parpadeo. Los tokens DERIVADOS (focus/selection via color-mix, sombras,
   danger, ancho) son iguales en ambos y viven una sola vez acá. */
:root{
  --danger:#c2452d; --danger-soft:#fbf4f2;
  --maxw:1180px; /* ancho del contenedor de las páginas de navegación (home/directorio/app/panel) */
  --shadow-card:0 8px 30px -22px rgba(20,24,20,.5);
  --shadow-pop:0 14px 44px -32px rgba(20,24,20,.55);
  --focus-ring:color-mix(in oklch, var(--accent) 14%, transparent);
  --focus-border:color-mix(in oklch, var(--accent) 45%, var(--border));
  --selection:color-mix(in oklch, var(--accent) 26%, transparent);
  /* Alto real de la barra de nav, medido por nav.js#layout() en cada mount y
     resize (Jorge Lucero pidió que el botón de chat quede alcanzable mientras
     se scrollea — 2026-08-05). El 69px es el mismo número que ya usaba la
     reserva de layout de #stznav:empty (patient_site.py) antes de que nav.js
     pinte, así que cualquier página que consulte esta var antes del primer
     layout() ya tiene el valor correcto. */
  --stznav-h:69px;
}
/* Tema por defecto = pinamar: aplica al :root pelado (sin data-theme) y al
   explícito, así una página que todavía no inyectó el atributo sale verde. */
:root, :root[data-theme="pinamar"]{
  --panel:#fff;
  --bg:#f6f7f5; --bg-2:#eef0ee; --row-hover:#f1f5f1;
  --border:#eaeaea; --border-soft:#f1f3f1; --border-strong:#d6dad6;
  /* Contraste WCAG AA (2026-07-28). Antes reprobaban 4,5:1 sobre --bg TODOS
     los links del sitio (--accent 4,05:1) y los dos grises más claros
     (--text-3 3,58:1, --text-4 2,29:1 — el contador de las filas del
     directorio era ilegible). Los tonos son los mismos: sólo baja la
     luminosidad en HLS, así que la marca no cambia a ojo.
     La escala de grises se RE-ESPACIÓ en vez de sólo empujar el más claro:
     con los cuatro apretados contra el piso de 4,5 no se distinguían entre
     sí. Ahora 7,0 / 5,6 / 4,6 — tres escalones que se ven Y que pasan AA
     sobre las cuatro superficies donde se usan (--bg, --bg-2, --accent-soft
     y --panel). Va en la dirección que el proyecto ya pedía para su público:
     nada de gris clarito sobre información que hace falta leer. */
  --text:#1f1f1f; --text-2:#4c524c; --text-3:#5a605b; --text-4:#656e67;
  --accent:#0d7d48; --accent-hover:#0b6e33; --accent-soft:#eaf4ec; --accent-bd:#cde7d5;
  /* AA 4,5:1 sobre --bg/--bg-2/--panel (y --warn también sobre
     --warn-soft, que es su propio fondo). Antes: 3,80 y 3,17. */
  --done:#0d7d48; --warn:#946318; --warn-soft:#f7efdd;
  /* --info (2026-08-05): "pizarra", el 4º color de estado del rediseño
     Human Rounds — datos neutros (estudios, derivaciones, referencias), no
     éxito/alerta/error. Nuevo, sin consumidor todavío en el CSS de ningún
     componente: agregarlo acá no mueve un solo píxel de "pinamar" hoy. */
  --info:#296eaa; --info-soft:#eaf0f6;
  --chip-bg:#eef0ee; --state-done-bg:#eaf4ec; --state-done-bd:#cde7d5;
  --font:'Ubuntu',system-ui,sans-serif; --font-mono:'Ubuntu Mono',ui-monospace,monospace;
  /* Avatares de iniciales: 6 slots (hash del nombre % 6) + placeholder de foto.
     Consumidores: .lst-av--N (listado.js), .mp-av--N/.avx--N (hospital.py),
     .cnt-foto-av--N (admin-contenido.js) — TODOS leen estos tokens, la paleta
     es parte del tema, no de cada componente. --av-hero-* es el avatar grande
     del riel de Mi cuenta (gradiente + sombra tintada). */
  --av0-bg:#eaf4ec; --av0-fg:#0d7e49; --av1-bg:#e9f0fb; --av1-fg:#2b5cad;
  --av2-bg:#e0f2f0; --av2-fg:#0b7970; --av3-bg:#f7efdd; --av3-fg:#946318;
  --av4-bg:#eaf4ec; --av4-fg:#0b6e33; --av5-bg:#e9f0fb; --av5-fg:#3a6bbf;
  --av-ph:#eef0ee;
  --av-hero-a:#17a46a; --av-hero-b:#0e8b50; --av-hero-sh:rgba(14,139,80,.8);
}
/* Tema "humanrounds" = la marca pública REAL, la misma que sirve
   humanrounds.org. RECOLOR 2026-08-05 (design-loop, mockup aprobado por
   Ivan: proyecto Claude Design "Human Rounds", archivos "… - Paleta.dc.html"
   y "… - Front Page.dc.html"): el bermellón vivo del rebrand del
   2026-08-01 pintaba todo lo tocable —links, menú, chips, botones— y la
   página entera se leía roja. La paleta nueva baja el croma, corre el tono
   hacia la arcilla y reparte el trabajo entre CUATRO colores que comparten
   luminosidad/croma (oklch .525 .116, salvo salvia a .500 por contraste
   real): arcilla (acento — links y el botón primario, nada más), salvia
   (--done — confirmado/asiste), bronce (--warn — pendiente/vence pronto) y
   pizarra (--info — dato neutro: estudios, derivaciones, referencias).
   Ninguno grita más fuerte que otro. Reglas de uso (verbatim de la Paleta):
   "arcilla sólo para links y el botón primario"; "un solo botón lleno por
   pantalla, el segundo es contorno sobre papel"; "salvia/bronce/pizarra son
   estado, no decoración"; "las tarjetas se separan con borde, no con
   sombra". Manrope + IBM Plex Mono ya estaban correctos desde el rebrand
   anterior — esto es sólo color. */
:root[data-theme="humanrounds"]{
  --panel:#fffefb; /* papel de tarjeta más cálido que pinamar (#fff) — sólo humanrounds lo necesitaba distinto, por eso --panel pasó de :root pelado a por-tema */
  --bg:#faf7f2; --bg-2:#eeebe3; --row-hover:#f4f1ea;
  --border:#e0dbd1; --border-soft:#eae6dd; --border-strong:#d1ccc1;
  --text:#211d1a; --text-2:#5b5650; --text-3:#645f58; --text-4:#6e6861;
  --accent:#a15030; --accent-hover:#853815; --accent-soft:#ffe7dd; --accent-bd:#f4d0c2;
  /* --done (salvia): confirmado/aprobado/asiste — un turno que salió bien.
     --warn (bronce): pendiente, vence pronto, falta algo — no es un error.
     --warn-soft no cambia: el wash existente (#f6edd6) ya da 4,77:1 con el
     bronce nuevo (#955b00), sigue pasando AA sin retocar. state-done-bg/bd
     tampoco: son el mismo verde de --state-done-bg que .chip-activo ya usa
     hoy y siguen dando 5,07:1 con la salvia nueva — quedan “iguales a
     pinamar” por coincidencia real de contraste, no por descuido. */
  --done:#1f7540; --warn:#955b00; --warn-soft:#f6edd6;
  /* --info (pizarra): dato neutro — estudios, derivaciones, referencias.
     Nuevo token, sin consumidor todavía en ningún componente. */
  --info:#296eaa; --info-soft:#eaf0f6;
  --chip-bg:#eeebe3; --state-done-bg:#eaf4ec; --state-done-bd:#cde7d5;
  --font:'Manrope',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Avatares: reemplazo completo (no un recolor de los mismos 6 slots) —
     el set del mockup toma un tono de cada uno de los 4 acentos más dos
     tierras extra, en vez de quedarse en una sola familia terracota. */
  --av0-bg:#ffe3d8; --av0-fg:#8c4528; --av1-bg:#daf1df; --av1-fg:#226d3d;
  --av2-bg:#f6e7d1; --av2-fg:#7c5300; --av3-bg:#fce4d5; --av3-fg:#884a16;
  --av4-bg:#d8ecff; --av4-fg:#226094; --av5-bg:#ffe1e3; --av5-fg:#8d404c;
  --av-ph:#eeebe3;
  /* av-hero: mismo método que el set anterior (lightening + desaturación de
     --accent, no un swatch del mockup — la home no usa el hero de Mi
     cuenta) — av-hero-sh es av-hero-b en rgba(.8), igual que antes. */
  --av-hero-a:#b88e73; --av-hero-b:#96684b; --av-hero-sh:rgba(150,104,75,.8);
}
*{box-sizing:border-box;}
::selection{background:var(--selection);}
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. */
