/* ═══════════════════════════════════════════════════════════════════════════
   BA Genetics · componentes del panel · mobile-first
   ═══════════════════════════════════════════════════════════════════════════

   Sustituye a `base.css` (867 líneas) y `header.css` (416) y absorbe las 228
   que vivían dentro de `templates/reports/list.html`. Depende de `tokens.css`
   y no escribe ningún color, tamaño ni espaciado literal.

   Mobile-first de verdad: las reglas sin `@media` son las del teléfono y los
   `@media (min-width: …)` **añaden**. La versión anterior tenía cuatro media
   queries, las cuatro `max-width`, y una de ellas deshacía sin saberlo el
   objetivo táctil de 44 px que otra había fijado veinte líneas antes.

   Dos decisiones que gobiernan casi todo el fichero:

   1. **Ningún dato se esconde en el móvil.** Se retira `col-hide-mobile`. Las
      tablas usan un solo HTML: en el teléfono cada registro se apila con su
      etiqueta delante (`td[data-label]`) y a partir de 700 px vuelve a ser una
      tabla. Se lee igual de bien en las dos y no falta nada en ninguna.

   2. **La profundidad la dan los filetes, no las sombras.** Papel blanco sobre
      fondo hueso, líneas de 1 px, radios de 4 px y un filete superior de 2 px
      que codifica el estado igual que los niveles de los informes. Sin
      degradados, sin desenfoques, sin sombras de color: es lo que separa esto
      de una plantilla.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Hueco para la barra inferior del móvil, incluida la zona segura del
     iPhone. En pantallas grandes la barra no existe y el hueco se retira. */
  padding-bottom: calc(var(--h-bottomnav) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 {
  font-family: var(--f-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-title);
  color: var(--c-ink);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3, h4 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
small { font-size: var(--fs-small); }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-6) 0; }

a { color: var(--c-navy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Foco visible y coherente en todo el panel: un anillo, siempre el mismo.
   Solo con `:focus-visible`, para que el ratón no lo dispare. */
:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

img, svg { max-width: 100%; }
table { border-collapse: collapse; }

/* Salto al contenido: primer tabulador de la página, invisible hasta el foco. */
.skip-link {
  position: absolute; left: var(--sp-2); top: calc(-1 * var(--tap) - 8px);
  z-index: 100; padding: var(--sp-2) var(--sp-4);
  background: var(--c-navy); color: var(--c-on-navy);
  border-radius: var(--r); transition: top var(--t) var(--ease);
}
.skip-link:focus { top: var(--sp-2); text-decoration: none; }

/* ── Utilidades ─────────────────────────────────────────────────────────── */
.muted { color: var(--c-ink-2); }
.hint  { color: var(--c-ink-2); font-size: var(--fs-small); }
.small { font-size: var(--fs-small); }
.danger { color: var(--c-red-ink); }

/* Cifras: mono tabular para que las columnas se alineen y se puedan comparar
   de un vistazo. Es lo que hace que un panel clínico parezca clínico. */
.num, .data-table .num, td.num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Etiqueta versalita en mono: la firma tipográfica de los informes, traída al
   portal. Encabeza secciones sin gritar como un h2. */
.kicker, .card-h2, .wizard-h2, .reports-head h2 {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
}
.meta, .sub { color: var(--c-ink-2); font-size: var(--fs-small); }
td > .sub { display: block; }
.col-right  { text-align: right; }
.col-center { text-align: center; }
/* `col-hide-mobile` queda neutralizada a propósito: esconder columnas en el
   teléfono era la causa de que el paciente viera menos datos desde el móvil.
   Se mantiene como regla vacía para que ninguna plantilla que aún la lleve
   pierda información mientras se limpia. */
.col-hide-mobile { }

/* ── Estructura de página ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-8);
}
.page-head { margin-bottom: var(--sp-5); }
.page-head h1 { margin-bottom: var(--sp-1); }
.page-head p  { color: var(--c-ink-2); font-size: var(--fs-small); margin: 0; }

.back-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: var(--tap);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--c-ink-2);
}
.back-link:hover { color: var(--c-navy); }

@media (min-width: 700px) {
  .container { padding: var(--sp-6) var(--sp-6) var(--sp-9); }
  .page-head { margin-bottom: var(--sp-6); }
}

/* ── Barra superior ─────────────────────────────────────────────────────────
   Navy plano. Se retira el «glassmorphism heredado de la home»: el desenfoque
   y el degradado eran justo lo que hacía que el panel pareciera una plantilla,
   y además cuestan pintado en un móvil modesto. */
.bag-topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--c-navy-2);
  color: var(--c-ink-on-dark);
  border-bottom: 1px solid rgb(255 255 255 / 0.10);
}
.bag-topbar-inner {
  max-width: var(--w-content); margin: 0 auto;
  min-height: var(--h-topbar);
  padding: 0 var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
}
.bag-brand { display: flex; align-items: center; min-height: var(--tap); margin-right: auto; }
.bag-brand:hover { text-decoration: none; }
.bag-brand-wm {
  display: block;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; color: var(--c-ink-on-dark);
}
.bag-brand-sub {
  display: none;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.62);
}
.bag-topbar-right { display: flex; align-items: center; gap: var(--sp-2); }

