/* ============================================================
   SIADME — Layouts de aplicación (back-office y portal paciente)
   ============================================================ */

/* ---- Layout back-office: header + sidebar + main ---- */
.app-layout {
  /* Ancho actual de las columnas laterales: cada toggle modifica SOLO su variable.
     Así sidebar y drawer son independientes y combinables. */
  --sidebar-current-w: var(--sidebar-w);
  --drawer-current-w: 0px;

  display: grid;
  grid-template-columns: var(--sidebar-current-w) 1fr var(--drawer-current-w);
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "sidebar header header"
    "sidebar main   drawer";
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns var(--t-base);
}

/* Drawer abierto: modifica solo la columna del drawer */
body.drawer-open .app-layout {
  --drawer-current-w: var(--drawer-w, 340px);
}

.app-header {
  grid-area: header;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: 0 var(--sp-5);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.app-header__left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: flex-start;
}
.app-header__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: flex-end;
}
.app-header__title {
  margin: 0;
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}
.app-header__title small {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
  letter-spacing: 0;
  margin-left: var(--sp-2);
}
@media (max-width: 768px) {
  .app-header__title small { display: none; }
  .app-header__title { font-size: var(--fs-lg); }
}
.app-header__sucursal {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  border: 1px solid transparent;
}
.app-header__sucursal:hover { border-color: var(--c-primary); }

.app-sidebar {
  grid-area: sidebar;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  /* Sin padding-bottom: el footer (sticky) llega hasta el borde real del
     sidebar. Así no queda un gap por donde los items scrolleados pasen
     bajo el footer. El footer compensa con su propio padding.
     Sin padding-top: lo absorbe el brand-logo (sticky), si no quedaba un gap
     arriba por donde los items scrolleados se asomaban sobre el logo. */
  padding: 0 var(--sp-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  transition: padding var(--t-base);
  /* Scroll interno cuando todos los grupos están expandidos —
     el logo top y el footer JST quedan fijos via position: sticky. */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Brand logo y footer JST sticky para que queden siempre visibles
   aunque el contenido del medio crezca. */
.app-sidebar__brand-logo,
.app-sidebar__brand-logo--mini {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--c-surface);
}
.app-sidebar__footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--c-surface);
}

/* Brand: nombre del sistema + logo de la institución (parte superior) */
.app-sidebar__brand-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  /* Margen lateral negativo + el padding-top que sacamos del sidebar: el bloque
     llega a los dos bordes y cubre desde arriba, tapando los items scrolleados. */
  padding: var(--sp-4) var(--sp-3) var(--sp-4);
  margin: 0 calc(-1 * var(--sp-3)) var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  /* Ahora es <a> → quitar estilo de link. Sin background hover porque
     el logo .jpg tiene fondo blanco y queda feo el rectángulo coloreado;
     el cursor pointer alcanza como feedback. */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.app-sidebar__brand-system {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  letter-spacing: 0.08em;
  color: var(--c-primary);
  line-height: 1;
}
.app-sidebar__brand-logo img {
  max-width: 100%;
  height: 48px;
  object-fit: contain;
  display: block;
}
.app-sidebar__brand-logo--mini {
  display: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.app-sidebar__brand-logo--mini img {
  /* Ocupa el ancho del riel (con un respiro lateral por el padding sp-2 del
     contenedor) y la altura sigue el aspecto, hasta un tope. Antes quedaba fijo
     en 28×28 y se veía chico. */
  width: 100%;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}

/* Footer del sidebar (logo JST + nombre del sistema).
   Sticky al fondo del sidebar, totalmente opaco (con !important para
   resistir overrides por tema) y con sombra superior que da un corte
   visual claro contra los items scrolleables. */
.app-sidebar__footer {
  /* Margen lateral negativo: ocupa todo el ancho del sidebar (no solo el
     content-width), si no el bloque quedaba angosto con aire a los costados. */
  margin: auto calc(-1 * var(--sp-3)) 0;
  padding: var(--sp-3);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
  background: var(--c-surface) !important;
  box-shadow: 0 -8px 12px -4px var(--c-surface);
}
.app-sidebar__footer img {
  height: 40px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--t-fast);
}
.app-sidebar__footer img:hover { opacity: 1; }
.app-sidebar__footer-tag {
  font-size: 10px;
  color: var(--c-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-sidebar__footer-ver {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.6;
}

/* Sidebar colapsado: modifica solo la columna del sidebar */
body.sidebar-collapsed .app-layout {
  --sidebar-current-w: var(--sidebar-w-collapsed);
}
body.sidebar-collapsed .app-sidebar {
  /* padding-top 0 como en expandido: el cap del logo (sticky) lo absorbe; si no,
     queda un gap arriba por donde los items scrolleados se asoman sobre el logo. */
  padding: 0 var(--sp-2);
}
body.sidebar-collapsed .app-sidebar__brand-logo {
  display: none;
}
body.sidebar-collapsed .app-sidebar__brand-logo--mini {
  display: flex;
  align-items: center;
  justify-content: center;     /* centrar el logo en el riel (antes quedaba a la izq) */
  /* Full-bleed opaco (margen lateral negativo) para tapar los items que scrollean
     por debajo. Sin border-bottom: en el riel angosto la línea cruzada quedaba
     pesada/fea; la separación la da una sombra suave del color de la superficie,
     igual que el footer — invisible sin scroll, máscara difuminada al scrollear. */
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  margin: 0 calc(-1 * var(--sp-2)) 0;
  box-shadow: 0 8px 10px -6px var(--c-surface);
}
body.sidebar-collapsed .nav-item__label,
body.sidebar-collapsed .nav-section__title,
body.sidebar-collapsed .app-sidebar__footer-tag {
  display: none;
}
body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: var(--sp-2);
}
body.sidebar-collapsed .app-sidebar__footer {
  padding: var(--sp-2);
  /* En colapsado el padding lateral del sidebar es sp-2 → ajustar el margen. */
  margin-left: calc(-1 * var(--sp-2));
  margin-right: calc(-1 * var(--sp-2));
}
body.sidebar-collapsed .app-sidebar__footer img {
  height: 28px;
}
.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
}
.app-sidebar__brand-mark {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--c-primary);
  color: var(--c-text-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}
.app-sidebar__brand-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
}

.nav-section {
  margin-top: var(--sp-3);
}
.nav-section__title {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-soft);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
}
.nav-item:hover { background: var(--c-surface-hover); color: var(--c-text); text-decoration: none; }
.nav-item--active {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.nav-item__icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   Sidebar: buscador + grupos colapsables (acordeón multi-abierto)
   ============================================================ */
.sidebar-search {
  position: relative;
  margin: var(--sp-3) var(--sp-2) var(--sp-1);
}
.sidebar-search__icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
}
.sidebar-search__input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  font-size: var(--fs-sm);
  background: var(--c-surface-hover);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--c-text);
  outline: none;
}
.sidebar-search__input:focus {
  border-color: var(--c-primary);
  background: var(--c-bg);
}

body.sidebar-collapsed .sidebar-search { display: none; }

.nav-group {
  margin-top: var(--sp-2);
}
.nav-group__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--c-text-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-md);
  text-align: left;
}
.nav-group__head:hover {
  background: var(--c-surface-hover);
  color: var(--c-text);
}
.nav-group__chevron {
  transition: transform 120ms ease;
  color: var(--c-text-muted);
}
.nav-group--collapsed .nav-group__chevron {
  transform: rotate(-90deg);
}
.nav-group__title {
  flex: 1;
}
.nav-group__count {
  font-size: 10px;
  background: var(--c-surface-hover);
  color: var(--c-text-muted);
  padding: 1px 6px;
  border-radius: 9px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--fw-medium);
}
.nav-group__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 1000px;
  transition: max-height 180ms ease;
}
.nav-group--collapsed .nav-group__items {
  max-height: 0;
}
.nav-item--child {
  padding-left: var(--sp-5);
}

/* Sub-header dentro del grupo: etiqueta categorial no clickeable. Sirve para
   subdividir grupos largos (ej. Configuración con muchos items) sin agregar
   colapso adicional. Si todos los items de una sub-sección están ocultos
   por permisos, el sub-header tampoco se renderiza (th:if en el fragment). */
.nav-sublabel {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: var(--sp-3) var(--sp-3) var(--sp-1) var(--sp-3);
  margin-top: var(--sp-1);
  border-top: 1px solid var(--c-border);
  user-select: none;
}
/* El primer sub-label del grupo no necesita línea superior (queda pegado al
   header del grupo) */
.nav-group__items > .nav-sublabel:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: var(--sp-2);
}

/* Cuando el sidebar está colapsado (mini), ocultar el header del grupo y
   los contadores; los items hijos se muestran como íconos sueltos. */
body.sidebar-collapsed .nav-group__head,
body.sidebar-collapsed .nav-group__count,
body.sidebar-collapsed .nav-sublabel {
  display: none;
}
body.sidebar-collapsed .nav-group__items {
  max-height: none;
}
body.sidebar-collapsed .nav-item--child {
  padding-left: var(--sp-3);
}

.app-main {
  grid-area: main;
  padding: var(--sp-4);
  overflow-y: auto;
  min-height: 0;
}

/* Variante "fixed": el main ocupa exacto el viewport y solo scrollea
   un hijo interno (típico de la agenda con grilla larga + header sticky). */
