/* =====================================================================
   CEH Master — sistema visual "Enlace"
   ---------------------------------------------------------------------
   Que es esto: la herramienta diaria de un Comite de Enlace con los
   Hospitales. Se usa para encontrar rapido a un medico o una institucion,
   ver que tecnicas sin sangre tiene disponibles y dejar registrado el
   contacto. Todo lo visual esta al servicio de esas tres cosas.

   Estructura:
     1. Tokens
     2. Base tipografica
     3. App shell (riel + panel de navegacion + topbar)
     4. Banners de modulo
     5. Superficies: page-surface, panel, card
     6. Tarjetas de indicador
     7. Tablas densas
     8. Formularios
     9. Componentes: pills, chips, badges, avatares, capacidades, recencia
    10. Maestro-detalle
    11. Estados vacios, flashes, login
    12. Utilidades y accesibilidad

   Las clases historicas (.page-surface, .table-ceh, .no-outline,
   .btn-icon, .list-toolbar, .empty-state, .stat-card...) se mantienen a
   proposito: son el contrato con las 85 plantillas existentes. Cambia
   como se ven, no como se llaman.
   ===================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-variable.woff2') format('woff2');
}

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
  /* Un solo tema, siempre claro: sin esto, un SO en modo oscuro le pinta
     fondo oscuro al popup nativo de <select> mientras el texto de las
     <option> sigue en el --c-ink oscuro que definimos aca abajo -texto
     oscuro sobre fondo oscuro, invisible-. El <meta name="color-scheme">
     de layout/base.html ya lo declara para la pagina; esto lo refuerza a
     nivel CSS, que es lo que de verdad respetan los popups nativos. */
  color-scheme: light;

  /* Medidas del shell */
  --rail-w: 4.25rem;
  --nav-w: 15.5rem;
  --topbar-h: 4rem;

  /* Color. El teal es el color del CEH; el coral aparece solo donde hay
     que llamar la atencion sobre algo humano (un vencimiento, un contacto
     que quedo viejo). Fondo frio y bajo en saturacion: las planillas de
     20 columnas se miran durante horas. */
  --c-canvas: #EDF3F2;
  --c-surface: #FFFFFF;
  --c-surface-2: #F5F9F8;
  --c-tint: #E4F0ED;
  --c-ink: #0C1F1D;
  --c-ink-2: #344B48;
  --c-muted: #647E7A;
  --c-line: #E0EAE8;
  --c-line-strong: #C9DAD7;

  --c-primary: #0F736A;
  --c-primary-rgb: 15, 115, 106;
  --c-primary-600: #0B5A53;
  --c-primary-700: #08443E;
  --c-primary-900: #062F2B;
  --c-primary-soft: #DCEEEB;

  --c-accent: #E2603A;
  --c-accent-rgb: 226, 96, 58;
  --c-accent-600: #BC4826;
  --c-accent-soft: #FCE9E2;

  --c-ok: #17805A;
  --c-ok-soft: #DDF1E7;
  --c-warn: #A96A05;
  --c-warn-soft: #FBEEDA;
  --c-bad: #C03A2C;
  --c-bad-soft: #FBE6E3;
  --c-info: #0F736A;
  --c-info-soft: #DCEEEB;

  /* Degradados de banner. Uno por modulo: el color es la pista de "en que
     parte del sistema estoy" antes de leer el titulo. */
  --g-panel:   linear-gradient(118deg, #0B5A53 0%, #12857A 48%, #3FA98F 100%);
  --g-medicos: linear-gradient(118deg, #0A4C57 0%, #10788B 52%, #37AAB0 100%);
  --g-instituciones: linear-gradient(118deg, #0C5745 0%, #1B8560 50%, #5FB681 100%);
  --g-ceh:     linear-gradient(118deg, #123A52 0%, #1D6285 50%, #4E97B8 100%);
  --g-gvps:    linear-gradient(118deg, #1C3566 0%, #33589C 50%, #6E88C8 100%);
  --g-presentaciones: linear-gradient(118deg, #5C1E4A 0%, #973671 50%, #C97CA4 100%);
  --g-informes:linear-gradient(118deg, #7A3A1E 0%, #B0562C 50%, #DE8B54 100%);
  --g-bienes:  linear-gradient(118deg, #5C4A12 0%, #957A1E 50%, #C7AB4C 100%);
  --g-actas:   linear-gradient(118deg, #3E2E63 0%, #5F4A96 50%, #9083C4 100%);
  --g-casos:   linear-gradient(118deg, #7A1E1E 0%, #B33A3A 50%, #E08787 100%);
  --g-admin:   linear-gradient(118deg, #2C3F52 0%, #46647F 50%, #7A96AC 100%);
  --g-guardias: linear-gradient(118deg, #8C2F12 0%, #C9531F 50%, #F0925A 100%);
  --g-agenda:  linear-gradient(118deg, #0D4F5C 0%, #1490A8 50%, #5FCBDD 100%);
  --g-chat:    linear-gradient(118deg, #2E2A63 0%, #4E4A9C 50%, #8B87CE 100%);

  --r-xs: 0.375rem;
  --r-sm: 0.55rem;
  --r-md: 0.85rem;
  --r-lg: 1.15rem;
  --r-xl: 1.5rem;

  --sh-xs: 0 1px 2px rgba(12, 31, 29, 0.05);
  --sh-sm: 0 1px 2px rgba(12, 31, 29, 0.05), 0 2px 6px -2px rgba(12, 31, 29, 0.08);
  --sh-md: 0 1px 2px rgba(12, 31, 29, 0.04), 0 12px 28px -14px rgba(12, 31, 29, 0.30);
  --sh-lg: 0 2px 4px rgba(12, 31, 29, 0.04), 0 28px 56px -24px rgba(12, 31, 29, 0.38);

  --f-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Bootstrap 5.3: pisar sus variables alcanza para links, focus, radios y
     la mayoria de los componentes sin reescribir regla por regla. */
  --bs-body-font-family: var(--f-body);
  --bs-body-color: var(--c-ink);
  --bs-body-bg: var(--c-canvas);
  --bs-body-font-size: 0.9375rem;
  --bs-link-color: var(--c-primary);
  --bs-link-hover-color: var(--c-primary-600);
  --bs-link-color-rgb: var(--c-primary-rgb);
  --bs-link-hover-color-rgb: 11, 90, 83;
  --bs-border-color: var(--c-line);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-sm: var(--r-xs);
  --bs-border-radius-lg: var(--r-md);
  --bs-primary: var(--c-primary);
  --bs-primary-rgb: var(--c-primary-rgb);
  --bs-focus-ring-color: rgba(var(--c-primary-rgb), 0.25);
  --bs-secondary-color: var(--c-muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   2. Base tipografica
   --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  min-height: 100vh;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--c-ink);
}

h1, .h1 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.15; }
h2, .h2 { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.75rem); line-height: 1.2; }
h3, .h3 { font-size: 1.2rem; }
h4, .h4 { font-size: 1.02rem; }

/* Micro-etiqueta: la usa el sistema entero para nombrar campos, grupos y
   columnas de datos. Es el detalle tipografico que mantiene legible una
   pantalla con 40 rotulos distintos. */
.eyebrow,
.u-label {
  display: block;
  font-family: var(--f-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.u-num {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.text-muted { color: var(--c-muted) !important; }

/* ---------------------------------------------------------------------
   3. App shell
   --------------------------------------------------------------------- */
.app-rail,
.app-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 60;
  transition: transform 0.22s ease;
}

/* --- Riel de modulos -------------------------------------------------- */
.app-rail {
  left: 0;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0 1rem;
  background: linear-gradient(178deg, var(--c-primary-700) 0%, var(--c-primary-900) 100%);
  color: #fff;
}

.rail-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.65rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.10);
  color: var(--c-accent);
  flex-shrink: 0;
}

.rail-brand svg { width: 1.45rem; height: 1.45rem; }

.rail-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.rail-scroll::-webkit-scrollbar { width: 0; }

.rail-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rail-item svg { width: 1.25rem; height: 1.25rem; }

.rail-item:hover,
.rail-item:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.rail-item.is-active {
  background: var(--c-surface);
  color: var(--c-primary);
}

/* Marca de modulo activo: un trazo coral pegado al borde del riel, la misma
   idea que el glifo "enlace" de la marca. */
.rail-item.is-active::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.4rem;
  border-radius: 0 3px 3px 0;
  background: var(--c-accent);
}

/* Etiqueta emergente (el riel es solo iconos: sin esto no se sabe que es que) */
.rail-item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%) translateX(-0.25rem);
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-xs);
  background: var(--c-primary-900);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.rail-item:hover::after,
.rail-item:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.rail-foot { margin-top: auto; padding-top: 0.6rem; }

/* --- Panel de navegacion --------------------------------------------- */
.app-nav {
  left: var(--rail-w);
  width: var(--nav-w);
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
}

.nav-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--topbar-h);
  padding: 0 0.9rem;
  border-bottom: 1px solid var(--c-line);
  flex-shrink: 0;
}

.nav-head .nav-title {
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  line-height: 1.1;
}

.nav-head .nav-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--c-muted);
  letter-spacing: 0.02em;
}

.nav-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem 0.65rem 1.5rem;
}

.nav-group + .nav-group { margin-top: 1.1rem; }

.nav-group-title {
  padding: 0 0.6rem;
  margin-bottom: 0.35rem;
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-sm);
  color: var(--c-ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.13s ease, color 0.13s ease;
}

.nav-link svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: var(--c-muted);
}

.nav-link:hover,
.nav-link:focus-visible {
  background: var(--c-surface-2);
  color: var(--c-ink);
}

.nav-link.is-active {
  background: var(--c-primary-soft);
  color: var(--c-primary-600);
  font-weight: 600;
}

.nav-link.is-active svg { color: var(--c-primary); }

.nav-link .nav-count {
  margin-left: auto;
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
}

/* --- Zona principal --------------------------------------------------- */
.app-main {
  margin-left: calc(var(--rail-w) + var(--nav-w));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  min-height: var(--topbar-h);
  padding: 0.6rem 1.5rem;
  background: rgba(237, 243, 242, 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--c-line);
}

.topbar-toggle { display: none; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--c-muted);
}

.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-primary); }
.crumbs .sep { opacity: 0.5; }
.crumbs strong {
  font-weight: 600;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Buscador global: es la accion mas frecuente del sistema, asi que vive en
   el centro de la barra y no escondido en un menu. */
/* min-width: 0 en el contenedor y en el propio input: un <input> trae un
   ancho intrinseco de ~20 caracteres que, sin esto, impide que la barra se
   encoja y desborda la pantalla en el celular. */
.topbar-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 28rem;
  margin-inline: auto;
}

