/* ==========================================================================
   Casa Verdezza Care — gestión asistencial
   Depende de /shared/greenhouse.css.

   Esta superficie NO se parece a las otras tres, y es deliberado. Las usa
   enfermería y cuidado durante un turno: de pie, con el teléfono en una mano,
   a veces con guantes, a veces de madrugada. Las decisiones que la separan:

   · Objetivo táctil de 52px, no 44. El mínimo de WCAG es para alguien sentado.
   · Barra de pestañas fija abajo, al alcance del pulgar, no arriba.
   · Registrar algo son dos o tres toques desde que se abre el residente.
   · Cero adorno. Cada píxel que no ayuda a registrar bien, estorba.
   · Escala de 17px: legible a un brazo de distancia y con poca luz.
   ========================================================================== */

:root {
  --t-small: 1.0625rem;   /* 17px */
  --t-body: 1.0625rem;    /* 17px */
  --t-body-lg: 1.1875rem; /* 19px */

  /* El objetivo táctil propio de esta superficie ERA de 52px, por el uso de
     pie durante un turno. Dirección decidió (sept-2026) que las cinco
     superficies compartan el mismo lenguaje, así que Care hereda los 44px de
     `/shared` como las demás. 44px sigue siendo el mínimo de WCAG 2.5.5; lo
     que se pierde es el margen extra que tenía para una mano con guantes.

     Si alguien lo echa de menos en la validación en turno real, se devuelve
     descomentando una linea — los componentes heredan el token sin tocarlos. */
  /* --tap: 52px; */
}

body { font-size: var(--t-body); }

/* ==========================================================================
   Ingreso
   La pantalla (.auth-canvas), la tarjeta (.login-card) y el lockup de marca
   viven en el sistema compartido. Aquí solo el ritmo del formulario.
   ========================================================================== */

#login-submit { margin-top: var(--s-8); }
#login-error { margin-top: var(--s-5); }

/* ==========================================================================
   Armazón de la app
   ========================================================================== */

.view-app { min-height: 100vh; display: flex; flex-direction: column; }

/* La barra superior es la del sistema; Care solo estrecha el margen lateral
   porque en un teléfono cada píxel de ancho cuenta. */
.topbar { padding-inline: var(--s-4); }

.app-body {
  flex: 1;
  width: 100%; max-width: 780px;
  margin-inline: auto;
  padding: var(--s-5) var(--s-4);
  /* Sitio para la barra fija de abajo, DERIVADO de su altura real.
     Antes era `96px` con un comentario que decia «62px + holgura» — los dos
     numeros ya no coincidian entre si, y al volver la barra flotante paso a
     medir 115px a 390 y 134px a 320, porque las etiquetas parten en mas lineas
     al perder ancho. Con 96 reservados, la ultima tarjeta quedaba debajo.

     `--barra-alto` lo publica `GH.publicarAltoDeBarra()` midiendo lo que hay.
     El valor de respaldo cubre el caso peor por si el JS no corre. */
  padding-bottom: calc(var(--barra-alto, 140px) + var(--s-5) + env(safe-area-inset-bottom));
}

/* ==========================================================================
   Tarjeta de residente
   ========================================================================== */

.resident-card {
  width: 100%;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  background: var(--pane);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pane);
  text-align: left;
  cursor: pointer; touch-action: manipulation;
  font-family: inherit; font-size: inherit; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.resident-card:hover { border-color: var(--sage); box-shadow: var(--shadow-lift); }
.resident-card:active { transform: scale(0.985); }
.resident-card-body { flex: 1; min-width: 0; }
.resident-card-name { font-weight: 700; font-size: var(--t-body-lg); margin-bottom: 3px; }
.resident-card-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  color: var(--ink-faint); font-size: var(--t-small);
}
.resident-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.resident-card-meta .icon { width: 16px; height: 16px; }

/* El buscador es del sistema; aquí solo su lugar en la columna. */
.search-field { margin-bottom: var(--s-5); }

#aviso-rol { margin-bottom: var(--s-5); align-items: flex-start; }
#aviso-rol .icon { margin-top: 3px; }
#aviso-rol strong { display: block; margin-bottom: var(--s-1); }

/* ==========================================================================
   Pestañas
   El componente .tabs/.tab es del sistema (nació aquí y ahora lo comparten
   todas). Lo único propio de Care es que, cuando las pestañas suben a la
   parte de arriba en pantallas anchas, el cuerpo ya no necesita reservar
   sitio para una barra fija abajo.
   ========================================================================== */

@media (min-width: 860px) {
  #view-resident .app-body { padding-bottom: var(--s-16); }
}

/* ==========================================================================
   Registro asistencial
   ========================================================================== */

/* --- Prescripción: la tarjeta más importante de la app --- */

.rx,
.plan {
  background: var(--pane);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-3);
  box-shadow: var(--shadow-pane);
}
.rx.is-discontinued,
.plan.is-discontinued { opacity: 0.62; }
.rx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.rx-name { font-weight: 700; font-size: var(--t-body-lg); }
.rx-dose {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-2);
  color: var(--ink-soft); font-size: var(--t-small);
}
.rx-dose b { color: var(--ink); }
.rx-actions { margin-top: var(--s-4); }
.rx-last {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px dashed var(--rule);
  font-size: var(--t-small); color: var(--ink-faint);
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}

/* Resultado de una toma. El color dice lo que pasó sin tener que leer. */
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.administrado { background: var(--sage); }
.dot.no_administrado { background: var(--clay); }
.dot.rechazado { background: var(--alert); }

/* --- Formulario de signos vitales: campos grandes, teclado numérico --- */

.vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4);
}
.vital-field label { font-size: var(--t-small); }
.vital-field input {
  min-height: 58px;
  font-size: 1.5rem; font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-inline: var(--s-2);
}
.vital-field .unit {
  display: block; text-align: center;
  font-size: var(--t-micro); color: var(--ink-faint);
  margin-top: var(--s-2);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
/* La tensión son dos cifras que se leen juntas. */
.vital-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); }
.vital-pair .sep { font-size: 1.5rem; color: var(--ink-faint); font-weight: 700; }

/* --- Historia (signos, notas, incidentes) --- */

.entry {
  background: var(--pane);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}
.entry-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.entry-when { font-size: var(--t-small); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.entry-body { color: var(--ink); white-space: pre-wrap; max-width: none; }

/* Vocabulario de dominio sobre la etiqueta del sistema: qué es un signo
   vital, qué es leve y qué es grave. El componente es compartido; esta
   traducción a severidad clínica solo tiene sentido aquí. */
.tag.is-vitals { background: var(--teal-wash); color: var(--teal); }
.tag.leve      { background: var(--sage-wash);  color: var(--sage-deep); }
.tag.moderado  { background: var(--clay-wash);  color: var(--clay); }
.tag.grave     { background: var(--alert-wash); color: var(--alert); }
.tag.abierto   { background: var(--clay-wash);  color: var(--clay); }
.tag.cerrado   { background: var(--paper-sunk); color: var(--ink-soft); }

/* Lectura compacta de signos vitales ya registrados. */
.vitals-read { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.vital-chip {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--s-2) var(--s-4);
  background: var(--pane-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.vital-chip-label { font-size: var(--t-micro); color: var(--ink-faint); font-weight: 700; letter-spacing: 0.04em; }
.vital-chip-value { font-size: var(--t-body-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Hoja de registro (entra desde abajo)
   ========================================================================== */

.sheet-bottom { align-items: flex-end; justify-content: center; }
.sheet-bottom .sheet {
  width: min(560px, 100%);
  height: auto; max-height: 92vh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--s-6) var(--s-5);
  padding-bottom: calc(var(--s-10) + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 52px rgba(18, 37, 27, 0.22);
  animation: sheet-up var(--dur) var(--ease);
}
@keyframes sheet-up { from { transform: translateY(26px); opacity: 0.5; } to { transform: none; opacity: 1; } }
.sheet-overlay.is-leaving .sheet-bottom .sheet,
.sheet-bottom.is-leaving .sheet { animation: sheet-down var(--dur-fast) var(--ease-soft) forwards; }
@keyframes sheet-down { to { transform: translateY(20px); opacity: 0; } }

@media (min-width: 620px) {
  .sheet-bottom { align-items: center; }
  .sheet-bottom .sheet { border-radius: var(--r-xl); max-height: 88vh; padding-bottom: var(--s-8); }
}

/* Asa: indica que la hoja se arrastra/cierra, convención de app móvil. */
.sheet-handle {
  width: 42px; height: 4px; border-radius: 2px;
  background: var(--rule-strong);
  margin: 0 auto var(--s-5);
}
/* La disposición de .sheet-head vive en /shared; aquí solo su tamaño de letra. */
.sheet-head h2 { font-size: 1.35rem; line-height: 1.25; }
.sheet-head p { color: var(--ink-faint); font-size: var(--t-small); margin-top: var(--s-1); }

/* La elección de resultado (`.choice-group` / `.choice`) nació aquí y vive
   ahora en `shared/greenhouse.css`: la usa también /admin para declarar el
   régimen de IVA, y una pieza que sirve a dos superficies se escribe una vez y
   arriba. Lo que se queda aquí es el VOCABULARIO: qué color tiene
   "administrado" y qué color tiene "grave". Eso es de Care. */

.choice[data-valor="administrado"] .choice-mark     { background: var(--sage-wash);  color: var(--sage-deep); }
.choice[data-valor="no_administrado"] .choice-mark  { background: var(--clay-wash);  color: var(--clay); }
.choice[data-valor="rechazado"] .choice-mark        { background: var(--alert-wash); color: var(--alert); }

.choice[aria-pressed="true"][data-valor="administrado"]    { border-color: var(--sage);  background: var(--sage-wash); }
.choice[aria-pressed="true"][data-valor="no_administrado"] { border-color: var(--clay);  background: var(--clay-wash); }
.choice[aria-pressed="true"][data-valor="rechazado"]       { border-color: var(--alert); background: var(--alert-wash); }
.choice[aria-pressed="true"][data-valor="leve"]      { border-color: var(--sage);  background: var(--sage-wash); }
.choice[aria-pressed="true"][data-valor="moderado"]  { border-color: var(--clay);  background: var(--clay-wash); }
.choice[aria-pressed="true"][data-valor="grave"]     { border-color: var(--alert); background: var(--alert-wash); }

/* ==========================================================================
   Estados
   Care centra sus estados vacíos, al revés que Family. Aquí cada pestaña es
   la pantalla entera —no hay contenido al lado que sirva de ancla—, así que
   el mensaje se comporta como un estado de pantalla, no de bloque.
   ========================================================================== */

.block-state { padding: var(--s-8) var(--s-2); text-align: center; }
.block-state p { margin-inline: auto; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 380px) {
  .app-body { padding-inline: var(--s-3); }
  .vitals-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Inventario
   Segunda sección de Care. La composición es la misma que la de residentes
   —tarjetas grandes, objetivo táctil de 52px— porque se usa igual: de pie,
   en la bodega, con el teléfono en una mano.
   ========================================================================== */

/* El conmutador ocupa la fila entera: son destinos, no filtros. Tres columnas
   iguales y no `flex-wrap`, que dejaba la tercera sola en una segunda fila
   pareciendo de otra categoría. */
/* Cuatro destinos. En un teléfono son dos filas de dos —cuatro columnas
   dejarían "Actividades" en letra de 12px— y a partir de 620px, una sola fila.
   `auto-fit` no sirve aquí: hace falta que las dos filas queden IGUALES. */
.seccion-switch {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--s-5);
}
@media (min-width: 620px) {
  .seccion-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.seccion-switch .segment { position: relative; justify-content: center; }
.seccion-switch .segment .icon { width: 20px; height: 20px; margin-right: var(--s-2); }
/* El contador iba flotando sobre la píldora y, con tres destinos en un
   teléfono, caía justo encima de la palabra. Aquí va EN LÍNEA, después del
   texto: ocupa sitio en vez de taparlo, que es lo que debe hacer un número
   que cuenta cosas pendientes. */
.seccion-switch .segment { gap: var(--s-2); }
.seccion-switch .tab-count {
  position: static; transform: none;
  min-width: 22px; height: 22px; line-height: 22px;
  flex: none;
}

.inv-filtros {
  display: flex; flex-wrap: nowrap; overflow-x: auto;
  gap: var(--s-2); margin-bottom: var(--s-5);
  padding-bottom: var(--s-2);
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.inv-filtros .segment { flex: none; }
.inv-filtros .count {
  margin-left: 6px; padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--paper-sunk); color: var(--ink-soft);
  font-size: var(--t-micro); font-variant-numeric: tabular-nums;
}
.inv-filtros .segment[aria-pressed="true"] .count { background: rgba(255,255,255,0.22); color: var(--paper); }

/* --- Alertas: qué hay que reponer ------------------------------------- */

#inv-alertas { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
#inv-alertas .notice { align-items: flex-start; }
#inv-alertas .notice .icon { margin-top: 2px; }
#inv-alertas strong { display: block; margin-bottom: var(--s-2); }

.alerta-items { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.alerta-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--pane) 70%, transparent);
  font-size: var(--t-small);
}
.alerta-item b { font-variant-numeric: tabular-nums; }

/* Rojo para lo que vence: es lo único del inventario que no se arregla
   comprando más. */
.notice-alert { background: var(--alert-wash); color: var(--alert); border-color: color-mix(in srgb, var(--alert) 30%, transparent); }

/* --- Artículo --------------------------------------------------------- */

.articulo {
  width: 100%; display: block; text-align: left;
  font-family: inherit; font-size: inherit; color: inherit;
  cursor: pointer; touch-action: manipulation;
  transition: border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease);
}
.articulo:hover { border-color: var(--sage); }
.articulo:active { transform: scale(0.985); }
.articulo.is-bajo { border-color: color-mix(in srgb, var(--clay) 45%, transparent); }

.articulo .rx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); width: 100%; }
.articulo .rx-name, .articulo .rx-dose { display: block; }
/* Separador entre los metadatos: sin él, "Aseo galón 3.8 L 1 lote" se lee
   como una sola frase en vez de como tres datos. */
.articulo .rx-dose span + span::before { content: "·"; color: var(--rule-strong); margin-right: var(--s-2); }

/* El saldo es el dato por el que se abre la pantalla: va grande y a la
   derecha, donde el pulgar ya está mirando. */
.articulo-saldo { flex: none; text-align: right; line-height: 1.1; }
.articulo-saldo b {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.75rem;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.articulo-saldo small { font-size: var(--t-small); color: var(--ink-faint); }
.articulo-saldo.is-bajo b { color: var(--clay); }

.articulo-aviso {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px dashed var(--rule);
  font-size: var(--t-small); font-weight: 700; color: var(--clay);
}
.articulo-aviso .icon { width: 17px; height: 17px; }

/* --- Lote ------------------------------------------------------------- */

.lote.is-urgente { border-color: color-mix(in srgb, var(--alert) 45%, transparent); }
.lote-saldo { font-weight: 700; font-size: var(--t-body-lg); }
.lote-saldo small { font-weight: 400; color: var(--ink-faint); font-size: var(--t-small); }
.lote-meta { color: var(--ink-faint); font-size: var(--t-small); margin-top: var(--s-1); }
.lote-acciones { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.lote-acciones .btn { flex: 1; min-width: 150px; }

/* Pedidos de familias por entregar. Sin oro ni adorno: es una lista de cosas
   que llevar a una habitación. */
.pedidos-entregar { margin-bottom: var(--s-6); display: grid; gap: var(--s-3); }
.pedidos-entregar-titulo { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: 1.1rem; }
.pedido-lineas { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.pedido-lineas li { overflow-wrap: anywhere; }
.pedido-lineas small { color: var(--ink-faint); }
.pedido-lineas .tag { margin-left: var(--s-2); }

@media (max-width: 460px) {
  /* Con cuatro destinos en un teléfono, el icono es lo primero que sobra: la
     palabra es la que informa, el dibujo solo acompaña. */
  .seccion-switch .segment .icon { display: none; }
}

@media (max-width: 380px) {
  .seccion-switch .segment { padding-inline: var(--s-2); font-size: var(--t-small); }
  .lote-acciones .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   COCINA
   Composición y vocabulario de dominio. El lenguaje visual (etiquetas,
   avisos, segmentos, hojas) viene de /shared tal cual.

   Regla propia de Care, y aquí manda más que en ninguna otra pantalla: se usa
   de pie, con el carrito de bandejas, a veces a las seis de la mañana. Cada
   píxel que no ayuda a registrar bien, estorba. Cero oro decorativo.
   ========================================================================== */

/* Los seis tiempos de comida caben en dos filas en un teléfono. No se
   convierten en un desplegable: ver los seis de un vistazo es lo que permite
   corregir de un toque cuando la app abre en el tiempo equivocado. */
/* Dos filas de tres, no seis píldoras que envuelven como caigan: "Refrigerio"
   se quedaba solo ocupando una fila entera y parecía otra cosa. */
.tiempos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--s-4);
}
.tiempos .segment { justify-content: center; text-align: center; }

@media (min-width: 720px) {
  .tiempos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- Minuta */

.menu-card {
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sage);
  border-radius: var(--r-md);
  background: var(--pane);
  margin-bottom: var(--s-5);
}
/* Sin minuta escrita no hay filete verde: el hueco tiene que parecer un hueco. */
.menu-card.is-vacio { border-left-color: var(--rule-strong); background: var(--pane-soft); }

/* La versalita del menú va APAGADA, no en oro. Es la regla propia de Care: el
   oro es el color con el que esta marca señala, y en una herramienta de turno
   no hay nada que señalar que no sea ya urgente — y eso va en terracota o
   rojo. Un rótulo dorado sobre la minuta sería decorar. */
.menu-card .label-micro { color: var(--ink-faint); letter-spacing: 0.1em; }

.menu-plato {
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1.15;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  margin: var(--s-2) 0 var(--s-2);
}

/* La nota de cocina ("sin sal para hipertensos") es una instrucción para quien
   sirve, no una decoración del plato: va en azul, que es el color con el que
   este sistema INFORMA. */
.menu-obs {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--teal-wash);
  color: var(--teal);
  font-weight: 700;
}
.menu-obs .icon { width: 19px; height: 19px; flex: none; margin-top: 1px; }

.menu-card .btn { margin-top: var(--s-4); }

/* ----------------------------------------------------- Hoja de servicio */

.servicio-resumen {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-4);
  color: var(--ink-soft);
  font-weight: 700;
}

.servicio-card {
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--pane);
}
.servicio-card + .servicio-card { margin-top: var(--s-3); }

