@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600&display=swap');

:root {
  --ink: #16262e;
  --ink-soft: #52646c;
  --ink-faint: #85949a;
  --paper: #f2f4f1;
  --surface: #ffffff;
  --surface-sunken: #eef1ee;
  --line: #d7ded9;
  --line-soft: #e6ebe6;
  --accent: #1f6f6b;
  --accent-dark: #14514e;
  --accent-soft: #dcece9;
  --amber: #a4661f;
  --amber-soft: #f3e3ce;
  --danger: #b3432f;
  --danger-soft: #f7e2dc;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(22, 38, 46, .06);
  --shadow-md: 0 6px 20px -8px rgba(22, 38, 46, .18);
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  /* Fondo de la barra lateral -- separado de --ink (que además es el color de texto general)
     para que cada paleta de color pueda darle a la barra lateral un tono propio sin afectar el
     contraste del texto en el resto del sistema. Ver ".sidebar" y los bloques
     ":root[data-theme=...]" más abajo. */
  --sidebar-bg: var(--ink);
}

/* ---------- Paletas de color ----------
   Elegidas por el usuario desde el menú de su cuenta (ver UserMenu.razor, sección "Tema de
   colores"). Se aplican como el atributo data-theme en <html> (ver el script inline en
   App.razor, que lo aplica desde localStorage antes de pintar la página, y wwwroot/js/gms-ui.js,
   que lo guarda/cambia). Solo se redefinen el acento y el fondo de la barra lateral -- el resto
   de la paleta (texto, superficies, colores semánticos como éxito/alerta/peligro) se mantiene
   igual en las 5 opciones para no arriesgar el contraste en el resto del sistema. "teal" es la
   paleta original/por defecto -- se deja explícita aquí para que las 5 opciones sean
   seleccionables de la misma forma. */
:root[data-theme="teal"] {
  --accent: #1f6f6b;
  --accent-dark: #14514e;
  --accent-soft: #dcece9;
  --sidebar-bg: #16262e;
}

:root[data-theme="azul"] {
  --accent: #1f5f8b;
  --accent-dark: #123a56;
  --accent-soft: #dce9f2;
  --sidebar-bg: #0f2038;
}

:root[data-theme="morado"] {
  --accent: #6b3fa0;
  --accent-dark: #4a2a73;
  --accent-soft: #ece1f5;
  --sidebar-bg: #241a35;
}

:root[data-theme="verde"] {
  --accent: #2f7a3d;
  --accent-dark: #1e5228;
  --accent-soft: #dcefdf;
  --sidebar-bg: #16261a;
}

:root[data-theme="grafito"] {
  --accent: #3b4a5a;
  --accent-dark: #262f3a;
  --accent-soft: #dfe3e8;
  --sidebar-bg: #1c232b;
}

/* Las 5 de arriba son tonos suaves/apagados -- el cliente pidió sumar opciones más vivas
   ("los colores... son muy soft, agregar algunos más vivos"). Estas 4 usan tonos más saturados
   (parecidos a los "600" de paletas tipo Tailwind, pensados para que el texto blanco de los
   botones siga siendo legible sobre el acento) en vez de reemplazar las suaves -- así el usuario
   elige el estilo que prefiera. */
:root[data-theme="coral"] {
  --accent: #dc2626;
  --accent-dark: #b91c1c;
  --accent-soft: #fee2e2;
  --sidebar-bg: #2e1512;
}

:root[data-theme="naranja"] {
  --accent: #ea580c;
  --accent-dark: #c2410c;
  --accent-soft: #ffedd5;
  --sidebar-bg: #2e1d0d;
}

:root[data-theme="fucsia"] {
  --accent: #db2777;
  --accent-dark: #be185d;
  --accent-soft: #fce7f3;
  --sidebar-bg: #2e1224;
}

:root[data-theme="azul-vivo"] {
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: #dbeafe;
  --sidebar-bg: #0d2350;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Red de seguridad: en monitores angostos (15.5" y similares) algún contenido ancho (una
     tabla, el indicador de pasos del wizard, etc.) podía forzar scroll horizontal de TODA la
     página y cortar tarjetas del lado derecho -- ver el arreglo de ".pacientes-layout > *" y
     similares más abajo, que ataca la causa (grids sin min-width:0). Esto es el respaldo: si
     algo se desborda igual, que se recorte en vez de mover la página entera. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
}

a { color: var(--accent-dark); }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------- App shell ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: relative;
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: #e8efed;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  transition: width .18s ease;
}

/* ---------- Barra lateral colapsada (escritorio) ----------
   Botón en SidebarColapsar.razor. Se controla con un atributo en <html> (no una clase en este
   componente) para que MainLayout no necesite ser interactivo -- ver el comentario grande en
   MainLayout.razor. Por debajo de 860px el menú ya cambia a un panel de móvil (ver el media
   query correspondiente), así que el botón de colapsar se oculta ahí. */
.sidebar-collapse-btn {
  position: absolute;
  top: 1.85rem;
  right: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 5;
  padding: 0;
}
.sidebar-collapse-btn:hover { background: var(--surface-sunken); color: var(--ink); }

html[data-sidebar="colapsado"] .sidebar { width: 76px; }

html[data-sidebar="colapsado"] .sidebar-brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

html[data-sidebar="colapsado"] .brand-name,
html[data-sidebar="colapsado"] .nav-link span,
html[data-sidebar="colapsado"] .nav-section,
html[data-sidebar="colapsado"] .nav-link-disabled {
  display: none;
}