.app-main--fixed {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app-main--fixed > *:not(.agenda-day):not(.agenda-week):not(.agenda-month):not(.agenda-grid):not(.abm-layout):not(.medico-day-wrap):not(.hc-layout) {
  flex-shrink: 0;
}
.app-main__title-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.app-main__title-bar h1 {
  font-size: var(--fs-xl);
  margin: 0;
  line-height: 1;
}

/* ---- Utilidades responsive: tablas/grillas anchas en mobile ----
   Envolver la tabla/grilla en .table-responsive → scrollea horizontal en vez
   de romper el ancho de la página. .col-hide-sm oculta columnas no esenciales
   en pantallas chicas. */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  .col-hide-sm { display: none !important; }
}

/* ---- Layout portal paciente ---- */
.portal-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.portal-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: 0 var(--sp-5);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.portal-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.portal-header__brand img { height: 32px; object-fit: contain; }
.portal-header__user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.portal-main {
  flex: 1;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
}
.portal-footer {
  padding: var(--sp-3) var(--sp-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}

/* Pantalla de login pública — card flotante sobre imagen + overlay
 * Ambient effects (desktop): ken-burns en la imagen, ECG cruzando el medio,
 * halo radial detrás del card. Todo respeta tokens del sistema; los efectos
 * se desactivan en mobile y con prefers-reduced-motion. */
.portal-login {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--sp-5);
  min-height: 100vh;
}
.login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.login-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  animation: loginKenBurns 28s ease-in-out infinite alternate;
}
@keyframes loginKenBurns {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
.login-bg__overlay {
  position: absolute;
  inset: 0;
  /* Overlay radial sutil — deja la imagen más visible que el opaco 0.30 anterior */
  background:
    radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0.10) 0%,
      rgba(0, 0, 0, 0.32) 70%,
      rgba(0, 0, 0, 0.52) 100%);
}

/* ECG / línea de cardio sutil cruzando horizontal a la altura del card */
.login-ecg {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: screen;
}
.login-ecg svg { width: 100%; height: 80px; display: block; }
.login-ecg path {
  stroke: #67e8f9;
  stroke-width: 2;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: loginEcgDraw 6s linear infinite;
  filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.55));
}
@keyframes loginEcgDraw {
  0%   { stroke-dashoffset: 2000; }
  100% { stroke-dashoffset: 0; }
}

/* Halo radial detrás del card — destaca el card sin tapar la imagen */
.login-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 90vw);
  height: min(720px, 90vw);
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0) 65%);
  filter: blur(40px);
  pointer-events: none;
}
.portal-login__card {
  position: relative;
  z-index: 1;
  background: var(--c-surface);
  padding: var(--sp-8) var(--sp-6);
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.10);
}
.portal-login__brand {
  text-align: center;
  margin-bottom: var(--sp-5);
}
.portal-login__brand img {
  max-width: 250px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.portal-login__title {
  text-align: center;
  font-size: 28px;
  font-weight: var(--fw-bold);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.portal-login__sub {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-5);
}
.portal-login__trust {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-align: center;
  margin: var(--sp-4) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.portal-login__trust .icon { color: var(--c-primary); }
.portal-login__divider {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-5) 0 var(--sp-4);
}
.portal-login__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.portal-login__contact li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.portal-login__contact .icon { color: var(--c-primary); }
.portal-login__contact a { color: inherit; text-decoration: none; }
.portal-login__contact a:hover { color: var(--c-primary); text-decoration: underline; }
.portal-login__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: 11px;
  color: var(--c-text-soft);
}
.portal-login__footer img {
  height: 30px;
  opacity: 0.75;
  transition: opacity var(--t-fast);
}
.portal-login__footer a:hover img { opacity: 1; }
.portal-login__footer-sep {
  opacity: 0.5;
  margin: 0 2px;
}
/* Version del sistema, en su propia linea bajo el pie del login. Se lee sin
   loguearse, asi se verifica que build esta corriendo en un server. */
.portal-login__version {
  margin-top: var(--sp-1);
  text-align: center;
  font-size: 11px;
  color: var(--c-text-soft);
  opacity: 0.75;
}

/* Mobile: imagen banner arriba + card con margin negativo superpuesto */
@media (max-width: 767px) {
  .portal-login {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow: visible;
    min-height: 100vh;
  }
  .login-bg {
    position: relative;
    height: 240px;
    flex: none;
    overflow: hidden;
  }
  /* En mobile la imagen es un banner estático: sin ken-burns ni efectos */
  .login-bg__img {
    transform: none;
    animation: none;
  }
  .login-bg__overlay {
    background: rgba(0, 0, 0, 0.20);
  }
  /* En mobile escondemos ambient effects: el card baja al banner imagen
     y no hay espacio visual para ECG/halo sin pelear con el form */
  .login-ecg,
  .login-halo { display: none; }

  .portal-login__card {
    margin: -32px var(--sp-3) var(--sp-5);
    padding: var(--sp-6) var(--sp-5);
    max-width: none;
    width: auto;
  }
  .portal-login__brand img { max-width: 200px; }
  .portal-login__title { font-size: 24px; }
}
@media (max-width: 400px) {
  .portal-login__card {
    margin: -24px var(--sp-2) var(--sp-5);
    padding: var(--sp-5) var(--sp-4);
  }
  .login-bg { height: 200px; }
  .portal-login__brand img { max-width: 170px; }
}

/* Accesibilidad: respetar usuarios con preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .login-bg__img { animation: none; }
  .login-ecg path {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.6;
  }
}

/* Tiles del inicio del portal — 4 botones grandes con icono */
.portal-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 600px) {
  .portal-tiles { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* === Responsive del portal en mobile === */
@media (max-width: 600px) {
  .portal-header {
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
  }
  .portal-header__brand img { height: 24px; }
  .portal-header__brand > span { display: none; } /* chip "PORTAL PACIENTE" */
  .portal-header__name span { display: none; }    /* nombre del paciente */
  .portal-header__logout-text { display: none; }  /* texto "Salir" → solo icon */
  .portal-header__user .btn--sm {
    padding: 6px;
    min-width: 32px;
  }

  .portal-main {
    padding: var(--sp-4) var(--sp-3);
  }

  /* Bienvenida + alert más compactos */
  .portal-main > div:first-child h1 { font-size: var(--fs-xl) !important; }
  .portal-main > div:first-child p  { font-size: var(--fs-sm) !important; }
  .portal-main .alert { font-size: var(--fs-sm); }

  /* Tiles del inicio en mobile: más bajos, layout horizontal */
  .portal-tile {
    min-height: 110px;
    padding: var(--sp-3);
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    gap: var(--sp-3);
  }
  .portal-tile > div { flex: 1; min-width: 0; }
  .portal-tile__icon { width: 48px; height: 48px; flex-shrink: 0; }
  .portal-tile__icon .icon { font-size: 28px; }
  .portal-tile__title { font-size: var(--fs-md); }
  .portal-tile__desc { font-size: var(--fs-xs); }
  .portal-tile__badge {
    top: var(--sp-2);
    right: var(--sp-2);
  }
}
.portal-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
  color: var(--c-text);
  min-height: 180px;
  gap: var(--sp-3);
  position: relative;
}
.portal-tile:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  text-decoration: none;
  color: var(--c-text);
}
.portal-tile__icon {
  width: 72px; height: 72px;
  border-radius: var(--radius-full);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.portal-tile__icon .icon { font-size: 40px; }
.portal-tile:hover .portal-tile__icon {
  background: var(--c-primary);
  color: var(--c-text-on-primary);
}
.portal-tile__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: 1.2;
}
.portal-tile__desc {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0;
}
.portal-tile__badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: var(--c-danger);
  color: white;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  line-height: 1.4;
}

/* Mis estudios — layout master-detail (D-097) */
.estudios-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--sp-3);
  min-height: 600px;
}
@media (max-width: 900px) {
  .estudios-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--sp-2);
  }
}

/* Botón "Volver" del detail, solo visible en mobile cuando hay detalle abierto */
.estudio-detail__back { display: none; }

/* En mobile (<600px) el patrón se vuelve navegacional:
   default muestra la lista, click abre el detalle ocultando la lista. */