/* Lo ya registrado se apaga, no se esconde. Quien recorre el comedor necesita
   ver de un vistazo QUIÉN FALTA, y una tarjeta desaparecida obliga a contar. */
.servicio-card.is-registrado { background: var(--pane-soft); border-color: var(--rule); }
.servicio-card.is-registrado .servicio-head h3 { color: var(--ink-soft); }

.servicio-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
}
.servicio-head h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--t-base);
  font-variation-settings: normal;
}

.servicio-dieta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

.servicio-registro {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-3);
  color: var(--ink-soft);
  font-size: var(--t-small);
}
.servicio-registro .icon { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--sage); }

/* ------------------------------------------------ Opciones de consumo
   Seis botones en rejilla, todos a la vista. Un desplegable ahorraría espacio
   y costaría dos toques por residente: treinta residentes por seis tiempos son
   trescientos sesenta toques al día que no hacen falta. */

.consumo-opciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.consumo-btn {
  min-height: var(--tap);
  padding: var(--s-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--pane);
  color: var(--ink);
  font: inherit; font-size: var(--t-small); font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.consumo-btn:hover { border-color: var(--sage); background: var(--sage-wash); }
.consumo-btn:active { transform: scale(0.96); }

/* El tono NO se pinta en reposo. Si los seis botones llegaran de colores, la
   pantalla parecería una alarma permanente y el color dejaría de significar
   algo. El color aparece cuando la opción está ELEGIDA: ahí sí dice qué pasó. */
.consumo-btn[aria-pressed="true"] { border-width: 2px; }
.consumo-btn.tono-ok[aria-pressed="true"] {
  background: var(--sage); border-color: var(--sage); color: var(--paper);
}
.consumo-btn.tono-neutro[aria-pressed="true"] {
  background: var(--paper-sunk); border-color: var(--rule-strong); color: var(--ink);
}
.consumo-btn.tono-aviso[aria-pressed="true"] {
  background: var(--clay-wash); border-color: var(--clay); color: var(--clay);
}
.consumo-btn.tono-grave[aria-pressed="true"] {
  background: var(--alert-wash); border-color: var(--alert); color: var(--alert);
}

@media (max-width: 360px) {
  /* Dos columnas antes que letra de 13px: la regla de 16px de este proyecto no
     tiene excepción en la pantalla donde más prisa hay. */
  .consumo-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .consumo-opciones { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ==========================================================================
   Familias esperando respuesta
   Vocabulario de dominio de Care. La conversación en sí es lenguaje
   compartido y viene de /shared: Family pinta el otro lado del mismo hilo.

   Va en el LISTADO, antes de abrir a nadie. Si hubiera que entrar a cada
   residente para descubrir que su hija preguntó algo hace dos días, nadie lo
   descubriría — y una pregunta sin contestar hace más daño a la confianza de
   una familia que no haber tenido nunca el canal.
   ========================================================================== */

.esperando-lista { list-style: none; display: grid; gap: var(--s-2); margin-top: var(--s-3); }

.esperando-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--pane);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.esperando-fila:hover { border-color: var(--clay); }
.esperando-fila:active { transform: scale(0.99); }

.esperando-quien { font-weight: 700; }

@media (max-width: 480px) {
  /* A 390px, "María Pérez" y "hace un momento" no caben en la misma fila y el
     nombre se partía en dos líneas alrededor de la hora. El nombre manda: se
     queda entero arriba y la hora baja. */
  .esperando-fila { grid-template-columns: minmax(0, 1fr); }
  .esperando-cuando { color: var(--ink-faint); }
}
.esperando-cuando {
  color: var(--ink-faint);
  font-size: var(--t-small);
  white-space: nowrap;
}
/* El texto de la pregunta ocupa la fila entera debajo: recortarlo a una
   columna estrecha obligaría a abrir la ficha para saber de qué va, que es
   justo el paso que este aviso existe para ahorrar. */
.esperando-texto { grid-column: 1 / -1; color: var(--ink-soft); }

/* La conversación dentro de la pestaña respira igual que el resto de paneles. */
#panel-mensajes .msg-hilo { margin-bottom: var(--s-2); }

/* ==========================================================================
   ACTIVIDADES
   Composición y vocabulario de dominio. La hoja de participación reutiliza
   tal cual el componente de la hoja de servicio de cocina —.servicio-card y
   .consumo-opciones—: es el mismo trabajo, recorrer a todos los residentes
   marcando una opción por persona, y duplicarlo sería inventar dos formas de
   hacer lo mismo.
   ========================================================================== */

.act-dia { margin-bottom: var(--s-6); }

.act-dia-titulo {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint);
  font-variation-settings: normal;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
/* Hoy se distingue del resto del calendario: es el día en el que se trabaja. */
.act-dia.es-hoy .act-dia-titulo { color: var(--sage); border-bottom-color: var(--sage); }

.act-tarjeta {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--pane);
}
.act-tarjeta + .act-tarjeta { margin-top: var(--s-3); }

/* Una actividad cancelada se apaga pero NO se esconde: la familia la vio
   anunciada, y quien pregunte por ella tiene que encontrarla. */
.act-tarjeta.es-cancelada { background: var(--pane-soft); }
.act-tarjeta.es-cancelada h4 { color: var(--ink-soft); text-decoration: line-through; }

.act-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3);
}
.act-cabecera h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--t-base);
  font-variation-settings: normal;
}