html[data-sidebar="colapsado"] .nav-link { justify-content: center; }

html[data-sidebar="colapsado"] .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 .5rem 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: none;
  border: none;
  color: #e8efed;
  cursor: pointer;
  padding: .3rem;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent);
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
  flex-shrink: 0;
}

/* El logo (SVG) que reemplazó las letras "IM" necesita esta regla para verse
   bien dentro del círculo de marca -- sin ella el SVG se ve minúsculo. */
.brand-mark svg { width: 60%; height: 60%; }

.brand-mark-lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 1.3rem;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  color: #e8efed;
}
.brand-name strong { font-weight: 800; }

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-sm);
  color: #c3d2ce;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
}

.nav-link:hover { background: rgba(255, 255, 255, .06); color: white; }

.nav-link.active { background: var(--accent); color: white; }

.nav-icon { flex-shrink: 0; opacity: .9; }

.nav-link-disabled { color: #5f6f6c; cursor: default; }
.nav-link-disabled:hover { background: none; color: #5f6f6c; }

.nav-section {
  margin: 1.1rem 0 .3rem .75rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #66756f;
  font-weight: 600;
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .85rem 1.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar-centro { display: flex; flex-direction: column; font-size: .78rem; color: var(--ink-soft); }
.topbar-centro strong { font-size: .92rem; color: var(--ink); font-family: var(--font-display); }

.topbar-switch select {
  padding: .35rem .6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-sunken);
}

.topbar-spacer { flex: 1; }

.topbar-user { position: relative; display: flex; align-items: center; gap: .6rem; }

/* ---------- Menú desplegable del usuario (foto / centro / clave / salir) ---------- */

.user-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  appearance: none;
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
  color: var(--ink);
  line-height: 0;
}

.user-trigger:hover, .user-trigger[aria-expanded="true"] { background: var(--surface-sunken); }

.user-avatar-foto {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.user-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: transparent;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 41;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.user-dropdown-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1rem .75rem .9rem;
  text-align: center;
}

.user-dropdown-foto,
.user-dropdown-header .user-avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.user-dropdown-foto { object-fit: cover; }

.user-dropdown-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
}

.user-dropdown-tipo {
  font-size: .8rem;
  color: var(--ink-soft);
}

.user-dropdown-section {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .4rem .6rem .6rem;
}

.user-dropdown-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  font-weight: 600;
}

.user-dropdown-section .topbar-switch select { width: 100%; }

.tema-swatches { display: flex; flex-wrap: wrap; gap: .55rem; }

.tema-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  outline: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
}
.tema-swatch:hover { outline-color: var(--ink-faint); }

.tema-swatch-activo {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--line-soft);
  margin: .3rem 0;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .55rem .6rem;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: .88rem;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.user-dropdown-item:hover { background: var(--surface-sunken); }

.user-dropdown-item-btn { font: inherit; }

.user-dropdown form { margin: 0; }

.app-content {
  flex: 1;
  padding: 2rem 2.5rem 3rem;
  /* Antes tenía max-width: 1100px -- se veía bien en monitores medianos, pero en uno grande
     dejaba un espacio muerto a la derecha (el cliente lo señaló: "sobra mucho espacio... al
     mover a un monitor más grande se queda igual"), y en uno de 15.5" competía con el ancho de
     la barra lateral fija. Ahora ocupa TODO el ancho disponible junto a la barra lateral (que ya
     de por sí se puede colapsar para ganar más espacio, ver .sidebar-collapse-btn) y solo se le
     pone un tope generoso para que las líneas de texto no queden absurdamente largas en un
     monitor ultra-ancho. */
  max-width: 1800px;
  width: 100%;
}

/* ---------- Page header / typography helpers ---------- */

.eyebrow {
  font-family: var(--font-display);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent-dark);
  margin: 0 0 .35rem;
  font-weight: 700;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.page-header h1 { font-size: 1.65rem; font-weight: 800; }

.page-subtitle { color: var(--ink-soft); margin: .35rem 0 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-dark); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-sunken); }

.btn-block { width: 100%; justify-content: center; margin-top: 1.5rem; }
.btn-sm { padding: .35rem .7rem; font-size: .82rem; }
.btn-icon { padding: .5rem; }
.btn-icon-svg { width: 15px; height: 15px; }

/* ---------- Secciones del panel principal ---------- */

.section-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 2rem 0 1rem;
}

.section-title:first-of-type { margin-top: 0; }

/* ---------- Dashboard (KPIs) ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.stat-tile-disabled { opacity: .6; }

.stat-icon { color: var(--accent); }

.stat-value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ink);
}

.stat-label { font-size: .85rem; color: var(--ink-soft); }

.stat-hint { font-size: .74rem; color: var(--ink-faint); }

/* ---------- Cards / grid ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.quick-card {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.quick-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.quick-card svg { color: var(--accent); flex-shrink: 0; margin-top: .1rem; }
.quick-card h3 { font-size: 1rem; margin-bottom: .25rem; }
.quick-card p { margin: 0; color: var(--ink-soft); font-size: .87rem; }

.quick-card-disabled { opacity: .55; cursor: default; }
.quick-card-disabled:hover { box-shadow: var(--shadow-sm); transform: none; }

/* ---------- Toolbar / search ---------- */

.toolbar { margin-bottom: 1rem; }

.search-box {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .85rem;
  max-width: 380px;
  color: var(--ink-soft);
}

