/* ==========================================================================
   CURATIO HMS — CAPA DE PRESENTACIÓN

   El vocabulario visual que le faltaba al sistema, en un solo sitio y con
   nombres neutros para que lo use cualquier módulo.

   ── DE DÓNDE SALE ─────────────────────────────────────────────────────────

   De comparar CURATIO con lo que se espera hoy de un sistema de este precio.
   No faltaban componentes —había avatares, gráficas, chips— faltaban CUATRO
   piezas que aparecen en todos los cuadros de mando serios y en ninguna
   pantalla de aquí:

     · el chip de VARIACIÓN        «+3,58 % ▲ vs. mes anterior»
     · el selector de RANGO        «TODO · 1M · 6M · 1A»
     · la TIRA de cifras           tres números dentro de la tarjeta, con filete
     · la cabecera con ACCIÓN      título a la izquierda, control a la derecha

   Sin ellas una pantalla informa; con ellas, orienta. La diferencia entre
   «masa salarial: 1,570,000» y «masa salarial: 1,570,000 ▲ 4,2 % vs. mayo» es
   que la segunda dice si hay que hacer algo.

   ── LA REGLA QUE NO SE ROMPE ──────────────────────────────────────────────

   UN CHIP DE VARIACIÓN SIN DATO ANTERIOR NO SE PINTA. Nunca. Es la pieza que
   más invita a inventar —queda preciosa y siempre hay un número a mano— y la
   que más daño hace: quien la lee toma decisiones con ella. Si no hay período
   anterior con el que comparar, se enseña la cifra sola.

   ── LO QUE APARECIÓ AL BUSCAR SI YA EXISTÍA ───────────────────────────────

   Dos de las cuatro YA estaban, en otro sitio y con otro nombre:

     · el chip de variación vivía en `panel.css` como `.delta`, con SEIS
       colores literales y una regla aparte para el tema claro;
     · el selector de rango existe CINCO veces —`.vistas` en Agenda,
       `.aging-fila` y `.fac-estados` en Facturación, `.solo-activos` en
       Hospitalización, `.tray-filtros` en Pacientes—, cada uno con su
       propio tamaño.

   Ese es el diagnóstico de verdad: las pantallas nuevas no desentonan por
   feas, desentonan por DERIVA. El mismo control existe cinco veces y cada
   módulo eligió un subconjunto distinto del vocabulario.

   `.delta` se recoge aquí como alias para no tocar `panel.js`. Los cinco
   segmentados se unifican cuando se toque cada módulo: renombrarlos hoy, a
   ciegas, cambiaría cinco pantallas que funcionan.

   Se carga DESPUÉS de `hms-core.css` y ANTES de la hoja del módulo, para que
   cada módulo pueda seguir ajustando lo suyo encima.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1 · CHIP DE VARIACIÓN
   ══════════════════════════════════════════════════════════════════════════
   Flecha, número, y nada más. El texto de referencia —«vs. mes anterior»— va
   FUERA del chip, en tono apagado: dentro compite con la cifra y hace que el
   chip pierda su única virtud, que es leerse de un vistazo.

   Sube no es siempre bueno. Un 12 % más de ingresos y un 12 % más de ausencias
   se pintan igual de verde si el color lo decide el signo, así que lo decide
   quien lo usa: `--bien` cuando subir es bueno, `--mal` cuando no.
   ══════════════════════════════════════════════════════════════════════════ */
.hms-delta,
.delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--hms-radio-pill);
  font-size: .6875rem; font-weight: 600; line-height: 1.6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--hms-delta-color, var(--app-tenue));
  background: color-mix(in srgb, var(--hms-delta-color, var(--app-tenue)) 12%, transparent);
}

.hms-delta--bien,  .delta--sube  { --hms-delta-color: var(--hms-success); }
.hms-delta--mal,   .delta--baja  { --hms-delta-color: var(--hms-critical); }
.hms-delta--aviso                { --hms-delta-color: var(--hms-warning); }
/* Sin cambio: gris y sin flecha. Un 0 % en verde se lee como mejora. */
.hms-delta--nulo, .delta--plano  { --hms-delta-color: var(--app-tenue); }