/* La navegación principal del escritorio se oculta en el móvil: allí manda la
   barra inferior, que es el gesto que la gente ya tiene aprendido. */
.bag-nav { display: none; }
.bag-nav-toggle { display: none; }

.bag-nav a, .bag-member-switch > summary {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--sp-3);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
  border-bottom: 2px solid transparent;
}
.bag-nav a:hover, .bag-member-switch > summary:hover {
  color: var(--c-ink-on-dark); text-decoration: none;
}
.bag-nav a.active { color: var(--c-ink-on-dark); border-bottom-color: var(--c-ink-on-dark); }

/* Avatar y menú de usuario */
.bag-avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.22);
  color: var(--c-ink-on-dark);
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; cursor: pointer; list-style: none;
}
.bag-avatar::-webkit-details-marker { display: none; }
.bag-usermenu, .bag-member-switch { position: relative; }
.bag-usermenu-panel, .bag-member-switch-panel {
  position: absolute; right: 0; top: calc(100% + var(--sp-2));
  min-width: 240px; z-index: 50;
  background: var(--c-paper); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-2);
}
.bag-member-switch-panel { left: 0; right: auto; }
.bag-usermenu-header { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-2); }
.bag-usermenu-name { font-weight: 600; }
.bag-usermenu-email { color: var(--c-ink-2); font-size: var(--fs-small); word-break: break-all; }
.bag-usermenu-item, .bag-member-switch-item {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  width: 100%; min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 0; border-radius: var(--r); background: none;
  color: var(--c-ink); font: inherit; text-align: left; cursor: pointer;
}
.bag-usermenu-item:hover, .bag-member-switch-item:hover { background: var(--c-paper-2); text-decoration: none; }
.bag-usermenu-item--danger { color: var(--c-red-ink); }
.bag-member-switch-item small { color: var(--c-ink-3); font-size: var(--fs-small); }
.bag-member-switch-item.active { background: var(--c-navy-soft); font-weight: 600; }
.bag-member-switch-add { border-top: 1px solid var(--c-line); margin-top: var(--sp-1); border-radius: 0 0 var(--r) var(--r); }
.bag-usermenu-form { margin: 0; }

.bag-btn-cta {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--sp-4); border-radius: var(--r);
  background: var(--c-paper); color: var(--c-navy-2); font-weight: 600;
}
.bag-btn-cta:hover { filter: brightness(0.94); text-decoration: none; }
.bag-btn-link { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; min-height: var(--tap); }

.bag-impersonate-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-amber-bg); color: var(--c-amber);
  border-bottom: 1px solid var(--c-amber);
  font-size: var(--fs-small);
}
.bag-impersonate-form { margin: 0; }

@media (min-width: 900px) {
  .bag-nav { display: flex; align-items: center; gap: var(--sp-1); }
  .bag-brand-sub { display: block; }
  .bag-brand { margin-right: var(--sp-6); }
  .bag-topbar-inner { gap: var(--sp-4); }
  .bag-topbar-right { margin-left: auto; }
}

/* ── Barra inferior del móvil ───────────────────────────────────────────────
   Cuatro destinos, el gesto del pulgar. No existía: para ver el informe de un
   hijo hacían falta cuatro saltos desde el inicio. Se oculta en pantallas
   grandes, donde la navegación superior ya está a la vista. */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: var(--h-bottomnav);
  color: var(--c-ink-3); text-decoration: none;
  border-top: 2px solid transparent;
}
.bottomnav a:hover { text-decoration: none; }
.bottomnav svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.bottomnav span {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em;
}
.bottomnav a[aria-current="page"] { color: var(--c-navy); border-top-color: var(--c-navy); }
/* El contador de pendientes sí es un aviso, y ahí el ámbar sí significa lo que
   significa en el informe: algo que requiere atención pero no bloquea. */
.bottomnav .bn-count {
  position: absolute; transform: translate(14px, -10px);
  min-width: 17px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--c-amber); color: #1A1205;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}

@media (min-width: 900px) {
  .bottomnav { display: none; }
  body { padding-bottom: 0; }
}

/* ── Pestañas de paciente ──────────────────────────────────────────────────
   Desplazables en el móvil, con el filete de la pestaña activa. */
.patient-head { margin-bottom: var(--sp-3); }
.patient-h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); }

.tabs {
  display: flex; gap: var(--sp-1);
  margin: 0 0 var(--sp-5);
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-3);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--c-ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.tab:hover { color: var(--c-navy); text-decoration: none; }
.tab.active { color: var(--c-navy); border-bottom-color: var(--c-navy); font-weight: 500; }
.tab-disabled { color: var(--c-ink-3); opacity: 0.5; cursor: not-allowed; }

