/* ==========================================================================
   EC Clínica — sistema de diseño
   --------------------------------------------------------------------------
   Un solo archivo, sin compilación. Orden: tokens → base → estructura →
   utilidades → componentes → responsive → impresión.

   Tres reglas de maquetación que se respetan en TODO el archivo, porque son
   las que hacían que el texto se pintara fuera del fondo blanco:

     1. Todo hijo de un grid o un flex que pueda contener texto largo lleva
        `min-width: 0`. Sin eso el navegador se niega a encoger el contenido
        y lo desborda por la derecha.
     2. `.card` recorta su contenido (`overflow: hidden`). Si algo no cabe, se
        ve que no cabe; nunca se pinta encima del fondo de la página.
     3. Las tablas anchas viven dentro de `.table-scroll`, que se desplaza en
        horizontal. La tarjeta no se deforma nunca.

   Hay un auditor que lo comprueba: `python tools/audit_layout.py`.

   Tipografía: IBM Plex Sans / Mono, SERVIDAS EN LOCAL (static/fonts/). No se
   enlaza a Google Fonts: hacerlo envía la IP del paciente a un tercero fuera
   de la UE y ya ha generado sanciones.

   Las reglas @font-face van justo DESPUÉS de este comentario, no dentro. Hasta
   el 27/09/2026 estuvieron dentro — parecían activas porque no llevaban `/*`
   delante, pero las envolvía este mismo bloque — y la interfaz salía siempre
   con la letra del sistema, distinta en cada ordenador. Lo vigila la prueba
   `test_las_tipografias_declaradas_existen_en_el_disco`, que ya no se deja
   engañar por las reglas comentadas.
   ========================================================================== */

