/* sacoturno.css — sistema de diseño compartido (Noe / Sacoturno).
   Ú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)
     · "sana"    = terracota + Inter (diseño clásico heredado de Sacoturno/Noe)
   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);
}
:root[data-theme="sana"], :root[data-theme="humanrounds"]{
  --bg:#f6f5f3; --bg-2:#efefea; --row-hover:#f1efe9;
  --border:#ebebe6; --border-soft:#f0f0eb; --border-strong:#d8d6cb;
  --text:#1f1e1b; --text-2:#6a665a; --text-3:#98937f; --text-4:#b3ad97;
  --accent:#c96342; --accent-hover:#b4512f; --accent-soft:#f6e4dc; --accent-bd:#e9d3c8;
  /* --done y state-done-* re-tinteados a bronce/umbra cálida (2026-07-29):
     el tema "sana" no debe tener NI UN verde. Contraste WCAG AA verificado
     con la fórmula de luminancia relativa: --done sobre --bg 6,82:1, --done
     sobre --state-done-bg 6,34:1, #fff sobre --done 7,43:1 (los tres ≥4,5:1). */
  --done:#7a4a1f; --warn:#c9a14a; --warn-soft:#f6edd6;
  --chip-bg:#efefea; --state-done-bg:#f6ecd9; --state-done-bd:#eedbb7;
  --font:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  /* Avatares: la paleta terracota original de Sana (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);}

/* ---- 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 "sana" el corazón de Sana Turnos.
   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;}