/* ── Tarjetas ───────────────────────────────────────────────────────────────
   Papel sobre hueso, filete de 1 px, sin sombra. El filete superior de 2 px es
   opcional y codifica estado con el mismo lenguaje de los informes. */
.card, .wizard-card, .slot-card, .progress-card, .reports-card, .fam-zone, .consent-box {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card--rule { border-top: 2px solid var(--c-navy); }
.card--ok   { border-top: 2px solid var(--c-green); }
.card--warn { border-top: 2px solid var(--c-amber); }
.card--stop { border-top: 2px solid var(--c-red); }

@media (min-width: 700px) {
  .card, .wizard-card, .slot-card, .progress-card, .reports-card, .fam-zone, .consent-box {
    padding: var(--sp-5);
  }
}

/* Indicadores grandes */
.kpi-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--sp-5);
}
.kpi-card {
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-top: 2px solid var(--c-navy);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
}
.kpi-label {
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--c-ink-3);
}
.kpi-value {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 4vw, 32px); font-weight: 700; line-height: 1.05;
  color: var(--c-navy); margin-top: var(--sp-1);
}
@media (min-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); }
}

/* ── Botones ────────────────────────────────────────────────────────────────
   Una sola definición y tres variantes. Antes había cinco (`btn`, `btn-sm`,
   `btn-link`, `bag-btn-cta`, `btn-logout`) con tamaños y radios distintos. */
/* El selector es `.btn` a secas, sin `button.btn` ni `a.btn`: al calificarlo
   con el elemento pasaba a pesar (0,1,1) y le ganaba a `.btn-primary` (0,1,0),
   de modo que `class="btn btn-primary"` en un <button> salía con el fondo
   claro de la variante neutra. Ningún botón primario del panel era navy. */
.btn, .btn-primary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-4);
  font-family: var(--f-body); font-size: var(--fs-body); font-weight: 500;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--c-paper-2); text-decoration: none; }
.btn-primary { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-on-navy); }
.btn-primary:hover { filter: brightness(1.12); background: var(--c-navy); color: var(--c-on-navy); }
.btn-ghost { background: transparent; border-color: var(--c-line-strong); }
.btn-danger { background: var(--c-red); border-color: var(--c-red); color: #FFFFFF; }
.btn-danger:hover { filter: brightness(1.1); background: var(--c-red); color: #FFFFFF; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn.is-loading { opacity: 0.65; cursor: progress; pointer-events: none; }

/* El botón «pequeño» sigue siendo táctil: el tamaño baja en tipografía y
   holgura, nunca por debajo del objetivo de 44 px. Esa era la contradicción
   entre las líneas 476 y 776 del CSS anterior. */
.btn-sm {
  min-height: var(--tap); padding: 0 var(--sp-3);
  font-size: var(--fs-small);
}
@media (min-width: 700px) {
  .btn-sm { min-height: 32px; }
}

/* Enlace de acción: texto, sin caja, pero con área táctil completa. */
.btn-link, .btn-link-action, .wizard-action-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: var(--tap);
  background: none; border: 0; padding: 0;
  color: var(--c-navy); font: inherit; font-weight: 500; cursor: pointer;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--c-line); border-radius: var(--r);
  background: var(--c-paper); color: var(--c-ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--c-paper-2); color: var(--c-navy); }
/* Archivar es la única acción destructiva del cluster: se distingue en color y
   solo se pinta de rojo al apuntarla, para que no domine la fila. */
.icon-btn.danger { color: var(--c-ink-3); }
.icon-btn.danger:hover { background: var(--c-red-bg); border-color: color-mix(in srgb, var(--c-red) 40%, transparent); color: var(--c-red-ink); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-form { display: inline; margin: 0; }
.action-cluster { display: inline-flex; gap: var(--sp-1); align-items: center; }
.btn-row, .form-actions, .wizard-actions, .slot-actions, .consent-actions,
.fam-actions, .fam-report-actions, .generate-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}
@media (min-width: 700px) {
  .icon-btn { width: 34px; height: 34px; }
}

/* ── Formularios ────────────────────────────────────────────────────────────
   16 px sin excepción: por debajo, iOS amplía la página al enfocar el campo y
   el usuario tiene que reencuadrar a mano. Era el caso en todo el panel. */
label { display: block; }
.wizard-label, .form-row label {
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-1);
}
input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--f-body); font-size: var(--fs-input);
  color: var(--c-ink); background: var(--c-paper);
  border: 1px solid var(--c-line-strong); border-radius: var(--r);
}
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--c-navy);
}
textarea { min-height: 120px; padding: var(--sp-3); resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--c-navy); }
input[type="file"] { padding: var(--sp-2); background: var(--c-paper-2); }
.form-row, .wizard-form label, .profile-form label { margin-bottom: var(--sp-4); }
.form-grid, .wizard-grid, .reports-form {
  display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 700px) {
  .form-grid, .wizard-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .reports-form { grid-auto-flow: column; grid-auto-columns: max-content; }
}
.consent-check { display: flex; gap: var(--sp-3); align-items: flex-start; }
.consent-check input { flex: 0 0 auto; margin-top: 3px; }