.hms-delta__ref {
  font-size: .72rem; color: var(--app-tenue); margin-left: 6px;
  font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · SELECTOR DE RANGO
   ══════════════════════════════════════════════════════════════════════════
   Un grupo de botones dentro de una cápsula, con el activo en relieve. Va en
   la cabecera de la tarjeta que gobierna, no en una barra de filtros suelta:
   quien cambia el rango está mirando ESA gráfica.

   Botones de verdad y no `<a>`: se navega con teclado y se activan con espacio
   sin que haya que enseñárselo a nadie.
   ══════════════════════════════════════════════════════════════════════════ */
/* Un grupo de botones dentro de una cápsula, con el activo en relieve.

   ── LO QUE ENCONTRÉ AL IR A UNIFICARLO ────────────────────────────────────

   Dije que este control existía CINCO veces. Al mirarlo de cerca son TRES:

     · `.aging-fila` es una fila de barra de antigüedad —rejilla de tres
       columnas, 96px/1fr/104px— que resulta que usa `aria-pressed` porque se
       puede seleccionar. No es una cápsula segmentada. No se toca.
     · `.solo-activos` es UN interruptor suelto, con su propio borde. Tampoco
       es un grupo. No se toca.

   Y de las tres que sí lo son, `.fac-estados` y `.tray-filtros` son idénticas
   —mismo padding, mismo radio, mismo activo— y `.vistas` es la misma pieza en
   grande y con el activo en azul sólido: es el conmutador principal de la
   agenda y grita a propósito.

   Así que no son tres componentes: es uno con una variante. Los tres nombres
   viejos se conservan como alias para no tocar el marcado de tres pantallas
   que funcionan.

   Botones de verdad y no `<a>`: se navega con teclado y se activan con espacio
   sin que haya que enseñárselo a nadie.
   ══════════════════════════════════════════════════════════════════════════ */
.hms-rango,
.vistas, .fac-estados, .tray-filtros {
  display: inline-flex; gap: 2px;
  flex-wrap: wrap;                 /* Pacientes lo necesita: siete filtros. */
  padding: 3px;
  border-radius: 10px;
  background: var(--app-pista);
}

.hms-rango__b,
.vistas button, .fac-estados button, .tray-filtros button {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; color: var(--app-tenue);
  padding: 5px var(--hms-sp-3);
  border-radius: 7px;
  font-size: .6875rem; font-weight: var(--hms-fw-semibold);
  cursor: pointer;
  transition: background var(--hms-t-rapida) var(--hms-ease),
              color var(--hms-t-rapida) var(--hms-ease);
}

.hms-rango__b:hover,
.vistas button:hover, .fac-estados button:hover, .tray-filtros button:hover {
  color: var(--app-texto);
}

/* El activo se levanta sobre la cápsula. No lleva color de marca: en una barra
   de filtros compite con los estados de las filas de abajo. */
.hms-rango__b[aria-pressed="true"],
.fac-estados button[aria-pressed="true"],
.tray-filtros button[aria-pressed="true"] {
  background: var(--app-superficie);
  color: var(--app-texto);
  box-shadow: var(--app-sombra);
}

.tray-filtros i, .hms-rango__b i { font-size: .625rem; }

/* ── Variante fuerte ───────────────────────────────────────────────────────
   La agenda. Ahí el conmutador NO es un filtro entre otros: es lo que decide
   qué se está mirando —día, semana, mes— y es la primera decisión que se toma
   al entrar. Más grande y con el activo en azul sólido, que es como estaba y
   como debe quedarse.
   ───────────────────────────────────────────────────────────────────────── */
.hms-rango--fuerte .hms-rango__b,
.vistas button {
  padding: 7px var(--hms-sp-4);
  border-radius: 8px;
  font-size: .8125rem;
}

.hms-rango--fuerte .hms-rango__b[aria-pressed="true"],
.vistas button[aria-pressed="true"] {
  background: var(--hms-primary);
  color: #fff;
  box-shadow: none;
}
/* ══════════════════════════════════════════════════════════════════════════
   3 · TIRA DE CIFRAS
   ══════════════════════════════════════════════════════════════════════════
   Las tres o cuatro cifras que resumen lo que hay debajo, dentro de la misma
   tarjeta y separadas por un filete. No es un KPI: un KPI es la respuesta a
   una pregunta y vive en su caja; esto es el encabezado de una gráfica.

   El filete va con `border-inline-start` en todos menos el primero, y no con
   `justify-content: space-around` y separadores dibujados: así sobrevive a que
   una columna se quede vacía.
   ══════════════════════════════════════════════════════════════════════════ */
.hms-tira {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-block: 1px solid var(--app-borde);
}

.hms-tira__c {
  padding: var(--hms-sp-4) var(--hms-sp-5);
  text-align: center;
  min-width: 0;
}

.hms-tira__c + .hms-tira__c { border-inline-start: 1px solid var(--app-borde); }

.hms-tira__n {
  font-size: 1.25rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hms-tira__et {
  font-size: .72rem; color: var(--app-tenue); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* En pantalla estrecha se apilan de dos en dos antes que encogerse hasta ser
   ilegibles: una cifra recortada no informa de nada. */
@media (max-width: 720px) {
  .hms-tira { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .hms-tira__c:nth-child(odd)  { border-inline-start: 0; }
  .hms-tira__c:nth-child(n+3)  { border-block-start: 1px solid var(--app-borde); }
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · CABECERA DE TARJETA CON ACCIÓN
   ══════════════════════════════════════════════════════════════════════════
   Título y subtítulo a la izquierda, lo que se pueda hacer a la derecha. El
   patrón existía suelto en seis módulos con seis nombres distintos —`rh-cab`,
   `med-cab`, `act-cab`…— cada uno con su propio `padding`.
   ══════════════════════════════════════════════════════════════════════════ */
/* `.rh-cab` NUNCA TUVO ESTILO. En ninguna de las 48 hojas.
   El marcado la usa en la ficha de RRHH y en cada una de sus secciones
   esperando titulo a la izquierda y acciones a la derecha, y computaba a
   `display: block`: todo apilado, los botones bajo el titulo, y las
   propiedades flex de los hijos sin efecto ninguno.

   Es el mismo caso que `.rh-totales`: marcado escrito contra unos estilos
   que nadie llego a escribir. Se recoge aqui como alias en vez de
   duplicarla — es exactamente esta cabecera. */
.hms-cab,
.rh-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hms-sp-4);
  padding: var(--hms-sp-5);
  flex-wrap: wrap;
}

.hms-cab__t,   .rh-cab__t   { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.hms-cab__sub, .rh-cab__sub { font-size: .78rem; color: var(--app-tenue); margin-top: 2px; }

/* Lo de la derecha no se estira ni se parte: es un control, no contenido. */
.hms-cab__acc, .rh-cab__acc { display: flex; align-items: center; gap: var(--hms-sp-2); flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   5 · PASTILLA DE ESTADO
   ══════════════════════════════════════════════════════════════════════════
   Punto y palabra. El punto se ve antes que el texto y de más lejos, que es
   como se recorre una lista de veinticinco filas: no se lee, se barre.

   La palabra va entera —«Aprobada», no «APR»—. Las tres letras son correctas
   en una columna `char(3)` de la base; en pantalla hay que traducirlas cada
   vez, y quien entra una vez al mes no las tiene traducidas.

   Nació en `rh.css` y ahí no servía: Inventario y Activos no cargan esa hoja.
   `.rh-pill` se conserva como alias para no tocar lo que ya la usa.
   ══════════════════════════════════════════════════════════════════════════ */
.hms-pill,
.rh-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: var(--hms-radio-pill);
  font-size: .6875rem; font-weight: 600; line-height: 1.5;
  white-space: nowrap;
  color: var(--hms-pill-color, var(--app-tenue));
  background: color-mix(in srgb, var(--hms-pill-color, var(--app-tenue)) 12%, transparent);
}

.hms-pill::before,
.rh-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

.hms-pill--ok,    .rh-pill--ok    { --hms-pill-color: var(--hms-success); }
.hms-pill--baja,  .rh-pill--baja  { --hms-pill-color: var(--hms-critical); }
.hms-pill--aviso, .rh-pill--aviso { --hms-pill-color: var(--hms-warning); }
.hms-pill--info,  .rh-pill--info  { --hms-pill-color: var(--hms-primary); }
/* Varias pastillas seguidas bajo el nombre de una fila de tabla. Sin esto se
   pegan al texto de arriba y entre ellas. */
.inv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   6 · TIRA EN REJILLA — la variante que se ajusta
   ══════════════════════════════════════════════════════════════════════════
   `.hms-tira` pone todo en una fila, que es lo correcto para tres cifras bajo
   la cabecera de una gráfica. La ficha de un empleado tiene SEIS —ingreso,
   antigüedad, vacaciones, sueldo, forma de pago, celular— y en un panel de
   media pantalla no caben en fila.

   `.rh-totales` va aquí como alias porque el marcado existía desde hace meses
   y NO TENÍA ESTILO EN NINGUNA HOJA: se pintaba como divs apilados, etiqueta y
   valor en renglones distintos. Por eso la ficha parecía un volcado de datos.

   El problema no era el diseño: era que faltaba el CSS y nadie lo notó porque
   la pantalla «funcionaba».
   ══════════════════════════════════════════════════════════════════════════ */
.hms-tira--rejilla,
.rh-totales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--app-borde);      /* el hueco de 1px hace de filete */
  border: 1px solid var(--app-borde);
  border-radius: var(--hms-radio-campo);
  overflow: hidden;
  margin-bottom: var(--hms-sp-5);
}

/* El aire de arriba y abajo es MAS que el de los lados. `--hms-sp-4` a los
   cuatro costados dejaba las celdas apretadas en vertical: la etiqueta
   pegada al borde y el dato pegado a la etiqueta. En una tira que se lee de
   un vistazo, el aire vertical es lo que separa una cifra de la siguiente. */
/* LA CELDA ES UNA COLUMNA, Y EL DATO VA ABAJO.
   La etiqueta llevaba `nowrap` con puntos suspensivos y «VACACIONES AL AÑO»
   salia cortada en «VACACIONES AL A…»: siete celdas en una fila no dejan
   sitio para una etiqueta larga en una sola linea.

   Dejarla partir en dos renglones desalinea los numeros —una celda con la
   etiqueta de dos lineas empuja su dato mas abajo que las vecinas—, asi que
   la celda es una columna: la etiqueta se lleva el hueco que sobra arriba y
   el dato se apoya en el fondo. Parta o no parta la etiqueta, todos los
   numeros de la fila quedan a la misma altura. */
.hms-tira--rejilla > *,
.rh-total {
  display: flex;
  flex-direction: column;
  padding: var(--hms-sp-6) var(--hms-sp-5);
  background: var(--app-superficie);
  min-width: 0;
}

/* La etiqueta ARRIBA y pequeña; el dato debajo y grande. Al revés —que es como
   se leía sin estilo— obliga a leer el valor antes de saber de qué es. */
.rh-total__et {
  /* Dos renglones SIEMPRE, parta la etiqueta o no. Con `flex:1` la etiqueta
     se comia el hueco sobrante y los numeros alineaban por abajo; la celda
     de HIJOS, que lleva un subtexto debajo del dato, dejaba su «0» un renglon
     mas arriba que los demas. Reservando el alto, todos los datos de la fila
     arrancan a la misma altura y lo que cuelga, cuelga. */
  flex: none;
  min-height: 2.8em;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.4;
  color: var(--app-tenue);
}

.rh-total__n {
  flex: none;
  font-size: 1rem; font-weight: 600; line-height: 1.3; margin-top: var(--hms-sp-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════
   7 · BOTÓN DE ACCIÓN TINTADO
   ══════════════════════════════════════════════════════════════════════════
   Un grupo de acciones que van juntas —«Editar datos», «Cambio de contrato»,
   «Dar de baja»— tiene que LEERSE junto. Poner uno en azul sólido y los otros
   dos en blanco no jerarquiza: rompe el grupo, y los dos planos se leen como
   deshabilitados.

   Cada uno lleva su tono en fondo suave y su texto en el color del tono. Se
   distinguen entre sí por el COLOR —azul lo corriente, ámbar lo que cambia el
   contrato, rojo lo que da de baja— y no por cuál grita más.

   Al pasar el ratón el fondo se satura y la tarjeta se levanta: sin eso un
   botón tintado se confunde con una etiqueta de estado, que es exactamente
   igual de plana.
   ══════════════════════════════════════════════════════════════════════════ */
/* DOS CLASES, NO UNA. `presentacion.css` carga ANTES que `formulario.css`
   —esta hoja va temprano a proposito, para que cada modulo pueda ajustar
   encima— y `.cap-btn` declara su propio fondo. Con la misma especificidad
   gana la ultima hoja, asi que el tinte no se veia: los botones salian
   blancos. `.cap-btn.cap-btn--tono` pesa mas y no depende del orden. */
.cap-btn.cap-btn--tono {
  --tono: var(--hms-primary);
  /* 10 % sobre una tarjeta blanca casi no se ve: el boton parecia plano.
     16 % de fondo y 38 % de borde se aprecian sin gritar, y siguen siendo
     mucho menos que un boton solido. */
  border-color: color-mix(in srgb, var(--tono) 38%, transparent);
  background: color-mix(in srgb, var(--tono) 16%, transparent);
  color: color-mix(in srgb, var(--tono) 88%, var(--app-texto));
}

.cap-btn.cap-btn--tono:hover {
  background: color-mix(in srgb, var(--tono) 26%, transparent);
  border-color: color-mix(in srgb, var(--tono) 58%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--hms-sombra-1);
}

.cap-btn.cap-btn--tono:active { transform: none; box-shadow: none; }

/* El foco de teclado NO se hereda del hover: quien navega con tabulador tiene
   que ver dónde está aunque el ratón esté en otra parte. */
.cap-btn.cap-btn--tono:focus-visible {
  outline: 2px solid var(--tono);
  outline-offset: 2px;
}

.cap-btn.cap-btn--aviso         { --tono: var(--hms-warning); }
.cap-btn.cap-btn--peligro-suave { --tono: var(--hms-critical); }
.cap-btn.cap-btn--exito         { --tono: var(--hms-success); }

/* ══════════════════════════════════════════════════════════════════════════
   8 · ESTADO VACÍO
   ══════════════════════════════════════════════════════════════════════════
   `.rh-vacia` NO TENÍA ESTILO en ninguna de las 48 hojas — la tercera hoy,
   después de `.rh-totales` y `.rh-cab`. Se pintaba como texto suelto pegado
   arriba a la izquierda, con el icono en línea: «Selecciona a alguien de la
   lista» en la esquina de un panel de media pantalla.

   Y no faltaba el componente: hay TRES. `.cap-vacio` en formulario.css,
   `.med-vacio` en listado.css y `.detalle__vacio` en agenda.css. RRHH inventó
   un cuarto nombre y no lo escribió.

   Se recoge aquí con el de la agenda como referencia —centrado de verdad, con
   alto mínimo para que ocupe el panel en vez de flotar arriba— porque es el que
   se usa en el mismo sitio: el lado derecho de un maestro-detalle.

   Dos tamaños. El del panel entero manda 260 px de alto; el de una sección
   dentro de una tarjeta no puede, o cada sección vacía dejaría un agujero.
   ══════════════════════════════════════════════════════════════════════════ */
.hms-vacio,
.rh-vacia {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--hms-sp-3);
  padding: var(--hms-sp-6, 24px);
  min-height: 260px;
  text-align: center;
  color: var(--app-tenue);
  font-size: .8125rem;
  line-height: 1.5;
}

.hms-vacio i,
.rh-vacia i {
  font-size: 2rem;
  color: var(--app-suave);
  opacity: .65;
}

/* Dentro de una sección: mismo aspecto, sin reservar media pantalla.

   Va por CLASE y no por `.tarjeta .rh-vacia`. Con el descendiente se comía
   también el vacío del panel entero —`#ficha` vive dentro de una `.tarjeta`—
   y «Selecciona a alguien de la lista» volvía a quedarse pegado arriba en un
   panel de media pantalla. Quien pinta el vacío sabe cuál de los dos es;
   deducirlo del sitio en el DOM acierta hasta que el DOM cambia. */
.rh-vacia--compacta,
.hms-vacio--compacto {
  min-height: 0;
  padding: var(--hms-sp-5) var(--hms-sp-4);
}

.rh-vacia--compacta i,
.hms-vacio--compacto i { font-size: 1.25rem; }