@font-face { font-family:"IBM Plex Sans"; src:url("../fonts/IBMPlexSans-Regular.77bc02670657.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url("../fonts/IBMPlexSans-Medium.f7016cd446d2.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url("../fonts/IBMPlexSans-SemiBold.196e3cbc5fee.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("../fonts/IBMPlexMono-Regular.4cc7b4398540.woff2") format("woff2"); font-weight:400; font-display:swap; }

/* ============================== 1. TOKENS ============================== */
:root {
  /* Marca — tomada del logo real (azul marino), no del teal de la guía */
  --brand:            #1a365d;
  --brand-600:        #16304f;
  --brand-700:        #122642;
  --brand-300:        #6b8fbb;
  --brand-100:        #dde5f0;
  --brand-50:         #eef2f8;

  /* Superficies */
  --bg:               #f4f6fa;
  --surface:          #ffffff;
  --surface-2:        #fafbfd;
  --surface-3:        #f2f5f9;

  /* Trazos */
  --border:           #e4e8f0;
  --border-strong:    #d2d9e6;

  /* Tinta */
  --text:             #16202b;
  --text-muted:       #5a6b7c;
  --text-subtle:      #8496a6;
  --on-brand:         #ffffff;

  /* Estados (de la guía de estilo) */
  --ok:               #2e7d5b;
  --ok-bg:            #e8f3ee;
  --pending:          #b8791f;
  --pending-bg:       #fbf2e3;
  --danger:           #b23a3a;
  --danger-bg:        #f9ebeb;
  --info-bg:          var(--brand-50);

  /* Datos: rampa ordinal de un solo tono, validada (ver README §gráficos) */
  --eva-before:       #1a365d;   /* EVA al inicio  — tono oscuro */
  --eva-after:        #6b8fbb;   /* EVA al final   — tono claro, 3.35:1 */
  --grid-line:        #e9edf4;

  /* Tipografía */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px;

  /* Espacio — múltiplos de 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Radios */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;

  /* Elevación — muy contenida: la jerarquía la da el espacio */
  --shadow-sm: 0 1px 2px rgba(16, 27, 43, .04), 0 1px 3px rgba(16, 27, 43, .05);
  --shadow-md: 0 4px 12px rgba(16, 27, 43, .08), 0 1px 3px rgba(16, 27, 43, .06);
  --shadow-lg: 0 18px 48px rgba(16, 27, 43, .18);
  --ring: 0 0 0 3px rgba(26, 54, 93, .14);

  /* Medidas de la estructura */
  --sidebar-w: 264px;
  --content-max: 1280px;
  --header-h: 68px;

  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
}

/* ============================== 2. BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.011em; }
h1 { font-size: var(--fs-20); }
h2 { font-size: var(--fs-18); }
h3 { font-size: var(--fs-16); }
h4 { font-size: var(--fs-14); }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

hr { border: none; border-top: 1px solid var(--border); margin: var(--s5) 0; }

svg { flex: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand-100); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================ 3. ESTRUCTURA ============================ */
.app { display: flex; min-height: 100vh; }

/* --- Barra lateral --- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  min-width: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  padding: var(--s5) var(--s4);
  background: linear-gradient(180deg, #1e3d68 0%, var(--brand) 42%, #16304f 100%);
  color: var(--on-brand);
  border-right: 1px solid rgba(255, 255, 255, .06);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  color: var(--on-brand);
  padding: var(--s1) var(--s2);
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
}
.sidebar__mark img { width: 24px; height: 24px; display: block; }
.sidebar__name {
  font-size: var(--fs-13); font-weight: 600; letter-spacing: .06em;
  display: block; white-space: nowrap;
}
.sidebar__tag {
  font-size: var(--fs-11); color: rgba(255, 255, 255, .62);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nav { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav__label {
  font-size: var(--fs-11); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42);
  padding: var(--s3) var(--s2) var(--s1);
}
.nav a {
  position: relative;
  display: flex; align-items: center; gap: var(--s3);
  min-width: 0;
  height: 38px; padding: 0 var(--s3);
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-14);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.nav a.is-active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 500; }
.nav a.is-active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: #fff;
}
.nav a.is-disabled { color: rgba(255, 255, 255, .34); cursor: default; }
.nav a.is-disabled:hover { background: none; color: rgba(255, 255, 255, .34); }
.nav svg { width: 18px; height: 18px; opacity: .92; }
.nav__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__soon {
  margin-left: auto; font-size: var(--fs-11); padding: 1px 6px;
  border-radius: var(--r-full); background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .7);
}

.sidebar__user {
  margin-top: auto; min-width: 0;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-md);
}
.sidebar__user .avatar {
  background: rgba(255, 255, 255, .16); color: #fff; border: none;
  width: 32px; height: 32px; flex-basis: 32px; font-size: var(--fs-12);
}
.sidebar__user-info { min-width: 0; }
/* `display: block`: text-overflow no funciona en un elemento en línea. */
.sidebar__user-info { display: block; }
.sidebar__user-name {
  display: block;
  font-size: var(--fs-13); font-weight: 500; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__user-role {
  display: block;
  font-size: var(--fs-11); color: rgba(255, 255, 255, .58);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__user form { flex: none; display: flex; }
.sidebar__logout {
  flex: none; width: 30px; height: 30px; padding: 0;
  background: none; border: none;
  color: rgba(255, 255, 255, .62); cursor: pointer; border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.sidebar__logout:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.sidebar__logout svg { width: 16px; height: 16px; }

/* --- Zona principal --- */
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Un único contenedor para cabecera y contenido: así el título, las acciones
   y el borde de las tarjetas comparten exactamente el mismo eje izquierdo y
   derecho. Es lo que hace que todo se vea alineado. */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s6);
  min-width: 0;
}

.page-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.page-header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4) var(--s6);
  flex-wrap: wrap;
  padding-top: var(--s3); padding-bottom: var(--s3);
}
.page-header__text { min-width: 0; flex: 1 1 380px; }
.page-header__title { display: flex; align-items: center; gap: var(--s3); min-width: 0; flex-wrap: wrap; }
.page-header__title h1 { min-width: 0; overflow-wrap: anywhere; }
.page-header__meta {
  display: flex; align-items: center; gap: var(--s2) var(--s3);
  flex-wrap: wrap; min-width: 0;
  margin-top: 2px;
  font-size: var(--fs-13); color: var(--text-muted);
}
.page-header__meta > * { min-width: 0; }
.page-header__actions {
  display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap; flex: 0 1 auto; min-width: 0;
}

.crumbs {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-12); color: var(--text-subtle);
  margin-bottom: 2px; min-width: 0; flex-wrap: wrap;
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs__sep { color: var(--border-strong); }

.content { flex: 1 1 auto; min-width: 0; padding: var(--s6) 0 var(--s12); }

/* ============================= 4. UTILIDADES ============================= */
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.fs-12 { font-size: var(--fs-12); }
.fs-13 { font-size: var(--fs-13); }
.fs-16 { font-size: var(--fs-16); }
.strong { font-weight: 600; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.hidden { display: none !important; }
.only-sm { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.row { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.row--wrap { flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.row > * { min-width: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }
.stack-6 > * + * { margin-top: var(--s6); }

.grid { display: grid; gap: var(--s4); min-width: 0; }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Columna principal + raíl. `minmax(0,…)` en ambas pistas: sin eso el raíl no
   puede encoger y el contenido se sale de la tarjeta. */
.grid--rail { grid-template-columns: minmax(0, 1fr) minmax(0, 368px); align-items: start; }

/* ============================= 5. COMPONENTES ============================= */

/* --- Tarjeta --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  /* Regla 2: si algo no cabe, se recorta. Nunca se pinta fuera del blanco. */
  overflow: hidden;
}
.card + .card { margin-top: var(--s4); }
.card--flush { overflow: visible; }

.card__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s4); flex-wrap: wrap;
  min-height: 56px;
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.card__header > * { min-width: 0; }
.card__header h3 { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.card__header-note { font-size: var(--fs-12); color: var(--text-subtle); }
.card__body { padding: var(--s5); min-width: 0; }
.card__body--tight { padding: var(--s4) var(--s5); }
.card__footer {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.card__section + .card__section { border-top: 1px solid var(--border); }

/* --- Fichas de cifras (KPI) --- */
.stats { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat {
  min-width: 0;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.stat__label {
  font-size: var(--fs-11); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat__value {
  margin-top: 2px;
  font-size: var(--fs-24); font-weight: 600; line-height: 1.15;
  overflow-wrap: anywhere;
}
.stat__foot { margin-top: 2px; font-size: var(--fs-12); color: var(--text-muted); overflow-wrap: anywhere; }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 38px; padding: 0 var(--s4);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--brand); color: var(--on-brand);
  font: inherit; font-size: var(--fs-14); font-weight: 500;
  white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--brand-600); color: var(--on-brand); text-decoration: none; }
.btn:active { background: var(--brand-700); box-shadow: none; }
.btn svg { width: 16px; height: 16px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn--ghost { background: var(--surface); color: var(--brand); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }
.btn--quiet { background: transparent; color: var(--text-muted); border-color: transparent; box-shadow: none; }
.btn--quiet:hover { background: var(--surface-3); color: var(--text); }
.btn--danger { background: var(--surface); color: var(--danger); border-color: #e8d3d3; }
.btn--danger:hover { background: var(--danger-bg); color: var(--danger); border-color: #dcb9b9; }
.btn--sm { height: 30px; padding: 0 var(--s3); font-size: var(--fs-13); }
.btn--sm svg { width: 14px; height: 14px; }
.btn--block { width: 100%; }

/* --- Formularios --- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.form-grid > * { min-width: 0; }
.field-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-group--full { grid-column: 1 / -1; }
.field-group > label {
  font-size: var(--fs-13); font-weight: 500; color: var(--text);
}

.field {
  width: 100%; min-width: 0;
  min-height: 40px; padding: 9px var(--s3);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-14);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field:hover { border-color: #bcc6d6; }
.field:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.field::placeholder { color: var(--text-subtle); }
textarea.field { resize: vertical; line-height: 1.6; min-height: 84px; }
select.field {
  appearance: none; padding-right: var(--s8);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6b7c' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right var(--s3) center;
  /* El título de una plantilla de consentimiento es largo de verdad
     («Información sobre protección de datos personales v1.0») y a 414px no
     cabe. Sin esto el texto se sale de la caja: en el móvil se lee cortado a
     mitad de letra, sin ninguna señal de que sigue. Con la elipsis se corta
     donde toca y se entiende. Es la regla 2 del sistema (quien desborda,
     recorta) aplicada a un control de formulario. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
input[type="search"].field { padding-left: var(--s10); }

.search {
  position: relative; min-width: 0;
}
.search svg {
  position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-subtle); pointer-events: none;
}

.help { font-size: var(--fs-12); color: var(--text-muted); }
.errors { font-size: var(--fs-13); color: var(--danger); margin: 0; padding-left: 16px; }
.errors--flat { list-style: none; padding: 0; }
.field-error .field { border-color: var(--danger); }
.field-error .field:focus { box-shadow: 0 0 0 3px rgba(178, 58, 58, .14); }

.checkline { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; font-size: var(--fs-14); }
.checkline input[type="checkbox"] { accent-color: var(--brand); width: 16px; height: 16px; flex: none; }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s2) var(--s4); }
.checks ul { list-style: none; margin: 0; padding: 0; display: contents; }
.checks li { display: flex; min-width: 0; }
.checks label {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-14); cursor: pointer; min-width: 0;
}
.checks input[type="checkbox"] { accent-color: var(--brand); width: 16px; height: 16px; flex: none; }

.form-actions {
  display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  margin-top: var(--s4); padding: var(--s4) 0 0;
  border-top: 1px solid var(--border);
}

/* --- Tablas: regla 3 --- */
.table-scroll {
  width: 100%; min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  font-size: var(--fs-11); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-subtle);
  white-space: nowrap;
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow-wrap: break-word;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.is-archived { opacity: .55; }
.table--fixed { table-layout: fixed; }
.table .cell-main { font-weight: 500; color: var(--text); display: block; overflow-wrap: break-word; }
.table a.cell-main:hover { color: var(--brand); text-decoration: none; }
.table .cell-sub { display: block; font-size: var(--fs-12); color: var(--text-muted); overflow-wrap: break-word; }
.table .cell-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table .cell-actions { text-align: right; white-space: nowrap; }

/* --- Chips / etiquetas de estado --- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  height: 24px; padding: 0 var(--s2);
  border-radius: var(--r-full);
  background: var(--surface-3); color: var(--text-muted);
  font-size: var(--fs-12); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip--brand { background: var(--brand-50); color: var(--brand); }
.chip--ok { background: var(--ok-bg); color: var(--ok); }
.chip--pending { background: var(--pending-bg); color: var(--pending); }
.chip--danger { background: var(--danger-bg); color: var(--danger); }
.chip--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip svg { width: 13px; height: 13px; }

.tag {
  display: inline-flex; align-items: center;
  padding: 3px var(--s2);
  border-radius: var(--r-sm);
  background: var(--brand-50); color: var(--brand);
  font-size: var(--fs-12); font-weight: 500;
  max-width: 100%; overflow-wrap: anywhere;
}

/* --- Avatar --- */
.avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  background: var(--brand-50); color: var(--brand);
  border: 1px solid var(--brand-100);
  display: grid; place-items: center;
  font-size: var(--fs-13); font-weight: 600;
}
.avatar--lg { width: 52px; height: 52px; flex-basis: 52px; font-size: var(--fs-18); }
.avatar--sm { width: 30px; height: 30px; flex-basis: 30px; font-size: var(--fs-11); }

/* --- Avisos --- */
.banner {
  display: flex; gap: var(--s3); min-width: 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-14);
}
.banner > svg { width: 18px; height: 18px; margin-top: 2px; color: var(--brand); }
.banner > div { min-width: 0; overflow-wrap: anywhere; }
.banner--alert { background: var(--pending-bg); border-color: #f0dfc2; border-left-color: var(--pending); }
.banner--alert > svg { color: var(--pending); }
.banner--info { background: var(--brand-50); border-color: var(--brand-100); }

.messages { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s2); }
.messages li {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--r-md); background: var(--surface);
  font-size: var(--fs-14); box-shadow: var(--shadow-sm);
  overflow-wrap: anywhere;
}
.messages li.success { border-left-color: var(--ok); }
.messages li.error { border-left-color: var(--danger); }
.messages li.warning { border-left-color: var(--pending); }

/* --- Estado vacío --- */
.empty { text-align: center; padding: var(--s10) var(--s6); color: var(--text-muted); }
.empty__icon {
  width: 44px; height: 44px; margin: 0 auto var(--s3);
  display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--surface-3); color: var(--text-subtle);
}
.empty__icon svg { width: 22px; height: 22px; }
.empty h3 { color: var(--text); margin-bottom: var(--s1); }
.empty p { font-size: var(--fs-13); max-width: 46ch; margin-inline: auto; }

/* --- Listas de datos --- */
.dl { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; font-size: var(--fs-14); }
.dl dt { color: var(--text-muted); font-size: var(--fs-13); min-width: 0; overflow-wrap: anywhere; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* En el raíl estrecho, etiqueta encima del dato: en 118px no cabe un correo. */
.dl--stacked { grid-template-columns: minmax(0, 1fr); gap: 0; }
.dl--stacked dt { margin-top: var(--s3); }
.dl--stacked dt:first-child { margin-top: 0; }
.dl--stacked dd { font-weight: 500; }

.note-block { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-14); line-height: 1.65; min-width: 0; }
.note-block:empty::before { content: "—"; color: var(--text-subtle); }

/* --- Nota SOAP --- */
.soap { display: grid; gap: var(--s4); min-width: 0; }
.soap__item { border-left: 2px solid var(--brand-100); padding-left: var(--s4); min-width: 0; }
.soap__label {
  font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 2px;
}
.soap__item--ok { border-left-color: #bfdfd0; }
.soap__item--ok .soap__label { color: var(--ok); }

/* --- Cronología de sesiones --- */
.timeline { display: grid; gap: var(--s4); min-width: 0; }
.timeline__item {
  min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); padding: var(--s4);
}
.timeline__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); min-width: 0;
}
.timeline__head > * { min-width: 0; }
.timeline__date { font-weight: 600; overflow-wrap: anywhere; }
.timeline__n { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-subtle); }

/* --- Barra EVA en línea --- */
.eva { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); white-space: nowrap; }
.eva__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eva__bar { width: 56px; height: 5px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; flex: none; }
.eva__fill { display: block; height: 100%; border-radius: var(--r-full); background: var(--eva-before); }
.eva__fill--after { background: var(--eva-after); }
.eva__arrow { color: var(--text-subtle); }

/* --- Gráfico de evolución del dolor (dumbbell) ---------------------------
   Forma elegida por el trabajo del dato: «antes → después por elemento».
   Un solo tono, dos pasos (rampa ordinal validada). HTML+CSS en vez de SVG:
   se adapta al ancho sin recalcular viewBox y el tooltip es nativo. */
.dumbbell { min-width: 0; font-size: var(--fs-13); }
.dumbbell__scale {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px;
  gap: var(--s3); align-items: center;
  font-size: var(--fs-11); color: var(--text-subtle);
}
.dumbbell__ticks { position: relative; height: 14px; min-width: 0; }
/* Los extremos se anclan al borde en vez de centrarse en 0% y 100%: si no,
   media cifra del «0» y del «10» queda fuera de la caja. */
.dumbbell__tick { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.dumbbell__tick--start { left: 0; transform: none; }
.dumbbell__tick--end { left: auto; right: 0; transform: none; }
.dumbbell__row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px;
  gap: var(--s3); align-items: center;
  padding: 5px 0;
}
.dumbbell__label { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; }
.dumbbell__track { position: relative; height: 22px; min-width: 0; }
.dumbbell__grid { position: absolute; inset: 0; }
.dumbbell__grid span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid-line); }
.dumbbell__link {
  position: absolute; top: 50%; height: 2px; transform: translateY(-50%);
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--eva-after), var(--eva-before));
}
.dumbbell__dot {
  position: absolute; top: 50%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  /* Anillo de 2px del color de la superficie: la marca sigue legible cuando
     los dos puntos se solapan (dolor que no cambia). */
  box-shadow: 0 0 0 2px var(--surface);
}
.dumbbell__dot--before { background: var(--eva-before); z-index: 2; }
.dumbbell__dot--after { background: var(--eva-after); z-index: 3; }
.dumbbell__delta { font-family: var(--font-mono); font-size: var(--fs-12); text-align: right; white-space: nowrap; }
.dumbbell__delta--down { color: var(--ok); }
.dumbbell__delta--flat { color: var(--text-subtle); }
.dumbbell__delta--up { color: var(--danger); }
.dumbbell__legend {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-12); color: var(--text-muted);
}
.dumbbell__key { display: inline-flex; align-items: center; gap: 6px; }
.dumbbell__key i { width: 10px; height: 10px; border-radius: 50%; flex: none; }