/* ── Registros: tabla en el escritorio, lista en el móvil ───────────────────
   El mismo HTML sirve para las dos. En el teléfono cada `<tr>` es una ficha y
   cada celda muestra su etiqueta (`data-label`) delante del valor; la celda
   sin etiqueta es el título del registro. A partir de 700 px vuelve a ser una
   tabla con su cabecera. Ninguna columna se oculta en ningún ancho. */
.data-table, .reports-table, .slot-table, .wizard-table, .packs-table, .patients-table {
  display: block;
  width: 100%;
}
.data-table thead, .reports-table thead, .slot-table thead,
.wizard-table thead, .packs-table thead, .patients-table thead { display: none; }
.data-table tbody, .data-table tr, .data-table td,
.reports-table tbody, .reports-table tr, .reports-table td { display: block; }

.data-table tr, .reports-table tr, .slot-table tr, .wizard-table tr,
.packs-table tr, .patients-table tr {
  display: block;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
}
.data-table td, .reports-table td, .slot-table td, .wizard-table td,
.packs-table td, .patients-table td {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-1) 0;
  border: 0;
  text-align: left;
}
/* La etiqueta de cada celda en el móvil. */
.data-table td[data-label]::before, .reports-table td[data-label]::before,
.slot-table td[data-label]::before, .wizard-table td[data-label]::before,
.packs-table td[data-label]::before, .patients-table td[data-label]::before {
  content: attr(data-label);
  flex: 0 0 auto;
  font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 400;
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--c-ink-3);
}
/* La celda sin etiqueta encabeza la ficha. */
.data-table td:not([data-label]), .reports-table td:not([data-label]),
.slot-table td:not([data-label]), .patients-table td:not([data-label]),
.packs-table td:not([data-label]) {
  display: block;
  font-weight: 600;
  padding-bottom: var(--sp-2);
}
.data-table td:empty { display: none; }
.data-table tr.row-archived { opacity: 0.62; }
.data-table tr.cat td { background: none; }

@media (min-width: 700px) {
  .data-table, .reports-table, .slot-table, .wizard-table, .packs-table, .patients-table {
    display: table; border-collapse: collapse;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
  }
  .data-table thead, .reports-table thead, .slot-table thead,
  .wizard-table thead, .packs-table thead, .patients-table thead { display: table-header-group; }
  .data-table tbody, .reports-table tbody, .slot-table tbody,
  .wizard-table tbody, .packs-table tbody, .patients-table tbody { display: table-row-group; }
  .data-table tr, .reports-table tr, .slot-table tr, .wizard-table tr,
  .packs-table tr, .patients-table tr {
    display: table-row;
    border: 0; border-radius: 0; padding: 0; margin: 0; background: none;
  }
  .data-table th, .reports-table th, .slot-table th, .wizard-table th,
  .packs-table th, .patients-table th {
    font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 500;
    letter-spacing: var(--tr-mono); text-transform: uppercase;
    color: var(--c-ink-3); text-align: left;
    background: var(--c-paper-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--c-line);
    white-space: nowrap;
  }
  .data-table td, .reports-table td, .slot-table td, .wizard-table td,
  .packs-table td, .patients-table td {
    display: table-cell;
    padding: var(--sp-3);
    border-bottom: 1px solid var(--c-line);
    vertical-align: middle;
    font-weight: 400;
  }
  .data-table td:not([data-label]), .reports-table td:not([data-label]),
  .slot-table td:not([data-label]), .patients-table td:not([data-label]),
  .packs-table td:not([data-label]) { display: table-cell; font-weight: 400; padding-bottom: var(--sp-3); }
  /* Las etiquetas se apagan con `td[data-label]::before`, no con `td::before`:
     el selector que las enciende lleva el atributo, y un atributo pesa más que
     una clase. Con `td::before` la regla existía pero perdía la especificidad,
     así que a 768 px la tabla salía en columnas Y con las etiquetas dentro
     («PARENTESCO Titular», «EDAD 51»). */
  .data-table td[data-label]::before, .reports-table td[data-label]::before,
  .slot-table td[data-label]::before, .wizard-table td[data-label]::before,
  .packs-table td[data-label]::before, .patients-table td[data-label]::before { content: none; }
  .data-table tbody tr:last-child td { border-bottom: 0; }
  .data-table.compact td, .data-table.compact th { padding: var(--sp-2) var(--sp-3); }
  .data-table td.col-right, .data-table th.col-right { text-align: right; }
  .data-table td.col-center, .data-table th.col-center { text-align: center; }
  .data-table tbody tr:hover td { background: var(--c-paper-2); }
}

/* ── Distintivos ───────────────────────────────────────────────────────────
   Todos comparten forma: mono, versalitas, radio pequeño. Cambia el color. */