.topbar-search svg {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--c-muted);
  pointer-events: none;
}

.topbar-search input {
  width: 100%;
  min-width: 0;
  height: 2.5rem;
  padding: 0 2.6rem 0 2.45rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface);
  font-size: 0.875rem;
  color: var(--c-ink);
  box-shadow: var(--sh-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.topbar-search input::placeholder { color: var(--c-muted); }

.topbar-search input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.14);
}

.topbar-search kbd {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  background: var(--c-surface-2);
  color: var(--c-muted);
  font-family: var(--f-display);
  font-size: 0.7rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink-2);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icon-btn svg { width: 1.1rem; height: 1.1rem; }

.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--c-primary-soft);
  border-color: var(--c-primary-soft);
  color: var(--c-primary-600);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 2.4rem;
  padding: 0 0.55rem 0 0.4rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.user-chip:hover,
.user-chip:focus-visible {
  border-color: var(--c-line-strong);
  box-shadow: var(--sh-xs);
  color: var(--c-ink);
}

.user-chip .user-name {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.05;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip .user-role {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--c-muted);
}

.user-chip svg { width: 0.95rem; height: 0.95rem; color: var(--c-muted); }

/* --- Campanita de notificaciones (topbar) -----------------------------
   Reusa .icon-btn (mismo boton cuadrado que topbar-toggle); el punto de
   "hay algo sin leer" se agrega aparte, sin tocar el tamano del icono. */