details.table-view { margin-top: var(--s3); }
details.table-view > summary {
  cursor: pointer; font-size: var(--fs-12); color: var(--text-muted);
  padding: var(--s1) 0; list-style: none;
}
details.table-view > summary::-webkit-details-marker { display: none; }
details.table-view > summary::before { content: "▸ "; }
details.table-view[open] > summary::before { content: "▾ "; }
details.table-view > summary:hover { color: var(--brand); }

/* --- Esquema corporal --- */
.bodychart { display: grid; gap: var(--s4); min-width: 0; }
.bodychart__views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); min-width: 0; }
.bodychart__view {
  min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); padding: var(--s3) var(--s2);
}
.bodychart__title {
  font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-subtle);
  text-align: center; margin-bottom: var(--s2);
}
/* Ojo: esta regla estaba escrita como `.bodychart svg` y, al aparecer después
   de `.btn svg` con la misma especificidad, ganaba también para los iconos de
   los botones que hay dentro del esquema. El icono de «quitar marca» pasaba a
   width:100% → el SVG caía a su tamaño por defecto (300px) → reventaba la
   tarjeta. Se acota a los diagramas de verdad. */
.bodychart__view > svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.bodychart .silhouette { fill: #e7ecf3; stroke: #c3cfdf; stroke-width: .9; }
.bodychart .detail { fill: none; stroke: #ccd7e5; stroke-width: .7; }
.bodychart .region { fill: transparent; stroke: none; transition: fill var(--t-fast); }
.bodychart[data-editable="true"] .region { cursor: crosshair; }
.bodychart[data-editable="true"] .region:hover { fill: var(--brand); fill-opacity: .14; }
.bodychart .mark { cursor: pointer; }
.bodychart .mark text { font-family: var(--font-mono); font-size: 7px; fill: #fff; font-weight: 600; }
.bodychart__legend {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
  font-size: var(--fs-12); color: var(--text-muted); min-width: 0;
}
.bodychart__key { display: inline-flex; align-items: center; gap: 5px; }
.bodychart__key i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bodychart__hint { font-size: var(--fs-12); color: var(--text-subtle); text-align: center; margin: 0; }

/* Lista de marcas: en el raíl estrecho una tabla no cabe, así que cada marca
   es una fila flexible que se apila sola. */
.marklist { display: grid; gap: var(--s2); min-width: 0; list-style: none; margin: 0; padding: 0; }
.marklist__item {
  display: flex; align-items: flex-start; gap: var(--s3); min-width: 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.marklist__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 5px; }
.marklist__body { min-width: 0; flex: 1 1 auto; }
.marklist__title { font-size: var(--fs-13); font-weight: 500; overflow-wrap: anywhere; }
.marklist__meta { font-size: var(--fs-12); color: var(--text-muted); overflow-wrap: anywhere; }
.marklist__score {
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-muted);
  flex: none; white-space: nowrap;
}
.marklist__remove { flex: none; }

/* --- Firma --- */
.signature-pad {
  position: relative; overflow: hidden; min-width: 0;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast);
}
.signature-pad.has-ink { border-style: solid; border-color: var(--brand-300); }
.signature-pad canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; }
.signature-pad__baseline {
  position: absolute; left: 8%; right: 8%; bottom: 46px;
  border-bottom: 1px solid var(--border); pointer-events: none;
}
.signature-pad__ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-subtle); font-size: var(--fs-14); pointer-events: none; text-align: center;
  padding: var(--s4);
}
.signature-pad.has-ink .signature-pad__ph { display: none; }