.status, .wizard-pill, .role-pill, .pill-mono, .badge, .dob-badge, .date-badge,
.report-badge, .level-pill, .fmt-badge, .pill-current {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px var(--sp-2);
  font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 400;
  letter-spacing: 0.04em;
  border-radius: var(--r-sm);
  background: var(--c-paper-2); color: var(--c-ink-2);
  border: 1px solid var(--c-line);
  white-space: nowrap;
}
.status-ready,   .wizard-pill--ok, .wizard-status--ok { background: var(--c-green-bg);  color: var(--c-green-ink);  border-color: color-mix(in srgb, var(--c-green) 28%, transparent); }
.status-generating, .wizard-pill--pending             { background: var(--c-amber-bg);  color: var(--c-amber-ink);  border-color: color-mix(in srgb, var(--c-amber) 30%, transparent); }
.status-failed                                        { background: var(--c-red-bg);    color: var(--c-red-ink);    border-color: color-mix(in srgb, var(--c-red) 28%, transparent); }
.status-archived                                      { background: var(--c-gray-bg);   color: var(--c-ink-3); }
.role-pill, .pill-current { background: var(--c-navy-soft); color: var(--c-navy); border-color: color-mix(in srgb, var(--c-navy) 22%, transparent); }
.badge-count {
  justify-content: center; min-width: 22px; padding: 2px var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--c-navy); color: var(--c-on-navy); border-color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}
.dob-badge, .date-badge { font-variant-numeric: tabular-nums; cursor: help; }
.level-pill { color: #fff; border-color: transparent; text-transform: uppercase; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.flashes { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.flash {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-ink-3);
  border-radius: var(--r);
  background: var(--c-paper);
  font-size: var(--fs-small);
}
.flash-success { border-left-color: var(--c-green); background: var(--c-green-bg); color: var(--c-green-ink); }
.flash-error   { border-left-color: var(--c-red);   background: var(--c-red-bg);   color: var(--c-red-ink); }
.flash-info    { border-left-color: var(--c-navy);  background: var(--c-navy-soft); }

/* ── Vacíos ─────────────────────────────────────────────────────────────────
   Un vacío explica qué falta y ofrece la acción; no es un párrafo gris. */
.empty {
  text-align: center; padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg);
  background: var(--c-paper);
}
.empty h3 { margin-bottom: var(--sp-2); }
.empty p { color: var(--c-ink-2); max-width: 46ch; margin: 0 auto var(--sp-4); }

/* ── Familia ────────────────────────────────────────────────────────────── */
.fam-zone-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.fam-zone-head .card-h2 { margin: 0; border: 0; padding: 0; }
.fam-zone-head .btn-link, .card-h2 + .btn-link { font-size: var(--fs-small); }
.fam-me-name { font-family: var(--f-title); font-size: var(--fs-h3); font-weight: 700; }
.fam-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 0; }
.fam-grid { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.fam-card {
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-top: 2px solid var(--c-green);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
}
.fam-card--pending { border-top-color: var(--c-amber); }
.fam-card-name { font-family: var(--f-title); font-weight: 700; font-size: var(--fs-h3); }
.fam-card--add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); min-height: 120px; text-align: center;
  border: 1px dashed var(--c-line-strong); border-top-width: 1px;
  color: var(--c-ink-2);
}
.fam-card--add:hover { background: var(--c-paper-2); text-decoration: none; }
.fam-card-add-plus { font-size: 26px; line-height: 1; color: var(--c-navy); }
@media (min-width: 700px) {
  .fam-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ── Informes ──────────────────────────────────────────────────────────────*/
.reports-head { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: baseline; }
.reports-table-wrap { margin-bottom: var(--sp-4); }
.reports-pager { display: flex; gap: var(--sp-2); align-items: center; justify-content: center; margin-top: var(--sp-4); }
.slot-url {
  font-family: var(--f-mono); font-size: var(--fs-small);
  word-break: break-all; color: var(--c-ink-2);
}
.slot-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; align-items: baseline; }
.wizards-grid { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.wizard-card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.wizard-card-ico { flex: 0 0 auto; width: 26px; height: 26px; color: var(--c-navy); }
/* El título del wizard lleva su icono dentro del <h3>: en fila, no encima. */
.wizard-card-head h3 { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.wizard-card-meta { color: var(--c-ink-2); font-size: var(--fs-small); }
/* Sin datos que mostrar el párrafo se queda vacío y deja un hueco que hace
   que las tres tarjetas del wizard parezcan mal alineadas. */
.wizard-card-meta:empty { display: none; }
.wizard-card-actions { margin-top: var(--sp-3); }
.wizard-page, .reports-page, .slot-page, .profile-page { max-width: var(--w-content); }
@media (min-width: 700px) {
  .wizards-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* ── Progreso (subida de RAW, generación) ──────────────────────────────── */
.progress-h1 { text-align: center; }
.progress-card { text-align: center; }
.progress-bar-track { height: 6px; background: var(--c-paper-2); border-radius: var(--r-pill); overflow: hidden; margin: var(--sp-4) 0 var(--sp-2); }
.progress-bar-fill { height: 100%; background: var(--c-green); transition: width var(--t) var(--ease); }
.progress-msg { color: var(--c-ink-2); font-size: var(--fs-small); }
.progress-done, .progress-error { display: none; margin-top: var(--sp-5); }
.progress-done-line { color: var(--c-green-ink); font-weight: 600; }
.progress-error-msg { color: var(--c-red-ink); font-weight: 600; }
.progress-error-hint, .progress-format { color: var(--c-ink-2); font-size: var(--fs-small); }

/* ── Páginas legales y de pago (extienden base.html) ──────────────────── */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { color: var(--c-navy); }
.legal h2 { color: var(--c-navy); margin-top: var(--sp-7); }
.legal h3 { color: var(--c-navy); margin-top: var(--sp-5); }
.legal-index {
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-8);
  font-size: var(--fs-small); color: var(--c-ink-2);
}
.legal-table { width: 100%; font-size: var(--fs-small); margin: var(--sp-4) 0; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { border: 1px solid var(--c-line); padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; }
.legal-table th { background: var(--c-paper-2); font-weight: 600; }
.pay-result { max-width: 620px; margin: 0 auto; text-align: center; }
.price-cta { display: flex; justify-content: center; margin-top: var(--sp-5); }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--c-line);
  margin-top: var(--sp-8);
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
  color: var(--c-ink-3); font-size: var(--fs-small);
  text-align: center;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); justify-content: center; margin-top: var(--sp-2); }