.notif-bell { position: relative; }
.notif-bell .badge-count {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 1.1rem;
  padding: 0.05rem 0.3rem;
  background: var(--c-primary);
  color: #fff;
  line-height: 1.3;
}
.notif-dropdown { width: 22rem; max-width: 90vw; max-height: 70vh; overflow-y: auto; }
.notif-item { white-space: normal; }
.notif-item.is-unread { font-weight: 600; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--f-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-lg { width: 2.6rem; height: 2.6rem; font-size: 0.95rem; }
.avatar-accent { background: var(--c-accent); }
.avatar-soft { background: var(--c-primary-soft); color: var(--c-primary-600); }

/* Fondo del drawer en mobile */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(6, 47, 43, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

@media (max-width: 991.98px) {
  .app-rail,
  .app-nav { transform: translateX(-100%); }
  .app-nav { left: 0; width: min(17rem, 82vw); box-shadow: var(--sh-lg); }
  .app-main { margin-left: 0; }
  .topbar-toggle { display: inline-flex; }
  .topbar { padding-inline: 0.9rem; }
  .topbar-search { max-width: none; }

  body.nav-open .app-rail,
  body.nav-open .app-nav { transform: translateX(0); }
  body.nav-open .app-nav { left: var(--rail-w); }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 575.98px) {
  .crumbs { display: none; }
  .user-chip .user-name,
  .user-chip .user-role { display: none; }
  .user-chip { padding: 0 0.35rem; }
  .topbar-search kbd { display: none; }
}

/* ---------------------------------------------------------------------
   4. Banners de modulo
   El degradado + las ondas suaves son la firma de cada seccion: dicen
   "estas en Medicos" antes de que se lea el titulo, y le dan aire a
   pantallas que abajo son puro dato.
   --------------------------------------------------------------------- */
.page-shell {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding: 1.25rem 1rem 3.5rem;
  flex: 1;
}

@media (min-width: 768px) {
  .page-shell { padding: 1.5rem 1.5rem 4rem; }
}

.banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 1.6rem 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--g-panel);
  color: #fff;
  isolation: isolate;
}

.banner--medicos { background: var(--g-medicos); }
.banner--instituciones { background: var(--g-instituciones); }
.banner--ceh { background: var(--g-ceh); }
.banner--gvps { background: var(--g-gvps); }
.banner--presentaciones { background: var(--g-presentaciones); }
.banner--informes { background: var(--g-informes); }
.banner--bienes { background: var(--g-bienes); }
.banner--actas { background: var(--g-actas); }
.banner--casos { background: var(--g-casos); }
.banner--admin { background: var(--g-admin); }
.banner--guardias { background: var(--g-guardias); }
.banner--agenda { background: var(--g-agenda); }
.banner--chat { background: var(--g-chat); }

/* Ondas: dos capas de radial-gradient muy suaves. Nada de imagenes: el
   CSP del servidor no permite recursos externos y una foto de fondo
   competiria con los datos. */
.banner::before,
.banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.banner::before {
  width: 34rem;
  height: 34rem;
  right: -8rem;
  top: -18rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 62%);
}

.banner::after {
  width: 26rem;
  height: 26rem;
  right: 4rem;
  bottom: -17rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%);
}

@media (min-width: 768px) {
  .banner { padding: 2rem 2.25rem; }
}

.banner .eyebrow {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.5rem;
}

.banner-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  color: #fff;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.banner-count {
  font-family: var(--f-display);
  font-size: 0.9em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.62);
}

.banner-sub {
  max-width: 46rem;
  margin: 0.5rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}

.banner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.banner-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.banner-meta svg { width: 0.95rem; height: 0.95rem; }

.banner-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.btn-on-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.btn-on-banner:hover,
.btn-on-banner:focus-visible { background: rgba(255, 255, 255, 0.26); color: #fff; }

.btn-on-banner svg { width: 1rem; height: 1rem; }

.btn-on-banner-solid {
  background: #fff;
  border-color: #fff;
  color: var(--c-primary-700);
}

.btn-on-banner-solid:hover,
.btn-on-banner-solid:focus-visible { background: rgba(255, 255, 255, 0.88); color: var(--c-primary-700); }

/* ---------------------------------------------------------------------
   5. Superficies
   --------------------------------------------------------------------- */

/* .page-surface envuelve el contenido de las plantillas historicas. Ahora
   es una tarjeta limpia, sin el riel de color de la version anterior (esa
   funcion la cumple el banner). */
.page-surface {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .page-surface { padding: 1.75rem 1.85rem; }
}

.page-surface > h1:first-child,
.page-surface > h2:first-child {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.6rem);
}

/* El banner ya dice en que pantalla estamos. Las plantillas historicas
   arrancan con un <h2> que repite ese mismo titulo palabra por palabra
   ("Editar Médicos" debajo de "Editar médicos"), asi que se oculta -- pero
   solo cuando hay banner delante: una pantalla sin banner conserva el suyo. */
.banner + .page-surface > h1:first-child,
.banner + .page-surface > h2:first-child,
.banner + .page-surface > h3:first-child { display: none; }

.banner + .page-surface > h4:first-of-type { margin-top: 0; }

.page-surface h4 {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--c-muted);
  margin-bottom: 1.25rem;
}

.page-surface h3 {
  font-size: 1.1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}

.page-surface h3:first-of-type {
  margin-top: 0.25rem;
  padding-top: 0;
  border-top: none;
}

/* Tarjeta autonoma para las pantallas nuevas. */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.panel + .panel { margin-top: 1.25rem; }

.panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--c-line);
}

.panel-head h3,
.panel-head h2 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}

