/* ==========================================================================
   CURATIO HMS — NÚCLEO
   Reset, base tipográfica y componentes compartidos por todos los módulos.
   Depende de tokens.css — cargar SIEMPRE después de él.
   ========================================================================== */

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--hms-font);
  font-size: var(--hms-fs-texto);
  line-height: 1.5;
  color: var(--hms-text);
  background: var(--hms-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--hms-primary-300); text-decoration: none; }

/* Foco visible para navegación por teclado (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--hms-cyan);
  outline-offset: 2px;
}

/* ---------- Utilidades ---------- */
.hms-oculto { display: none !important; }

.hms-solo-lectores {           /* visible solo para lectores de pantalla */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.hms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hms-sp-2);
  height: var(--hms-alto-boton);
  padding: 0 var(--hms-sp-5);
  border: 0;
  border-radius: var(--hms-radio-boton);
  font-weight: var(--hms-fw-bold);
  transition: transform var(--hms-t-media) var(--hms-ease),
              filter    var(--hms-t-media) var(--hms-ease),
              box-shadow var(--hms-t-media) var(--hms-ease);
}
.hms-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.hms-btn:active:not(:disabled) { transform: translateY(0); }
.hms-btn:disabled { opacity: .6; cursor: not-allowed; }

.hms-btn--primario {
  color: #fff;
  background: var(--hms-grad-accion);
  box-shadow: 0 12px 28px rgba(69, 92, 255, .26);
}
.hms-btn--bloque { width: 100%; }

.hms-btn--secundario {
  background: var(--hms-light-bg);
  color: #445267;
  border: 1px solid var(--hms-light-border);
  box-shadow: none;
}
.hms-btn--secundario:hover:not(:disabled) { background: var(--hms-light-surface); }

/* ==========================================================================
   CAMPOS DE FORMULARIO
   ========================================================================== */
.hms-grupo { margin-bottom: var(--hms-sp-4); }

.hms-etiqueta {
  display: block;
  margin-bottom: var(--hms-sp-2);
  font-size: var(--hms-fs-etiqueta);
  font-weight: var(--hms-fw-bold);
}

.hms-campo { position: relative; }

.hms-campo > .hms-campo__icono {
  position: absolute;
  left: var(--hms-sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: #9BA9BA;
  pointer-events: none;
}

.hms-input {
  width: 100%;
  height: var(--hms-alto-campo);
  padding: 0 var(--hms-sp-4);
  border: 1px solid var(--hms-light-border);
  border-radius: var(--hms-radio-campo);
  background: var(--hms-light-bg);
  color: var(--hms-light-text);
  outline: none;
  transition: border-color var(--hms-t-media) var(--hms-ease),
              box-shadow  var(--hms-t-media) var(--hms-ease);
}
.hms-input--con-icono   { padding-left: 46px; }
.hms-input--con-accion  { padding-right: 46px; }

.hms-input:focus {
  border-color: var(--hms-primary);
  box-shadow: 0 0 0 4px rgba(13, 110, 253, .12);
}
.hms-input::placeholder { color: #9BA9BA; }

/* Botón embebido en el campo (ej. mostrar/ocultar contraseña) */
.hms-campo__accion {
  position: absolute;
  right: var(--hms-sp-2);
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--hms-radio-boton);
  background: transparent;
  color: #8493A5;
  transition: background var(--hms-t-rapida) var(--hms-ease);
}
.hms-campo__accion:hover { background: var(--hms-light-surface); }

/* ==========================================================================
   ALERTAS
   ========================================================================== */
.hms-alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--hms-sp-3);
  padding: var(--hms-sp-3) var(--hms-sp-4);
  margin-bottom: var(--hms-sp-4);
  border-radius: var(--hms-radio-campo);
  font-size: 0.875rem;
}
.hms-alerta--error {
  background: #FFF0F2;
  color: #B42338;
  border: 1px solid #FFCBD3;
}
.hms-alerta--ok {
  background: #EFFCF4;
  color: #14713C;
  border: 1px solid #BBF7D0;
}

/* ==========================================================================
   INDICADOR DE CARGA
   ========================================================================== */
.hms-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hms-girar .75s linear infinite;
}
@keyframes hms-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hms-spinner { animation-duration: 2s; }
}

/* ==========================================================================
   MARCA
   ========================================================================== */
.hms-marca { display: flex; align-items: center; gap: var(--hms-sp-3); }