.search-box input { border: none; outline: none; background: none; flex: 1; color: var(--ink); }

/* ---------- Turnos: resultados al buscar un paciente para agregar a la lista ---------- */

/* Antes empujaba el contenido de abajo hacia abajo (position estática) -- eso chocaba con la
   fila de una sola línea de "Agregar paciente a la lista" (Turnos/Index.razor): al escribir en
   el buscador, la fila de "Médico asignado" + botón saltaba hacia abajo cada vez que aparecían
   resultados. Ahora flota SOBRE el contenido de abajo en vez de moverlo. */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 15;
  margin-top: .35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.search-result-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .5rem .75rem;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  cursor: pointer;
  font-size: .88rem;
  color: var(--ink);
}

.search-result-item:last-child { border-bottom: none; }

.search-result-item:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* ---------- Tables ---------- */

.table-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

.data-table { width: 100%; border-collapse: collapse; }

.data-table th {
  text-align: left;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  font-weight: 600;
  padding: .8rem 1.1rem;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table td {
  padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: .9rem;
  white-space: nowrap;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-sunken); }

.mono {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .85em;
  color: var(--ink-soft);
}

/* IMPORTANTE: no poner display:flex aquí. Un <td> con display:flex deja de comportarse como
   celda de tabla en varios navegadores -- ya no se estira para llenar el ancho real de su
   columna, y en filas seleccionadas/resaltadas queda un espacio en blanco entre los botones y
   el borde derecho de la tabla que no toma el color de fondo de la fila (bug real reportado
   por el cliente en Pacientes, pero afecta cualquier pantalla que use esta clase). El mismo
   alineado a la derecha se logra con text-align, sin sacar la celda del layout de tabla. */
.table-actions { text-align: right; white-space: nowrap; }
.table-actions > * + * { margin-left: .4rem; }

.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}

/* ---------- Badges ---------- */

.badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.badge-accent { background: var(--accent-soft); color: var(--accent-dark); }
.badge-muted { background: var(--surface-sunken); color: var(--ink-soft); }

/* ---------- Forms ---------- */

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.form-section-title {
  font-size: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line-soft);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.25rem;
}

.field { display: flex; flex-direction: column; gap: .35rem; }
.field-wide { grid-column: 1 / -1; }

.field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }

/* ---------- Ficha de paciente (vista de solo lectura) ---------- */
.info-value {
  display: block;
  padding-top: .15rem;
  color: var(--ink);
  font-size: .92rem;
  min-height: 1.3em;
}

.field input[type="text"],
.field input[type="search"],
.field input[type="password"],
.field input[type="date"],
.field input[type="number"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="time"],
.field input[type="url"],
.field input:not([type]),
.field select,
.field textarea {
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}

/* Los campos numéricos se veían distintos al resto (borde negro del navegador, sin padding y con
   flechitas): ahora comparten el estilo de los demás controles. Se quitan las flechas giratorias
   del navegador, que desentonaban; el teclado (flechas arriba/abajo) y la rueda siguen funcionando. */
.field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.field input[type="number"]::-webkit-inner-spin-button,
.field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field input:disabled { background: var(--surface-sunken); color: var(--ink-faint); }

.form-hint {
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--ink-faint);
  padding-top: .9rem;
  border-top: 1px dashed var(--line-soft);
}

.form-error {
  color: var(--danger);
  background: var(--danger-soft);
  padding: .6rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .87rem;
  margin-bottom: 1rem;
}

.form-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }

/* ---------- Listas de casillas (p. ej. centros médicos asignados a un usuario) ---------- */

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .6rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .88rem;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* ---------- Matriz de permisos finos (pantalla x acción) ---------- */

.permisos-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}

.permisos-card { padding: 0; }

.permisos-scroll {
  max-height: 65vh;
  overflow: auto;
}

.permisos-table th,
.permisos-table td {
  text-align: center;
  white-space: nowrap;
}

.permisos-table .permisos-col-pantalla {
  text-align: left;
  white-space: normal;
  min-width: 220px;
}

.permisos-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.permisos-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.permisos-col-header {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-size: .82rem;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ---------- Foto de paciente ---------- */

.foto-preview {
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ink-faint);
  font-size: .78rem;
  flex-shrink: 0;
}

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

/* Foto pequeña junto al título en el encabezado de Consultas/Form.razor. */
.foto-preview-sm { width: 84px; height: 84px; flex-shrink: 0; font-size: .75rem; }

.consulta-encabezado { display: flex; align-items: center; gap: 1rem; min-width: 0; }

.foto-preview-lg { width: 160px; height: 160px; border-radius: var(--radius-lg); font-size: .85rem; }

/* ---------- Modal de foto ampliada (Pacientes/Ficha.razor) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 38, 46, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 100;
}

.modal-foto {
  position: relative;
  max-width: min(90vw, 640px);
  max-height: 90vh;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: .5rem;
  display: flex;
}

.modal-foto img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 1rem);
  border-radius: calc(var(--radius-lg) - .25rem);
  object-fit: contain;
}

.modal-foto-cerrar {
  position: absolute;
  top: -.75rem;
  right: -.75rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-foto-cerrar:hover { background: var(--surface-sunken); }

/* ---------- Foto integrada en Identificación (Pacientes/Form.razor) ---------- */

.identificacion-layout {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.foto-captura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 160px;
  flex-shrink: 0;
}

.foto-captura input[type="file"] { max-width: 160px; font-size: .78rem; }