/* La hora en cifras tabulares: en una columna de actividades, las horas se
   comparan de un vistazo y las cifras de ancho variable lo estropean. */
.act-hora {
  font-weight: 700;
  color: var(--sage);
  font-variant-numeric: tabular-nums;
}

.act-motivo {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--paper-sunk);
  color: var(--ink-soft);
}
.act-motivo .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }

.act-tarjeta .btn { margin-top: var(--s-4); }

.act-hoja-cabecera {
  padding: var(--s-5);
  margin: var(--s-4) 0 var(--s-5);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sage);
  border-radius: var(--r-md);
  background: var(--pane);
}
/* Cero oro decorativo, como todo Care: la versalita va apagada. */
.act-hoja-cabecera .label-micro { color: var(--ink-faint); letter-spacing: 0.1em; }
.act-hoja-cabecera h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.4rem; line-height: 1.15;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  margin: var(--s-2) 0;
}

#act-content .panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
#act-content .panel-resumen { color: var(--ink-soft); font-weight: 700; }

/* ==========================================================================
   ESCALAS DE VALORACIÓN
   Comparten pestaña con los signos vitales. Todo lo de aquí es composición y
   vocabulario de dominio: qué es "mejor", qué es "peor", cómo se lee una
   serie. Los componentes vienen de /shared tal cual.

   Cero oro decorativo, como todo Care.
   ========================================================================== */