.consent-text {
  max-height: 340px; overflow-y: auto; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  background: var(--surface-2);
  font-size: var(--fs-14); line-height: 1.7;
}
.consent-text p { margin: 0 0 var(--s3); overflow-wrap: anywhere; }

.steps { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }
.steps__n {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: var(--on-brand);
  font-size: var(--fs-12); font-weight: 600;
}

/* --- Paginación --- */
.pagination {
  display: flex; gap: var(--s2); align-items: center; justify-content: center;
  flex-wrap: wrap; padding: var(--s4); font-size: var(--fs-13);
}
.pagination a, .pagination span {
  min-height: 32px; display: inline-flex; align-items: center;
  padding: 0 var(--s3); border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
}
.pagination a:hover { background: var(--brand-50); border-color: var(--brand-300); text-decoration: none; }
.pagination .current { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: 600; }

/* --- Diálogo --- */
dialog.modal {
  width: min(440px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg);
}
dialog.modal::backdrop { background: rgba(16, 27, 43, .42); backdrop-filter: blur(2px); }
dialog.modal .modal__body { padding: var(--s5); min-width: 0; }
dialog.modal .modal__footer {
  display: flex; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s4) var(--s5); border-top: 1px solid var(--border); background: var(--surface-2);
}

/* --- Indicador de carga de la búsqueda --- */
.spinner { display: none; font-size: var(--fs-13); color: var(--text-subtle); }
.is-loading .spinner { display: inline; }