@media (max-width: 600px) {
  .estudio-detail { display: none; }
  body.estudio-detail-open .estudios-master { display: none; }
  body.estudio-detail-open .estudio-detail { display: flex; }
  .estudio-detail__back { display: inline-flex; align-self: flex-start; }

  .estudio-detail__head {
    padding: var(--sp-2) var(--sp-3);
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
  .estudio-detail__title { font-size: var(--fs-md); line-height: 1.2; }
  .estudio-detail__meta { font-size: var(--fs-xs); }
  .estudio-detail__actions {
    flex-direction: row;
    width: 100%;
  }
  .estudio-detail__actions .btn {
    flex: 1;
    justify-content: center;
  }
  .estudio-detail__body iframe {
    min-height: 70vh !important;
  }

  /* Title bar de la pantalla en mobile: ocultar contador para ganar espacio */
  .estudios-page-count { display: none; }

  /* Filtros chips más chicos */
  .estudios-filter { gap: 4px; }
  .estudios-filter .abm-list__chip { font-size: 10px; padding: 1px var(--sp-2); }
}

/* Lista a la izquierda */
.estudios-master {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.estudios-master__head {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.estudios-master__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}
.estudios-master__search > .icon {
  position: absolute;
  left: var(--sp-2);
  color: var(--c-text-muted);
  pointer-events: none;
}
.estudios-master__search .input {
  padding-left: 32px;
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.estudios-master__empty {
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  font-style: italic;
}
.estudios-master__items {
  overflow-y: auto;
  flex: 1;
}
.estudios-master__item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  text-decoration: none;
  color: var(--c-text);
  transition: background var(--t-fast);
}
.estudios-master__item:hover {
  background: var(--c-surface-hover);
  text-decoration: none;
  color: var(--c-text);
}
.estudios-master__item--selected {
  background: var(--c-primary-soft) !important;
  box-shadow: inset 4px 0 0 var(--c-primary);
}
.estudios-master__item-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.estudios-master__item-main {
  min-width: 0;
  line-height: 1.3;
}
.estudios-master__item-title {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.estudios-master__item-meta {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Detalle a la derecha */
.estudio-detail {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.estudio-detail__head {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.estudio-detail__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}
.estudio-detail__meta {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-top: 2px;
}
.estudio-detail__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.estudio-detail__body {
  padding: var(--sp-4);
  overflow-y: auto;
  flex: 1;
}

/* Compatibilidad con la lista vieja (la dejo por si se reusa) */
.estudios-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.estudio-row {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  text-decoration: none;
  color: var(--c-text);
  transition: all var(--t-fast);
}
.estudio-row:hover {
  border-color: var(--c-primary);
  background: var(--c-surface-hover);
  text-decoration: none;
  color: var(--c-text);
}
.estudio-row__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.estudio-row__main { min-width: 0; line-height: 1.3; }
.estudio-row__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
}
.estudio-row__meta {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: 2px;
}
.estudio-row__date {
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.estudio-row__date small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* Vista detalle del estudio (informe + visor split) */
.estudio-viewer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}
.estudio-viewer--informe { grid-template-columns: 1fr; }
.estudio-viewer--imagen { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .estudio-viewer { grid-template-columns: 1fr; }
}

.estudio-viewer__pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.estudio-viewer__pane + .estudio-viewer__pane {
  border-left: 1px solid var(--c-border);
}
@media (max-width: 900px) {
  .estudio-viewer__pane + .estudio-viewer__pane {
    border-left: none;
    border-top: 1px solid var(--c-border);
  }
}
.estudio-viewer__pane-head {
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Informe estructurado */
.informe { padding: var(--sp-4); overflow-y: auto; max-height: 580px; }
.informe__title { margin: 0 0 var(--sp-1); font-size: var(--fs-md); }
.informe__meta { font-size: var(--fs-xs); color: var(--c-text-muted); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.informe__section { margin-bottom: var(--sp-3); }
.informe__section-title {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-1);
}
.informe__section-body { font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; }
.informe__section-body ul { margin: 0; padding-left: var(--sp-4); }
.informe__signature {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* Visor JST embebido */
.viewer-jst {
  background: #0a0a0a;
  color: white;
  display: flex;
  flex-direction: column;
  min-height: 580px;
  position: relative;
}
.viewer-jst__toolbar {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
.viewer-jst__tool {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
}
.viewer-jst__tool:hover { background: rgba(255,255,255,0.1); color: white; }
.viewer-jst__tool .icon { font-size: 16px; }
.viewer-jst__canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.viewer-jst__image {
  width: 80%;
  max-width: 420px;
  aspect-ratio: 1;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 45%, transparent 80%),
    radial-gradient(circle at 35% 40%, rgba(180,180,180,0.25) 0%, transparent 35%),
    radial-gradient(circle at 65% 55%, rgba(180,180,180,0.2) 0%, transparent 30%),
    #0a0a0a;
  border: 1px solid rgba(255,255,255,0.08);
}
.viewer-jst__info {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-mono);
  line-height: 1.4;
}
.viewer-jst__brand {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: var(--fw-bold);
}
.viewer-jst__nav {
  position: absolute;
  bottom: var(--sp-2);
  right: var(--sp-2);
  display: flex;
  gap: 2px;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  align-items: center;
}
.viewer-jst__nav-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.viewer-jst__nav-btn:hover { background: rgba(255,255,255,0.2); }

/* ============================================================
   Grilla de agenda (B-200)
   ============================================================ */
.agenda-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0;
  margin-bottom: var(--sp-3);
}
.agenda-toolbar__group {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.date-picker {
  display: inline-flex;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: 0;
  overflow: hidden;
}
.weekday-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--c-primary);
  line-height: 1;
}
.date-picker__nav, .date-picker__display {
  padding: var(--sp-2) var(--sp-3);
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.date-picker__nav:hover { background: var(--c-surface-hover); }
.date-picker__display { font-weight: var(--fw-medium); min-width: 180px; text-align: center; }

/* Grilla horaria */
.agenda-grid {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0;
  overflow: auto;
}
.agenda-grid__inner {
  display: grid;
  grid-template-columns: 80px repeat(var(--agenda-cols, 4), 1fr);
  min-width: 720px;
}
.agenda-grid__corner,
.agenda-grid__hour,
.agenda-grid__head,
.agenda-grid__cell {
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  padding: var(--sp-2);
  min-height: 64px;
}
.agenda-grid__corner { background: var(--c-surface-alt); }
.agenda-grid__hour {
  background: var(--c-surface-alt);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
  text-align: right;
  min-height: 40px;
}
.agenda-grid__head {
  background: var(--c-surface-alt);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1;
}
.agenda-grid__head small {
  display: block;
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}
.agenda-grid__cell {
  position: relative;
  min-height: 40px;
}
.agenda-grid__cell:hover { background: var(--c-surface-hover); cursor: pointer; }
.agenda-grid__cell--blocked {
  background:
    repeating-linear-gradient(45deg,
      var(--c-surface-alt) 0 8px,
      var(--c-surface-hover) 8px 16px);
  cursor: not-allowed;
}

/* Turno dentro de la grilla */
.turno-card {
  background: var(--c-primary-soft);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: transform var(--t-fast);
}
.turno-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.turno-card__pac { font-weight: var(--fw-semibold); color: var(--c-text); line-height: 1.2; }
.turno-card__pra { color: var(--c-text-muted); margin-top: 2px; }
.turno-card--st-confirmado { border-left-color: var(--c-st-confirmado); }
.turno-card--st-presente   { background: var(--c-warning-soft); border-left-color: var(--c-st-presente); }
.turno-card--st-atendido   { background: var(--c-success-soft); border-left-color: var(--c-st-atendido); }
.turno-card--st-cancelado  { opacity: 0.5; border-left-color: var(--c-st-cancelado); }
.turno-card--st-ausente    { background: var(--c-danger-soft); border-left-color: var(--c-st-ausente); }
.turno-card--sobreturno {
  border: 1px dashed var(--c-warning);
  background: var(--c-warning-soft);
}

/* Lista cronológica (mobile alternativa) */
.agenda-list { display: none; }

@media (max-width: 768px) {
  .agenda-grid { display: none; }
  .agenda-list { display: block; }

  /* En mobile las columnas laterales quedan en 0 (sidebar oculto,
     drawer pasa a overlay con position:fixed cuando se abre).

     Y, sobre todo, el shell DEJA DE ESTAR CLAVADO AL VIEWPORT: en un teléfono
     scrollea la página, como cualquier página. Con `height:100vh` +
     `overflow:hidden` el alto era un presupuesto fijo que se repartía de arriba
     hacia abajo, y el contenido —que va último— pagaba el resto. Medido en
     /app/medico/agenda a 375×812: título 80 + banner 102 + cabecera 327 +
     toolbar 90 = 599 px, y a la grilla del día le quedaban 85 px que además no
     se podían scrollear porque el padre estaba en hidden. En un celu de verdad,
     con la barra del navegador comiéndose otros 150, quedaba en nada.

     Esto vale para TODAS las pantallas `app-main--fixed` (agenda, HC, los ABM):
     el alto fijo es una decisión de escritorio, donde el viewport es ancho y
     bajo y conviene que el encabezado no se vaya. En vertical no aplica. */
  .app-layout {
    grid-template-columns: 0 1fr 0;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .app-sidebar { display: none; }

  /* `auto` y no `visible`: lo que hay que soltar es el ALTO, no el ancho. Con el
     layout ya en height:auto, la fila del grid mide lo que mide el contenido, así
     que este `auto` nunca produce scroll vertical —scrollea la página—; lo único
     que hace es seguir conteniendo el desborde horizontal de las pantallas que
     todavía no entran en 375px (los ABM, por ejemplo). Con `visible` ese desborde
     se escapaba y hacía scrollear la página de costado, que es justo lo que no
     tiene que pasar nunca. */
  .app-main,
  .app-main--fixed { overflow: auto; }

  /* Los contenedores que en escritorio scrollean solos acá crecen y scrollea la
     página. Dos scrolls encimados en un teléfono son intocables: el dedo nunca
     sabe cuál está moviendo. */
  .app-main--fixed > .medico-day-wrap,
  .medico-day-wrap > .medico-day,
  .app-main--fixed > .hc-layout,
  .app-main--fixed > .abm-layout,
  .app-main--fixed > .agenda-day,
  .app-main--fixed > .agenda-week,
  .app-main--fixed > .agenda-month,
  .medico-day .agenda-day {
    overflow: visible;
    flex: 0 0 auto;
    max-height: none;
  }

  /* Cuando el usuario toca la hamburguesa, body.sidebar-open muestra el
     sidebar como overlay deslizante desde la izquierda + backdrop
     oscureciendo el resto. */
  body.sidebar-open .app-sidebar {
    display: flex;
    position: fixed;
    top: 0; left: 0;
    width: min(280px, 80vw);
    height: 100vh;
    z-index: 260;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    animation: sidebarSlideIn 0.18s ease-out;
  }
  body.sidebar-open .sidebar-backdrop {
    display: block;
  }
}

/* Backdrop del sidebar mobile — oculto por default, visible solo cuando
   body.sidebar-open en viewports chicos. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 240;
}
@keyframes sidebarSlideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.agenda-list__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-2);
  cursor: pointer;
}
.agenda-list__hour { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.agenda-list__pac { font-weight: var(--fw-medium); }
.agenda-list__meta { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.kpi {
  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0;
}
.kpi__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}
.kpi__value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  margin-top: var(--sp-1);
  line-height: 1;
}
.kpi__hint {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: var(--sp-2);
}

/* ============================================================
   KPIs del tema PLANO — un toque de color + icono watermark
   (mismo gesto que arcilla/bento, en versión sobria: sin glow,
   fuente Outlined). Solo los 4 temas plano vía :where() — arcilla
   y bento ya tienen el suyo y no comparten prefijo con estos.
   Color SEMÁNTICO por posición (adapta a la paleta de cada tema;
   coincide con el color del número en Atendidos/En sala). Orden de
   KPIs fijo: Turnos hoy / Atendidos / En sala / Cobros del día.
   ============================================================ */
:where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi {
  position: relative;
  z-index: 0;          /* contexto de apilado para el watermark (::after z-index:-1) */
  overflow: hidden;    /* recorta el icono difuminado en el borde */
  background: color-mix(in srgb, var(--mk, var(--c-primary)) 12%, var(--c-surface));
}
:where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(1) { --mk: var(--c-primary); }
:where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(2) { --mk: var(--c-success); }
:where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(3) { --mk: var(--c-warning); }
:where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(4) { --mk: var(--c-info); }
:where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi::after {
  content: '';
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-size: 92px;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--mk, var(--c-primary)) 16%, transparent);
  z-index: -1;
  pointer-events: none;
  font-feature-settings: 'liga';
}
:where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(1)::after { content: 'calendar_month'; }  /* Turnos hoy */
:where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(2)::after { content: 'how_to_reg'; }      /* Atendidos */
:where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(3)::after { content: 'weekend'; }         /* En sala */
:where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(4)::after { content: 'payments'; }        /* Cobros del día */

/* ============================================================
   Agenda — vista de UN médico
   ============================================================ */

/* Cabecera del médico */
.medico-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0;
  margin-bottom: var(--sp-3);
}
.medico-header__avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  flex-shrink: 0;
}
.medico-header__info { flex: 1; min-width: 0; }
.medico-header__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 2px;
  line-height: 1.1;
}
.medico-header__meta {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  line-height: 1.2;
}
.medico-header__stats {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.medico-header__stat {
  text-align: center;
  padding: 0 var(--sp-2);
  border-left: 1px solid var(--c-border);
}
.medico-header__stat-value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.medico-header__stat-label {
  font-size: 10px;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Selector de período (Día/Semana/Mes) */
.segmented {
  display: inline-flex;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 2px;
  gap: 2px;
}
.segmented__btn {
  padding: var(--sp-1) var(--sp-3);
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
  cursor: pointer;
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--c-text-muted);
  text-decoration: none;
}
.segmented__btn:hover { color: var(--c-text); }
.segmented__btn--active {
  background: var(--c-surface);
  color: var(--c-primary);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-sm);
}