.bloque-escalas { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule); }

.escala-card {
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--pane);
}
.escala-card + .escala-card { margin-top: var(--s-3); }

.escala-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3);
}
/* La versalita del dominio va apagada, no en oro: regla propia de Care. */
.escala-head .label-micro { color: var(--ink-faint); letter-spacing: 0.1em; }
.escala-head h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--t-base);
  font-variation-settings: normal;
  margin-top: 2px;
}

/* El puntaje grande y en cifras tabulares: es lo que se compara de un vistazo
   entre dos valoraciones, y las cifras de ancho variable lo estropean. */
.escala-puntaje { margin-top: var(--s-3); font-variant-numeric: tabular-nums; }
.escala-puntaje b { font-size: 1.5rem; }

/* --- Tendencia ---------------------------------------------------------
   Dice MEJOR o PEOR, nunca subió o bajó: en Barthel subir es mejorar y en
   Downton es empeorar. Si la interfaz mostrara la dirección numérica, una
   flecha verde significaría cosas opuestas en dos tarjetas contiguas. */

.tendencia {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-3);
  color: var(--ink-soft);
  font-size: var(--t-small); font-weight: 700;
}
.tendencia .icon { width: 17px; height: 17px; }
.tendencia.es-mejor { color: var(--sage-deep); }
.tendencia.es-peor { color: var(--clay); }

.escala-obs { margin-top: var(--s-3); color: var(--ink-soft); font-style: italic; }
.escala-card .btn { margin-top: var(--s-4); }

/* --- La serie ----------------------------------------------------------
   Una línea por valoración con su diferencia. Es más barato de leer en un
   teléfono de turno que un gráfico, y no pierde el dato exacto. */

.serie { list-style: none; display: grid; gap: var(--s-2); margin-top: var(--s-4); }

.serie-fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.serie-fecha { color: var(--ink-soft); font-size: var(--t-small); white-space: nowrap; }
.serie-puntaje { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.125rem; }
.serie-delta { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.serie-delta.es-mejor { color: var(--sage-deep); }
.serie-delta.es-peor { color: var(--clay); }
/* Quién la aplicó ocupa la fila entera debajo: recortarlo a una columna
   estrecha obligaría a adivinar el nombre. */
.serie-autor { grid-column: 1 / -1; color: var(--ink-faint); font-size: var(--t-small); }

@media (max-width: 420px) {
  .serie-fila { grid-template-columns: auto minmax(0, 1fr) auto; }
  .serie-delta { grid-column: 3; }
}

/* --- Aplicar una escala ------------------------------------------------
   Un ítem por bloque con las opciones como botones grandes. NO desplegables:
   una escala de diez ítems con diez desplegables son treinta toques, y se
   acaba aplicando "de memoria" al final del turno. */

.escala-item {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--pane-soft);
}
.escala-item legend {
  padding: 0 var(--s-2);
  font-weight: 700;
}
/* El ítem sin responder se señala al intentar guardar, no antes: marcar en
   rojo diez ítems nada más abrir la hoja es acusar a alguien de no haber
   empezado todavía. */
.escala-item.sin-responder {
  border-color: var(--alert);
  background: var(--alert-wash);
}

.escala-opciones { display: grid; gap: var(--s-2); margin-top: var(--s-3); }

.escala-opcion {
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--pane);
  color: var(--ink);
  font: inherit; font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.escala-opcion:hover { border-color: var(--sage); background: var(--sage-wash); }
