/* ==========================================================================
   Dashboard de Inicio
   Todas las reglas van prefijadas con #dashboard-root: el prototipo original
   (documentos/dashboard-inicio-prototipo.html) usaba selectores genéricos
   (.badge, .row, .panel, .stat, .table, .heading...) que colisionan con
   styles.css. El scope las mantiene aisladas dentro de la pestaña Inicio.

   Los avisos (.nx*) comparten lenguaje visual con el cajón de notificaciones:
   pastilla con icono tintada por tipo, barra de tono a la izquierda, etiqueta
   de módulo y agrupación. Si se toca uno, revisar el otro.
   ========================================================================== */

.dashboard-tab { min-height: 0; overflow: hidden; }
.dashboard-native { width: 100%; height: 100%; overflow: auto; }

#dashboard-root {
  margin: 0 auto; padding: 1rem 0.5rem 2rem;

  /* Tonos por severidad de aviso: los mismos que usa el cajón de la campana. */
  --nx-danger: #ef4444;
  --nx-warning: #f59e0b;
  --nx-info: #38bdf8;
  --nx-success: #10b981;
  --nx-neutral: #94a3b8;
  --nx-tint: 0.14;
}
[data-theme="light"] #dashboard-root {
  --nx-danger: #dc2626;
  --nx-warning: #d97706;
  --nx-info: #0284c7;
  --nx-success: #059669;
  --nx-tint: 0.10;
}

/* Banner de error in-place (no destruye el contenido ya renderizado) */
#dashboard-root .dashboard-error[hidden] { display: none; }
#dashboard-root .dashboard-error {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0 0.85rem; padding: 0.7rem 1rem;
  border: 1px solid var(--status-critical-border); border-radius: var(--radius-md);
  background: var(--status-critical-bg); color: var(--status-critical-text);
  font-size: 0.8rem;
}
#dashboard-root .dashboard-error button {
  margin-left: auto; padding: 0.3rem 0.7rem;
  border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; font: 700 0.7rem var(--font-sans); cursor: pointer;
}

/* ---- Cabecera ---------------------------------------------------------- */
#dashboard-root .hello {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.9rem; margin-bottom: 0.9rem; padding: 0.15rem 0.3rem 0.3rem;
}
#dashboard-root .hello h1 { font-size: 1.85rem; line-height: 1.1; }
#dashboard-root .hello h1 span { color: var(--accent-cyan); }
#dashboard-root .hello-date { margin-top: 0.25rem; font-size: 0.78rem; color: var(--text-secondary); }
#dashboard-root .hello-date strong { font-weight: 600; }
#dashboard-root .hello-service:not(:empty):before { content: " · "; }
#dashboard-root .hello-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#dashboard-root .today-chip[hidden] { display: none; }
#dashboard-root .today-chip {
  --tone: var(--accent-cyan);
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.85rem 0.45rem 0.65rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent);
  background: color-mix(in srgb, var(--tone) calc(var(--nx-tint) * 100%), transparent);
}
#dashboard-root .today-chip svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--tone); }
#dashboard-root .today-chip b { display: block; font-size: 0.78rem; }
#dashboard-root .today-chip small { display: block; font-size: 0.68rem; color: var(--text-secondary); }
#dashboard-root .today-chip.surgery { --tone: #2dd4bf; }
#dashboard-root .today-chip.guard { --tone: #fbbf24; }

/* ---- Estructura general ------------------------------------------------- */
#dashboard-root .layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(290px, 1fr); gap: 0.85rem; align-items: start; }
#dashboard-root .column { display: grid; gap: 0.75rem; }
/* Un hijo de grid/flex sin contenido que envolver tiene min-width:auto por
   defecto (= el ancho mínimo de todo su contenido sin partir en líneas). La
   tira semanal (7 días, flex nowrap en móvil) es justo ese caso: sin este
   reset, ese ancho mínimo se propaga hacia arriba a través de cada
   <section> de .column y obliga al layout entero a crecer más que el
   viewport (de 700 a 1050px de ancho, no solo en móvil) en vez de dejar que
   la tira desborde y haga scroll internamente, que es lo que overflow-x:auto
   ya le pide. */
#dashboard-root .column > * { min-width: 0; }
#dashboard-root .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; min-width: 0; }
#dashboard-root .duo > * { min-width: 0; }
#dashboard-root .panel { padding: 0.85rem 1rem; }
#dashboard-root .heading { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
#dashboard-root .heading h2 { display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; }
#dashboard-root .heading .h-ico { width: 17px; height: 17px; color: #fbbf24; }
#dashboard-root .link { border: 0; background: none; color: var(--accent-cyan); font-weight: 700; font-size: 0.75rem; cursor: pointer; }
#dashboard-root .link:hover { text-decoration: underline; }
#dashboard-root .count-pill {
  padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800;
  color: var(--nx-danger); background: color-mix(in srgb, var(--nx-danger) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--nx-danger) 32%, transparent);
}
#dashboard-root .empty-line {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.2rem; color: var(--text-muted); font-size: 0.76rem;
}
#dashboard-root .empty-line svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---- Avisos ---------------------------------------------------------- */
/* La sección entera va oculta por defecto (index.html: hidden) y dashboard.js
   solo la muestra si hay avisos -- 0 avisos no es un hueco vacío en la
   página. No necesita guarda [hidden]{display:none}: ni .panel ni
   .attention fijan su propio `display` en ningún sitio, así que el valor por
   defecto del user-agent no tiene nada que pisar (a diferencia de
   .dashboard-error/.trend). */