.panel-head .panel-tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.panel-head .panel-tools .btn { white-space: nowrap; }

.panel-body { padding: 1.25rem; }
.panel-body-flush { padding: 0; }

.panel-foot {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
  font-size: 0.85rem;
  color: var(--c-muted);
}

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

/* Bootstrap .card (login y algunas pantallas viejas) */
.card {
  border-color: var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.card-header {
  background-color: var(--c-surface-2);
  border-bottom-color: var(--c-line);
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-ink);
}

/* ---------------------------------------------------------------------
   6. Indicadores
   --------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.15rem 1.25rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

a.stat-card:hover,
a.stat-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--c-line-strong);
  color: inherit;
}

.stat-card .stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.stat-card .stat-icon svg { width: 1.2rem; height: 1.2rem; }

.stat-card .stat-body { min-width: 0; }

.stat-card .stat-value {
  display: block;
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.stat-card .stat-label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.83rem;
  color: var(--c-muted);
}

.stat-card .stat-arrow {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  color: var(--c-muted);
  opacity: 0.45;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.stat-card .stat-arrow svg { width: 1.05rem; height: 1.05rem; }

a.stat-card:hover .stat-arrow,
a.stat-card:focus-visible .stat-arrow { opacity: 1; transform: translateX(3px); }

/* Variante "tarjeta de institucion" del panel: nombre grande arriba y la
   tira de capacidades abajo, dentro de la misma caja. */
.stat-card .rec-name { font-size: 1rem; white-space: normal; }
.stat-card .cap-strip { margin-top: 0.1rem; }

.stat-card-accent .stat-icon { background: var(--c-accent-soft); color: var(--c-accent-600); }
.stat-card-warn .stat-icon { background: var(--c-warn-soft); color: var(--c-warn); }
.stat-card-bad .stat-icon { background: var(--c-bad-soft); color: var(--c-bad); }

/* ---------------------------------------------------------------------
   7. Tablas densas
   La cabecera pasa de teal solido a un gris claro con rotulo en
   versalitas: en una planilla de 20 columnas la barra oscura pesaba mas
   que los datos.
   --------------------------------------------------------------------- */
.table-responsive {
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
}

.panel-body-flush > .table-responsive,
.table-responsive.is-flush { border: 0; border-radius: 0; }

/* Una planilla de 19 columnas no entra en la pantalla. Antes se comprimia
   hasta partir "Dr. Alejandro Bianchi" en tres renglones; ahora conserva su
   ancho natural y el contenedor desplaza en horizontal, que es lo que se
   espera de una planilla. */
.table-ceh {
  margin-bottom: 0;
  width: auto;
  min-width: 100%;
  font-size: 0.855rem;
  font-variant-numeric: tabular-nums;
  --bs-table-striped-bg: transparent;
  --bs-table-bg: transparent;
  border-color: var(--c-line);
}

.table-ceh th,
.table-ceh td { white-space: nowrap; }

/* Excepcion: la ultima columna suele ser "Observaciones" (hasta 300
   caracteres). Se le deja envolver dentro de un ancho maximo para que no
   estire la planilla a varios miles de pixeles. */
.table-ceh td:last-child {
  white-space: normal;
  min-width: 12rem;
  max-width: 26rem;
}

/* ...salvo cuando la ultima celda es la de acciones. */
.table-ceh td.table-actions-cell {
  white-space: nowrap;
  min-width: 0;
  max-width: none;
}

.table-ceh thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.6rem 0.7rem;
  background-color: var(--c-surface-2);
  color: var(--c-muted);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-line-strong);
  box-shadow: inset 0 -1px 0 var(--c-line-strong);
}

/* Muchas plantillas historicas ponen las <th> en un <tr> suelto sin
   <thead>: se les da el mismo tratamiento. */
.table-ceh > tr:first-child > th,
.table-ceh > tbody > tr:first-child > th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.6rem 0.7rem;
  background-color: var(--c-surface-2);
  color: var(--c-muted);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-line-strong);
}

.table-ceh td,
.table-ceh th {
  vertical-align: middle;
  border-color: var(--c-line);
}

.table-ceh tbody td { padding: 0.5rem 0.7rem; }

/* Cebrado muy leve: suficiente para seguir la fila, no tanto como para
   crear bandas que compitan con los estados semanticos. */
.table-ceh tbody tr:nth-of-type(even) > td { background-color: rgba(228, 240, 237, 0.35); }
.table-ceh tbody tr:hover > td,
.table-ceh tbody tr:hover > th { background-color: var(--c-tint); }

/* Estados semanticos (bienes, presentaciones, contacto vencido). Ganan al
   cebrado por especificidad. */
.table-ceh tbody tr.completada > td,
.table-ceh tr.completada > td { background-color: var(--c-ok-soft); }
.table-ceh tbody tr.cancelada > td,
.table-ceh tr.cancelada > td { background-color: var(--c-bad-soft); }
.table-ceh tbody tr.vencido > td,
.table-ceh tr.vencido > td { background-color: var(--c-bad-soft); }
.table-ceh tbody tr.por-vencer > td,
.table-ceh tr.por-vencer > td { background-color: var(--c-warn-soft); }

.table-ceh tr.is-filtered { display: none; }

/* Campo "invisible" dentro de una tabla editable */
.no-outline {
  width: 100%;
  min-width: 3.5rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.855rem;
}

.no-outline:hover { border-color: var(--c-line-strong); }

.no-outline:focus {
  outline: none;
  border-color: var(--c-primary);
  background-color: var(--c-surface);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.14);
}

.table-ceh select {
  max-width: 11rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  font-size: 0.83rem;
  color: inherit;
}

.table-ceh select:hover { border-color: var(--c-line-strong); }
.table-ceh select:focus {
  outline: none;
  border-color: var(--c-primary);
  background: var(--c-surface);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.14);
}

/* Columna de acciones fija a la derecha en tablas anchas */
.table-actions-cell {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 1%;
  white-space: nowrap;
  box-shadow: -10px 0 12px -10px rgba(12, 31, 29, 0.35);
}