.escala-opcion:active { transform: scale(0.99); }
.escala-opcion[aria-pressed="true"] {
  background: var(--sage); border-color: var(--sage); color: var(--paper);
}

.hoja-nota-escala {
  margin: var(--s-3) 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--paper-sunk);
  color: var(--ink-soft);
}

@media (min-width: 700px) {
  /* Con sitio, las opciones cortas caben en dos columnas y la escala entera
     baja de tres pantallas a dos. */
  .escala-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Avisos en el listado ----------------------------------------------
   La lista de pendientes (`.pendientes-lista` / `.pendiente-fila`) nació aquí
   y ahora vive en `shared/greenhouse.css`: la usan también las de cartera en
   `/admin`, y una pieza que sirve a dos superficies se escribe una vez y
   arriba. Care no redefine nada de ella — hereda el `--tap` comun de 44px. */


/* ==========================================================================
   LIBRO DE CONTROL ESPECIAL
   Composición y vocabulario propios. Sin oro: en Care no hay nada que señalar
   que no sea ya urgente, y un libro regulatorio se lee, no se celebra.
   ========================================================================== */

.inv-vistas { margin-bottom: var(--s-5); }

/* El armario de cada residente: una tarjeta por persona, una fila por cosa
   suya. Lo que se acaba, en terracota y dicho con palabras. */
.armario-res { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4); }
.armario-res-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.armario-res-head > div { min-width: 0; overflow-wrap: anywhere; }
.armario-res-head h3 { margin: 0; font-size: var(--t-h3, 1.15rem); }
.armario-res-head p { margin: 2px 0 0; }
.armario-res-head .btn { gap: var(--s-2); }
.armario-filas { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.armario-fila {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--paper); border-radius: var(--r-md);
  border-left: 4px solid var(--sage-line);
}
.armario-fila.se-acaba { border-left-color: var(--clay); background: var(--clay-wash); }
.armario-fila-txt { min-width: 0; overflow-wrap: anywhere; }
.armario-fila-txt small { display: block; color: var(--ink-soft); font-size: var(--t-small); }
.armario-fila.se-acaba small { color: var(--clay); font-weight: 700; }
.armario-fila .btn { flex: none; }
.armario-vacio { margin: var(--s-3) 0 0; }

.control-acciones { margin-bottom: var(--s-5); }

.control-card {
  background: var(--pane);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}

.control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.control-head h3 { font-size: 1.2rem; margin: 0; }

/* La existencia es el dato que se busca al abrir esta vista: el armario está
   bajo llave y lo primero es saber cuántas quedan. */
.control-saldo {
  margin: 0;
  text-align: right;
  flex: none;
}
.control-saldo b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.control-saldo span { font-size: var(--t-small); color: var(--ink-faint); }

.control-meta { color: var(--ink-soft); font-size: var(--t-small); margin: var(--s-2) 0 0; }

.control-faltan {
  display: flex; align-items: flex-start; gap: var(--s-2);
  background: var(--clay-wash); color: var(--clay);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  font-size: var(--t-small);
  margin: var(--s-3) 0 0;
}
.control-faltan .icon { flex: none; width: 20px; height: 20px; }

.control-card .btn { margin-top: var(--s-4); }

/* --------------------------------------------------------- El libro */

/* Las cuatro cifras del mes, antes de los asientos: es lo que se copia al
   informe y lo que se compara con el estante. */