/* --- Acceso --- */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); background: var(--bg); }
.login-card { width: 100%; max-width: 392px; min-width: 0; }
.login-logo { display: grid; place-items: center; margin-bottom: var(--s6); }
.login-logo img { width: 84px; height: 84px; }
.login-card .card__body { padding: var(--s8); }
.login-foot {
  margin: var(--s5) 0 0; font-size: var(--fs-12); color: var(--text-subtle);
  text-align: center; line-height: 1.6;
}

/* --- Aviso de servidor de demostración --- */
.demo-strip {
  position: sticky; top: 0; z-index: 60;
  padding: 7px var(--s4);
  background: var(--pending); color: #fff;
  font-size: var(--fs-12); text-align: center; line-height: 1.4;
}
.demo-strip strong { letter-spacing: .06em; }
.demo-strip + .app .sidebar, .demo-strip + .app .page-header { top: 30px; }

/* ============================== 6. RESPONSIVE ============================== */
@media (max-width: 1100px) {
  .grid--rail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 100%; }
  .app { flex-direction: column; }
  .sidebar {
    position: static; height: auto; flex: none;
    flex-direction: row; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s4);
    border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(90deg, #1e3d68, var(--brand));
  }
  .sidebar__brand { padding: 0; }
  .sidebar__names { display: none; }
  .nav { flex-direction: row; gap: var(--s1); margin-left: auto; }
  .nav__label { display: none; }
  .nav a { height: 34px; padding: 0 var(--s2); }
  .nav a.is-active::before { display: none; }
  .nav__text, .nav__soon { display: none; }
  .sidebar__user { margin: 0; padding: 0; background: none; border: none; }
  .sidebar__user .avatar, .sidebar__user-info { display: none; }
  .grid--2, .grid--3, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .container { padding: 0 var(--s4); }
  .content { padding: var(--s4) 0 var(--s10); }
  .page-header { position: static; backdrop-filter: none; background: var(--surface); }
  .page-header__inner { align-items: flex-start; }
  .page-header__actions { width: 100%; }
  .page-header__actions .btn { flex: 1 1 auto; }
  .card__body, .card__header, .card__footer { padding-left: var(--s4); padding-right: var(--s4); }
  .table { min-width: 560px; }        /* con .table-scroll: se desplaza, no se aplasta */
}