/* Fondo opaco y por encima del cebrado: si no, al desplazar la planilla en
   horizontal se ven las columnas pasando por debajo de los botones. */
.table-ceh tbody tr > td.table-actions-cell,
.table-ceh tr > td.table-actions-cell { background-color: var(--c-surface); }
.table-ceh tbody tr:hover > td.table-actions-cell { background-color: var(--c-tint); }

.table-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Columna de seleccion (checkbox), fija a la izquierda igual que las
   acciones lo estan a la derecha. */
.table-select-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 1%;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  text-align: center;
  box-shadow: 10px 0 12px -10px rgba(12, 31, 29, 0.35);
}

.table-ceh tbody tr > td.table-select-cell,
.table-ceh tr > td.table-select-cell { background-color: var(--c-surface); }
.table-ceh tbody tr:hover > td.table-select-cell { background-color: var(--c-tint); }

/* Barra de listado */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.list-toolbar .badge-count { margin-left: 0; }
.list-toolbar .list-search { margin-left: auto; }

.list-search {
  position: relative;
  width: 100%;
  max-width: 19rem;
}

.list-search svg {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--c-muted);
  pointer-events: none;
}

.list-search input {
  padding-left: 2.2rem;
  border-radius: 999px;
  border-color: var(--c-line);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}

.section-title .section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.section-title .section-icon svg { width: 1.02rem; height: 1.02rem; }

.badge-count {
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-primary-600);
  background: var(--c-primary-soft);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-left: auto;
}

/* ---------------------------------------------------------------------
   8. Formularios
   --------------------------------------------------------------------- */
.form-label {
  margin-bottom: 0.3rem;
  font-family: var(--f-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.form-control,
.form-select {
  border-color: var(--c-line-strong);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: var(--c-ink);
  background-color: var(--c-surface);
}

/* El popup nativo de <option> no hereda el fondo de .form-select -lo pone
   el sistema operativo-, asi que sin esto un SO en modo oscuro deja el
   texto oscuro de arriba sobre un fondo tambien oscuro. */
.form-select option {
  color: var(--c-ink);
  background-color: var(--c-surface);
}

.form-control::placeholder { color: var(--c-muted); }

.form-control:focus,
.form-select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.15);
}

.form-control:disabled,
.form-control[readonly] { background-color: var(--c-surface-2); }

.form-text { color: var(--c-muted); font-size: 0.8rem; }

.form-check-input:checked {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}

.form-check-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.15);
}

.form-section {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.form-section + .form-section {
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}

.form-section-title {
  width: 100%;
  float: none;
  padding: 0;
  margin-bottom: 1rem;
  font-family: var(--f-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary-600);
}

.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--c-line);
}

/* Botones */
.btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--r-sm);
}

.btn svg {
  width: 1.02rem;
  height: 1.02rem;
  margin-right: 0.35rem;
  vertical-align: -0.18em;
}

.btn-primary {
  --bs-btn-bg: var(--c-primary);
  --bs-btn-border-color: var(--c-primary);
  --bs-btn-hover-bg: var(--c-primary-600);
  --bs-btn-hover-border-color: var(--c-primary-600);
  --bs-btn-active-bg: var(--c-primary-700);
  --bs-btn-active-border-color: var(--c-primary-700);
  --bs-btn-disabled-bg: var(--c-primary);
  --bs-btn-disabled-border-color: var(--c-primary);
  --bs-btn-focus-shadow-rgb: var(--c-primary-rgb);
}

.btn-success {
  --bs-btn-bg: var(--c-ok);
  --bs-btn-border-color: var(--c-ok);
  --bs-btn-hover-bg: #126647;
  --bs-btn-hover-border-color: #126647;
  --bs-btn-active-bg: #126647;
  --bs-btn-active-border-color: #126647;
}

.btn-danger {
  --bs-btn-bg: var(--c-bad);
  --bs-btn-border-color: var(--c-bad);
  --bs-btn-hover-bg: #9C2E22;
  --bs-btn-hover-border-color: #9C2E22;
  --bs-btn-active-bg: #9C2E22;
  --bs-btn-active-border-color: #9C2E22;
}

.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--c-warn);
  --bs-btn-border-color: var(--c-warn);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8B5604;
  --bs-btn-hover-border-color: #8B5604;
  --bs-btn-active-color: #fff;
}

.btn-secondary {
  --bs-btn-color: var(--c-ink);
  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-hover-color: var(--c-ink);
  --bs-btn-hover-bg: var(--c-surface-2);
  --bs-btn-hover-border-color: var(--c-line-strong);
  --bs-btn-active-color: var(--c-ink);
  --bs-btn-active-bg: var(--c-tint);
}

.btn-outline-primary {
  --bs-btn-color: var(--c-primary);
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-hover-bg: var(--c-primary);
  --bs-btn-hover-border-color: var(--c-primary);
  --bs-btn-active-bg: var(--c-primary-600);
  --bs-btn-active-border-color: var(--c-primary-600);
}