/* Cronología de día — grilla densa de 1 fila por turno/slot */
.agenda-day {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0;
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 200px;
}

/* Grid columns: hora · barra · paciente · práctica · OS · estado · indicadores · acción */
.agenda-day__head,
.agenda-day__row {
  display: grid;
  grid-template-columns: 64px 3px minmax(180px, 1.2fr) minmax(150px, 1fr) minmax(110px, 0.7fr) 120px 100px 130px;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  align-items: center;
}

/* Fila activa (click → contexto seleccionado para acciones del drawer) */
.agenda-day__row--selected {
  background: color-mix(in srgb, var(--c-primary) 22%, var(--c-surface)) !important;
  box-shadow: inset 4px 0 0 var(--c-primary);
}
.agenda-day__row--selected:hover {
  background: color-mix(in srgb, var(--c-primary) 28%, var(--c-surface)) !important;
}

.agenda-day__head {
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  position: sticky;
  top: 0;
  z-index: 2;
}

.agenda-day__row {
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  background: var(--c-surface);
  transition: background var(--t-fast);
  cursor: pointer;
  min-height: 44px;
}
.agenda-day__row:last-child { border-bottom: none; }
.agenda-day__row:hover { background: var(--c-surface-hover); }

.agenda-day__time {
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  white-space: nowrap;
}
.agenda-day__time small {
  display: block;
  font-weight: var(--fw-regular);
  font-size: 11px;
  color: var(--c-text-muted);
  margin-top: 1px;
}

.agenda-day__bar {
  align-self: stretch;
  background: var(--c-st-confirmado);
  border-radius: 2px;
}