.hms-marca__simbolo {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--hms-radio-tarjeta);
  background: var(--hms-grad-ai);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: var(--hms-sombra-md);
  flex: none;
}
.hms-marca__nombre {
  font-size: 1.375rem;
  font-weight: var(--hms-fw-extrabold);
  letter-spacing: -.01em;
}
.hms-marca__nombre span { color: var(--hms-cyan-300); }
.hms-marca__bajada {
  display: block;
  margin-top: 2px;
  font-size: 0.6875rem;
  color: #A9CDE2;
}

/* ==========================================================================
   AVATAR DEL PACIENTE

   Su foto si la tiene, sus iniciales si no. Lo pinta HMS.avatar() y sale en
   todas las pantallas donde aparece un paciente: listados, citas, urgencias,
   ingresos y órdenes. Antes cada módulo llevaba su propia copia.
   ========================================================================== */

.hms-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--hms-radio-pill);
  background: var(--hms-grad-marca);
  color: #fff;
  font-weight: var(--hms-fw-bold);
  letter-spacing: .01em;
  line-height: 1;
  user-select: none;
}

.hms-avatar img {
  width: 100%;
  height: 100%;
  /* `cover` y no `contain`: una foto de carnet recortada se sigue
     reconociendo; con bandas a los lados, no.
     El anclaje arriba evita cortar la cara en fotos verticales. */
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hms-avatar--sm { width: 30px; height: 30px; font-size: .625rem; }
.hms-avatar--md { width: 38px; height: 38px; font-size: .75rem; }
.hms-avatar--lg { width: 60px; height: 60px; font-size: 1.125rem;
                  border-radius: var(--hms-radio-tarjeta); }
.hms-avatar--xl { width: 84px; height: 84px; font-size: 1.5rem;
                  border-radius: var(--hms-radio-tarjeta); }

/* Con foto se apaga el degradado de marca: mientras la imagen carga es mejor
   un hueco neutro que un rectángulo azul que cambia de golpe. */
.hms-avatar:has(img) { background: var(--app-pista); }

/* El médico va en cian y no en azul de marca: en una pantalla donde salen
   los dos —el detalle de una cita— hay que distinguir de un vistazo quién
   es el paciente y quién lo atiende. */
.hms-avatar--medico {
  background: linear-gradient(135deg, var(--hms-cyan), var(--hms-primary));
}

/* ==========================================================================
   PAGINACIÓN

   Con números, no solo flechas: de la página 1 a la 12 son once clics con
   flechas y uno con números. Lo pinta HMS.paginacion().
   ========================================================================== */

.hms-pag {
  display: flex;
  align-items: center;
  gap: var(--hms-sp-4);
  flex-wrap: wrap;
  padding: var(--hms-sp-3) var(--hms-sp-4);
  border-top: 1px solid var(--app-borde);
  font-size: .75rem;
  color: var(--app-tenue);
}

/* El recuento va a la izquierda y los controles a la derecha: la vista se
   lee de izquierda a derecha y "cuántos hay" importa antes que "a dónde ir". */
.hms-pag__info {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hms-pag__info b {
  color: var(--app-texto);
  font-weight: var(--hms-fw-semibold);
}

.hms-pag__controles {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.hms-pag__btn,
.hms-pag__n {
  min-width: 30px;
  height: 30px;
  padding: 0 var(--hms-sp-2);
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--app-tenue);
  font: inherit;
  font-size: .75rem;
  font-weight: var(--hms-fw-semibold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--hms-t-rapida) var(--hms-ease),
              color      var(--hms-t-rapida) var(--hms-ease),
              border-color var(--hms-t-rapida) var(--hms-ease);
}

.hms-pag__btn:not(:disabled):hover,
.hms-pag__n:not(.hms-pag__n--activa):hover {
  background: var(--app-pista);
  color: var(--app-texto);
}

.hms-pag__btn:focus-visible,
.hms-pag__n:focus-visible { outline: none; box-shadow: var(--hms-anillo); }

/* Deshabilitado que se lee como "no hay a dónde ir", no como un fallo:
   sin cursor de prohibido y sin desvanecer hasta hacerlo invisible. */
.hms-pag__btn:disabled {
  opacity: .35;
  cursor: default;
}

.hms-pag__n--activa {
  background: var(--hms-grad-marca);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--hms-elev-1);
  cursor: default;
}

.hms-pag__puntos {
  padding: 0 2px;
  color: var(--app-suave);
  user-select: none;
}

@media (max-width: 620px) {
  .hms-pag { justify-content: center; }
  .hms-pag__controles { margin-left: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   EL SÍMBOLO, YA COMO IMAGEN

   Antes era un `<i>` de FontAwesome dentro de un `<div>` con el degradado de
   fondo. Se veía bien, pero no era un logo: no se podía imprimir, ni guardar
   en la base de datos, ni mandar por correo, ni poner en la pestaña del
   navegador. Ahora es `marca-hms-simbolo.svg`.

   El contenedor SUELTA su fondo, su sombra y su radio: el SVG ya trae el
   cuadrado redondeado con su degradado dentro. Dejárselos pintaría un
   degradado encima de otro y un borde redondeado sobre otro ligeramente
   distinto — que es peor que cualquiera de los dos solo.
   ══════════════════════════════════════════════════════════════════════════ */
.hms-marca__simbolo--img {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.hms-marca__simbolo--img img { width: 100%; height: 100%; display: block; }
/* El texto del selector de rango. Sin `flex:1` no empujaba a la flecha, que se
   quedaba pegada a la fecha en vez de en el borde del botón, y el ancho del
   control bailaba según lo largo que fuera el rango elegido. */
.rango__txt {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   CASILLAS Y BOTONES DE OPCIÓN

   Los 37 checkbox del sistema eran los del navegador: cuadraditos grises de
   13 px que en Windows se pintan con el estilo del sistema operativo y no con
   el nuestro. Al lado de campos con radio de 12 px y anillo de foco propio,
   cantan — sobre todo en una rejilla de 19, donde son lo único que se mira.

   Había dos parches sueltos, `accent-color` en Conciliación y en Lotes, que
   solo cambiaban el color del relleno. El resto —tamaño, borde, radio, foco—
   seguía siendo del navegador.

   ══════════════════════════════════════════════════════════════════════════
   VA EN `hms-core.css` Y NO EN `formulario.css`
   ══════════════════════════════════════════════════════════════════════════
   `formulario.css` la cargan 70 pantallas; esta, 74 — entre ellas la de
   acceso, que tiene el «Recordarme» y no carga la otra. Poniéndolo aquí no
   queda ninguna casilla del sistema con dos aspectos distintos.

   Se estilizan por TIPO y no por clase a propósito: son 37 repartidos entre
   diez pantallas y quince ficheros de JS, y pedir que cada uno se acuerde de
   añadir una clase es garantizar que el 38 nazca crudo. Es lo contrario de lo
   que hace `.cap-campo`, y aquí toca al revés: una casilla es una casilla en
   todas partes.

   ══════════════════════════════════════════════════════════════════════════
   EL TIC ES `clip-path`, NO UNA FUENTE DE ICONOS
   ══════════════════════════════════════════════════════════════════════════
   Font Awesome está cargado, pero un `::before` con `content: "\f00c"` depende
   de que la fuente haya llegado: si tarda o falla —y estos hospitales operan
   en redes restringidas—, la casilla marcada se ve VACÍA. Y una casilla que
   miente sobre si está marcada, en la pantalla que reparte permisos, es
   exactamente el fallo que no puede pasar.

   Con `clip-path` el tic es geometría: no depende de nada externo.
   ══════════════════════════════════════════════════════════════════════════ */

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  /* `flex: none` porque muchas viven en contenedores flex —`.rol-p` sin ir más
     lejos— y sin esto se estiran hasta deformarse. */
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
  border: 1.5px solid var(--app-borde);
  border-radius: 5px;
  background: var(--app-fondo);
  cursor: pointer;
  transition: background   var(--hms-t-rapida) var(--hms-ease),
              border-color var(--hms-t-rapida) var(--hms-ease),
              box-shadow   var(--hms-t-rapida) var(--hms-ease);
}

input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]::before,
input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform var(--hms-t-rapida) var(--hms-ease-salida);
  background: #fff;
  /* Un tic dibujado con seis vértices. Geometría, no tipografía. */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="radio"]::before {
  width: 8px; height: 8px;
  border-radius: 50%;
  clip-path: none;
}

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--hms-primary) 55%, var(--app-borde));
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--hms-primary);
  border-color: var(--hms-primary);
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before { transform: scale(1); }

/* El estado intermedio —«algunos de este grupo»— existía en el DOM y no se
   veía: una casilla en `indeterminate` se pintaba igual que una vacía. */
input[type="checkbox"]:indeterminate {
  background: var(--hms-primary);
  border-color: var(--hms-primary);
}
input[type="checkbox"]:indeterminate::before {
  transform: scale(1);
  clip-path: none;
  width: 9px;
  height: 2px;
  border-radius: 1px;
}

/* `:focus-visible` y no `:focus`: el anillo aparece al llegar con el teclado y
   no al hacer clic, que es cuando estorba. Quitarlo del todo dejaría la
   pantalla sin poder recorrerse con el tabulador. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--hms-primary);
  box-shadow: var(--hms-anillo);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: .5;
  cursor: default;
}