#dashboard-root .avisos-list { display: grid; gap: 0.45rem; }
#dashboard-root .nx {
  --tone: var(--nx-neutral);
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 0.7rem; align-items: start;
  padding: 0.7rem 0.75rem 0.7rem 0.8rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-input);
  transition: var(--transition-fast, all 0.18s ease);
}
#dashboard-root .nx--critical, #dashboard-root .nx--danger { --tone: var(--nx-danger); }
#dashboard-root .nx--warning { --tone: var(--nx-warning); }
#dashboard-root .nx--info { --tone: var(--nx-info); }
#dashboard-root .nx--success { --tone: var(--nx-success); }
#dashboard-root .nx:before {
  content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--tone);
}
#dashboard-root .nx:hover { border-color: color-mix(in srgb, var(--tone) 45%, transparent); }
#dashboard-root .nx-icon {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) calc(var(--nx-tint) * 100%), transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 26%, transparent);
}
#dashboard-root .nx-icon svg { width: 17px; height: 17px; }
#dashboard-root .nx-main { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
#dashboard-root .nx-title { font-size: 0.83rem; font-weight: 700; line-height: 1.3; }
#dashboard-root .nx-body { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.45; }
#dashboard-root .nx-body strong { color: var(--text-primary); font-weight: 600; }
#dashboard-root .nx-preview { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.4; }
#dashboard-root .nx-preview .sep { opacity: 0.45; margin: 0 0.3rem; }
#dashboard-root .nx-meta { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.15rem; font-size: 0.66rem; color: var(--text-muted); }
#dashboard-root .nx-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
#dashboard-root .nx-tag {
  padding: 0.05rem 0.35rem; border-radius: 4px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) calc(var(--nx-tint) * 100%), transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 26%, transparent);
}
#dashboard-root .nx-right { display: flex; align-items: center; gap: 0.4rem; padding-top: 0.15rem; }
#dashboard-root .nx-dismiss {
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 1.1rem; line-height: 1; padding: 0 0.15rem; cursor: pointer;
  opacity: 0; transition: var(--transition-fast, all 0.18s ease);
}
#dashboard-root .nx:hover .nx-dismiss, #dashboard-root .nx-dismiss:focus-visible { opacity: 1; }
#dashboard-root .nx-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
#dashboard-root .nx-act {
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary);
  font: 600 0.71rem var(--font-sans); padding: 0.3rem 0.65rem; cursor: pointer;
  transition: var(--transition-fast, all 0.18s ease);
}
#dashboard-root .nx-act:hover { border-color: var(--tone); color: var(--tone); }
#dashboard-root .nx-act.primary {
  color: var(--tone); border-color: color-mix(in srgb, var(--tone) 42%, transparent);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
}
#dashboard-root .nx-act.primary:hover { background: color-mix(in srgb, var(--tone) 22%, transparent); }

/* Agrupación: a partir de 2 avisos del mismo tipo, igual que en la campana. */
#dashboard-root .nx-group { cursor: pointer; }
#dashboard-root .nx-count {
  min-width: 24px; padding: 0.1rem 0.45rem; border-radius: 999px; text-align: center;
  font-size: 0.68rem; font-weight: 800; color: var(--tone);
  background: color-mix(in srgb, var(--tone) calc(var(--nx-tint) * 100%), transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 26%, transparent);
}
#dashboard-root .nx-chevron { display: grid; place-items: center; color: var(--text-muted); transition: var(--transition-fast, all 0.18s ease); }
#dashboard-root .nx-chevron svg { width: 14px; height: 14px; }
#dashboard-root .nx-group.open .nx-chevron { transform: rotate(180deg); color: var(--tone); }
#dashboard-root .nx-children {
  grid-column: 1 / -1; display: none; flex-direction: column; gap: 0.1rem;
  margin: 0.6rem 0 0 2.8rem; padding-left: 0.75rem;
  border-left: 1px dashed color-mix(in srgb, var(--tone) 38%, transparent);
}
#dashboard-root .nx-group.open .nx-children { display: flex; }
#dashboard-root .nx-child {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.4rem 0.45rem; border-radius: var(--radius-sm);
}
#dashboard-root .nx-child:hover { background: var(--bg-card-hover); }
#dashboard-root .nx-child-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
#dashboard-root .nx-child-dot { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--tone); }
#dashboard-root .nx-child-text { font-size: 0.75rem; color: var(--text-secondary); }
#dashboard-root .nx-child-text b { color: var(--text-primary); font-weight: 600; }
#dashboard-root .nx-child-time { font-size: 0.65rem; color: var(--text-muted); white-space: nowrap; }
#dashboard-root .nx-group-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0 2.8rem; }