@media (max-width: 700px) {
  .only-sm { display: inline; }
  .hide-sm { display: none !important; }
  .table .col-secondary { display: none; }
  .table { min-width: 0; }
  .table th, .table td { padding: var(--s3); }
  .bodychart__views { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dumbbell__scale, .dumbbell__row { grid-template-columns: 28px minmax(0, 1fr) 44px; gap: var(--s2); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-card .card__body { padding: var(--s5); }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}


/* ------------------------------------------------------------------------
   Tablas apiladas en el móvil (`.table--stack`)
   ------------------------------------------------------------------------
   En un teléfono, una tabla de seis columnas no se lee: o se desplaza en
   horizontal o parte las palabras por la mitad («Compan / y, Marta»). Por
   debajo de 700px estas tablas se convierten en una lista de fichas: cada
   fila es un bloque y cada celda una línea. Es el mismo HTML; sólo cambia
   la presentación, así que no hay markup duplicado que mantener.
   ---------------------------------------------------------------------- */
@media (max-width: 700px) {
  .table--stack { min-width: 0; }
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr {
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
  }
  .table--stack tr:last-child { border-bottom: none; }
  .table--stack td { border: none; padding: 2px 0; }
  .table--stack td:empty { display: none; }
  .table--stack td.cell-num { text-align: left; }
  .table--stack .cell-actions { text-align: left; margin-top: var(--s2); }
  .table--stack td:has(> .chip) { margin-top: var(--s2); }
}

/* ============================== 7. IMPRESIÓN ============================== */
@media print {
  .sidebar, .page-header__actions, .form-actions, .btn, .marklist__remove { display: none !important; }
  body { background: #fff; }
  .app { display: block; }
  .card { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
  .page-header { position: static; border-bottom: 2px solid var(--brand); }
  .container { max-width: none; padding: 0; }
}