.agenda-day__pac {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  gap: 1px;
}
.agenda-day__pac-name {
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-day__pac-doc {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.agenda-day__pra {
  font-size: var(--fs-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-day__os {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-day__estado {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.agenda-day__estado .badge {
  width: 100%;
  justify-content: center;
  font-size: 11px;
  padding: 2px var(--sp-2);
}

.agenda-day__tags {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  align-items: center;
}
.agenda-day__tags .badge {
  font-size: 11px;
  padding: 2px;
  width: 22px;
  height: 22px;
  justify-content: center;
}

.agenda-day__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.agenda-day__actions .btn {
  width: 100%;
  justify-content: center;
}

/* Variantes de barra por estado */
.agenda-day__row[data-state="reservado"]  .agenda-day__bar { background: var(--c-st-reservado); }
.agenda-day__row[data-state="confirmado"] .agenda-day__bar { background: var(--c-st-confirmado); }
.agenda-day__row[data-state="presente"]   .agenda-day__bar { background: var(--c-st-presente); }
.agenda-day__row[data-state="atendido"]   .agenda-day__bar { background: var(--c-st-atendido); }
.agenda-day__row[data-state="cancelado"]  { opacity: 0.55; }
.agenda-day__row[data-state="cancelado"]  .agenda-day__bar { background: var(--c-st-cancelado); }
.agenda-day__row[data-state="ausente"]    .agenda-day__bar { background: var(--c-st-ausente); }
.agenda-day__row[data-state="libre"]      .agenda-day__bar { background: var(--c-border); }
.agenda-day__row[data-state="libre"]      .agenda-day__pac { color: var(--c-text-soft); font-style: italic; font-weight: var(--fw-regular); }

/* Tinte de fondo muy suave en filas OCUPADAS (mismo color del estado de la
   barrita). Libre/bloqueado quedan sin tinte → el contraste ocupado-vs-libre
   se lee de un vistazo. El mix se hace contra --c-surface de cada tema, así
   las 3 familias visuales + las paletas lo heredan solas. La fila seleccionada
   (--row--selected, 22% primary !important) gana por especificidad. */
.agenda-day__row[data-state="reservado"]  { background: color-mix(in srgb, var(--c-st-reservado)  7%, var(--c-surface)); }
.agenda-day__row[data-state="confirmado"] { background: color-mix(in srgb, var(--c-st-confirmado) 7%, var(--c-surface)); }
.agenda-day__row[data-state="presente"]   { background: color-mix(in srgb, var(--c-st-presente)   8%, var(--c-surface)); }
.agenda-day__row[data-state="atendido"]   { background: color-mix(in srgb, var(--c-st-atendido)   7%, var(--c-surface)); }
.agenda-day__row[data-state="ausente"]    { background: color-mix(in srgb, var(--c-st-ausente)    7%, var(--c-surface)); }
.agenda-day__row[data-state="cancelado"]  { background: color-mix(in srgb, var(--c-st-cancelado)  7%, var(--c-surface)); }
/* Hover: un toque más del mismo color (si no, saltaría al gris genérico y perdería el tinte). */
.agenda-day__row[data-state="reservado"]:hover  { background: color-mix(in srgb, var(--c-st-reservado)  13%, var(--c-surface)); }
.agenda-day__row[data-state="confirmado"]:hover { background: color-mix(in srgb, var(--c-st-confirmado) 13%, var(--c-surface)); }
.agenda-day__row[data-state="presente"]:hover   { background: color-mix(in srgb, var(--c-st-presente)   14%, var(--c-surface)); }
.agenda-day__row[data-state="atendido"]:hover   { background: color-mix(in srgb, var(--c-st-atendido)   13%, var(--c-surface)); }
.agenda-day__row[data-state="ausente"]:hover    { background: color-mix(in srgb, var(--c-st-ausente)    13%, var(--c-surface)); }
.agenda-day__row[data-state="cancelado"]:hover  { background: color-mix(in srgb, var(--c-st-cancelado)  13%, var(--c-surface)); }
.agenda-day__row[data-state="bloqueado"]  {
  background: repeating-linear-gradient(45deg, var(--c-surface-alt) 0 8px, var(--c-surface-hover) 8px 16px);
}
.agenda-day__row[data-state="bloqueado"]  .agenda-day__bar { background: var(--c-text-soft); }
.agenda-day__row[data-state="bloqueado"]  .agenda-day__pac { color: var(--c-text-muted); font-weight: var(--fw-regular); }

/* Separador de períodos del día (mañana/tarde) */
.agenda-day__separator {
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Responsive: en mobile colapsa a 2 líneas.

   767 y NO 768, aunque el resto del archivo corte en 768: app-agenda.css divide
   mobile (<=767) de tablet (768-1279), y redefine `.agenda-day__head/.__row` sin
   media query. Como carga después que este archivo, a exactamente 768px ganaba
   sus columnas de escritorio mientras acá seguían aplicando las áreas de mobile:
   la tabla quedaba con las áreas de una y las columnas de la otra. Se veía como
   un encabezado de 1050px dentro de 750, con los rótulos amontonados en la
   derecha y sólo "COBRO PROTOCOLO" a la vista.
   A 768 manda el bloque de tablet de app-agenda.css, que es coherente. */
@media (max-width: 767px) {
  .agenda-day__head { display: none; }
  .agenda-day__row {
    grid-template-columns: 56px 3px 1fr auto;
    grid-template-areas:
      "time bar pac     actions"
      "time bar pra     actions"
      "time bar os      actions"
      "time bar estado  actions"
      "time bar tags    actions";
    row-gap: 2px;
    padding: var(--sp-2) var(--sp-3);
  }
  .agenda-day__time { grid-area: time; align-self: start; padding-top: 2px; }
  .agenda-day__bar { grid-area: bar; }
  .agenda-day__pac { grid-area: pac; }
  .agenda-day__pra { grid-area: pra; }
  .agenda-day__os { grid-area: os; }
  .agenda-day__estado { grid-area: estado; justify-content: flex-start; }
  .agenda-day__estado .badge { width: auto; }
  .agenda-day__tags { grid-area: tags; }
  .agenda-day__actions { grid-area: actions; }

  /* El slot libre, en UN renglón. Es la fila más repetida de la agenda —una
     turnera de 15 minutos tiene decenas— y ocupaba dos para decir dos veces lo
     mismo: "Slot libre" arriba y el badge "Disponible" abajo. Queda
     `hora · Slot libre`, y el badge se va: la fila ya lo dice.
     El badge "Cancelado" SÍ se queda (vive en __tags): ese hueco no es un libre
     cualquiera, salió de una baja, y es lo que el que mira la agenda necesita
     distinguir.

     El `:not(.medico-day__row)` no sobra: la agenda del médico reusa
     `.agenda-day__row` con el mismo `data-state`, pero arma la fila distinto
     (tiene el botón +, no tiene __meta) y la resuelve en app-medico.css. Sin
     esta exclusión, este selector —que es más específico— le pisaba las áreas,
     el + se iba a un renglón propio y la página crecía 144px. */
  .agenda-day__row[data-state="libre"]:not(.medico-day__row) {
    grid-template-columns: 56px 3px 1fr auto;
    grid-template-areas: "time bar pac meta";
    align-items: center;
    padding: 2px var(--sp-3);
  }
  .agenda-day__row[data-state="libre"]:not(.medico-day__row) .agenda-day__meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .agenda-day__row[data-state="libre"]:not(.medico-day__row) .agenda-day__pra,
  .agenda-day__row[data-state="libre"]:not(.medico-day__row) .agenda-day__os,
  .agenda-day__row[data-state="libre"]:not(.medico-day__row) .agenda-day__cobro,
  .agenda-day__row[data-state="libre"]:not(.medico-day__row) .agenda-day__proto,
  .agenda-day__row[data-state="libre"]:not(.medico-day__row) .agenda-day__estado { display: none; }
  .agenda-day__row[data-state="libre"]:not(.medico-day__row) .agenda-day__time small { display: none; }
}

/* ============================================================
   Agenda — vista SEMANA
   ============================================================ */
.agenda-week {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0;
  overflow: auto;
}
.agenda-week__inner {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  min-width: 900px;
}
.agenda-week__corner,
.agenda-week__hour,
.agenda-week__head,
.agenda-week__cell {
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  padding: var(--sp-1) var(--sp-2);
  min-height: 36px;
  font-size: var(--fs-xs);
}
.agenda-week__hour {
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
  text-align: right;
}
.agenda-week__head {
  background: var(--c-surface-alt);
  font-weight: var(--fw-semibold);
  text-align: center;
  font-size: var(--fs-sm);
  position: sticky; top: 0; z-index: 1;
}
.agenda-week__head small {
  display: block;
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}
.agenda-week__head--today {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.agenda-week__cell { cursor: pointer; }
.agenda-week__cell:hover { background: var(--c-surface-hover); }
.agenda-week__cell--blocked {
  background: repeating-linear-gradient(45deg, var(--c-surface-alt) 0 6px, var(--c-surface-hover) 6px 12px);
  cursor: not-allowed;
}
.week-turno {
  background: var(--c-primary-soft);
  border-left: 2px solid var(--c-primary);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week-turno--st-presente  { background: var(--c-warning-soft); border-left-color: var(--c-st-presente); }
.week-turno--st-atendido  { background: var(--c-success-soft); border-left-color: var(--c-st-atendido); }
.week-turno--st-ausente   { background: var(--c-danger-soft); border-left-color: var(--c-st-ausente); }
.week-turno--st-cancelado { background: var(--c-surface-hover); border-left-color: var(--c-st-cancelado); opacity: 0.6; }

/* ============================================================
   Agenda — vista MES
   ============================================================ */
.agenda-month {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0;
  overflow: hidden;
}
.agenda-month__head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
}
.agenda-month__head-cell {
  padding: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  text-align: center;
}
.agenda-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.agenda-month__day {
  min-height: 96px;
  padding: var(--sp-2);
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
}
.agenda-month__day:hover { background: var(--c-surface-hover); }
.agenda-month__day--other-month { background: var(--c-surface-alt); color: var(--c-text-soft); }
.agenda-month__day--today { background: var(--c-primary-soft); }
.agenda-month__day--feriado { background: var(--c-warning-soft); }
.agenda-month__day-num {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.agenda-month__day--today .agenda-month__day-num { color: var(--c-primary); font-weight: var(--fw-bold); }
.agenda-month__day-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--fw-medium);
  width: max-content;
}
.agenda-month__day-mini {
  background: var(--c-bg);
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-month__day-more {
  font-size: 11px;
  color: var(--c-text-muted);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .agenda-month__day { min-height: 64px; }
  .agenda-month__day-mini { display: none; }
}

/* ============================================================
   ABM genérico — patrón master-detail
   Usado por: Obras sociales, Especialidades, Prácticas, Recursos,
   Sucursales, Profesionales, Personal, Usuarios, etc.
   ============================================================ */
.abm-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--sp-2);
  flex: 1 1 0;
  min-height: 0;
}
@media (max-width: 900px) {
  .abm-layout { grid-template-columns: 1fr; }
}

/* Lista (master) */
.abm-list {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.abm-list__head {
  padding: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
  background: var(--c-surface-alt);
}
.abm-list__search {
  position: relative;
  display: flex;
  align-items: center;
}
.abm-list__search-icon {
  position: absolute;
  left: var(--sp-2);
  color: var(--c-text-muted);
  pointer-events: none;
}
.abm-list__search .input {
  padding-left: 32px;
}
.abm-list__filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.abm-list__chip {
  padding: 2px var(--sp-2);
  background: var(--c-surface);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  transition: all var(--t-fast);
  line-height: 1.4;
}
.abm-list__chip:hover { color: var(--c-text); border-color: var(--c-border-strong); }
.abm-list__chip--active {
  background: var(--c-primary);
  color: var(--c-text-on-primary);
  border-color: var(--c-primary);
}

.abm-list__items {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}
.abm-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  transition: background var(--t-fast);
  /* Virtualización: el browser sólo pintea las filas visibles cuando la
     lista es larga (Insumos ~1500, Nomenclador, etc). El alto reservado
     (~56px) evita que el scroll "salte" al entrar al viewport. */
  content-visibility: auto;
  contain-intrinsic-size: 0 56px;
}
.abm-list__item:hover { background: var(--c-surface-hover); }
.abm-list__item--selected {
  background: color-mix(in srgb, var(--c-primary) 22%, var(--c-surface)) !important;
  box-shadow: inset 4px 0 0 var(--c-primary);
}
.abm-list__item--inactive { opacity: 0.55; }
.abm-list__item-mark {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  flex-shrink: 0;
}
.abm-list__item-main { flex: 1; min-width: 0; line-height: 1.2; }
.abm-list__item-name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.abm-list__item-meta {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-top: 2px;
}
.abm-list__item-icons {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
  color: var(--c-text-muted);
}
.abm-list__footer {
  padding: var(--sp-2);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  flex-shrink: 0;
}

/* Botón "Cargar 100 más" + contador al pie */
.abm-list__more {
  padding: var(--sp-2);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-alt);
}
.abm-list__count {
  padding: var(--sp-2);
  text-align: center;
  font-size: 11px;
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border);
}

/* Empty state cuando la búsqueda no matchea */
.abm-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-3);
  text-align: center;
}

/* Indicador HTMX (spinner del search) */
.abm-list__search-icon ~ .htmx-indicator {
  position: absolute;
  right: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  animation: spin 1s linear infinite;
  color: var(--c-primary);
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
@keyframes spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Detalle (panel derecho) */
.abm-detail {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
/* El <form> wrapper rompe la cadena flex padre→__body. Lo forzamos a flex
   column también para que el __body herede la altura limitada y dispare el
   overflow-y interno cuando el contenido sobrepasa el viewport. */
.abm-detail > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* Cualquier input dentro del ABM marcado disabled/readonly se grisa para
   diferenciarse de los editables (válido en modo edición — en modo lectura
   --readonly aplica a todos por la regla de más abajo). */
.abm-detail .input:disabled,
.abm-detail .input[readonly],
.abm-detail .select:disabled,
.abm-detail .textarea:disabled,
.abm-detail .textarea[readonly] {
  background: var(--c-surface-hover);
  color: var(--c-text-muted);
  border-color: var(--c-border);
  cursor: not-allowed;
}

/* Modo LECTURA: mantener el marco del input visible (igual que edición) pero
   sin interacción. Un tinte sutil + cursor indican que es solo lectura, pero
   el valor sigue acotado en su caja para que no se "pierda" sobre el fondo
   blanco de la card. */
.abm-detail--readonly .input,
.abm-detail--readonly .select,
.abm-detail--readonly .textarea {
  background: var(--c-surface-hover);
  color: var(--c-text);
  pointer-events: none;
  cursor: default;
}
.abm-detail--readonly .input:focus,
.abm-detail--readonly .select:focus,
.abm-detail--readonly .textarea:focus { box-shadow: none; }
.abm-detail--readonly .toggle,
.abm-detail--readonly .toggle__slider,
.abm-detail--readonly input[type="checkbox"],
.abm-detail--readonly input[type="radio"],
.abm-detail--readonly .checkbox,
.abm-detail--readonly .radio {
  pointer-events: none;
}
.abm-detail--readonly .field__hint { display: none; }
/* Controles de subir/quitar firma (file input + botones): inactivos hasta "Modificar" */
.abm-detail--readonly .abm-firma__controls { pointer-events: none; opacity: .5; }

/* Visibilidad de botones según modo: la clase --readonly arriba alterna */
.abm-detail .btn-edit,
.abm-detail .btn-delete,
.abm-detail .btn-clone { display: none; }
.abm-detail .btn-save,
.abm-detail .btn-cancel,
.abm-detail .btn-deactivate { display: inline-flex; }

.abm-detail--readonly .btn-edit,
.abm-detail--readonly .btn-delete,
.abm-detail--readonly .btn-clone { display: inline-flex; }
.abm-detail--readonly .btn-save,
.abm-detail--readonly .btn-cancel,
.abm-detail--readonly .btn-deactivate { display: none; }

/* Acciones inline de sub-tablas (planes) ocultas en modo lectura */
.abm-detail--readonly .abm-section__head > .btn,
.abm-detail--readonly .table .btn { display: none; }
.abm-detail__head {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-shrink: 0;
  background: var(--c-surface-alt);
}
.abm-detail__title-main {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.abm-detail__head-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.abm-detail__body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.abm-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.abm-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}
.abm-section__title {
  margin: 0;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.abm-section[data-hidden="true"] { display: none; }

/* ============================================================
   Dashboard / inicio (B-010)
   ============================================================ */
.dash-welcome {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.dash-welcome__hello {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
  color: var(--c-text);
}
.dash-welcome__sub {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.dash-welcome__time {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Acciones rápidas — botones grandes con icono
 * Desktop (>=769px): 1 fila con scroll horizontal si no entran (no agregar
 *   filas extras al dashboard).
 * Mobile (<769px): grid 2-col normal (scroll horizontal en mobile es UX feo).
 */
.quick-actions {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);            /* espacio para la scrollbar */
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.quick-actions::-webkit-scrollbar {
  height: 8px;
}
.quick-actions::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 4px;
}
.quick-actions::-webkit-scrollbar-thumb:hover {
  background: var(--c-text-muted);
}
@media (max-width: 768px) {
  .quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    padding-bottom: 0;
  }
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-4) var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
  color: var(--c-text);
  min-height: 130px;
  gap: var(--sp-2);
  position: relative;
  /* Estiran a ocupar todo el ancho cuando son pocas; se achican hasta un
   * mínimo legible cuando son muchas, y a partir de ahí aparece scroll. */
  flex: 1 1 180px;
  min-width: 140px;
  scroll-snap-align: start;
}
@media (max-width: 768px) {
  .quick-action {
    flex: initial;                        /* el grid 2-col controla el ancho */
    min-width: 0;
  }
}
.quick-action:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  text-decoration: none;
  color: var(--c-text);
}
.quick-action__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.quick-action__icon .icon { font-size: 30px; }
.quick-action:hover .quick-action__icon {
  background: var(--c-primary);
  color: var(--c-text-on-primary);
}
.quick-action__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: 1.2;
}
.quick-action__desc {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  line-height: 1.3;
}
.quick-action__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--c-danger);
  color: white;
  line-height: 1.4;
}

/* Bottom widgets: 2 columnas */
.dash-widgets {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-3);
}
/* Si sólo hay un bloque visible (porque el otro está sin permiso),
   ese bloque ocupa el ancho completo. */