/* Boton solo-icono de las tablas editables */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.95rem;
  height: 1.95rem;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: var(--c-surface-2);
  color: var(--c-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-icon svg { width: 1rem; height: 1rem; margin: 0; }

/* Tono neutro (boton "Ver"): el resto de los tonos son mas especificos y
   siguen ganando el hover porque se definen despues en esta hoja. */
.btn-icon:hover, .btn-icon:focus-visible { background: var(--c-tint); color: var(--c-primary); }

.btn-icon-success { background: var(--c-ok-soft); color: var(--c-ok); }
.btn-icon-success:hover, .btn-icon-success:focus-visible { background: var(--c-ok); color: #fff; }

.btn-icon-warning { background: var(--c-warn-soft); color: var(--c-warn); }
.btn-icon-warning:hover, .btn-icon-warning:focus-visible { background: var(--c-warn); color: #fff; }

.btn-icon-danger { background: var(--c-bad-soft); color: var(--c-bad); }
.btn-icon-danger:hover, .btn-icon-danger:focus-visible { background: var(--c-bad); color: #fff; }

/* ---------------------------------------------------------------------
   9. Componentes
   --------------------------------------------------------------------- */

/* Pestanas tipo pastilla: filtros de listado (Todos / Consultores / TJ...) */
.pill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.25rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink-2);
  font-size: 0.83rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pill:hover,
.pill:focus-visible { background: var(--c-surface); color: var(--c-ink); }

.pill.is-active {
  background: var(--c-surface);
  color: var(--c-primary-600);
  font-weight: 600;
  box-shadow: var(--sh-xs);
}

.pill .pill-count {
  font-family: var(--f-display);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
}

.pill.is-active .pill-count { color: var(--c-primary); }

/* Badge de estado */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-soft::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-soft-plain::before { display: none; }

.badge-ok { background: var(--c-ok-soft); color: var(--c-ok); }
.badge-warn { background: var(--c-warn-soft); color: var(--c-warn); }
.badge-bad { background: var(--c-bad-soft); color: var(--c-bad); }
.badge-info { background: var(--c-info-soft); color: var(--c-info); }
.badge-accent { background: var(--c-accent-soft); color: var(--c-accent-600); }

/* --- Firma del sistema: la tira de capacidades -----------------------
   Cada institucion declara que tecnicas sin sangre tiene (cell saver,
   hemodilucion, rayo argon, ROTEM, electrocauterio, ECMO). Es el dato mas
   propio del CEH y hasta ahora vivia como seis columnas de "Si"/"No". Aca
   se lee de un vistazo: encendida = disponible, apagada = no.
   --------------------------------------------------------------------- */
.cap-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.cap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  background: var(--c-surface);
  color: var(--c-muted);
  font-family: var(--f-display);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cap::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--c-line-strong);
}

.cap.is-on {
  border-color: rgba(var(--c-primary-rgb), 0.28);
  background: var(--c-primary-soft);
  color: var(--c-primary-600);
}

.cap.is-on::before { background: var(--c-primary); }

.cap-strip-sm .cap { padding: 0.15rem 0.4rem; font-size: 0.62rem; }

/* --- Recencia de contacto -------------------------------------------
   El sistema ya calcula desde cuando no se contacta a un medico
   (warning_flag_days / expired_flag_days de la configuracion). Se muestra
   como un punto, no como una fecha suelta que hay que interpretar.
   --------------------------------------------------------------------- */
.recency {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.recency::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-ok);
  flex-shrink: 0;
}

.recency-warn::before { background: var(--c-warn); }
.recency-bad::before { background: var(--c-bad); }
.recency-none::before { background: var(--c-line-strong); }

/* Pares etiqueta/valor de las fichas */
.kv {
  display: grid;
  gap: 0.9rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.kv-item { min-width: 0; }

.kv-item dt {
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.15rem;
}

.kv-item dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

.kv-item dd:empty::after,
.kv-item dd.is-empty::after {
  content: "—";
  color: var(--c-line-strong);
}

.kv-item dd a { text-decoration: none; }
.kv-item dd a:hover { text-decoration: underline; }

/* Titulo de un grafico dentro de un panel (no es un section-title: vive
   adentro del panel-body, no en el panel-head). */
.chart-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-ink-2);
  margin: 0 0 0.85rem;
}

/* Grafico de barras verticales (chart_v): columnas de igual ancho, ancladas
   abajo, con el valor arriba de la barra y la etiqueta debajo del eje. */
.chart-v { overflow-x: auto; }

.chart-v-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  min-width: 21rem;
  border-bottom: 1px solid var(--c-line);
}

.chart-v-bar-wrap {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.chart-v-valor {
  font-size: 0.7rem;
  color: var(--c-muted);
  margin-bottom: 0.25rem;
}

.chart-v-bar {
  width: 100%;
  max-width: 26px;
  background: var(--c-primary);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}

.chart-v-labels {
  display: flex;
  gap: 0.5rem;
  min-width: 21rem;
  margin-top: 0.4rem;
}

.chart-v-label {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 0.7rem;
  color: var(--c-muted);
}

/* Grafico de barras horizontales (chart_h): ranking con la etiqueta a la
   izquierda, para nombres largos de especialidad. */
.chart-h { display: flex; flex-direction: column; gap: 0.5rem; }

.chart-h-row {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr 2.2rem;
  align-items: center;
  gap: 0.6rem;
}

.chart-h-label {
  font-size: 0.82rem;
  color: var(--c-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-h-track {
  display: block;
  background: var(--c-tint);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.chart-h-bar {
  display: block;
  height: 100%;
  background: var(--c-primary);
  border-radius: 4px;
  min-width: 2px;
}

.chart-h-bar.is-active { background: var(--c-accent); }

.chart-h-valor {
  font-size: 0.78rem;
  color: var(--c-muted);
  text-align: right;
}

/* Lista de registros (columna maestra) */
.rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rec-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  row-gap: 0.35rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--c-line);
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.13s ease;
}

.rec-item:hover,
.rec-item:focus-visible { background: var(--c-surface-2); color: inherit; }

.rec-item.is-active {
  background: var(--c-primary-soft);
  border-left-color: var(--c-primary);
}

.rec-body { min-width: 9rem; flex: 1 1 auto; }

.rec-name {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-side { margin-left: auto; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   10. Maestro-detalle
   --------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-list { max-height: 22rem; }
}

.split-list {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-h) - 3rem);
  position: sticky;
  top: calc(var(--topbar-h) + 1rem);
}

@media (max-width: 991.98px) {
  .split-list { position: static; }
}

.split-list .panel-head { flex-shrink: 0; }

.split-list-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.split-detail { min-width: 0; }

.detail-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, var(--c-surface-2) 0%, var(--c-surface) 100%);
}