/* ---- Cambio de guardia -------------------------------------------------- */
#dashboard-root .ho-card {
  padding: 0.85rem 0.9rem; border-radius: var(--radius-md);
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.03));
}
/* Guardia sin movimientos: la misma tarjeta, en calma -- sin el ámbar de
   "esto hay que leerlo", sin las cuatro cifras a cero y sin el botón de abrir
   un informe que no tiene nada dentro. Solo la frase. */
#dashboard-root .ho-card.quiet {
  padding: 0.6rem 0.75rem;
  border-color: var(--border-color);
  background: var(--bg-input);
}
#dashboard-root .ho-quiet { margin: 0; font-size: 0.78rem; color: var(--text-secondary); }
#dashboard-root .ho-card:not(.quiet) .ho-quiet,
#dashboard-root .ho-card.quiet .ho-top,
#dashboard-root .ho-card.quiet .ho-metrics,
#dashboard-root .ho-card.quiet .ho-preview,
#dashboard-root .ho-card.quiet .ho-actions { display: none; }

#dashboard-root .ho-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem; }
#dashboard-root .ho-window small, #dashboard-root .ho-who small { display: block; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
#dashboard-root .ho-window strong { font-size: 0.92rem; }
#dashboard-root .ho-who { display: flex; align-items: center; gap: 0.55rem; }
#dashboard-root .ho-who strong { font-size: 0.8rem; }
#dashboard-root .ho-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; margin: 0.8rem 0 0.75rem; }
#dashboard-root .ho-metric {
  --tone: var(--accent-cyan);
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.6rem 0.35rem; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-input); text-align: center;
}
#dashboard-root .ho-metric svg { width: 17px; height: 17px; margin-bottom: 0.1rem; color: var(--tone); }
#dashboard-root .ho-metric b { font: 800 1.25rem/1 var(--font-heading); }
#dashboard-root .ho-metric small { font-size: 0.64rem; color: var(--text-secondary); }
#dashboard-root .ho-metric.alert { --tone: var(--nx-danger); border-color: color-mix(in srgb, var(--nx-danger) 32%, transparent); }
#dashboard-root .ho-preview { display: grid; gap: 0.35rem; }
#dashboard-root .ho-preview:not(:empty) { margin-bottom: 0.75rem; }
/* Las líneas del RESUMEN de la tarjeta (dashboard.js). Van scopeadas a
   .ho-preview porque el informe desplegado de más abajo tiene sus propias
   .ho-line, con otro aspecto: sin el contenedor delante, la que se declara
   después ganaba y el resumen salía con las cajas del informe. */
#dashboard-root .ho-preview .ho-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; color: var(--text-secondary); }
#dashboard-root .ho-preview .ho-line i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--text-muted); }
#dashboard-root .ho-preview .ho-line.ok i { background: var(--accent-teal); }
#dashboard-root .ho-preview .ho-line.alert i { background: var(--nx-danger); }
#dashboard-root .ho-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
#dashboard-root .ho-actions .btn-primary { padding: 0.45rem 0.9rem; font-size: 0.75rem; }
#dashboard-root .ho-stamp { margin-left: auto; font-size: 0.66rem; color: var(--text-muted); }

/* ---- Tira semanal ----------------------------------------------------- */
#dashboard-root .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.45rem; }
#dashboard-root .day {
  --tone: #38bdf8;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  min-height: 116px; padding: 0.6rem 0.25rem;
  border: 1px solid var(--border-color); border-top: 2px solid var(--day-accent, var(--tone)); border-radius: var(--radius-md);
  background: var(--bg-input); text-align: center;
}
#dashboard-root .day.surgery { --tone: #2dd4bf; }
#dashboard-root .day.guard { --tone: #fbbf24; border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.08); }
#dashboard-root .day.empty { --tone: var(--text-muted); }
#dashboard-root .day.empty b, #dashboard-root .day.empty small { color: var(--text-muted); }
#dashboard-root .day.today { box-shadow: 0 0 0 1px var(--border-highlight) inset; }
#dashboard-root .day.today strong { color: var(--accent-cyan); }
#dashboard-root .day.today:after {
  content: "HOY"; position: absolute; top: 0; right: 0.35rem;
  font-size: 0.52rem; font-weight: 800; letter-spacing: 0.1em; color: var(--accent-cyan);
}
#dashboard-root .day strong { font-size: 0.7rem; color: var(--text-secondary); text-transform: capitalize; }
#dashboard-root .day b { font-size: 0.73rem; line-height: 1.2; }
#dashboard-root .day small { font-size: 0.62rem; color: var(--text-muted); }
#dashboard-root .day svg { width: 24px; height: 24px; margin: 0.1rem 0; color: var(--day-accent, var(--tone)); }
#dashboard-root .day-badge[hidden] { display: none; }
#dashboard-root .day-badge {
  margin-top: 0.15rem; padding: 0.1rem 0.4rem; border-radius: 999px;
  font-size: 0.59rem; font-weight: 700; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
}
#dashboard-root .day-badge.danger { --tone: var(--nx-danger); }
#dashboard-root .day-badge.amber { --tone: #fbbf24; }