.foto-hint { margin: 0; border-top: none; padding-top: 0; text-align: center; }

.identificacion-campos { flex: 1; min-width: 280px; }

@media (max-width: 640px) {
  .foto-captura { width: 100%; }
}

/* ---------- Catálogos (tbl_Maestros_General) ---------- */

.maestros-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* En una grid de CSS, una columna sin min-width:0 explícito puede terminar más ancha que su
   propio track (su "min-width: auto" respeta el contenido interno, ej. una tabla ancha), lo que
   desborda TODA la grid hacia la derecha -- en monitores angostos (15.5") eso cortaba la
   columna/tarjeta del lado derecho. Mismo arreglo en .auth-card y .pacientes-layout. */
.maestros-layout > * { min-width: 0; }

@media (max-width: 860px) {
  .maestros-layout { grid-template-columns: 1fr; }
}

.maestros-categorias {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.maestros-categoria-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-size: .9rem;
}

.maestros-categoria-btn:hover { background: var(--surface-sunken); }

.maestros-categoria-btn.activa {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.validation-errors {
  list-style: none;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: .87rem;
}
.validation-message { color: var(--danger); font-size: .78rem; }

/* ---------- Login ---------- */
/* Pantalla de acceso (Components/Pages/Login.razor). Usa las MISMAS variables de color que el resto del
   sistema (--accent, --accent-dark, --accent-soft, --sidebar-bg), así que sigue la paleta que el usuario
   eligió en "Tema de colores" (App.razor aplica data-theme desde localStorage antes de pintar, también
   en el login) y el mismo logo de la barra lateral. Si existe
   wwwroot/img/login-fondo.jpg se muestra como imagen de fondo (la capa ::before la aclara a la izquierda
   para que el nombre se lea sobre cualquier foto); si no existe, queda el degradado claro. */

.lg-screen {
  --lg-navy: var(--sidebar-bg);   /* tono oscuro de la paleta: nombre, iconos, títulos */
  --lg-blue: var(--accent);       /* acento de la paleta elegida */
  --lg-soft: var(--ink-soft);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem clamp(1rem, 4vw, 4rem);
  overflow: hidden;
  font-family: var(--font-body);
  background-color: var(--accent-soft);
  background-image:
    url("../img/login-fondo.jpg"),
    radial-gradient(52rem 34rem at 6% 8%, rgba(255, 255, 255, .95), transparent 62%),
    radial-gradient(36rem 28rem at 92% 92%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 66%),
    linear-gradient(135deg, #ffffff 0%, var(--accent-soft) 55%, color-mix(in srgb, var(--accent) 24%, white) 100%);
  background-size: cover;
  background-position: center;
}

/* Capa que aclara la zona de la marca (sobre la foto, si hay). */
.lg-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, .1) 100%);
}

/* Luces suaves de fondo (efecto "desenfoque" de consultorio). */
.lg-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 78%, rgba(255, 255, 255, .7) 0 7rem, transparent 7.1rem),
    radial-gradient(circle at 46% 12%, rgba(255, 255, 255, .55) 0 5rem, transparent 5.1rem),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .45) 0 9rem, transparent 9.1rem),
    radial-gradient(circle at 94% 18%, rgba(255, 255, 255, .6) 0 6rem, transparent 6.1rem);
  filter: blur(14px);
}

.lg-wrap {
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 420px);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* ---- Marca ---- */

.lg-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; }

.lg-hero { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.8rem); }

.lg-logo {
  flex: none;
  width: clamp(5rem, 9vw, 7.8rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 26%;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  filter: drop-shadow(0 12px 16px color-mix(in srgb, var(--accent) 38%, transparent));
}

.lg-nombre {
  padding-left: clamp(1rem, 2.4vw, 1.8rem);
  border-left: 1px solid color-mix(in srgb, var(--lg-navy) 24%, transparent);
  text-align: left;
}

.lg-nombre h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.9rem, 6.2vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.025em;
}

.lg-nombre h1 span { display: block; }
.lg-nombre-1 { color: var(--lg-navy); }
.lg-nombre-2 {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--lg-blue);
}

.lg-lema {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 500;
  color: var(--lg-navy);
}

.lg-funciones {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: 640px;
}

.lg-funciones li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: .2rem .6rem;
  font-size: .86rem;
  line-height: 1.25;
  color: var(--lg-navy);
}

.lg-funciones li + li { border-left: 1px solid color-mix(in srgb, var(--lg-navy) 18%, transparent); }
.lg-funciones svg { width: 2.5rem; height: 2.5rem; color: var(--lg-navy); }

/* ---- Tarjeta de acceso ---- */

.lg-card {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 22px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 34px 60px -28px color-mix(in srgb, var(--lg-navy) 55%, transparent), 0 2px 8px color-mix(in srgb, var(--lg-navy) 10%, transparent);
}

.lg-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.65rem;
  letter-spacing: -.01em;
  color: var(--lg-navy);
}

.lg-sub { margin: .35rem 0 1.6rem; font-size: .9rem; color: var(--lg-soft); }

.lg-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lg-campo { position: relative; margin-bottom: 1rem; }

.lg-campo input {
  width: 100%;
  height: 3.1rem;
  padding: 0 3rem 0 2.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--lg-navy);
  font-size: .98rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lg-campo input::placeholder { color: var(--ink-faint); }