.detail-title {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

.detail-sub {
  margin: 0.2rem 0 0;
  color: var(--c-muted);
  font-size: 0.88rem;
}

.detail-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.detail-section {
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid var(--c-line);
}

.detail-section:last-child { border-bottom: 0; }

.detail-section > .u-label { margin-bottom: 0.85rem; }

/* Grilla de paneles relacionados de una ficha (la vista de detalle que abre
   el "Ver" de un listado): tantas columnas como entren, cada panel con su
   propia altura. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 575.98px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   11. Estados vacios, avisos, login
   --------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 3rem 1.25rem;
  text-align: center;
  color: var(--c-muted);
  background: var(--c-surface-2);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
}

.empty-state svg { width: 1.9rem; height: 1.9rem; opacity: 0.5; }

.empty-state strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-ink);
}

/* Previsualizar el panel de otro usuario (solo administrador, solo en '/').
   Dos variantes: el selector para elegir a quien ver, y la barra que avisa
   que se esta viendo el panel de alguien mas. Van arriba del banner del
   panel, antes que nada, para que no se confunda con el contenido de abajo. */
.panel-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  padding: 0.55rem 0.9rem;
  margin-bottom: 1.1rem;
  font-size: 0.85rem;
  color: var(--c-muted);
}

.panel-preview-bar svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--c-primary);
}

.panel-preview-bar strong {
  color: var(--c-ink);
}

.panel-preview-bar .form-select {
  max-width: 20rem;
}