/* Carril de próximas guardias (sustituye al panel "Tu próxima guardia") */
#dashboard-root .guard-rail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  margin-top: 0.6rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-md);
  border: 1px solid rgba(245, 158, 11, 0.32); background: rgba(245, 158, 11, 0.07);
}
#dashboard-root .guard-rail svg { width: 16px; height: 16px; flex: 0 0 auto; color: #fbbf24; }
#dashboard-root .gr-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
#dashboard-root .gr-next { font-size: 0.8rem; font-weight: 800; color: #fbbf24; }
#dashboard-root .gr-rest { font-size: 0.72rem; color: var(--text-muted); }
#dashboard-root .guard-rail .link { margin-left: auto; }

/* ---- Listas de cirugías y pacientes ---------------------------------- */
#dashboard-root .list { display: grid; gap: 0.3rem; }
#dashboard-root .li {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-input); transition: var(--transition-fast, all 0.18s ease);
}
#dashboard-root .li:hover { border-color: var(--border-highlight); }
#dashboard-root .li-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; }
#dashboard-root .li-date b { font: 800 1rem/1 var(--font-heading); }
#dashboard-root .li-date small { font-size: 0.58rem; color: var(--text-muted); text-transform: uppercase; }
#dashboard-root .li-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
#dashboard-root .li-main b { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashboard-root .li-main small { font-size: 0.67rem; color: var(--text-muted); }
#dashboard-root .li-flag {
  flex: 0 0 auto; padding: 0.15rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--border-color); color: var(--text-secondary);
  font-size: 0.62rem; font-weight: 700;
}
#dashboard-root .li-flag.warn { color: var(--nx-warning); border-color: color-mix(in srgb, var(--nx-warning) 34%, transparent); background: color-mix(in srgb, var(--nx-warning) 12%, transparent); }
#dashboard-root .li-flag.ok { color: var(--accent-teal); border-color: color-mix(in srgb, var(--accent-teal) 34%, transparent); background: color-mix(in srgb, var(--accent-teal) 12%, transparent); }
#dashboard-root .li-flag.postop { color: var(--accent-cyan); border-color: var(--border-highlight); background: rgba(6, 182, 212, 0.12); }
#dashboard-root .avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.02em; color: #fff;
  background: var(--u, var(--accent-blue));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--u, var(--accent-blue)) 25%, transparent);
}

/* ---- Panel de estadísticas -------------------------------------- */
#dashboard-root .stats {
  display: grid; gap: 0.6rem; padding: 1rem; align-content: start;
  border-color: rgba(56, 189, 248, 0.55) !important;
  background: linear-gradient(160deg, #0b2137 0%, #0b172b 100%) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(125, 211, 252, 0.08) !important;
}
#dashboard-root .stats-title { margin-bottom: 0; }
#dashboard-root .stats-title h2 { font-size: 1.1rem; }
#dashboard-root .year-control { display: flex; align-items: center; gap: 0.35rem; color: var(--accent-cyan); }
#dashboard-root .year-control svg { width: 16px; }
#dashboard-root .year-control select { padding: 0.3rem; border: 0; background: var(--bg-primary); color: var(--text-secondary); font: 700 0.65rem var(--font-sans); border-radius: 6px; }
#dashboard-root .metric-switch[hidden] { display: none; }
#dashboard-root .metric-switch { display: flex; gap: 0.2rem; padding: 0.18rem; border: 1px solid var(--border-color); border-radius: 999px; background: #07101f; }
#dashboard-root .metric-switch button { flex: 1; padding: 0.3rem 0.5rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); font: 700 0.7rem var(--font-sans); cursor: pointer; }
#dashboard-root .metric-switch .active { color: #fff; background: var(--accent-gradient); }
#dashboard-root .metric-switch button[hidden] { display: none; }

#dashboard-root .kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
#dashboard-root .kpi {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.65rem 0.4rem; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-input);
}
#dashboard-root .kpi strong { font: 800 1.6rem/1 var(--font-heading); }
#dashboard-root .kpi small { font-size: 0.65rem; color: var(--text-muted); }
#dashboard-root .trend[hidden] { display: none; }
#dashboard-root .trend {
  position: absolute; top: 0.45rem; right: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.1rem; font-size: 0.62rem; font-weight: 800;
}
#dashboard-root .trend svg { width: 10px; height: 10px; }
#dashboard-root .trend.up { color: var(--status-stable-text); }
#dashboard-root .trend.down { color: var(--status-critical-text); }
#dashboard-root .trend.down svg { transform: rotate(180deg); }

