/* 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{
  --panel:#fff;
  --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);
}
/* 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"]{
  --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;
  --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 (2026-08-01). Antes era una aproximación heredada de
   Sacoturno (gris #f6f5f3 + terracota #c96342 + Inter): los tokens de acá
   abajo ya no son "parecidos a", son los del sitio apex, copiados de
   `landing.css` — papel #f7f3eb, tinta #181716, bermellón, línea #d9d2c7,
   Manrope + IBM Plex Mono. Un visitante que llega de humanrounds.org a la
   demo no cambia de marca a mitad de camino.

   DOS desviaciones deliberadas del apex, las dos por contraste:
   · el apex pinta el bermellón vivo (#e54b27) en bloques grandes y usa
     `--accent-deep` (#bd2f16) para el TEXTO de los links. Acá `--accent` es
     una sola cosa y casi siempre es texto o el relleno de un botón, así que
     toma el profundo: #e54b27 da 3,2-3,9:1 (reprueba AA en las tres
     superficies), #bd2f16 da 4,8-5,9:1 y blanco encima 5,86:1.
   · la escala de grises se re-espació con el mismo criterio que ya se le
     aplicó a "pinamar" el 2026-07-28: los viejos --text-3 #98937f (2,9:1) y
     --text-4 #b3ad97 (2,2:1) nunca pasaron por esa revisión y eran ilegibles.
     Ahora 7,0 / 5,7 / 4,6 medidos contra la PEOR de las cuatro superficies
     donde se usan (--bg, --bg-2, --accent-soft, --panel), que es el mismo
     piso real que cumple "pinamar". */
:root[data-theme="humanrounds"]{
  --bg:#f7f3eb; --bg-2:#eee8dd; --row-hover:#f2ece1;
  --border:#e3ddd1; --border-soft:#eee8dd; --border-strong:#d9d2c7;
  --text:#181716; --text-2:#534b3d; --text-3:#61594b; --text-4:#6e6658;
  --accent:#bd2f16; --accent-hover:#a32812; --accent-soft:#f6e4dc; --accent-bd:#ecd3c8;
  /* --done vuelve a verde (2026-07-31, revierte el bronce del 2026-07-29):
     un positivo (asistencia "suele venir", check aprobado) tiene que LEERSE
     distinto de un warn/danger — el bronce quedaba demasiado cerca del rojo
     y se confundía con error. Mismo verde que .chip-activo ya usaba sin
     tocar el tema (nunca se retinteó), así que ambos quedan consistentes.
     --warn baja del #c9a14a (1,96:1 — no se leía) a un bronce que sí pasa.
     Es un punto más oscuro que el de "pinamar" (#946318) a propósito: el
     papel hondo de esta marca (--bg-2 #eee8dd) es más oscuro que el gris de
     allá, y sobre ÉL el bronce de "pinamar" se queda en 4,24:1. */
  --done:#0b6e33; --warn:#8a5c16; --warn-soft:#f6edd6;
  --chip-bg:#eee8dd; --state-done-bg:#eaf4ec; --state-done-bd:#cde7d5;
  --font:'Manrope',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Avatares: la paleta terracota original de Human Rounds (pre-rediseño). av1/av4
     re-tinteados de verde a cobre/umbra cálida (2026-07-29, mismo motivo). */
  --av0-bg:#f6e4dc; --av0-fg:#b4512f; --av1-bg:#f3dbcd; --av1-fg:#8c4821;
  --av2-bg:#f7f0df; --av2-fg:#8a6d1f; --av3-bg:#efe6d9; --av3-fg:#7a5a3a;
  --av4-bg:#ebdac2; --av4-fg:#564025; --av5-bg:#f3e6e6; --av5-fg:#8a4a4a;
  --av-ph:#efece6;
  --av-hero-a:#d3795a; --av-hero-b:#b4512f; --av-hero-sh:rgba(180,81,47,.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:30px;height:30px;background:url(/logo.png) center/contain no-repeat;flex-shrink:0;}
/* Logo POR TEMA (parte de la identidad, no sólo el color): el tema "pinamar"
   usa el emblema municipal de Pinamar; el "humanrounds" el logo.png por
   defecto, que desde 2026-08-01 ES la marca de Human Rounds (las figuras en
   ronda, el mismo archivo que sirve humanrounds.org). 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);}
.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. */