.libro-resumen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-5);
}
.libro-resumen > div {
  background: var(--paper-sunk);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
}
.libro-resumen span { display: block; font-size: var(--t-small); color: var(--ink-soft); }
.libro-resumen b {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* El saldo final lleva el filete del cierre: es la cifra que se firma. */
.libro-resumen .es-final { box-shadow: inset 0 -3px 0 var(--sage); }

.libro-meses {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.libro-meses .es-activo { border-color: var(--sage); color: var(--sage-deep); background: var(--sage-wash); }

.libro-asientos { list-style: none; margin: 0; padding: 0; }

.asiento {
  border-top: 1px solid var(--rule);
  padding: var(--s-4) 0 var(--s-4) var(--s-4);
  /* Entrada y salida se distinguen por un filete a la izquierda Y por el signo
     del número: quien no distingue los colores lee el + y el −. */
  box-shadow: inset 3px 0 0 var(--rule-strong);
}
.asiento.es-entrada { box-shadow: inset 3px 0 0 var(--sage); }
.asiento.es-salida { box-shadow: inset 3px 0 0 var(--teal); }

.asiento-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-small);
}
.asiento-folio {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.asiento-linea {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 0;
}
.asiento-linea b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.asiento-saldo {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}
.asiento-detalle { color: var(--ink-soft); font-size: var(--t-small); margin: var(--s-2) 0 0; }
.asiento-falta {
  display: flex; align-items: flex-start; gap: var(--s-2);
  color: var(--clay);
  font-size: var(--t-small);
  margin: var(--s-2) 0 0;
}
.asiento-falta .icon { flex: none; width: 18px; height: 18px; }

.asiento-vacio { color: var(--ink-soft); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }

.hoja-nota-libro { color: var(--ink-faint); font-size: var(--t-small); margin: var(--s-4) 0 0; }

/* ------------------------------------------------------- El informe */

.informe-lista { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.informe-fila { border-top: 1px solid var(--rule); padding: var(--s-4) 0; }
.informe-nombre {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
}
.informe-cifras {
  color: var(--ink-soft);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  margin: var(--s-2) 0 0;
}

/* ==========================================================================
   RESIDUOS
   Lo acumulado arriba y en su propio panel: es lo accionable. El total del mes
   va debajo y más callado — se reporta una vez, no se mira en el turno.
   ========================================================================== */

.residuo-panel {
  background: var(--pane);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
/* El del mes es contexto, no acción: mismo componente, un paso atrás. */
.residuo-panel.es-mes { background: var(--paper-sunk); border-color: transparent; }

.residuo-total { margin: var(--s-2) 0 0; display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.residuo-total b {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.residuo-antiguo { color: var(--ink-soft); margin: var(--s-3) 0 0; }

.residuo-lista {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s-2);
}
.residuo-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  font-variant-numeric: tabular-nums;
}
/* Las clases peligrosas se distinguen por un filete Y por ir primero en la
   lista: quien no distingue el color sigue leyendo el orden. */
.residuo-fila.es-peligroso { box-shadow: inset 3px 0 0 var(--clay); padding-left: var(--s-3); }

.entrega-lista { list-style: none; margin: 0; padding: 0; }
.entrega-fila { border-top: 1px solid var(--rule); padding: var(--s-4) 0; }
.entrega-fila.es-difiere { box-shadow: inset 3px 0 0 var(--alert); padding-left: var(--s-4); }
.entrega-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.entrega-detalle { color: var(--ink-soft); font-size: var(--t-small); margin: var(--s-2) 0 0; }
.entrega-difiere {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--alert); font-size: var(--t-small); margin: var(--s-2) 0 0;
}
.entrega-difiere .icon { flex: none; width: 18px; height: 18px; }

/* ==========================================================================
   TEMPERATURAS DE COCINA
   Lo que falta por medir se ve como un BOTÓN y lo ya medido como una lista:
   la diferencia de forma dice qué hay que hacer sin tener que leer.
   ========================================================================== */

.temp-bloque {
  background: var(--pane);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}
.temp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.temp-head h2 { font-size: 1.15rem; margin: 0; }

.temp-pendientes { display: grid; gap: var(--s-3); }
.temp-pendiente {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font: inherit; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.temp-pendiente:hover:not(:disabled) { border-color: var(--sage); background: var(--sage-wash); }
.temp-pendiente:disabled { opacity: 0.6; cursor: not-allowed; }
.temp-pendiente .icon { flex: none; width: 24px; height: 24px; color: var(--ink-faint); }
.temp-pendiente small { display: block; color: var(--ink-faint); font-size: var(--t-small); }
.temp-medir { margin-left: auto; font-weight: 700; color: var(--sage-deep); white-space: nowrap; }

.temp-lista { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.temp-fila { border-top: 1px solid var(--rule); padding: var(--s-4) 0; }
/* Fuera de rango: filete Y la acción visible debajo. El color solo no basta. */
.temp-fila.es-fuera { box-shadow: inset 3px 0 0 var(--alert); padding-left: var(--s-4); }
.temp-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
/* Dos cifras en una lectura: la temperatura manda y la humedad la acompaña,
   porque la humedad solo la piden algunos equipos y leerlas con el mismo peso
   haría dudar de cuál es cuál. La que se salió se marca, no las dos. */
.temp-humedad {
  display: block;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-soft);
}

.temp-valor {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Solo se pinta en rojo LO QUE SE SALIO, no la lectura entera. Con dos
   magnitudes en la misma fila, teñir las dos obliga a leer la accion para
   saber cual fallo — y el color existe justo para no tener que leerla. El
   filete lateral de `.es-fuera` sigue marcando la fila completa, que es lo que
   se busca al recorrer la lista de lejos. */
.temp-fila .temp-desviado { color: var(--alert); }
.temp-detalle { color: var(--ink-faint); font-size: var(--t-small); margin: var(--s-2) 0 0; }
.temp-accion {
  display: flex; align-items: flex-start; gap: var(--s-2);
  color: var(--ink-soft); font-size: var(--t-small); margin: var(--s-2) 0 0;
}
.temp-accion .icon { flex: none; width: 18px; height: 18px; color: var(--alert); }

/* ==========================================================================
   CITAS MÉDICAS EXTERNAS
   Los datos de la cita se leen de un vistazo antes de tocar nada: quien abre
   esto suele estar decidiendo si alcanza a conseguir quién la lleve.
   ========================================================================== */

.cita-datos {
  display: grid; gap: var(--s-3);
  background: var(--paper-sunk);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
}
.cita-datos p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline; }
.cita-datos .label-micro { flex: none; min-width: 92px; color: var(--ink-faint); }
/* Lo que falta se lee, no solo se colorea. */
.cita-falta { color: var(--clay); }

/* ==========================================================================
   Terapias
   La tarjeta es la de una prescripción (.rx) porque es la misma cosa: un
   tratamiento vigente con un registro de ejecución debajo. Lo que sigue es
   solo lo que una prescripción no tiene.
   ========================================================================== */

.plan-objetivo {
  margin-top: var(--s-4);
  font-size: var(--t-body);
  color: var(--ink);
}

/* --- Adherencia ---
   Va ARRIBA del objetivo: el objetivo se lee una vez y el cumplimiento se
   mira cada semana. */
.adherencia {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--paper-sunk);
}
.adherencia-cifra {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}
.adherencia-cifra b { color: var(--ink); font-size: var(--t-body-lg); }

.adherencia-barra {
  height: 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
.adherencia-relleno {
  display: block; height: 100%;
  border-radius: var(--r-pill);
  /* El ancho lo pone el JavaScript, ya recortado a 100: pasarse de la
     frecuencia prescrita no es "mejor", es otro plan. */
  transition: width var(--dur) var(--ease);
}
.adherencia-relleno.ok    { background: var(--sage); }
.adherencia-relleno.medio { background: var(--clay); }
.adherencia-relleno.bajo  { background: var(--alert); }

@media (prefers-reduced-motion: reduce) {
  .adherencia-relleno { transition: none; }
}

.adherencia-detalle {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-3);
}

/* --- Las últimas sesiones, debajo del plan --- */
.plan-sesiones {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px dashed var(--rule);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.sesion {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--t-small); color: var(--ink-soft);
}
.sesion .dot { margin-top: 7px; }
.sesion b { color: var(--ink); }
.sesion p { margin-top: var(--s-1); }

/* ==========================================================================
   Series de actividades (lo que se repite cada semana)

   Una fila por plantilla, con lo único que hay que saber de un vistazo: qué
   día cae y hasta cuándo está programada. Lo segundo es el dato que importa —
   una serie sin calendario deja de aparecer sin avisar.
   ========================================================================== */

.serie-lista { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-2); }
.serie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--pane);
}
/* Cerrada: se atenúa pero NO desaparece. Lo que dejó de repetirse sigue
   explicando el calendario del mes pasado. */