.lg-campo input:focus {
  outline: none;
  border-color: var(--lg-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

.lg-campo-icono {
  position: absolute;
  left: .95rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
}

.lg-ojo {
  position: absolute;
  right: .45rem;
  top: 50%;
  width: 2.2rem;
  height: 2.2rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.lg-ojo:hover { background: var(--surface-sunken); }
.lg-ojo svg { width: 1.2rem; height: 1.2rem; }
.lg-ojo.lg-ojo-on { color: var(--lg-blue); }

.lg-error {
  margin: 0 0 1rem;
  padding: .65rem .85rem;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: .87rem;
  line-height: 1.4;
}

.lg-entrar {
  width: 100%;
  height: 3.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 12px 22px -10px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: filter .15s ease, transform .15s ease;
}

.lg-entrar:hover { filter: brightness(1.07); }
.lg-entrar:active { transform: translateY(1px); }
.lg-entrar:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }
.lg-entrar svg { width: 1.2rem; height: 1.2rem; }

/* ---- Pantallas pequeñas ---- */

@media (max-width: 980px) {
  .lg-screen { align-items: flex-start; }
  .lg-wrap { grid-template-columns: 1fr; gap: 2rem; max-width: 460px; }
  .lg-funciones { max-width: 460px; }
}

@media (max-width: 520px) {
  .lg-hero { flex-direction: column; gap: .8rem; }
  .lg-nombre { padding-left: 0; border-left: none; text-align: center; }
  .lg-funciones { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; }
  .lg-funciones li:nth-child(3) { border-left: none; }
}

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }

  .sidebar {
    position: relative;
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: .75rem 1rem;
  }

  .sidebar-brand { border: none; margin: 0; padding: 0; flex: 1; }

  .nav-toggle { display: flex; }

  .nav-menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 30;
    width: 240px;
    max-width: calc(100vw - 2rem);
    margin-top: .5rem;
    background: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .75rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }

  .nav-menu-panel.abierto { display: block; }

  .nav-menu { flex-direction: column; overflow-x: visible; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(22, 38, 46, .25);
  }

  .app-content { padding: 1.25rem; }

  /* Por debajo de 860px la barra lateral ya se convierte en una barra superior con menú
     hamburguesa (arriba en este mismo media query) -- el botón de colapsar es para escritorio,
     así que se oculta aquí, y se anula el ancho colapsado por si el usuario lo dejó activado
     desde una pantalla grande (si no, "html[data-sidebar=colapsado] .sidebar" -- más específico
     que ".sidebar" a secas -- ganaría igual en móvil). */
  .sidebar-collapse-btn { display: none; }
  html[data-sidebar="colapsado"] .sidebar { width: 100%; }
}

/* ---------- Turnos: la tarjeta de "agregar paciente" y el filtro deben ocupar poco espacio,
   para que la lista de espera (lo que de verdad se consulta a cada rato) quede más arriba. ---------- */

.turnos-page .form-card {
  padding: .85rem 1.1rem;
  margin-bottom: .75rem;
}

.turnos-page .form-section-title {
  font-size: .92rem;
  margin-bottom: .5rem;
  padding-bottom: .35rem;
}

/* Médico asignado + botón "Agregar a la lista" en una sola fila, en vez de un form-actions
   aparte debajo -- es lo que más achica la tarjeta verticalmente. */
.agregar-turno-row {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}

.form-hint-tight {
  margin-top: .4rem;
  padding-top: 0;
  border-top: none;
}

.turnos-page .toolbar {
  margin-bottom: .6rem;
}

/* ---------- Pacientes: lista + panel lateral de ficha rápida y actividad reciente ----------
   Inspirado en un mockup que trajo el cliente, pero reconstruido con los tokens de color ya
   establecidos (--accent/--amber/--danger, etc.) en vez de los colores del mockup -- para no
   repetir el rebranding que se revirtió antes. Todos los datos que muestra son reales (nada
   de "próxima cita" ni categorías inventadas, que quedaron fuera de esta iteración). */

.pacientes-layout {
  display: grid;
  /* Columna lateral flexible (240-320px según el ancho de pantalla) en vez de fija en 320px:
     en laptops de 15.5" la tabla del directorio quedaba cortada a la derecha (botón "Editar"). */
  grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 320px);
  gap: 1.25rem;
  align-items: start;
}

.pacientes-layout > * { min-width: 0; }

/* Tabla del directorio de pacientes más compacta: menos padding horizontal por celda y el
   nombre del paciente puede partirse en dos líneas, para que quepan las 6 columnas completas
   (incluidos "Ficha"/"Editar") sin barra de scroll horizontal en pantallas medianas. */
.pacientes-lista .data-table th { padding: .7rem .6rem; }
.pacientes-lista .data-table td { padding: .65rem .6rem; }
.pacientes-lista .paciente-nombre { white-space: normal; line-height: 1.25; }
.pacientes-lista .paciente-celda { min-width: 11rem; }
.pacientes-lista .table-actions > * + * { margin-left: .25rem; }

@media (max-width: 1100px) {
  .pacientes-layout { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 860px) {
  .pacientes-layout { grid-template-columns: 1fr; }
}

/* Módulo Recetas: tablas compactas. Las celdas de texto (paciente, diagnóstico) pueden partirse
   en varias líneas y los botones de acción van en un contenedor interno con flex-wrap (el <td>
   no lleva display:flex, ver el aviso sobre .table-actions más arriba), de modo que nada se corta
   a la derecha. Si aun así no cabe, .table-card conserva su scroll horizontal como último recurso. */
.recetas-lista .data-table th { padding: .7rem .6rem; }
.recetas-lista .data-table td { padding: .65rem .6rem; }
.recetas-lista .celda-texto { white-space: normal; line-height: 1.3; min-width: 9rem; }
.recetas-lista .celda-texto .mono { white-space: nowrap; }
.recetas-lista .acciones-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
}
.recetas-lista .table-actions { white-space: normal; min-width: 8rem; }