.panel-preview-bar-activa {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

.panel-preview-bar-activa svg {
  color: var(--c-accent-600);
}

.panel-preview-bar-fin {
  margin-left: auto;
}

/* Avisos: pila flotante arriba a la derecha. Antes empujaban el contenido
   hacia abajo cada vez que se guardaba un registro. */
.flash-stack {
  position: fixed;
  top: calc(var(--topbar-h) + 0.6rem);
  right: 1.25rem;
  z-index: 50;
  width: min(26rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.flash-stack .alert {
  pointer-events: auto;
  margin: 0;
  padding: 0.75rem 2.5rem 0.75rem 0.95rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  font-size: 0.875rem;
  animation: flash-in 0.25s ease both;
}

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: none; }
}

.flash-stack .btn-close { padding: 0.9rem; }

.alert-success { --bs-alert-bg: var(--c-ok-soft); --bs-alert-border-color: #BEE3D1; --bs-alert-color: #10603F; }
.alert-danger  { --bs-alert-bg: var(--c-bad-soft); --bs-alert-border-color: #F0C5BF; --bs-alert-color: #8B261B; }
.alert-warning { --bs-alert-bg: var(--c-warn-soft); --bs-alert-border-color: #EFD9A8; --bs-alert-color: #7A4B02; }
.alert-info    { --bs-alert-bg: var(--c-info-soft); --bs-alert-border-color: #BCDCD7; --bs-alert-color: var(--c-primary-700); }

@media (max-width: 575.98px) {
  .flash-stack { right: 0.75rem; left: 0.75rem; width: auto; }
}

/* --- Login ------------------------------------------------------------
   Unica pantalla sin shell: dos columnas, la izquierda con el degradado
   de marca y la derecha con el formulario.
   --------------------------------------------------------------------- */
.auth {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  background: var(--c-canvas);
}

@media (min-width: 992px) {
  .auth { grid-template-columns: 1.05fr 1fr; }
}

.auth-aside {
  display: none;
  position: relative;
  overflow: hidden;
  padding: 3rem;
  background: var(--g-panel);
  color: #fff;
  isolation: isolate;
}

@media (min-width: 992px) {
  .auth-aside { display: flex; flex-direction: column; }
}

.auth-aside::before,
.auth-aside::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

.auth-aside::before {
  width: 42rem;
  height: 42rem;
  left: -14rem;
  bottom: -20rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 62%);
}

.auth-aside::after {
  width: 30rem;
  height: 30rem;
  right: -10rem;
  top: -12rem;
  background: radial-gradient(circle, rgba(226, 96, 58, 0.35) 0%, rgba(226, 96, 58, 0) 65%);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-brand .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-accent);
}

.auth-brand .mark svg { width: 1.4rem; height: 1.4rem; }

.auth-pitch {
  margin-top: auto;
  max-width: 30rem;
}

.auth-pitch h2 {
  color: #fff;
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.auth-pitch p {
  margin-top: 0.85rem;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
}

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.auth-card {
  width: 100%;
  max-width: 24rem;
}

.auth-card .mark-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.1rem;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

@media (min-width: 992px) {
  .auth-card .mark-sm { display: none; }
}

.auth-card h1 {
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
}

.auth-card .auth-lead {
  color: var(--c-muted);
  margin-bottom: 1.6rem;
}

/* Clases historicas del login anterior, por si alguna plantilla las usa */
.login-row { min-height: 60vh; align-items: center; }
.login-card { border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.login-mark {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------
   12. Utilidades y accesibilidad
   --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
}

.skip-link:focus { left: 0.75rem; top: 0.75rem; }

.u-stack-sm > * + * { margin-top: 0.5rem; }
.u-stack > * + * { margin-top: 1rem; }
.u-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.u-right { margin-left: auto; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dropdown-menu {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: 0.35rem;
  font-size: 0.875rem;
}

.dropdown-item {
  border-radius: var(--r-xs);
  padding: 0.45rem 0.7rem;
  color: var(--c-ink-2);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--c-primary-soft);
  color: var(--c-primary-600);
}

.dropdown-header {
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

::selection { background: rgba(var(--c-primary-rgb), 0.22); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Barras de scroll discretas dentro de listas y planillas */
.split-list-scroll,
.nav-scroll,
.table-responsive { scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent; }

.split-list-scroll::-webkit-scrollbar,
.nav-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar { width: 9px; height: 9px; }

.split-list-scroll::-webkit-scrollbar-thumb,
.nav-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--c-line-strong);
  border-radius: 999px;
}

/* ---------------------------------------------------------------------
   Navegacion parcial (htmx)

   Sin recarga de pagina, el navegador deja de dar la unica senal de "estoy
   trayendo algo" que el usuario conocia: la barra de progreso propia y el
   spinner de la pestana. Estas dos reglas la reponen.
   --------------------------------------------------------------------- */

/* Barra fina arriba de todo. Aparece sola: htmx le pone .htmx-request al
   elemento apuntado por hx-indicator mientras el pedido esta en vuelo. */
.carga {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 90;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--c-primary-600), var(--c-accent));
  transition: opacity 0.15s ease;
  pointer-events: none;
}

/* La barra no puede saber cuanto falta (no hay progreso real que medir):
   avanza rapido hasta el 90% y se queda ahi hasta que llega la respuesta. */
.carga.htmx-request {
  opacity: 1;
  animation: carga-avance 1.6s ease-out forwards;
}

@keyframes carga-avance {
  from { transform: scaleX(0); }
  to { transform: scaleX(0.9); }
}

/* Al cambiar de pantalla el foco se lleva al contenido (ver app.js) para que
   quien navega con teclado o lector no quede parado en el menu. Es un destino
   de foco, no un control: no lleva recuadro. */
#main-content:focus { outline: none; }

/* Region que se esta refrescando (los resultados de un filtro en vivo): se
   apaga apenas lo suficiente para que se note que lo que se ve es lo viejo,
   sin que el texto salte ni cambie de tamano. */
.se-atenua { transition: opacity 0.15s ease; }
.se-atenua.htmx-request { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .carga.htmx-request { animation: none; transform: scaleX(1); }
}

/* ---------------------------------------------------------------------
   Modales (Ver / Editar / Eliminar de fila, confirmacion de acciones en
   lote). Bootstrap trae el comportamiento (foco, backdrop, ESC); esto solo
   lo viste con el sistema visual "Enlace".
   --------------------------------------------------------------------- */
.modal-content {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.modal-header {
  border-bottom: 1px solid var(--c-line);
  padding: 1rem 1.25rem;
}

.modal-title { font-size: 1.05rem; }

.modal-body { padding: 1.25rem; }

.modal-footer {
  border-top: 1px solid var(--c-line);
  padding: 0.85rem 1.25rem;
}

/* Barra de acciones en lote: aparece pegada abajo de la tabla apenas hay
   filas seleccionadas (data-bulk-toolbar / .is-visible, ver app.js). */
.bulk-toolbar {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  position: sticky;
  bottom: 0.75rem;
  z-index: 3;
  margin-top: 0.85rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
}

.bulk-toolbar.is-visible { display: flex; }

.bulk-toolbar-count {
  font-weight: 600;
  color: var(--c-muted);
  white-space: nowrap;
}

.bulk-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

.bulk-toolbar-actions select,
.bulk-toolbar-actions input {
  width: auto;
}

@media print {
  .carga { display: none !important; }
  .app-rail, .app-nav, .topbar, .flash-stack, .banner-actions, .nav-scrim { display: none !important; }
  .app-main { margin-left: 0; }
  .page-surface, .panel { border: 0; box-shadow: none; }
}

/* Calendario de presentaciones (/calendarpresentaciones): grilla de mes armada
   del lado del servidor, sin ninguna libreria de calendario en JS. */
.calendario-mes td {
  height: 7rem;
  width: 14.28%;
  vertical-align: top;
  white-space: normal;
  padding: 0.4rem;
}

.calendario-dia-vacio { background: var(--c-canvas); }

.calendario-dia-hoy { background: var(--c-primary-soft); }

.calendario-dia-numero {
  font-weight: 600;
  color: var(--c-muted);
  margin-bottom: 0.25rem;
}

.calendario-evento {
  display: block;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.2rem 0.35rem;
  margin-bottom: 0.2rem;
  border-radius: 0.35rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: inherit;
  text-decoration: none;
}

.calendario-evento:hover { border-color: var(--c-primary); }

/* De que comite es la guardia, con los mismos tonos que los badges CEH/GVP
   del listado (badge-info / badge-accent). */
.calendario-evento-ceh { border-left: 3px solid var(--c-info); }
.calendario-evento-gvp { border-left: 3px solid var(--c-accent); }

/* Calendario seleccionable (guardias/listado.html, guardia "diario"): cada
   celda es un checkbox disfrazado de casillero grande, para tildar varios
   dias sin salir de la ficha. */
.calendario-dia-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  border-radius: 0.35rem;
}

.calendario-dia-check:has(input:checked) {
  background: var(--c-primary-soft);
}

.calendario-dia-check input[disabled] { cursor: default; }
.calendario-dia-check input[disabled] ~ .calendario-dia-numero { color: var(--c-muted); }

/* ---------------------------------------------------------------------
   13. Chat
   --------------------------------------------------------------------- */
.chat-canal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  max-height: calc(100vh - var(--topbar-h) - 16rem);
  min-height: 16rem;
  overflow-y: auto;
}

.chat-bubble-row { display: flex; }
.chat-bubble-row.is-mio { justify-content: flex-end; }

.chat-bubble {
  max-width: min(32rem, 80%);
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
}

.chat-bubble-row.is-mio .chat-bubble {
  background: var(--c-primary-soft);
  border-color: var(--c-primary-soft);
}

.chat-bubble-autor {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--c-primary-600);
  margin-bottom: 0.15rem;
}

.chat-bubble-texto {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-bubble-hora {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--c-muted);
}

.chat-adjunto-imagen {
  display: block;
  max-width: 100%;
  max-height: 18rem;
  border-radius: 0.5rem;
}

.chat-adjunto-audio { width: 16rem; max-width: 100%; }

.chat-adjunto-archivo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--c-primary-600);
  text-decoration: none;
  font-size: 0.85rem;
}

.chat-adjunto-archivo:hover { text-decoration: underline; }

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
}

.chat-composer textarea {
  flex: 1;
  resize: none;
}

.chat-record-btn.is-grabando {
  background: var(--c-bad);
  border-color: var(--c-bad);
  color: #fff;
}