.serie.es-cerrada { opacity: 0.62; }
.serie-titulo { font-weight: 700; margin: 0; }
.serie-cuando { margin: var(--s-1) 0 0; color: var(--ink-soft); }
.serie-estado { margin: var(--s-1) 0 0; color: var(--ink-faint); font-size: var(--t-small); }
.serie-acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* El teléfono en la hoja de aviso a la familia. Grande y como enlace: se usa
   de pie, de madrugada, y lo siguiente que hace quien lo lee es marcarlo. */
.aviso-telefono { margin: 0 0 var(--s-2); }
.aviso-telefono a { font-weight: 700; }


/* --------------------------------------------------------------- Prescripción
   Lo que la tarjeta no enseñaba: desde cuándo, hasta cuándo y —si está
   descontinuada— por qué. Las tres columnas existían en la base desde la
   primera migración y no se veían en ninguna pantalla.

   Vocabulario de ESTA superficie y no de `/shared`: «prevista hasta», «pasó su
   fecha de fin» y «por qué se descontinuó» solo significan algo en el plan de
   medicación de un residente.                                                */

.rx-fechas {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  color: var(--ink-faint);
}

/* El aviso de la prescripción vencida va DENTRO de la tarjeta, no como un
   distintivo: lo que hay que leer es qué hacer al respecto, y eso no cabe en
   una etiqueta. Terracota y no rojo — avisa, no bloquea la toma. */
.rx-vencida {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--clay-wash);
  color: var(--clay);
  font-size: var(--t-small);
  line-height: 1.45;
}
.rx-vencida .icon { flex: 0 0 auto; margin-top: 2px; }

.rx-motivo {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--rule);
  font-size: var(--t-small);
  line-height: 1.45;
}

/* Micro-etiqueta en versalitas: es la excepción que el sistema admite por
   debajo de 16px, porque ETIQUETA un dato en vez de ser contenido. */
.rx-motivo-rotulo {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}

/* Con dos acciones, la segunda necesita aire. Una sola sigue viéndose igual. */
.rx-actions > .btn + .btn { margin-top: var(--s-2); }

/* `.sheet-subtitulo` se usaba en cuatro hojas y NO tenía ni una regla: era una
   clase muerta, así que esas cuatro notas se pintaban como párrafo suelto. */
.sheet-subtitulo {
  margin-bottom: var(--s-5);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ===================== CASA =====================
   Composición de la sección de mantenimiento. El vocabulario de gravedad
   reutiliza las etiquetas de incidentes (leve / moderado / grave): el mismo
   color dice lo mismo en toda la aplicación. Cero oro, como el resto de Care. */
.casa-quien {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-2);
  font-weight: 700;
}
.casa-quien .icon { flex: none; }
.casa-cuando { margin-top: var(--s-2); font-weight: 700; color: var(--ink-soft); }
/* Lo que pide acción se distingue por PALABRAS («vencida hace 10 días») y,
   además, por el filete — nunca solo por el color. */
.casa-vencida, .casa-nunca { border-left: 3px solid var(--clay); }
.casa-vencida .casa-cuando, .casa-nunca .casa-cuando { color: var(--clay); }
.casa-acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.casa-dano .btn { margin-top: var(--s-3); }
.casa-recientes summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.casa-recientes ul { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding-left: var(--s-5); }

/* «A necesidad» (docs/16): la etiqueta va en el tono tranquilo de la ficha, y
   la sugerencia es una pregunta, no un aviso — nada está mal todavía. */
.tag.rx-necesidad { background: var(--paper-sunk); color: var(--ink); }
.rx-sugerencia {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--paper-sunk);
}
.rx-sugerencia-acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.armario-avisar { margin-top: var(--s-3); gap: var(--s-2); }

/* ==========================================================================
   HORARIO DE ADMINISTRACIÓN (docs/16). Cada dosis de hoy con su palabra:
   el color ayuda, pero lo que se lee es «Toca ahora» o «Sin registro».
   Sin oro: en Care lo urgente va en terracota.
   ========================================================================== */
.rx-horario { margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--paper); }
.rx-horario.es-vacio { border: 1px dashed var(--rule-strong); background: transparent; }
.rx-horario p { margin: 0 0 var(--s-2); }
.rx-horario-titulo { font-size: var(--t-small); font-weight: 700; color: var(--ink-soft); }
.rx-dosis { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rx-dosis-item {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: var(--pane);
}
.rx-dosis-hora { font-weight: 700; }
.rx-dosis-item.es-registrada { border-color: var(--sage-line); background: var(--sage-wash); color: var(--sage-deep); }
.rx-dosis-item.es-ahora { border-color: var(--teal); background: var(--teal-wash); color: var(--teal); font-weight: 700; }
.rx-dosis-item.es-sin-registro { border-color: var(--clay); background: var(--clay-wash); color: var(--clay); font-weight: 700; }
.rx-dosis-item.es-por-venir { color: var(--ink-soft); }
.horario-horas { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.horario-fila { display: flex; align-items: center; gap: var(--s-2); }
.horario-fila input { flex: 1; min-width: 0; }
.horario-tipos { flex-wrap: wrap; }