@media (max-width: 760px) {
  .recetas-lista .acciones-wrap { justify-content: flex-start; }
}

/* Pantalla de plantillas de impresión (Pages/PlantillasImpresion/Form.razor): formulario a la
   izquierda y vista previa de la hoja a la derecha; en pantallas angostas la vista previa baja. */
.plantilla-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.plantilla-layout > * { min-width: 0; }
.plantilla-preview { position: sticky; top: 1rem; }
.tabs-simple { display: flex; gap: .4rem; margin-bottom: .75rem; }
.plantilla-preview-marco {
  background: var(--surface-sunken);
  border-radius: var(--radius);
  padding: .75rem;
  max-height: 78vh;
  overflow: auto;
}
.plantilla-preview-zoom { zoom: .62; }
@media (max-width: 1100px) {
  .plantilla-layout { grid-template-columns: 1fr; }
  .plantilla-preview { position: static; }
}

/* Modal "Realizar cobro" compacto: todo cabe en pantalla sin desplazarse (datos en una fila,
   resumen en una fila, tres campos en una fila). */
.modal-cobro { max-width: 760px; }
.modal-cobro .modal-header { padding: .8rem 1.2rem; }
.modal-cobro .modal-header h2 { font-size: 1.05rem; }
.modal-cobro .modal-body { padding: .9rem 1.2rem; }
.modal-cobro .modal-footer { padding: .7rem 1.2rem; }
.modal-cobro .field label { font-size: .78rem; }
.cobro-datos { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: .6rem .9rem; }
.cobro-datos > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cobro-datos strong { font-size: .74rem; color: var(--ink-soft); font-weight: 600; }
.cobro-datos span { font-size: .88rem; color: var(--ink); overflow-wrap: anywhere; }
.cobro-fila { display: grid; grid-template-columns: 1.4fr 1fr; gap: .75rem; margin-top: .8rem; align-items: end; }
.cobro-fila-3 { grid-template-columns: 1fr 1fr 1.4fr; }
.cobro-aviso { margin: .45rem 0 0; font-size: .8rem; color: var(--ink-soft); }
.cobro-resumen-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .8rem; padding: .6rem .9rem; }
.cobro-resumen.cobro-resumen-fila > div { flex-direction: column; gap: .1rem; padding: 0; }
.cobro-resumen.cobro-resumen-fila > div span { font-size: .78rem; color: var(--ink-soft); }
.cobro-resumen.cobro-resumen-fila .total { border-top: none; margin-top: 0; padding-top: 0; font-size: 1rem; }
@media (max-width: 640px) {
  .cobro-datos, .cobro-fila, .cobro-fila-3, .cobro-resumen-fila { grid-template-columns: 1fr 1fr; }
}

/* Facturación (Pages/Facturacion/Index.razor): resumen del cálculo dentro del modal de cobro. */
.cobro-resumen {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}
.cobro-resumen > div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; font-size: .92rem; }
.cobro-resumen .total { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .5rem; font-size: 1.05rem; }

.table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}

.paciente-celda { display: flex; align-items: center; gap: .65rem; }
.paciente-nombre { font-weight: 600; color: var(--ink); }
.paciente-doc { font-size: .8rem; color: var(--ink-faint); }

.avatar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.avatar-chip-lg { width: 2.9rem; height: 2.9rem; font-size: .95rem; }