#dashboard-root .donut-wrap {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-input);
}
#dashboard-root .donut {
  display: grid; place-items: center; position: relative; flex: 0 0 auto;
  width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(#0284c7 0 42%, #06b6d4 42% 73%, #38bdf8 73% 90%, #94a3b8 90%);
}
#dashboard-root .donut:after { content: ""; position: absolute; inset: 26%; border-radius: 50%; background: var(--bg-input); }
#dashboard-root .donut b { z-index: 1; font: 800 0.95rem var(--font-heading); }
#dashboard-root .legend { list-style: none; flex: 1; min-width: 0; font-size: 0.68rem; }
#dashboard-root .legend li { display: grid; grid-template-columns: 8px 1fr auto; gap: 0.4rem; align-items: center; margin: 0.35rem 0; }
#dashboard-root .legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--legend-color); }
#dashboard-root .legend span { color: var(--text-secondary); }
#dashboard-root .legend li:nth-child(1) { --legend-color: #0284c7; }
#dashboard-root .legend li:nth-child(2) { --legend-color: #06b6d4; }
#dashboard-root .legend li:nth-child(3) { --legend-color: #38bdf8; }
#dashboard-root .legend li:nth-child(4) { --legend-color: #94a3b8; }
#dashboard-root .stats.pacemaker-mode .legend li:nth-child(1) { --legend-color: #8b5cf6; }
#dashboard-root .stats.pacemaker-mode .legend li:nth-child(2) { --legend-color: #d946ef; }
#dashboard-root .stats.pacemaker-mode .legend li:nth-child(3) { --legend-color: #f97316; }
#dashboard-root .stats.pacemaker-mode .legend li:nth-child(4) { --legend-color: #facc15; }

#dashboard-root .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
#dashboard-root .mini {
  --tone: var(--text-secondary);
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.6rem 0.65rem; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-input);
}
#dashboard-root .mini svg { width: 16px; height: 16px; margin-bottom: 0.1rem; color: var(--tone); }
#dashboard-root .mini small { font-size: 0.64rem; color: var(--text-muted); }
#dashboard-root .mini strong { font: 800 1.05rem var(--font-heading); }
#dashboard-root .mini.ok { --tone: var(--accent-teal); }
#dashboard-root .mini.bad { --tone: var(--nx-danger); }
#dashboard-root .stats-note { display: block; color: var(--text-muted); font-size: 0.6rem; font-style: italic; }

/* Modo marcapasos: oculta métricas exclusivas de cirugía / muestra las de dispositivo */
#dashboard-root .pacemaker-only { display: none; }
#dashboard-root .stats.pacemaker-mode .general-only { display: none; }
#dashboard-root .stats.pacemaker-mode .pacemaker-only { display: block; }

/* ---- Realce "glass" de los paneles ------------------------------- */
#dashboard-root .panel {
  border-color: rgba(56, 189, 248, 0.34) !important;
  background: linear-gradient(155deg, rgba(12, 35, 58, 0.9), rgba(10, 24, 45, 0.92)) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(125, 211, 252, 0.05) !important;
}
#dashboard-root .panel.attention { border-color: color-mix(in srgb, var(--nx-warning) 30%, rgba(56, 189, 248, 0.34)) !important; }
#dashboard-root .panel.handover { border-color: rgba(251, 191, 36, 0.38) !important; }
#dashboard-root .day, #dashboard-root .li, #dashboard-root .nx, #dashboard-root .kpi,
#dashboard-root .mini, #dashboard-root .donut-wrap, #dashboard-root .ho-metric { border-color: rgba(56, 189, 248, 0.22); }
#dashboard-root .day, #dashboard-root .li, #dashboard-root .nx, #dashboard-root .kpi,
#dashboard-root .mini, #dashboard-root .donut-wrap, #dashboard-root .ho-metric {
  background: linear-gradient(145deg, rgba(11, 30, 52, 0.9), rgba(8, 20, 39, 0.92));
}
#dashboard-root .donut:after { background: #0a1a31; }