.dash-widgets--single {
  grid-template-columns: 1fr;
}
@media (max-width: 1000px) {
  .dash-widgets { grid-template-columns: 1fr; }
}

/* Widget compacto: próximos turnos */
.dash-next-list {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}
.dash-next-list__head {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.dash-next-list__title {
  margin: 0;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.dash-next-list__items {
  display: flex;
  flex-direction: column;
}
.dash-next-row {
  display: grid;
  grid-template-columns: 60px 3px 1fr auto;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.dash-next-row:last-child { border-bottom: none; }
.dash-next-row:hover { background: var(--c-surface-hover); cursor: pointer; }
.dash-next-row__time { font-weight: var(--fw-semibold); }
.dash-next-row__bar {
  align-self: stretch;
  background: var(--c-st-confirmado);
  border-radius: 2px;
}
.dash-next-row[data-state="presente"] .dash-next-row__bar { background: var(--c-st-presente); }
.dash-next-row[data-state="atendido"] .dash-next-row__bar { background: var(--c-st-atendido); }
.dash-next-row[data-state="reservado"] .dash-next-row__bar { background: var(--c-st-reservado); }
.dash-next-row__pac { min-width: 0; line-height: 1.2; }
.dash-next-row__pac-name { font-weight: var(--fw-medium); }
.dash-next-row__pac-info { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* Widget de novedades: PDFs, links externos, avisos */
.dash-news {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}
.dash-news__head {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-news__title {
  margin: 0;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.dash-news__items {
  display: flex;
  flex-direction: column;
  max-height: 360px;       /* ~5 ítems visibles; el resto con scroll interno */
  overflow-y: auto;
}
.dash-news-item {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  text-decoration: none;
  color: var(--c-text);
  transition: background var(--t-fast);
}
.dash-news-item:last-child { border-bottom: none; }
.dash-news-item:hover {
  background: var(--c-surface-hover);
  text-decoration: none;
  color: var(--c-text);
}
.dash-news-item__thumb {
  width: 48px; height: 56px;
  background: var(--c-danger-soft);
  color: var(--c-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-news-item__thumb--link { background: var(--c-info-soft); color: var(--c-info); }
.dash-news-item__thumb--note { background: var(--c-warning-soft); color: var(--c-warning); }
.dash-news-item__thumb--video { background: var(--c-success-soft); color: var(--c-success); }
.dash-news-item__thumb .icon { font-size: 28px; }
.dash-news-item__main { flex: 1; min-width: 0; line-height: 1.3; }
.dash-news-item__title {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}
.dash-news-item__desc {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.dash-news-item__date {
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Widget de pendientes */
.dash-pending {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.dash-pending-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  cursor: pointer;
  text-decoration: none;
  color: var(--c-text);
  transition: all var(--t-fast);
}
.dash-pending-card:hover {
  border-color: var(--c-primary);
  background: var(--c-surface-hover);
  text-decoration: none;
  color: var(--c-text);
}
.dash-pending-card__icon {
  width: 36px; height: 36px;
  background: var(--c-warning-soft);
  color: var(--c-warning);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-pending-card__icon--success { background: var(--c-success-soft); color: var(--c-success); }
.dash-pending-card__icon--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.dash-pending-card__icon--info { background: var(--c-primary-soft); color: var(--c-primary); }
/* Tinte distinto por posición en "Pendientes del día" — cada tarjeta su color.
   Temas planos: paleta semántica (no tienen --mk-*). Arcilla/bento la sobreescriben con --mk. */
.dash-pending-card:nth-child(1) .dash-pending-card__icon { background: color-mix(in srgb, var(--c-success) 15%, var(--c-surface)); color: var(--c-success); }
.dash-pending-card:nth-child(2) .dash-pending-card__icon { background: color-mix(in srgb, var(--c-warning) 15%, var(--c-surface)); color: var(--c-warning); }
.dash-pending-card:nth-child(3) .dash-pending-card__icon { background: color-mix(in srgb, var(--c-info) 15%, var(--c-surface)); color: var(--c-info); }
.dash-pending-card:nth-child(4) .dash-pending-card__icon { background: color-mix(in srgb, var(--c-danger) 15%, var(--c-surface)); color: var(--c-danger); }
.dash-pending-card:nth-child(5) .dash-pending-card__icon { background: color-mix(in srgb, var(--c-primary) 15%, var(--c-surface)); color: var(--c-primary); }
.dash-pending-card:nth-child(6) .dash-pending-card__icon { background: color-mix(in srgb, var(--c-success) 15%, var(--c-surface)); color: var(--c-success); }
/* "Pendiente del día" cuya feature todavía no existe: count = "X", atenuada */
.dash-pending-card--todo { opacity: .5; }
.dash-pending-card--todo:hover { opacity: .72; }
.dash-pending-card--todo .dash-pending-card__count { color: var(--c-text-muted); font-weight: var(--fw-semibold); }
.dash-pending-card__main { flex: 1; min-width: 0; line-height: 1.2; }
.dash-pending-card__title { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.dash-pending-card__desc { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; }
.dash-pending-card__count {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ABM de Roles — matriz de funcionalidades × 3 niveles (B-503.b)
   ============================================================ */
.role-matrix {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.role-matrix__group {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.role-matrix__group-head {
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.role-matrix__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.role-matrix__row:last-child { border-bottom: none; }
.role-matrix__row-main {
  min-width: 0;
  line-height: 1.2;
}
.role-matrix__row-name { font-weight: var(--fw-medium); }
.role-matrix__row-desc { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 1px; }

/* Segmented selector de nivel */
.role-level {
  display: inline-flex;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border-strong);
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.role-level__btn {
  padding: 2px var(--sp-2);
  font-size: 11px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--c-text-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.4;
  font-weight: var(--fw-medium);
}
.role-level__btn:hover { color: var(--c-text); }
.role-level__btn .icon { font-size: 14px; }
.role-level__btn--active { box-shadow: var(--shadow-sm); }
.role-level__btn--active[data-level="NO_VISIBLE"]   { background: var(--c-surface); color: var(--c-text-soft); }
.role-level__btn--active[data-level="SOLO_LECTURA"] { background: var(--c-warning-soft); color: var(--c-warning); }
.role-level__btn--active[data-level="ACCESO_TOTAL"] { background: var(--c-success-soft); color: var(--c-success); }

/* En modo lectura del ABM, los botones segmentados quedan inactivos visualmente */
.abm-detail--readonly .role-level { background: transparent; border-color: transparent; }
.abm-detail--readonly .role-level__btn { pointer-events: none; opacity: 0.6; }
.abm-detail--readonly .role-level__btn--active { opacity: 1; }

/* ============================================================
   Pacientes — búsqueda y listado (B-100)
   ============================================================ */

/* Barra de filtros multi-criterio */
.filters-bar {
  display: grid;
  grid-template-columns: 160px 1fr 1fr 140px 200px auto auto;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  margin-bottom: var(--sp-2);
  align-items: end;
}
.filters-bar__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.filters-bar__label {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}
.filters-bar .input,
.filters-bar .select {
  padding: 4px var(--sp-2);
  font-size: var(--fs-sm);
}
.filters-bar__actions {
  display: flex;
  gap: var(--sp-1);
}

@media (max-width: 900px) {
  .filters-bar {
    grid-template-columns: 1fr 1fr;
  }
  .filters-bar__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Listado de pacientes — grilla densa similar a la agenda */
.patient-list {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 200px;
}
.patient-list__head,
.patient-list__row {
  display: grid;
  grid-template-columns: 32px 150px minmax(180px, 1.5fr) 60px minmax(180px, 1.2fr) minmax(140px, 1fr) 130px 130px;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  align-items: center;
}
.patient-list__head {
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  position: sticky;
  top: 0;
  z-index: 2;
}
.patient-list__row {
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  background: var(--c-surface);
  cursor: pointer;
  min-height: 44px;
}
.patient-list__row:last-child { border-bottom: none; }
.patient-list__row:hover { background: var(--c-surface-hover); }
.patient-list__row--selected {
  background: color-mix(in srgb, var(--c-primary) 22%, var(--c-surface)) !important;
  box-shadow: inset 4px 0 0 var(--c-primary);
}
.patient-list__row--selected:hover {
  background: color-mix(in srgb, var(--c-primary) 28%, var(--c-surface)) !important;
}

.patient-list__avatar {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: 11px;
  flex-shrink: 0;
}
.patient-list__doc {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.patient-list__doc-type {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-right: 4px;
}
.patient-list__name {
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.patient-list__age { text-align: center; color: var(--c-text-muted); }
.patient-list__contact {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-xs);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
}
.patient-list__contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patient-list__contact .muted { color: var(--c-text-muted); }
.patient-list__os {
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.patient-list__last {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.patient-list__last b { color: var(--c-text); font-weight: var(--fw-medium); }
.patient-list__actions {
  display: flex;
  justify-content: flex-end;
}
.patient-list__actions .btn { width: 100%; justify-content: center; }

/* Responsive mobile: colapso a tarjetas */
@media (max-width: 900px) {
  .patient-list__head { display: none; }
  .patient-list__row {
    grid-template-columns: 32px 1fr auto;
    grid-template-areas:
      "avatar name actions"
      "avatar doc  actions"
      "avatar contact actions"
      "avatar os actions"
      "avatar last actions";
    row-gap: 2px;
    padding: var(--sp-2) var(--sp-3);
  }
  .patient-list__avatar { grid-area: avatar; align-self: start; }
  .patient-list__doc { grid-area: doc; font-size: var(--fs-xs); color: var(--c-text-muted); }
  .patient-list__name { grid-area: name; }
  .patient-list__age { display: none; }
  .patient-list__contact { grid-area: contact; }
  .patient-list__os { grid-area: os; font-size: var(--fs-xs); }
  .patient-list__last { grid-area: last; }
  .patient-list__actions { grid-area: actions; }
}

/* ============================================================
   Detalle de turno (B-201)
   ============================================================ */
.turno-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.turno-hero__avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  flex-shrink: 0;
}
.turno-hero__main { flex: 1; min-width: 200px; }
.turno-hero__name {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
}
.turno-hero__sub {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.turno-hero__sub b { color: var(--c-text); font-weight: var(--fw-medium); }
.turno-hero__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--sp-3);
  border-left: 1px solid var(--c-border);
  gap: var(--sp-1);
}
.turno-hero__state-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-soft);
}
.turno-hero__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-left: auto;
}

/* Grid de secciones del detalle */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.detail-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-grid--2-1 { grid-template-columns: 2fr 1fr; }
.detail-grid--full { grid-template-columns: 1fr; }

@media (max-width: 1200px) {
  .detail-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .detail-grid--2-1 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .detail-grid,
  .detail-grid--3 { grid-template-columns: 1fr; }
}

.detail-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}
.detail-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-alt);
}
.detail-card[data-collapsed="true"] .detail-card__head { border-bottom: none; }
/* Si el head es el único hijo (card sin body), sin línea inferior */
.detail-card__head:last-child { border-bottom: none; }
.detail-card__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.detail-card__head-actions {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
}
.detail-card__toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--sp-1);
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
  transition: color var(--t-fast);
}
.detail-card__toggle:hover { color: var(--c-text); }
.detail-card__body {
  padding: var(--sp-2) var(--sp-3);
  flex: 1;
}
.detail-card[data-collapsed="true"] .detail-card__body { display: none; }

/* Card con body en 2 sub-columnas (paciente + práctica en una sola card) */
.detail-card__body--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-4);
}
@media (max-width: 900px) {
  .detail-card__body--2col { grid-template-columns: 1fr; }
}

/* Subtítulo dentro de la card */
.subhead {
  margin: 0 0 var(--sp-2);
  padding-bottom: 4px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* Banner de estado de cobertura dentro de la card unificada */
.coverage-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-success-soft);
  border-left: 3px solid var(--c-success);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
}
.coverage-status--particular {
  background: var(--c-surface-alt);
  border-left-color: var(--c-text-soft);
}
.coverage-status--pendiente {
  background: var(--c-warning-soft);
  border-left-color: var(--c-warning);
}
.coverage-status__info strong { display: block; }
.coverage-status__info small { color: var(--c-text-muted); font-size: var(--fs-xs); }
.coverage-status__badges {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

/* Filas especiales en la tabla de cobros */
.cobros-table tr.cobros-table__subtotal td {
  background: var(--c-surface-alt);
  font-weight: var(--fw-semibold);
  border-top: 1px solid var(--c-border-strong);
}
.cobros-table tr.cobros-table__cubre td {
  color: var(--c-success);
}
.cobros-table tr.cobros-table__divider td {
  height: 6px;
  padding: 0;
  border-bottom: none;
  background: transparent;
}

/* Key-value list */
.kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px var(--sp-2);
  font-size: var(--fs-sm);
}
.kv__label {
  color: var(--c-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-medium);
  padding-top: 2px;
}
.kv__value { color: var(--c-text); word-break: break-word; }
.kv__value--empty { color: var(--c-text-soft); font-style: italic; }

/* Timeline */
.timeline {
  position: relative;
  padding-left: var(--sp-4);
}
.timeline::before {
  content: '';
  position: absolute;
  top: 6px; bottom: 6px;
  left: 5px;
  width: 2px;
  background: var(--c-border);
}
.timeline__item {
  position: relative;
  padding: 0 0 var(--sp-3) 0;
  font-size: var(--fs-sm);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-4) + 1px);
  top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-surface);
}
.timeline__item--terminal::before { background: var(--c-text-soft); }
.timeline__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.timeline__title { font-weight: var(--fw-medium); }
.timeline__time { font-size: var(--fs-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.timeline__user {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: 2px;
}
.timeline__motivo {
  font-size: var(--fs-xs);
  color: var(--c-text);
  margin-top: 2px;
  background: var(--c-surface-alt);
  padding: var(--sp-1) var(--sp-2);
  border-left: 2px solid var(--c-border-strong);
}

/* Adjuntos — chip-botón por archivo */
.attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.attach-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-2);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border-strong);
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  line-height: 1.4;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.attach-item:hover {
  background: var(--c-surface);
  border-color: var(--c-primary);
  color: var(--c-text);
  text-decoration: none;
}
.attach-item__icon {
  color: var(--c-primary);
  flex-shrink: 0;
}
.attach-item__name {
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.attach-item__dl {
  color: var(--c-text-muted);
  flex-shrink: 0;
  padding: 2px;
  border-radius: var(--radius-sm);
}
.attach-item__dl:hover { color: var(--c-primary); background: var(--c-primary-soft); }
.attach-empty {
  padding: var(--sp-2);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  border: 1px dashed var(--c-border);
  background: var(--c-surface-alt);
}

/* Cobros tabla compacta */
.cobros-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cobros-table th, .cobros-table td {
  padding: 4px var(--sp-2);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.cobros-table th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  font-weight: var(--fw-semibold);
  background: var(--c-surface-alt);
}
.cobros-table tfoot td {
  font-weight: var(--fw-semibold);
  border-top: 2px solid var(--c-border-strong);
  border-bottom: none;
}
.cobros-table td.num, .cobros-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Right drawer — acciones secundarias de la pantalla
   Persistente como columna del grid (desktop) / overlay (mobile)
   ============================================================ */
.right-drawer {
  grid-area: drawer;
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.right-drawer__head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.right-drawer__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.right-drawer__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  overflow-y: auto;
  flex: 1;
}
.right-drawer__section-title {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-soft);
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
}
.right-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.right-drawer__item:hover {
  background: var(--c-surface);
  border-color: var(--c-primary);
  text-decoration: none;
}
.right-drawer__item-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.right-drawer__item-text { min-width: 0; flex: 1; }
.right-drawer__item-name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.right-drawer__item-desc {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: 2px;
}
.right-drawer__item-count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 1px var(--sp-2);
  background: var(--c-warning-soft);
  color: var(--c-warning);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Backdrop solo aparece en mobile cuando el drawer es overlay */
.drawer-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(15, 23, 42, 0.3);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
  display: none;
}

/* Mobile: el drawer vuelve a comportarse como overlay
   (la columna del grid ya está en 0 desde el media query principal). */
@media (max-width: 768px) {
  body.drawer-open .right-drawer {
    position: fixed;
    top: var(--header-h);
    right: 0;
    width: 90vw;
    max-width: 340px;
    height: calc(100vh - var(--header-h));
    z-index: var(--z-modal);
    box-shadow: var(--shadow-lg);
  }
  body.drawer-open .drawer-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Theme switcher (B-516) */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.theme-card {
  border: 2px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.theme-card:hover { border-color: var(--c-primary); }
.theme-card--active { border-color: var(--c-primary); background: var(--c-primary-soft); }
.theme-card__swatches { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.theme-card__swatch {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-strong);
}
.theme-card__name { font-weight: var(--fw-medium); font-size: var(--fs-sm); }

/* ============================================================
   Portal del paciente: bordes redondeados (D-096)
   El back-office usa marcos rectos; el portal usa redondeados
   para un look más amable. Todo lo que esté dentro de
   .portal-layout obtiene radius en sus contenedores.
   ============================================================ */
.portal-layout .portal-login__card { border-radius: var(--radius-lg); }
.portal-layout .portal-tile { border-radius: var(--radius-lg); }
.portal-layout .estudio-row { border-radius: var(--radius-md); }
.portal-layout .estudio-row__icon { border-radius: var(--radius-full); }
.portal-layout .estudio-viewer { border-radius: var(--radius-lg); overflow: hidden; }
.portal-layout .estudios-master,
.portal-layout .estudio-detail { border-radius: var(--radius-lg); }
.portal-layout .alert { border-radius: var(--radius-md); }
.portal-layout .card { border-radius: var(--radius-lg); }

/* En mobile el banner + card del login mantienen redondeo coherente */
@media (max-width: 767px) {
  .portal-layout .login-bg { border-radius: 0; }
  .portal-layout .portal-login__card { border-radius: var(--radius-lg); }
}

/* =====================================================================
 * Tema azul-claro (paleta Ipensa): dorado oliva como acento visible.
 * Aplica al hover del menú lateral, al item seleccionado en los ABMs
 * y al tab activo del drawer de OS. Selector específico por tema:
 * no afecta a otros temas.
 * ===================================================================== */
[data-theme="azul-claro"] .nav-item:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
[data-theme="azul-claro"] .nav-item:hover .icon {
  color: var(--c-accent);
}

/* Item seleccionado de un ABM master-list (Roles, OS, Pacientes, etc.) */
[data-theme="azul-claro"] .abm-list__item--selected {
  border-left-color: var(--c-accent);
  background: var(--c-accent-soft);
}
[data-theme="azul-claro"] .abm-list__item--selected .abm-list__item-name {
  color: var(--c-accent-hover);
}

/* Tab activo del drawer lateral de OS — subrayado dorado */
[data-theme="azul-claro"] .os-drawer__tab--active {
  border-bottom-color: var(--c-accent);
  color: var(--c-accent);
}
[data-theme="azul-claro"] .os-drawer__tab--active .os-drawer__tab-count {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

/* =====================================================================
   Solapas de la admisión y de la ficha de internación

   Las secciones apiladas obligaban a recorrer el formulario entero para
   encontrar un campo. Se agrupan por categoría de carga, que es como lo
   resolvió el sistema anterior y como la administrativa ya lo tiene
   aprendido.
   ===================================================================== */
.adm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 2px solid var(--c-border);
    margin-bottom: var(--sp-4);
}

.adm-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--sp-2) var(--sp-4);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    cursor: pointer;
    white-space: nowrap;
}
.adm-tab:hover { color: var(--c-text); background: var(--c-surface-hover); }

/* La activa se distingue por color Y por borde: sólo por color no se
   lee en los temas de bajo contraste. */
.adm-tab--active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    font-weight: var(--fw-semibold);
}
.adm-tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }

/* Una solapa con campos en error: el formulario no puede rebotar
   señalando algo que está detrás de otra solapa. */
.adm-tab--con-error { color: var(--c-danger); }
.adm-tab--con-error.adm-tab--active { border-bottom-color: var(--c-danger); }
.adm-tab__err {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--c-danger);
    color: #fff;
    font-size: 11px;
    font-weight: var(--fw-bold);
}