.avatar-chip-0 { background: var(--accent-soft); color: var(--accent-dark); }
.avatar-chip-1 { background: var(--amber-soft); color: var(--amber); }
.avatar-chip-2 { background: var(--danger-soft); color: var(--danger); }
.avatar-chip-3 { background: #e4e8fb; color: #3b4a9e; }
.avatar-chip-4 { background: #e3f1ea; color: #2f6b4f; }
.avatar-chip-5 { background: #f1e6f7; color: #7a4a91; }

.data-table tr[data-seleccionable] { cursor: pointer; }
.data-table tr.fila-seleccionada td { background: var(--accent-soft); }

.pacientes-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ficha-rapida {
  background: linear-gradient(155deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-md);
}

.ficha-rapida h2 { margin: 0; font-size: 1rem; }

.ficha-rapida-hint {
  margin: .2rem 0 1rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .78);
}

.ficha-rapida-vacio {
  font-size: .85rem;
  color: rgba(255, 255, 255, .85);
  margin: 0;
}

.ficha-rapida-encabezado {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  margin-bottom: 1rem;
}

.ficha-rapida-nombre { font-weight: 700; }
.ficha-rapida-doc { font-size: .8rem; color: rgba(255, 255, 255, .78); }

.ficha-rapida-datos { margin: 0 0 1rem; }
.ficha-rapida-datos > div {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: .85rem;
}
.ficha-rapida-datos > div:last-child { border-bottom: none; }
.ficha-rapida-datos dt { color: rgba(255, 255, 255, .78); font-weight: 400; }
.ficha-rapida-datos dd { margin: 0; font-weight: 600; text-align: right; }

.btn-inverso { background: var(--surface); color: var(--accent-dark); }
.btn-inverso:hover { background: var(--accent-soft); }

.actividad-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.actividad-lista li { display: flex; gap: .65rem; align-items: flex-start; }

.actividad-punto {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  margin-top: .35rem;
  flex-shrink: 0;
}
.actividad-punto-paciente { background: var(--accent); }
.actividad-punto-consulta { background: var(--amber); }

.actividad-titulo { margin: 0; font-size: .85rem; font-weight: 600; color: var(--ink); }
.actividad-subtitulo { margin: .1rem 0 0; font-size: .78rem; color: var(--ink-faint); }

/* ---------- Paginador reutilizable (Components/Shared/Paginador.razor) ---------- */

.paginador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .85rem;
}

.paginador-tamano { display: flex; align-items: center; gap: .5rem; }
.paginador-tamano label { font-size: .82rem; color: var(--ink-soft); }
.paginador-tamano select { padding: .35rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }

.paginador-controles { display: flex; align-items: center; gap: .6rem; }
.paginador-info { font-size: .82rem; color: var(--ink-soft); }

/* ---------- Wizard de Consultas (Components/Shared/WizardPasos.razor + Consultas/Form.razor) ---------- */

.wizard-pasos {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: .1rem .1rem .9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.wizard-paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  background: none;
  border: none;
  cursor: pointer;
  /* Antes 6.4rem de ancho -- con los 8 pasos (Consultas) más el espacio que ocupaban las
     líneas conectoras, no cabían sin scroll horizontal en un monitor de 15.5" ("el wizard debe
     mostrarse completo"). Ahora que además el indicador va A TODO EL ANCHO de la pantalla (ya
     no comparte fila con la tarjeta de 320px del paciente, ver Form.razor), este tamaño más
     compacto alcanza para que los 8 pasos quepan sin recortarse en la gran mayoría de pantallas. */
  padding: 0 .45rem;
  flex-shrink: 0;
  width: 5.4rem;
}

.wizard-paso-num {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  background: var(--surface-sunken);
  color: var(--ink-faint);
  border: 2px solid var(--line);
}

.wizard-paso-label {
  font-size: .72rem;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.15;
}

.wizard-paso.activo .wizard-paso-num { background: var(--accent); border-color: var(--accent); color: white; }
.wizard-paso.activo .wizard-paso-label { color: var(--ink); font-weight: 600; }

.wizard-paso.completado .wizard-paso-num { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.wizard-paso.completado .wizard-paso-label { color: var(--ink-soft); }

.wizard-linea {
  flex: 1;
  min-width: .9rem;
  height: 2px;
  background: var(--line);
  margin-top: .95rem;
}
.wizard-linea.completado { background: var(--accent); }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.wizard-nav-derecha { display: flex; gap: .6rem; }

/* Listas editables dentro de un paso del wizard (Antecedentes/Vacunas/Desarrollo): mini-form
   "Agregar" + tabla de filas ya agregadas -- mismo lenguaje visual que .agregar-turno-row. */
.lista-editable-form {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
  padding: .9rem;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.lista-editable-form .field { min-width: 140px; flex: 1; margin: 0; }
.lista-editable-form .field-sm { max-width: 110px; flex: 0 0 auto; }

.lista-editable-vacia { padding: .9rem; color: var(--ink-faint); font-size: .85rem; text-align: center; }

.tabla-compacta td, .tabla-compacta th { padding: .5rem .6rem; font-size: .84rem; }

/* Filas editables directamente en la tabla (Antecedentes/Vacunas del Wizard de Consultas):
   selects/inputs angostos, para que la fila siga leyéndose como una fila y no como un
   formulario aparte. */
.tabla-compacta td select,
.tabla-compacta td input[type="text"],
.tabla-compacta td input[type="number"],
.tabla-compacta td input[type="date"] {
  width: 100%;
  min-width: 6.5rem;
  padding: .3rem .45rem;
  font-size: .82rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.tabla-compacta td select:focus,
.tabla-compacta td input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---------- Modal "Ver ficha completa" / historia clínica (Consultas/Form.razor) ----------
   Reemplaza la navegación a otra pantalla: evita perder la consulta en curso del wizard. */

.btn-historia {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent-dark);
  cursor: pointer;
  text-align: left;
}
.btn-historia:hover { text-decoration: underline; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.modal-header h2 { margin: 0; font-size: 1.15rem; }

.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  padding: .1rem .4rem;
}
.modal-close:hover { color: var(--ink); }

.modal-body { padding: 1.3rem; }

/* Modal de vista previa de impresión (Shared/ModalImpresion.razor): ancho de media carta (5.5") */
.modal-impresion { max-width: 900px; overflow: hidden; display: flex; flex-direction: column; }
.modal-impresion .modal-header { align-items: center; }
.modal-header-acciones { display: flex; align-items: center; gap: .5rem; }
.modal-impresion-frame {
  display: block;
  width: 100%;
  height: min(72vh, 11in);
  border: none;
  background: #fff;
}
.modal-body p { margin: 0 0 .75rem; }

.modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .9rem;
}
.modal-grid > div { display: flex; flex-direction: column; gap: .2rem; }
.modal-grid strong { font-size: .78rem; color: var(--ink-soft); font-weight: 600; }
.modal-grid span { font-size: .92rem; color: var(--ink); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: 1rem 1.3rem;
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: 0;
  background: var(--surface);
}

/* ---------- Modal "Entrega de Resultados" (Turnos/Index.razor) ---------- */

.documentos-lista {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.documentos-lista li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.documentos-lista li a { font-weight: 600; }
.documentos-lista li .form-hint { margin: 0; flex: 1; }

/* ---------- Módulo Recetas: checklist de Analíticas (Recetas/Form.razor) ---------- */

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .35rem .75rem;
  max-height: 420px;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  padding: .2rem 0;
  cursor: pointer;
}

/* ---------- Paso "Vacunas" del Wizard de Consultas: resaltar dosis ya aplicadas ---------- */
.fila-vacuna-aplicada td,
.fila-vacuna-aplicada:hover td {
  background: var(--accent-soft);
}


/* ---------- Menú lateral: grupo "Reportes" con submenú ---------- */

.nav-group-head { display: flex; align-items: center; gap: .15rem; }
.nav-group-head .nav-link { flex: 1; min-width: 0; }

.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #9fb3ae;
  cursor: pointer;
}
.nav-group-toggle:hover { background: rgba(255, 255, 255, .08); color: white; }
.nav-group-toggle svg { transition: transform .15s ease; }
.nav-group.abierto .nav-group-toggle svg { transform: rotate(180deg); }

.nav-sub {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: .1rem 0 .35rem 1.35rem;
  padding-left: .6rem;
  border-left: 1px solid rgba(255, 255, 255, .12);
}

.nav-sublink { padding: .42rem .65rem; font-size: .84rem; }

html[data-sidebar="colapsado"] .nav-sub,
html[data-sidebar="colapsado"] .nav-group-toggle { display: none; }

/* ---------- Módulo Reportes ---------- */

.reportes-grupo { margin-bottom: 1.6rem; }
.reportes-grupo > h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 .6rem; }