/* ---- Tema claro ------------------------------------------------- */
[data-theme="light"] #dashboard-root .panel { border-color: #d5e2ed !important; background: #fff !important; box-shadow: 0 7px 20px rgba(15, 23, 42, 0.07), inset 0 1px 0 #fff !important; }
[data-theme="light"] #dashboard-root .stats { border-color: #c9ddeb !important; background: linear-gradient(160deg, #fff, #f7fbff) !important; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.09) !important; }
[data-theme="light"] #dashboard-root .metric-switch { background: #f1f5f9; }
[data-theme="light"] #dashboard-root .day, [data-theme="light"] #dashboard-root .li,
[data-theme="light"] #dashboard-root .nx, [data-theme="light"] #dashboard-root .kpi,
[data-theme="light"] #dashboard-root .mini, [data-theme="light"] #dashboard-root .donut-wrap,
[data-theme="light"] #dashboard-root .ho-metric { border-color: #d9e4ed; background: linear-gradient(145deg, #fff, #f6f9fc); }
[data-theme="light"] #dashboard-root .day.guard { background: #fff9eb; }
[data-theme="light"] #dashboard-root .donut:after { background: #fff; }
[data-theme="light"] #dashboard-root .stats-note,
[data-theme="light"] #dashboard-root .day small,
[data-theme="light"] #dashboard-root .li-main small { color: #64748b; }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 1050px) {
  #dashboard-root .layout { grid-template-columns: 1fr; }
  #dashboard-root .week { overflow: auto; }
  #dashboard-root .day { min-width: 108px; }
  #dashboard-root .stats { grid-template-columns: repeat(2, 1fr); }
  #dashboard-root .stats > .heading,
  #dashboard-root .stats > .metric-switch,
  #dashboard-root .stats > .stats-note { grid-column: 1 / -1; }
  /* El conmutador no se estira a todo el ancho del panel: sigue siendo un
     control, no una barra de título. */
  #dashboard-root .stats > .metric-switch { justify-self: start; }
}
@media (max-width: 820px) {
  #dashboard-root .duo { grid-template-columns: 1fr; }
  #dashboard-root .ho-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  /* Interfaz de móvil de Inicio: no es el grid de escritorio apretujado a una
     columna -- el carril de la semana pasa a scroll horizontal con snap real
     (dashboard.js centra el día de hoy al cargar, ver renderWeek). Las listas
     de cirugías y pacientes ya son fichas apiladas en cualquier ancho, así
     que aquí no hay nada que reconvertir. */
  #dashboard-root { padding: 0.85rem; }
  #dashboard-root .hello { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
  #dashboard-root .hello h1 { font-size: 1.6rem; }

  /* Carril de días: ancho fijo por tarjeta + scroll-snap-align:start (no
     "center") para que el punto de encaje del domingo sea su propio borde --
     así el máximo scroll queda justo en el padding derecho del contenedor,
     sin hueco extra detrás del último día y sin poder desplazarse más allá.
     (El reset de min-width que evita que esto desborde el viewport entero
     vive arriba, en la regla base de .column -- afecta también a la banda
     700-1050px, no solo aquí.) */
  #dashboard-root .week {
    display: flex; gap: 0.45rem; overflow-x: auto; min-width: 0;
    margin: 0 -0.85rem; padding: 0 0.85rem 0.2rem;
    scroll-snap-type: x mandatory; scroll-padding-inline: 0.85rem;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  #dashboard-root .day { scroll-snap-align: start; flex: 0 0 auto; width: 88px; min-width: 88px; }

  #dashboard-root .guard-rail .link { margin-left: 0; }
  #dashboard-root .nx { grid-template-columns: 30px minmax(0, 1fr) auto; }
  #dashboard-root .nx-children, #dashboard-root .nx-group-foot { margin-left: 0.5rem; }
  #dashboard-root .nx-dismiss { opacity: 1; }  /* no hay hover en táctil */
  #dashboard-root .stats { grid-template-columns: 1fr; }
}

/* ── Cambio de guardia ──────────────────────────────────────────────────── */
/* El informe de la mañana y el archivo de guardias anteriores. Vive en el
   dashboard, así que hereda el panel de cristal del resto de secciones. */
#dashboard-root .ho-detail-head { margin: 0.9rem 0 0.7rem; }
#dashboard-root .ho-detail-head strong { display: block; font-size: 0.86rem; font-weight: 700; color: var(--text-primary); }
#dashboard-root .ho-detail-head small { font-size: 0.74rem; color: var(--text-muted); }
#dashboard-root #handover-detail[hidden], #dashboard-root #handover-archive[hidden] { display: none; }

#dashboard-root .ho-section { margin-bottom: 0.9rem; }
#dashboard-root .ho-section h5 {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 0.45rem; display: flex; align-items: center; gap: 0.5rem;
}
#dashboard-root .ho-section h5::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
/* Las del INFORME desplegado (app.js), que siempre van dentro de .ho-section:
   otra cosa distinta de las del resumen de la tarjeta. */
#dashboard-root .ho-section .ho-line {
  display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.5rem 0.65rem; border-radius: var(--radius-sm);
  background: var(--bg-primary); margin-bottom: 0.3rem;
}
#dashboard-root .ho-time { font-size: 0.72rem; color: var(--text-muted); width: 2.6rem; flex: none; font-variant-numeric: tabular-nums; }
#dashboard-root .ho-body { flex: 1; min-width: 0; font-size: 0.8rem; }
#dashboard-root .ho-body b { font-weight: 600; }
#dashboard-root .ho-body em { display: block; font-style: normal; font-size: 0.74rem; color: var(--text-secondary); margin-top: 0.1rem; }
#dashboard-root .ho-pill { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.1rem 0.42rem; border-radius: 4px; flex: none; }
#dashboard-root .ho-pill.u { background: var(--status-critical-bg); color: var(--status-critical-text); }
#dashboard-root .ho-pill.mp { background: var(--status-info-bg); color: var(--status-info-text); }
#dashboard-root .ho-pill.ok { background: var(--status-stable-bg); color: var(--status-stable-text); }
#dashboard-root .ho-pill.dis { background: var(--bg-input); color: var(--text-muted); }
#dashboard-root .ho-empty { font-size: 0.78rem; color: var(--text-secondary); margin: 0.3rem 0 0; }