/* En angosto las solapas scrollean en su fila en vez de apilarse: si se
   apilan, ocupan media pantalla antes del primer campo. */
@media (max-width: 700px) {
    .adm-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .adm-tab { padding: var(--sp-2); }
}

/* En la ficha las solapas arrancan pegadas al borde superior del cuerpo:
   un poco de aire arriba y la línea que las subraya llegando de lado a
   lado del card, no sólo debajo de los botones. */
.fi-cuerpo .adm-tabs {
    margin-top: calc(var(--sp-1) * -1);
    margin-bottom: var(--sp-4);
}

/* Al imprimir no hay solapas: sale todo. */
@media print {
    .adm-tabs { display: none; }
    .adm-panel[hidden] { display: block !important; }
}

/* =====================================================================
   Panel de camas libres

   Se abre desde la gestión (para mirar, o para mover un internado) y
   desde la ficha. La marca M/F del vecino de habitación es lo que
   permite decidir si la cama sirve: en una compartida no se mezclan
   sexos. Cuando choca se marca en ámbar, no se bloquea.
   ===================================================================== */
.pc {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: var(--z-modal-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}
.pc[hidden] { display: none; }

.pc__caja {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.pc__cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}
.pc__tit { margin: 0; font-size: var(--fs-md); }
.pc__sub { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 2px; }
.pc__desde { margin-left: 4px; }

/* El sexo del que se mueve, arriba: es contra lo que se compara cada cama. */
.pc__sexo {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    margin-left: 4px;
}

.pc__aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: var(--sp-3) var(--sp-4) 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-warning-soft);
    color: var(--c-warning);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
}