.reportes-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .9rem;
}

.reporte-card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.reporte-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.reporte-card strong { font-size: 1rem; color: var(--ink); }
.reporte-card span { font-size: .85rem; color: var(--ink-soft); }

.reporte-tabla th.num,
.reporte-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.reporte-tabla .reporte-total td { font-weight: 700; background: var(--surface-sunken); border-top: 2px solid var(--line); }

.reporte-acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---------- Curvas de crecimiento (Consultas > Examen físico > "Curva Crecimiento") ----------
   Modal con 4 gráficos SVG (ver Components/Pages/Consultas/CurvaCrecimientoModal.razor). Los colores
   salen de las variables del tema para que sigan la paleta elegida por el usuario. */
.modal-curva { max-width: 940px; }
.curva-sub { margin: .15rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.curva-sexo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; color: var(--ink-soft); font-size: .9rem; }
.curva-chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: .3rem .95rem; font: inherit; font-size: .88rem; cursor: pointer;
}
.curva-chip:hover { border-color: var(--accent); }
.curva-chip.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
.curva-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.curva-tab {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: var(--radius-sm); padding: .4rem .85rem; font: inherit; font-size: .88rem; cursor: pointer;
}
.curva-tab:hover { border-color: var(--accent); color: var(--ink); }
.curva-tab.activo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); font-weight: 600; }
.curva-aviso { background: var(--amber-soft); color: var(--amber); border-radius: var(--radius-sm); padding: .55rem .8rem; font-size: .88rem; margin: 0 0 .8rem; }
.curva-svg { width: 100%; height: auto; max-height: 56vh; display: block; }
.curva-grid { stroke: var(--line-soft); stroke-width: 1; }
.curva-eje { stroke: var(--ink-faint); stroke-width: 1.2; }
.curva-tick { fill: var(--ink-soft); font-size: 11px; font-family: var(--font-body); }
.curva-titulo-eje { fill: var(--ink-soft); font-size: 12px; font-weight: 600; font-family: var(--font-body); }
.curva-etiqueta-p { fill: var(--ink-faint); font-size: 10.5px; font-family: var(--font-body); }
.curva-p3 { stroke: var(--ink-faint); stroke-width: 1.2; stroke-dasharray: 5 4; }
.curva-p15 { stroke: var(--ink-soft); stroke-width: 1.4; }
.curva-p50 { stroke: var(--accent); stroke-width: 2.4; }
.curva-paciente-linea { stroke: var(--ink); stroke-width: 1.6; opacity: .7; }
.curva-punto { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.curva-punto-actual { fill: var(--danger); stroke: var(--surface); stroke-width: 2; }
.curva-leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--ink-soft); margin: .5rem 0 1rem; }
.curva-leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.curva-sw { display: inline-block; width: 22px; height: 0; border-top: 2px solid; }
.curva-sw-p50 { border-color: var(--accent); border-top-width: 3px; }
.curva-sw-p15 { border-color: var(--ink-soft); }
.curva-sw-p3 { border-color: var(--ink-faint); border-top-style: dashed; }
.curva-sw-punto, .curva-sw-actual { width: 10px; height: 10px; border: none; border-radius: 50%; }
.curva-sw-punto { background: var(--ink); }
.curva-sw-actual { background: var(--danger); }
.curva-tabla-titulo { font-size: .95rem; margin: .4rem 0 .5rem; }
.curva-tabla-wrap { overflow-x: auto; }
.curva-tabla th, .curva-tabla td { white-space: nowrap; font-size: .84rem; }
.curva-fila-actual td { background: var(--danger-soft); }
.curva-tabla th, .curva-tabla td { padding: .55rem .6rem; }
.curva-boton-fila { display: flex; justify-content: flex-end; margin-top: 1rem; }