.footer-legal a { min-height: var(--tap); display: inline-flex; align-items: center; color: var(--c-ink-2); }

/* ── Impresión ─────────────────────────────────────────────────────────────
   El médico imprime la lista de informes y la ficha del paciente. */
@media print {
  .bag-topbar, .bottomnav, .tabs, .footer, .btn, .btn-primary, .icon-btn, .skip-link { display: none !important; }
  body { padding: 0; background: #fff; }
  .card, .data-table { border-color: #ccc; break-inside: avoid; }
  .data-table { display: table !important; }
  .data-table thead { display: table-header-group !important; }
  .data-table tr { display: table-row !important; }
  .data-table td { display: table-cell !important; }
  .data-table td::before { content: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Añadidos del paso de plantillas (07/09/2026)
   ═══════════════════════════════════════════════════════════════════════════*/

/* ── Cabecera: piezas del selector de miembro ─────────────────────────────*/
.bag-brand-mark { display: flex; flex-direction: column; justify-content: center; }
.bag-member-switch > summary {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  list-style: none; cursor: pointer; white-space: nowrap;
  max-width: 42vw; border-radius: var(--r);
}
.bag-member-switch > summary::-webkit-details-marker { display: none; }
.bms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bms-caret { width: 14px; height: 14px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2.2; }
.bag-member-switch[open] > summary { color: var(--c-ink-on-dark); }
@media (min-width: 900px) { .bag-member-switch > summary { max-width: 220px; } }

/* Elementos que solo tienen sentido mientras la barra inferior está visible:
   en escritorio los mismos enlaces viven en la barra superior. Y al revés. */
@media (min-width: 900px) { .only-narrow { display: none !important; } }
@media (max-width: 899px) { .only-wide { display: none !important; } }

/* ── «Mis informes»: los informes de todo el hogar en una pantalla ────────
   Un bloque por persona, con su cabecera pegajosa mientras se recorre su
   tabla, para que al bajar por una lista larga no se pierda de vista de quién
   son los informes que se están mirando. */
.mine-filter {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  margin-bottom: var(--sp-5);
}
.mine-filter .chip {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 var(--sp-3); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill); background: var(--c-paper);
  color: var(--c-ink-2); font-size: var(--fs-small); white-space: nowrap;
}
.mine-filter .chip:hover { border-color: var(--c-navy); color: var(--c-navy); text-decoration: none; }
.mine-filter .chip[aria-current="true"] {
  background: var(--c-navy); border-color: var(--c-navy); color: var(--c-on-navy);
}
.person { margin-bottom: var(--sp-6); }
.person-head {
  position: sticky; top: var(--h-topbar); z-index: 10;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) 0;
  background: var(--c-ground);
  border-bottom: 1px solid var(--c-line-strong);
  margin-bottom: var(--sp-3);
}
.person-name {
  font-family: var(--f-title); font-weight: 700; font-size: var(--fs-h2);
  letter-spacing: -0.01em; margin: 0;
}
.person-head .role-pill { align-self: center; }
.person-head .person-link { margin-left: auto; font-size: var(--fs-small); }
.person-empty { color: var(--c-ink-2); font-size: var(--fs-small); padding: var(--sp-2) 0 var(--sp-4); }

/* ── Listado de informes: piezas que estaban en el <style> de la plantilla ─*/
.report-name { font-weight: 500; }
.report-subtype { color: var(--c-ink-2); font-size: var(--fs-small); }
.size-cell { color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.report-badge {
  background: var(--c-navy-soft); color: var(--c-navy);
  border-color: color-mix(in srgb, var(--c-navy) 22%, transparent);
}
.level-pill.pill-mono { background: var(--c-navy); color: var(--c-on-navy); border-color: transparent; }
.reports-empty {
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg);
  background: var(--c-paper); padding: var(--sp-8) var(--sp-4);
  text-align: center; color: var(--c-ink-2);
}

/* ── Avisos en tarjeta (RAW ausente, consentimiento pendiente…) ────────────
   Sustituyen a los `style="border:1px solid #f0d6a8; background:#fff9ef"`
   escritos a mano en cada plantilla, que no tenían equivalente en modo
   oscuro. */
.card--notice { background: var(--c-amber-bg); border-color: color-mix(in srgb, var(--c-amber) 34%, var(--c-line)); }
.card--notice > h2, .card--notice > h3, .card--notice .card-h2 { color: var(--c-amber-ink); border-bottom-color: color-mix(in srgb, var(--c-amber) 30%, transparent); }
.card-actions { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Dos tarjetas hermanas (Nivel 1 · Nivel 2) que en móvil se apilan. */
.card-duo { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-4); }
.card-duo > * { margin-bottom: 0; }
@media (min-width: 860px) { .card-duo { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }

/* Lista compacta dentro de una tarjeta (analíticas cargadas, avisos). */
.mini-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-1); }
.mini-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--c-ink-2); }
.mini-list form { margin: 0; }