#dashboard-root .ho-archive-title {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-muted); margin: 0.9rem 0 0.45rem;
}
#dashboard-root .ho-rep {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); margin-bottom: 0.3rem;
  background: var(--bg-primary); border: 1px solid transparent; color: var(--text-primary);
  font-family: inherit; cursor: pointer; transition: var(--transition-fast);
}
#dashboard-root .ho-rep:hover { border-color: var(--accent-cyan); }
#dashboard-root .ho-rep.on { border-color: var(--border-highlight); background: var(--bg-card-hover); }
#dashboard-root .ho-rep-date { font-size: 0.74rem; color: var(--text-muted); width: 3.4rem; flex: none; font-variant-numeric: tabular-nums; }
#dashboard-root .ho-rep-who { flex: 1; min-width: 0; font-size: 0.79rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboard-root .ho-rep-counts { display: flex; gap: 0.25rem; flex: none; }
#dashboard-root .ho-rep-counts i {
  font-style: normal; font-size: 0.66rem; font-weight: 600; padding: 0.08rem 0.4rem; border-radius: 4px;
  background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-color);
}
#dashboard-root .ho-rep-counts i.hot { background: var(--status-critical-bg); color: var(--status-critical-text); border-color: var(--status-critical-border); }

@media (max-width: 560px) {
  #dashboard-root .ho-rep { flex-wrap: wrap; }
}

/* ==== HOY EN EL SERVICIO (2026-09-19) ==============================
   La banda con los tres bloques que no hablan del usuario sino del
   servicio: de guardia hoy, avisos al busca y el parte del día. */
#dashboard-root .hoy-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem;
}
#dashboard-root .oncall:not([hidden]), #dashboard-root .busca-card:not([hidden]) { display: flex; flex-direction: column; }
/* `hidden` tiene que ganar a las reglas de arriba, que son más específicas. */
#dashboard-root [hidden] { display: none; }

/* -- De guardia hoy -- */
#dashboard-root .oc-main {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--nx-danger) 30%, transparent);
  background: color-mix(in srgb, var(--nx-danger) 12%, transparent);
}
#dashboard-root .oc-main.gap {
  border-style: dashed; color: var(--nx-danger);
  font-size: 0.82rem; font-weight: 600;
}
#dashboard-root .oc-main.gap svg { width: 17px; height: 17px; flex: none; }
#dashboard-root .oc-me {
  font-style: normal; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--accent-cyan); background: rgba(6, 182, 212, 0.16);
  border-radius: 999px; padding: 1px 7px; margin-left: 0.4rem;
}
#dashboard-root .oc-main[hidden] { display: none; }
#dashboard-root .oc-main:not([hidden]) + .oc-list { margin-top: 0.5rem; }
#dashboard-root .oc-list > .oc-row:first-child { border-top: 0; }
#dashboard-root .oc-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.25rem; border-top: 1px solid var(--border-color);
}
#dashboard-root .oc-row .avatar { width: 26px; height: 26px; font-size: 0.55rem; }
#dashboard-root .oc-row.is-out { opacity: 0.72; }
/* Ancho fijo: todos los avatares a la misma tabulación. */
#dashboard-root .oc-role {
  flex: none; width: 76px; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Una cabecera por colectivo (Cirujanos, Enfermería…), con su icono. */
#dashboard-root .oc-grupo {
  display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; padding: 0 0.25rem 3px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gc);
}
#dashboard-root .oc-list > .oc-grupo:first-child { margin-top: 0; }
#dashboard-root .oc-grupo + .oc-row { border-top: 0; }
#dashboard-root .oc-grupo svg { width: 14px; height: 14px; flex: none; }
#dashboard-root .oc-who { flex: 1; min-width: 0; font-size: 0.82rem; }
#dashboard-root .oc-who b { font-weight: 600; }
#dashboard-root .oc-who small { display: block; margin-top: 1px; font-size: 0.7rem; color: var(--text-muted); }
#dashboard-root .oc-tel {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 26px; padding: 0 0.6rem; border-radius: 999px;
  border: 1px solid var(--border-color); background: var(--bg-input);
  color: var(--text-primary); font-size: 0.73rem; font-weight: 600;
  font-variant-numeric: tabular-nums; text-decoration: none;
}
#dashboard-root .oc-tel:hover { border-color: var(--border-highlight); color: var(--accent-cyan); }
#dashboard-root .oc-tel svg { width: 12px; height: 12px; color: var(--text-muted); }