.pc__cuerpo { padding: var(--sp-3) var(--sp-4); overflow-y: auto; }
.pc__vacio { padding: var(--sp-6); text-align: center; color: var(--c-text-muted); }
.pc__vacio .icon { font-size: 32px; opacity: .5; }
.pc__pie { padding: var(--sp-2) var(--sp-4) var(--sp-3); border-top: 1px solid var(--c-border); }

.pc__sector + .pc__sector { margin-top: var(--sp-4); }
.pc__sector-tit {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-muted);
    margin-bottom: var(--sp-2);
}
.pc__sector-n {
    background: var(--c-surface-alt);
    border-radius: var(--r-pill);
    padding: 0 7px;
    font-size: 11px;
}

/* Grilla de camas: entran varias por fila y el ojo las barre de una. */
.pc__camas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: var(--sp-2);
}

/* Verde = libre. No es decoración: el personal lo tiene memorizado del
   sistema anterior, y cambiarle el significado a un color que ya se lee
   de un vistazo cuesta más que cualquier rediseño. */
.pc__cama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-success);
    border-radius: var(--r-sm);
    background: var(--c-success-soft);
    color: var(--c-success);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}
.pc__cama:hover:not(:disabled) {
    background: var(--c-success);
    color: #fff;
    border-color: var(--c-success);
}
/* En modo mirar no se eligen, pero se leen igual: no se atenúan, porque
   el panel existe justamente para mirarlas. */
.pc__cama:disabled { cursor: default; }
.pc__cama:focus-visible { outline: 2px solid var(--c-success); outline-offset: 2px; }
.pc__cama-cod { font-weight: var(--fw-semibold); }

/* La marca del vecino, en píldora. Va con LETRA y con color: sólo color no
   se lee en los temas de bajo contraste, y es el dato que decide si la cama
   sirve. */
.pc__cama-sexo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: var(--fw-bold);
    flex: 0 0 auto;
}
.pc__cama--m .pc__cama-sexo { background: var(--c-info-soft); color: var(--c-info); }
.pc__cama--f .pc__cama-sexo { background: var(--c-primary-soft); color: var(--c-primary); }
.pc__cama:hover:not(:disabled) .pc__cama-sexo { background: #fff; }

/* Choca de sexo: ámbar, elegible igual. Pisa el verde de "libre" porque
   acá lo que hay que ver primero es el conflicto, no la disponibilidad. */
.pc__cama--choca {
    border-color: var(--c-warning);
    background: var(--c-warning-soft);
    color: var(--c-warning);
}
.pc__cama--choca:hover:not(:disabled) { background: var(--c-warning); color: #fff; }
.pc__cama--choca .pc__cama-sexo { background: var(--c-warning); color: #fff; }

.pc__cama-ais { color: var(--c-danger); }

@media (max-width: 620px) {
    .pc__camas { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .pc__caja { max-height: 92vh; }
}

/* El código CIE-10 elegido, al lado del rótulo del diagnóstico.
   Va ahí y no dentro del campo: el campo guarda lo que se escribió, y
   mezclar el código adentro lo dejaría guardado en el texto también. */
.dx__cod {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    vertical-align: middle;
}
.dx__cod[hidden] { display: none; }