/* Una fila de formulario que en móvil ocupa el ancho y en tableta se alinea
   con su botón. `.reports-form` ya existía con estos nombres. */
.reports-form label { display: flex; flex-direction: column; gap: var(--sp-1); }
.reports-form > .btn, .reports-form > button { align-self: end; }

/* Un `<details>` usado como acción en línea (reenviar email, retirar miembro):
   sustituye a los `style="display:inline-block"` de la plantilla de familia. */
.inline-details { display: inline-block; }
.inline-details > summary { list-style: none; cursor: pointer; }
.inline-details > summary::-webkit-details-marker { display: none; }
.inline-confirm {
  display: grid; gap: var(--sp-2); margin-top: var(--sp-2);
  padding: var(--sp-3); max-width: 42ch;
  background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--r);
}
.fam-row-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* Botón inerte: la acción existe pero todavía no está disponible. Antes se
   pintaba con `style="opacity:.55;cursor:not-allowed"` en cada sitio. */
.btn[aria-disabled="true"], .btn.is-disabled {
  opacity: 0.55; cursor: not-allowed; pointer-events: none;
}

/* ── Rejilla de casillas seleccionables (informes de un pack) ──────────────
   Cada opción es una tarjeta pulsable de 44 px, no una casilla de 13 px con
   su texto al lado: en un teléfono, acertar en la casilla era el problema. */
.check-grid { display: grid; gap: var(--sp-2); grid-template-columns: minmax(0, 1fr); }
.check-tile {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--r);
  background: var(--c-paper); cursor: pointer;
}
.check-tile:hover { border-color: var(--c-navy); }
.check-tile:has(input:checked) { border-color: var(--c-navy); background: var(--c-navy-soft); font-weight: 500; }
.check-tile input { flex: 0 0 auto; }
@media (min-width: 700px) {
  .check-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

/* Casilla dentro de la celda-título de una tabla-lista: en el móvil la columna
   de selección no tiene cabecera que la explique, así que lleva su etiqueta. */
.row-check {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); margin-left: var(--sp-3);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--c-ink-3);
  font-weight: 400; cursor: pointer;
}
@media (min-width: 700px) {
  /* En tabla, la casilla vuelve a su columna y la etiqueta ya está en el thead. */
  .row-check { margin-left: 0; }
  .row-check span, .row-check { font-size: 0; }
  .row-check input { font-size: var(--fs-body); }
}

/* Zona de acciones destructivas: tarjeta con filete rojo, ancho de lectura. */
.danger-zone { max-width: 52ch; margin-top: var(--sp-5); }
.danger-zone label { margin-bottom: var(--sp-4); }
.danger-zone input[type="text"] { max-width: 200px; font-family: var(--f-mono); letter-spacing: 0.1em; }

/* Volcado de log: mono sobre fondo oscuro, con scroll propio. */
.log-block {
  margin: 0; padding: var(--sp-4);
  background: var(--c-navy-2); color: #CBD5E1;
  border-radius: var(--r); overflow: auto; max-height: 360px;
  font-family: var(--f-mono); font-size: var(--fs-small); line-height: 1.5;
}

/* Varias pastillas en una celda (roles de un usuario). */
.chip-cell { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* ── Piezas que quedaban en base.css ──────────────────────────────────────
   Se traen con los tokens del sistema en lugar de sus hexadecimales: las
   variantes de aviso (ok/info/warn/err) compartían cuatro paletas distintas
   escritas a mano y ninguna tenía versión en modo oscuro. */
.row-actions { white-space: nowrap; }
.card-packs { border-top: 2px solid var(--c-navy); }
.fam-me { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.fam-card-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); }