/* -- Avisos al busca: la señal, no la tabla -- */
#dashboard-root .bk-top { display: flex; align-items: flex-end; gap: 0.8rem; }
#dashboard-root .bk-big {
  font-family: var(--font-heading); font-size: 2rem; font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums;
}
#dashboard-root .bk-top small { font-size: 0.75rem; color: var(--text-secondary); }
#dashboard-root .bk-top small b { color: var(--text-primary); }
#dashboard-root .bk-urg {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  color: var(--nx-danger); background: color-mix(in srgb, var(--nx-danger) 14%, transparent);
}
#dashboard-root .bk-urg svg { width: 13px; height: 13px; }
#dashboard-root .bk-list { margin-top: 0.55rem; flex: 1; }
#dashboard-root .bk-row {
  display: flex; align-items: center; gap: 0.55rem; min-width: 0;
  padding: 0.42rem 0.15rem; border-top: 1px solid var(--border-color); font-size: 0.79rem;
}
#dashboard-root .bk-row .d { width: 7px; height: 7px; border-radius: 2px; background: var(--c, var(--text-muted)); flex: none; }
#dashboard-root .bk-row.urg { --c: var(--nx-danger); }
#dashboard-root .bk-row.nor { --c: var(--accent-cyan); }
#dashboard-root .bk-row.baj, #dashboard-root .bk-row.more { --c: var(--text-muted); }
#dashboard-root .bk-row.more .dx { font-style: italic; color: var(--text-muted); }
#dashboard-root .bk-row .nm { font-weight: 600; flex: none; }
#dashboard-root .bk-row .dx { flex: 1; min-width: 0; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashboard-root .bk-row .ago { flex: none; font-size: 0.71rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#dashboard-root .bk-acts { display: flex; gap: 0.45rem; margin-top: 0.7rem; }

/* -- Hoy en quirófano -- */
#dashboard-root .ors .heading .ors-when {
  margin-left: auto; margin-right: 0.8rem; font-size: 0.74rem; color: var(--text-muted);
}
#dashboard-root .ors-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0.6rem;
}
#dashboard-root .orc {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-input);
}
#dashboard-root .orc.closed { border-style: dashed; }
#dashboard-root .orc-head {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border-color); background: rgba(6, 182, 212, 0.07);
}
#dashboard-root .orc.free .orc-head, #dashboard-root .orc.closed .orc-head { background: transparent; }
#dashboard-root .orc-head b { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; }
#dashboard-root .orc-head small { margin-left: auto; font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#dashboard-root .orc-live {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-teal); background: color-mix(in srgb, var(--accent-teal) 16%, transparent);
  border-radius: 999px; padding: 2px 7px;
}
#dashboard-root .orc-empty { padding: 0.9rem 0.65rem; font-size: 0.74rem; color: var(--text-muted); }
#dashboard-root .orc-case {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.45rem 0.65rem; border-top: 1px solid var(--border-color);
}
#dashboard-root .orc-case:first-of-type { border-top: 0; }
#dashboard-root .orc-case .hr {
  flex: none; width: 36px; padding-top: 1px; font-size: 0.73rem; font-weight: 700;
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
#dashboard-root .orc-what { flex: 1; min-width: 0; }
#dashboard-root .orc-what b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.78rem; font-weight: 600; line-height: 1.35;
}
#dashboard-root .orc-case.mine .orc-what b { font-weight: 800; }
#dashboard-root .orc-what small { display: block; margin-top: 2px; font-size: 0.68rem; color: var(--text-muted); }
#dashboard-root .orc-case.now { background: color-mix(in srgb, var(--accent-teal) 10%, transparent); box-shadow: inset 3px 0 0 var(--accent-teal); }
#dashboard-root .orc-case.done .orc-what b, #dashboard-root .orc-case.past .orc-what b { color: var(--text-secondary); }
#dashboard-root .orc-case.susp { background: color-mix(in srgb, var(--nx-danger) 9%, transparent); box-shadow: inset 3px 0 0 var(--nx-danger); }
#dashboard-root .orc-case.susp .orc-what b { text-decoration: line-through; color: var(--text-secondary); }
#dashboard-root .orc-flag {
  flex: none; align-self: center; padding: 2px 7px; border-radius: 5px;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.03em;
  color: var(--c, var(--text-muted)); background: color-mix(in srgb, var(--c, var(--text-muted)) 15%, transparent);
}
#dashboard-root .orc-flag.mat { --c: var(--nx-warning); }
#dashboard-root .orc-flag.live { --c: var(--accent-teal); }
#dashboard-root .orc-flag.susp, #dashboard-root .orc-flag.urg { --c: var(--nx-danger); }
#dashboard-root .ors-foot { margin-top: 0.6rem; font-size: 0.73rem; color: var(--text-muted); }

@media (max-width: 900px) {
  #dashboard-root .hoy-band { grid-template-columns: 1fr; }
}