/* Estado ya resuelto en la cabecera de un wizard («RAW cargado»). */
.wizard-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r);
  background: var(--c-paper-2); font-size: var(--fs-small);
}
.wizard-status--ok {
  background: var(--c-green-bg); color: var(--c-green-ink);
  border-color: color-mix(in srgb, var(--c-green) 30%, transparent);
}

/* Formato de RAW detectado, y el aviso que el JS escribe al elegir archivo. */
.fmt-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-paper-2); color: var(--c-ink-2);
  font-family: var(--f-mono); font-size: var(--fs-micro); white-space: nowrap;
}
.fmt-badge-ico { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0.75; }
.fmt-badge--ok { background: var(--c-navy-soft); color: var(--c-navy); border-color: color-mix(in srgb, var(--c-navy) 20%, transparent); }
.fmt-badge--warn { background: var(--c-amber-bg); color: var(--c-amber-ink); border-color: color-mix(in srgb, var(--c-amber) 30%, transparent); }
.raw-format-hint {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line);
  border-radius: var(--r); background: var(--c-paper-2);
  font-size: var(--fs-small); color: var(--c-ink-2);
}
.raw-format-hint--ok   { background: var(--c-green-bg);  color: var(--c-green-ink);  border-color: color-mix(in srgb, var(--c-green) 28%, transparent); }
.raw-format-hint--info { background: var(--c-navy-soft); color: var(--c-navy);   border-color: color-mix(in srgb, var(--c-navy) 20%, transparent); }
.raw-format-hint--warn { background: var(--c-amber-bg);  color: var(--c-amber-ink);  border-color: color-mix(in srgb, var(--c-amber) 30%, transparent); }
.raw-format-hint--err  { background: var(--c-red-bg);    color: var(--c-red-ink);    border-color: color-mix(in srgb, var(--c-red) 28%, transparent); }
.raw-formats-help { margin: var(--sp-4) 0 var(--sp-1); }
.raw-formats-help > summary {
  min-height: var(--tap); display: flex; align-items: center;
  color: var(--c-navy); font-size: var(--fs-small); font-weight: 500; cursor: pointer;
}
.raw-formats-help p { font-size: var(--fs-small); color: var(--c-ink-2); margin: var(--sp-2) 0 0; }

/* ── Correcciones del repaso visual a 390 / 768 / 1280 px ─────────────────*/

/* Un bloque de consentimiento dentro de una rejilla de formulario ocupa el
   ancho completo: metido en una columna dejaba media pantalla vacía al lado y
   estiraba la fila. Igual el párrafo de cierre y el botón de envío. */
.form-grid > .consent-box,
.form-grid > fieldset,
.form-grid > p,
.form-grid > button,
.wizard-grid > .consent-box { grid-column: 1 / -1; }
/* Un botón que ocupa las dos columnas no debe estirarse hasta el borde: un
   botón de 700 px de ancho para escribir «Añadir» no dice qué es. */
.form-grid > button, .wizard-grid > button { justify-self: start; }
.consent-box { border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-4); }
.consent-box > legend {
  padding: 0 var(--sp-2); font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--c-ink-3);
}
.consent-box label { margin-bottom: var(--sp-2); }

/* Las acciones de una fila no se parten a mitad de palabra («Reenviar / email»). */
.fam-row-actions > *, .action-cluster > * { white-space: nowrap; }

/* En modo tabla, la primera columna suele llevar el nombre: sin un mínimo se
   quedaba en 8 caracteres y partía «Diego / Titular» en dos líneas mientras
   sobraba sitio a la derecha. */
@media (min-width: 700px) {
  .data-table td:first-child, .data-table th:first-child { min-width: 14ch; }
}

/* Las pestañas de paciente pueden desbordar en el móvil (cuatro etiquetas en
   versalitas no caben en 390 px). Se desplazan, y un degradado al borde avisa
   de que hay más a la derecha en lugar de dejar una palabra cortada a hueso. */
.tabs { position: relative; scroll-padding-inline: var(--sp-4); }
@media (max-width: 699px) {
  .tabs {
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
}

/* ── Recuento de informes por tipo ────────────────────────────────────────
   Era una tabla de tres columnas, y con el patrón tabla-lista se convertía en
   nueve tarjetas apiladas: metro y medio de scroll para leer nueve números.
   Una línea por tipo, con el recuento al final, cabe de un vistazo. */
.type-list { list-style: none; margin: 0; padding: 0; }
.type-row { border-bottom: 1px solid var(--c-line); }
.type-row:last-child { border-bottom: 0; }
.type-row > a, .type-row > span:first-child {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.type-row > a { min-height: var(--tap); color: var(--c-ink); text-decoration: none; }
.type-row > a:hover { color: var(--c-navy); }
.type-row > a:hover .type-name { text-decoration: underline; text-underline-offset: 2px; }
.type-row--empty {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 38px;
}
.type-row--empty .type-name { color: var(--c-ink-3); }
.type-name { font-weight: 500; }