/* ==========================================================================
   EIREN - DISEÑO ELEGANTE Y PREMIUM DE CIRUGÍA CARDIOVASCULAR
   ========================================================================== */

/* Fuentes servidas desde el propio servidor (antes Google Fonts): cada carga
   mandaba la IP del usuario a Google. Son las versiones variables de Google
   Fonts (un archivo cubre todos los pesos), licencia OFL en assets/fonts/.
   El navegador solo descarga latin-ext si la página usa algún carácter de
   ese rango. Si se sustituye un archivo, cambiarle el nombre: el servidor
   los sirve como inmutables en producción. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Premium Dark Console Palette */
  --bg-primary: #02050b;
  --bg-secondary: #17223a;
  --bg-card: #223150;
  --bg-card-hover: #283a5e;
  --bg-glass: rgba(23, 34, 58, 0.95);
  --bg-input: #0b1424;
  
  --border-color: rgba(148, 163, 184, 0.34);
  --border-highlight: rgba(56, 189, 248, 0.6);
  
  --text-primary: #f8fafc;
  --text-secondary: #b4c0d1;
  --text-muted: #93a2b7;
  
  /* Brand Accents */
  --accent-blue: #0284c7;
  --accent-cyan: #06b6d4;
  --accent-teal: #10b981;
  --accent-gradient: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);

  /* Opción marcada dentro de un selector segmentado (vistas del Cuadrante y de
     la cola, mini-segmentos del Parte, pestañas del panel de candidatos...).
     En oscuro no vale con elevar el fondo: #0f172a sobre #0b1329 no se
     distingue, así que la marca es un tinte cian con borde, el mismo lenguaje
     que el resto de estados "encendidos" de la app. */
  --seg-active-bg: color-mix(in srgb, var(--accent-cyan) 17%, var(--bg-secondary));
  --seg-active-border: color-mix(in srgb, var(--accent-cyan) 42%, transparent);
  
  /* Clinical Status Badges */
  --status-critical-bg: rgba(239, 68, 68, 0.18);
  --status-critical-text: #fca5a5;
  --status-critical-border: rgba(239, 68, 68, 0.4);
  
  --status-stable-bg: rgba(16, 185, 129, 0.18);
  --status-stable-text: #6ee7b7;
  --status-stable-border: rgba(16, 185, 129, 0.4);
  
  --status-warning-bg: rgba(245, 158, 11, 0.18);
  --status-warning-text: #fde047;
  --status-warning-border: rgba(245, 158, 11, 0.4);

  --status-info-bg: rgba(56, 189, 248, 0.18);
  --status-info-text: #7dd3fc;
  --status-info-border: rgba(56, 189, 248, 0.4);

  --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.55);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px rgba(6, 182, 212, 0.25);
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  --font-heading: 'Outfit', sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --transition-fast: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme Overrides */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-glass: rgba(255, 255, 255, 0.92);
  --bg-input: #f1f5f9;

  /* En claro la píldora blanca ya contrasta contra la pista; sólo se le marca
     el borde para que el resalte se lea igual de rotundo en los dos temas. */
  --seg-active-bg: var(--bg-secondary);
  --seg-active-border: color-mix(in srgb, var(--accent-blue) 28%, transparent);
  
  --border-color: #cbd5e1;
  --border-highlight: #0284c7;
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  
  --status-critical-bg: #fee2e2;
  --status-critical-text: #991b1b;
  --status-stable-bg: #dcfce7;
  --status-stable-text: #166534;
  --status-warning-bg: #fef3c7;
  --status-warning-text: #92400e;
  --status-info-bg: #e0f2fe;
  --status-info-text: #075985;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 15px rgba(2, 132, 199, 0.2);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Universal Minimalist Inset Scrollbars Across Entire App */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Light Theme Scrollbar Overrides */
[data-theme="light"] * {
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.45);
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Glassmorphism Panels */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.glass-header {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  z-index: 100;
}

/* Header & Navigation Bar */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  height: 60px;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.35rem; /* el logo y, a su lado, las flechas de volver y avanzar */
  flex: 0 0 auto;
  width: 230px;
  height: 56px;
}

.header-brand-logo {
  display: block;
  width: 100%;
  height: 54px;
  object-fit: contain;
  object-position: left center;
}

.login-brand-logo {
  display: block;
  width: min(100%, 390px);
  height: auto;
  margin: 0 auto 0.45rem;
  transform: translateX(-8px);
}

/* Nav Tabs */
.nav-tabs {
  display: flex;
  gap: 0.3rem;
  background: var(--bg-primary);
  padding: 0.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  /* Con 6 pestañas, el ancho mínimo del contenido ya no cabe en anchos de
     escritorio habituales (~1024-1350px). Sin min-width:0 un hijo flex no
     encoge por debajo de ese mínimo: desborda el header y, de ahí, #app
     entero (ver dashboard.js renderWeek). overflow-x:auto contiene el
     desbordamiento aquí, con scroll horizontal, en vez de dejarlo escapar. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  transition: var(--transition-fast);
  user-select: none;
}

.nav-tab-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--accent-cyan);
}

.nav-tab.active .nav-tab-icon {
  color: #ffffff;
}

/* Inline icons replacing former emoji glyphs throughout the app */
svg.icon-inline {
  vertical-align: -0.2em;
  flex-shrink: 0;
  color: var(--accent-cyan);
}

/* Sobre el degradado de los botones primarios el icono va del color del
   texto (blanco); en cian no se vería. */
.btn-primary svg.icon-inline,
.cuad-ibtn.primary svg.icon-inline,
.wses-btn.primary svg.icon-inline {
  color: inherit;
}

.nav-tab * {
  pointer-events: none;
}

.nav-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.nav-tab.active {
  background: var(--accent-gradient);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

/* User Profile Badge & Controls */
.user-profile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.btn-icon {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-icon:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* ── Campana de notificaciones ────────────────────────────────────────────── */
.notif-bell-btn { position: relative; }
.notif-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.notif-bell-badge-inline {
  position: static;
  margin-left: auto;
}

/* ── Cabecera de escritorio/tablet (≥481px) ───────────────────────────────
   Móvil (≤480px) conserva su barra inferior de iconos (mobile.css), así que
   todo el restyling va acotado a este rango para no pisarla.
   Estructura: logo | pestañas centradas | accesos rápidos · menú de usuario.
   Las pestañas conservan su estilo original (reglas .nav-tab de arriba).
   Logo y controles reparten el sobrante a partes iguales (flex:1 1 0) para
   que las pestañas queden centradas; si no cabe, las pestañas son las que
   encogen y hacen scroll (ver .nav-tabs). */
:root {
  --nav-active-text: var(--accent-cyan);
  --header-hover: rgba(255, 255, 255, 0.09);
  --header-menu-bg: #17223a;
}

[data-theme="light"] {
  --nav-active-text: var(--accent-blue);
  --header-hover: #f1f5f9;
  --header-menu-bg: #ffffff;
}

@media (min-width: 481px) {
  header {
    position: relative;
    gap: 1rem;
  }

  .logo-container {
    flex: 1 1 0;
    width: auto;
    height: 60px;
  }

  .header-brand-logo {
    width: 140px;
    height: 44px;
  }

  .user-profile {
    flex: 1 1 0;
    justify-content: flex-end;
    gap: 2px;
  }
}

/* ---- Volver y avanzar (historial de la sesión) ---- */
.nav-history {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.nav-history[hidden] {
  display: none;
}

.nav-history-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.nav-history-btn:hover:not(:disabled) {
  background: var(--header-hover);
  color: var(--accent-cyan);
}

/* Apagado, no escondido: la cabecera no debe bailar al quedarse sin pasos. */
.nav-history-btn:disabled {
  color: var(--text-muted);
  opacity: 0.4;
  cursor: default;
}

/* Portátil estrecho: la fila de pestañas ya va justa, así que se queda solo
   la flecha de volver (avanzar sigue en el teclado y en el navegador). */
@media (max-width: 1100px) {
  #nav-forward-btn {
    display: none;
  }
}

.nav-history-tip {
  position: fixed;
  z-index: 1200;
  max-width: 260px;
  padding: 0.35rem 0.6rem;
  background: var(--header-menu-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  color: var(--text-secondary);
  font-size: 0.75rem;
  pointer-events: none;
}

.nav-history-tip[hidden] {
  display: none;
}

.nav-history-tip b {
  color: var(--text-primary);
  font-weight: 600;
}

.nav-history-tip small {
  display: block;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.nav-history-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1000;
  min-width: 230px;
  padding: 6px;
  background: var(--header-menu-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.nav-history-menu[hidden] {
  display: none;
}

.nav-history-menu-title {
  padding: 6px 10px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-history-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.nav-history-menu-item:hover {
  background: var(--header-hover);
  color: var(--text-primary);
}

.header-icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
}

.header-icon-btn:hover {
  background: var(--header-hover);
  color: var(--text-primary);
}

.header-icon-btn .notif-bell-badge {
  top: 4px;
  right: 3px;
  min-width: 8px;
  height: 14px;
  line-height: 14px;
  font-size: 0.56rem;
  border-radius: 7px;
  box-shadow: 0 0 0 2px var(--bg-secondary);
}

.header-separator {
  width: 1px;
  height: 24px;
  margin: 0 0.5rem;
  background: var(--border-color);
  flex-shrink: 0;
}

.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 4px 8px 4px 4px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-fast);
}

.user-menu-trigger:hover,
.user-menu.open .user-menu-trigger {
  background: var(--header-hover);
}

.user-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--nav-active-text) 15%, transparent);
  color: var(--nav-active-text);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.user-menu-who,
.user-menu-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  min-width: 0;
}

.user-menu-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.user-menu-role {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.user-menu-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.user-menu.open .user-menu-chevron {
  transform: rotate(180deg);
}

.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  min-width: 240px;
  padding: 6px;
  background: var(--header-menu-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.user-menu.open .user-menu-dropdown {
  display: block;
}

.user-menu-head {
  gap: 2px;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

.user-menu-head .user-menu-name {
  font-size: 0.85rem;
}

.user-menu-head .user-menu-role {
  font-size: 0.75rem;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.user-menu-item svg {
  flex-shrink: 0;
}

.user-menu-item:hover {
  background: var(--header-hover);
  color: var(--text-primary);
}

.user-menu-item-danger,
.user-menu-item-danger:hover {
  color: #dc2626;
}

.user-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--border-color);
}

#user-menu-undo[hidden],
.user-menu-undo[hidden] {
  display: none;
}

.user-menu-undo svg {
  color: #06b6d4;
  align-self: flex-start;
  margin-top: 2px;
}

.user-menu-undo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-menu-undo-text small {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: normal;
  max-width: 220px;
}

#user-menu-undo-msg {
  padding: 2px 10px 6px 36px;
  max-width: 260px;
}

/* Tablet / portátil estrecho: el nombre y rol se quedan solo en el menú. */
@media (min-width: 481px) and (max-width: 1100px) {
  .user-menu-who {
    display: none;
  }
}

/* ── Campana: tarjeta por aviso, con tono por severidad y agrupación ─────── */
/* El tono lo decide el catálogo del servidor y llega en cada item; aquí solo
   se traduce a color. Los cuatro valores existen en ambos temas. */
:root {
  --notif-info: #22d3ee;
  --notif-ok: #34d399;
  --notif-warn: #fbbf24;
  --notif-danger: #f87171;
}
[data-theme="light"] {
  --notif-info: #0891b2;
  --notif-ok: #059669;
  --notif-warn: #b45309;
  --notif-danger: #dc2626;
}

.notif-filters { display: flex; gap: 0.4rem; margin-bottom: 0.2rem; }
.notif-chip {
  font-family: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--border-color); background: transparent;
  color: var(--text-secondary); cursor: pointer; transition: var(--transition-fast);
}
.notif-chip:hover { border-color: var(--accent-cyan); color: var(--text-primary); }
.notif-chip.on {
  background: color-mix(in srgb, var(--accent-cyan) 14%, transparent);
  border-color: var(--border-highlight); color: var(--accent-cyan);
}
.notif-chip b { font-weight: 700; margin-left: 0.25rem; }

.notif-section-label {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); padding: 0.75rem 0.25rem 0.45rem;
}

.notif-list, .nx-list { display: flex; flex-direction: column; gap: 0.45rem; }

.nx {
  --nx-tone: var(--notif-info);
  position: relative;
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 0.7rem; align-items: start;
  width: 100%; text-align: left;
  padding: 0.68rem 0.75rem 0.68rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.nx::before {
  content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--nx-tone);
}
.nx:hover {
  background: var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--nx-tone) 45%, transparent);
}
.nx:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.nx.read { opacity: 0.62; }
.nx.read::before { display: none; }

.nx-icon {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  color: var(--nx-tone);
  background: color-mix(in srgb, var(--nx-tone) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--nx-tone) 26%, transparent);
}
.nx-icon svg { width: 16px; height: 16px; }
.nx.read .nx-icon { filter: saturate(0.25); }

.nx-main { min-width: 0; display: flex; flex-direction: column; }
.nx-title { font-size: 0.83rem; font-weight: 600; line-height: 1.35; }
.nx-body { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.1rem; line-height: 1.45; }
.nx-meta {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  margin-top: 0.4rem; font-size: 0.7rem; color: var(--text-muted);
}
.nx-tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nx-tone);
  background: color-mix(in srgb, var(--nx-tone) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--nx-tone) 26%, transparent);
  padding: 0.05rem 0.4rem; border-radius: 4px;
}

.nx-right { display: flex; align-items: center; gap: 0.45rem; padding-top: 0.2rem; }
.nx-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--nx-tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-tone) 18%, transparent);
}
.nx-go { display: inline-grid; place-items: center; color: var(--nx-tone); opacity: 0.35; transition: var(--transition-fast); }
.nx-go svg { width: 14px; height: 14px; }
.nx:hover .nx-go { opacity: 0.8; }
.nx-count {
  font-size: 0.7rem; font-weight: 700; color: var(--nx-tone); font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--nx-tone) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--nx-tone) 26%, transparent);
  padding: 0.05rem 0.45rem; border-radius: 999px;
}
.nx-group.open .nx-chevron { transform: rotate(180deg); opacity: 0.8; }

.nx-children {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-top: 0.55rem; padding-left: 0.65rem;
  border-left: 1px dashed color-mix(in srgb, var(--nx-tone) 38%, transparent);
}
.nx-child {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: var(--text-secondary); cursor: pointer;
}
.nx-child:hover .nx-child-text { color: var(--text-primary); }
.nx-child.read { opacity: 0.6; }
.nx-child i { width: 5px; height: 5px; border-radius: 50%; background: var(--nx-tone); flex: none; }
.nx-child-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.nx-child time { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }
.nx-childfoot {
  align-self: flex-start; font-family: inherit; font-size: 0.7rem; font-weight: 600;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--accent-cyan);
}
.nx-childfoot:hover { text-decoration: underline; }

.nx-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.45rem; }
.nx-act {
  font-family: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-color); background: transparent;
  color: var(--text-secondary); cursor: pointer; transition: var(--transition-fast);
}
.nx-act:hover { border-color: var(--nx-tone); color: var(--nx-tone); }
.nx-act-danger {
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444 40%, transparent);
  background: color-mix(in srgb, #ef4444 10%, transparent);
}
.nx-act-danger:hover { background: color-mix(in srgb, #ef4444 20%, transparent); border-color: #ef4444; color: #ef4444; }

/* La confirmación de rechazar vive dentro de la propia tarjeta: nada de
   diálogos del navegador. */
.nx-confirm {
  margin-top: 0.45rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm);
  font-size: 0.74rem; line-height: 1.45; color: var(--text-primary);
  background: color-mix(in srgb, #ef4444 10%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}
.nx-confirm-actions { display: flex; gap: 0.35rem; margin-top: 0.45rem; }

/* Aviso plegable de la campana: plegado es una línea (icono, título, hora)
   y al pulsarla se despliega debajo la explicación con sus botones. La
   tarjeta pierde su relleno: lo lleva la línea, que es lo que se pulsa.
   Inicio usa .nx sin .nx-fold y no cambia. */
.nx.nx-fold { display: block; padding: 0; }
.nx.nx-fold::before { top: 0.45rem; bottom: 0.45rem; }
.nx.nx-fold.open::before { bottom: auto; height: 1.5rem; }
.nx.nx-fold.open { opacity: 1; background: var(--bg-card-hover); border-color: color-mix(in srgb, var(--nx-tone) 40%, transparent); }
.nx-line {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 0.6rem; align-items: center;
  padding: 0.45rem 0.65rem 0.45rem 0.75rem;
}
.nx-line:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; border-radius: var(--radius-md); }
.nx-fold .nx-icon { width: 26px; height: 26px; border-radius: 7px; }
.nx-fold .nx-icon svg { width: 14px; height: 14px; }
.nx-fold .nx-title { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-fold.read .nx-title { font-weight: 500; }
.nx-fold.open .nx-chevron { transform: rotate(180deg); opacity: 0.8; }
.nx-side { display: flex; align-items: center; gap: 0.4rem; }
.nx-side time, .nx-fold .nx-child time { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-decide {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: var(--nx-tone); padding: 0.05rem 0.35rem; border-radius: 4px;
  background: color-mix(in srgb, var(--nx-tone) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--nx-tone) 30%, transparent);
}
.nx-detail { padding: 0 0.75rem 0.65rem calc(0.75rem + 26px + 0.6rem); cursor: default; }
.nx-detail .nx-body { margin: 0; }
.nx-detail .nx-meta { margin-top: 0.45rem; }
.nx-detail .nx-children { margin-top: 0.1rem; }
.nx-detail .nx-actions { align-items: center; margin-top: 0.55rem; }
.nx-detail .nx-child .nx-go { opacity: 0.35; }
.nx-detail .nx-child:hover .nx-go { opacity: 0.9; }
.nx-goto {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto;
  font-family: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--nx-tone);
  background: color-mix(in srgb, var(--nx-tone) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nx-tone) 35%, transparent);
  transition: var(--transition-fast);
}
.nx-goto svg { width: 13px; height: 13px; }
.nx-goto:hover { background: color-mix(in srgb, var(--nx-tone) 20%, transparent); border-color: var(--nx-tone); }

/* ── Buscador de pacientes (cajón lateral derecho) ───────────────────────── */
.patient-search-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2600;
}
.patient-search-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.patient-search-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 380px;
  max-width: 90vw;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  /* La sombra solo con el cajón abierto: cerrado queda fuera de pantalla con
     translateX(100%), pero una sombra de 40px se colaba por el borde derecho
     de la app como una franja sombreada permanente. */
  box-shadow: none;
  transform: translateX(100%);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
  z-index: 2601;
  display: flex;
  flex-direction: column;
}
.patient-search-drawer.open {
  transform: translateX(0);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
}

.patient-search-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border-color);
}
.patient-search-drawer-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-primary);
}

.patient-search-drawer-body {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}
.patient-search-drawer-body .input-field {
  width: 100%;
}

.patient-search-results {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.patient-search-hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 0.5rem 0.15rem;
}
.patient-search-result {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.patient-search-result:hover {
  border-color: var(--accent-cyan);
}
.patient-search-result-name {
  font-size: 0.86rem;
  font-weight: 600;
}
.patient-search-result-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .patient-search-drawer { width: 100%; max-width: 100vw; }
}

/* Main Container */
main {
  flex: 1;
  /* Márgenes laterales mínimos: en portátil/iPad (~1024px) es lo que permite
     que quepan las 3 columnas del Censo en vez de 2. */
  padding: 0.5rem;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  height: calc(100vh - 60px);
  overflow: hidden;
}

/* Tab Content Visibility */
.tab-content {
  display: none;
  height: 100%;
}

.tab-content.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Buttons & Inputs */
.btn-primary {
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.btn-primary.drag-over,
.btn-secondary.drag-over {
  outline: 2px dashed var(--accent-cyan);
  outline-offset: 3px;
}

.btn-secondary {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.btn-secondary:hover {
  border-color: var(--border-highlight);
  background: var(--bg-card-hover);
}

.input-field {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  outline: none;
  transition: var(--transition-fast);
}

.input-field:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

/* Status Badges */
.badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.badge-critical { background: var(--status-critical-bg); color: var(--status-critical-text); border: 1px solid var(--status-critical-border); }
.badge-stable { background: var(--status-stable-bg); color: var(--status-stable-text); border: 1px solid var(--status-stable-border); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning-text); border: 1px solid var(--status-warning-border); }
.badge-info { background: var(--status-info-bg); color: var(--status-info-text); border: 1px solid var(--status-info-border); }
.badge-readonly { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.3); }
.badge-uci { background: rgba(249, 115, 22, 0.25); color: #fdba74; border: 1px solid #f97316; font-weight: 800; }
.badge-urp { background: rgba(168, 85, 247, 0.25); color: #c084fc; border: 1px solid #a855f7; font-weight: 800; }

/* Icon Dropdown (replaces native <select> where options need SVG icons, e.g. Destino Postoperatorio) */
.icon-dropdown-panel {
  position: fixed; min-width: 170px; z-index: 2500;
  background: var(--bg-glass); backdrop-filter: blur(12px);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 0.35rem; display: none;
  animation: popoverFadeIn 0.15s ease-out;
}
.icon-dropdown-panel.open { display: block; }

/* Color-only swatch pickers (e.g. Color de Usuario) — squares, no text/emoji */
.color-swatch-trigger {
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.4); cursor: pointer; padding: 0;
}
.color-swatch-trigger:hover { border-color: var(--border-highlight); }
.color-swatch-opt {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer; padding: 0; transition: transform 0.1s;
}
.color-swatch-opt:hover { transform: scale(1.12); }
.color-swatch-opt[aria-selected="true"] { box-shadow: 0 0 0 2px var(--bg-glass), 0 0 0 4px var(--accent-cyan); }

/* High-Contrast Crisp Turn Badge (1º, 2º, 3º) */
.turn-badge {
  background: #0284c7;
  color: #ffffff;
  border: 1px solid #38bdf8;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: var(--transition-fast);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  white-space: nowrap;
}

.turn-badge:hover {
  background: #0369a1;
  transform: scale(1.06);
}

/* Card Action Buttons (Hidden by default, smooth fade in on card hover) */
.btn-card-remove {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  padding: 0 0.2rem !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out, transform 0.15s ease-in-out !important;
}

.patient-card-compact:hover .btn-card-remove,
.patient-card:hover .btn-card-remove,
.cuadrante-cell:hover .btn-card-remove,
.roster-card:hover .btn-card-remove,
.roster-card:hover .roster-card-edit,
div:hover > .btn-card-remove,
.top-line:hover .btn-card-remove {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Cuadrante de Personal: tarjeta de asignación con el mismo lenguaje
   visual que la tarjeta de la vista Timeline del Parte Quirúrgico
   (.timeline-case-card) -- barra de color a la izquierda, dos líneas: nombre y
   horario del turno. --rc-color lo fija el JS por tarjeta. */
.roster-card {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--bg-card-hover) 0%, var(--bg-card) 100%);
  border: 1px solid var(--rc-color, var(--accent-cyan));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  cursor: grab;
  user-select: none;
}
.roster-card::before {
  content: '';
  width: 4px;
  flex-shrink: 0;
  background: var(--rc-color, var(--accent-cyan));
}
.roster-card-body {
  flex: 1;
  min-width: 0;
  padding: 0.24rem 0.42rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.roster-card-l1 {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-card-l2 {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-card-time {
  font-family: var(--font-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rc-color, var(--accent-cyan));
}
.roster-card.is-dup {
  border-color: #d97706;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.3) inset, 0 1px 3px rgba(0, 0, 0, 0.18);
}
.roster-card.readonly-card {
  cursor: default;
}
.roster-card-edit {
  flex-shrink: 0;
  align-self: center;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 0.15rem;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.roster-card-edit:hover {
  color: var(--accent-cyan);
}
.roster-card .btn-card-remove {
  flex-shrink: 0;
  align-self: center;
}

/* Cuadrante -- Vista por Horario: línea de tiempo de un día. */
.cuad-tl { --cuad-tl-head-w: 150px; font-size: 0.8rem; }
.cuad-tl-toolbar {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.4rem 0.2rem 0.7rem;
}
.cuad-tl-days { display: flex; gap: 0.25rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 999px; padding: 0.2rem; }
.cuad-tl-legend { font-size: 0.68rem; color: var(--text-muted); flex: 1; min-width: 200px; }

.cuad-tl-scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.cuad-tl-grid { position: relative; min-width: 860px; }
.cuad-tl-ruler {
  display: grid; grid-template-columns: var(--cuad-tl-head-w) 1fr;
  position: sticky; top: 0; z-index: 4; background: var(--bg-secondary);
  border-bottom: 2px solid var(--accent-cyan);
}
.cuad-tl-ruler-head { padding: 0.4rem 0.6rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.cuad-tl-ticks { position: relative; height: 22px; }
.cuad-tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border-color); }
.cuad-tl-tick span { position: absolute; top: 4px; left: 3px; font-size: 0.62rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.cuad-tl-lane { display: grid; grid-template-columns: var(--cuad-tl-head-w) 1fr; border-bottom: 1px solid var(--border-color); }
.cuad-tl-lane-head { padding: 0 0.6rem; display: flex; flex-direction: column; justify-content: center; gap: 1px; border-right: 2px solid var(--border-color); }
.cuad-tl-lane-head b { font-family: var(--font-heading); font-size: 0.76rem; font-weight: 700; color: var(--text-primary); }
.cuad-tl-lane-head small { color: var(--text-muted); font-size: 0.62rem; }
.cuad-tl-lane.is-unplaced .cuad-tl-lane-head b { color: #d97706; }
.cuad-tl-track {
  position: relative; height: 48px;
  background-image: repeating-linear-gradient(to right, transparent, transparent calc(100% / 17 - 1px), var(--border-color) calc(100% / 17 - 1px), var(--border-color) calc(100% / 17));
}
.cuad-tl-lane.is-unplaced .cuad-tl-track { background-color: rgba(217, 119, 6, 0.09); }
/* Separador entre las 2 semanas de Personal -> Semana (14 filas en total) */
.cuad-tl-lane.week-sep { border-top: 2px solid var(--border-color); }
.cuad-tl-track.drag-over { background-color: color-mix(in srgb, var(--accent-cyan) 16%, transparent); box-shadow: inset 0 0 0 2px var(--accent-cyan); }
.cuad-tl-empty { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; font-weight: 700; color: #d97706; }

.cuad-tl-block {
  position: absolute; top: 5px; bottom: 5px; display: flex; align-items: stretch; overflow: hidden;
  border-radius: 6px; touch-action: none; cursor: grab; user-select: none;
  background: linear-gradient(180deg, var(--bg-card-hover) 0%, var(--bg-card) 100%);
  border: 1px solid var(--rc-color, var(--accent-cyan));
  border-left: 3px solid var(--rc-color, var(--accent-cyan));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.cuad-tl-block.readonly { cursor: default; }
.cuad-tl-block.dragging { z-index: 6; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); cursor: grabbing; }
.cuad-tl-block-body { flex: 1; min-width: 0; padding: 0 0.35rem; display: flex; flex-direction: column; justify-content: center; gap: 1px; overflow: hidden; }
.cuad-tl-block-body b { font-size: 0.68rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuad-tl-block-time { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; color: var(--rc-color, var(--accent-cyan)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuad-tl-grip { flex-shrink: 0; width: 9px; cursor: ew-resize; position: relative; }
.cuad-tl-grip::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 14px; border-radius: 2px; background: var(--text-secondary); opacity: 0.4; }
.cuad-tl-grip:hover::after { opacity: 0.9; background: var(--text-primary); }
.cuad-tl-block-remove { position: absolute; top: 1px; right: 1px; z-index: 2; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); cursor: pointer; padding: 0; opacity: 0; pointer-events: none; transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease, border-color 0.12s ease; }
.cuad-tl-block:hover .cuad-tl-block-remove { opacity: 1; pointer-events: auto; }
.cuad-tl-block-remove:hover { background: #ef4444; border-color: #ef4444; color: #fff; }

.cuad-tl-now { position: absolute; top: 22px; bottom: 0; width: 2px; background: #ef4444; z-index: 5; box-shadow: 0 0 8px rgba(239, 68, 68, 0.55); pointer-events: none; }
.cuad-tl-now::before { content: 'AHORA ' attr(data-t); position: absolute; top: -1px; left: 3px; font-size: 0.58rem; font-weight: 800; color: #fff; background: #ef4444; padding: 0 4px; border-radius: 3px; white-space: nowrap; }

/* Cuadrante -- Vista Guardias: calendario mensual (finde y festivos incluidos).
   Réplica del mockup aprobado, adaptada a los tokens de EIREN. */
/* .gd-tokens: las mismas variables para la barra única del Cuadrante, donde
   ahora viven el menú de exportar, Google Calendar y el panel de Cambios. */
.gd-view,
.gd-tokens {
  --gd-panel: var(--bg-card);
  --gd-sunken: var(--bg-input);
  --gd-elevated: var(--bg-secondary);            /* opaco: fondo de popovers */
  --gd-line: var(--border-color);
  --gd-line-strong: color-mix(in srgb, var(--text-muted) 45%, transparent);
  --gd-accent: var(--accent-cyan);
  --gd-accent-soft: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
  --gd-accent-line: color-mix(in srgb, var(--accent-cyan) 55%, transparent);
  --gd-weekend: color-mix(in srgb, var(--text-muted) 14%, transparent);
  --gd-warn: #b45309;
  --gd-warn-soft: color-mix(in srgb, #d97706 16%, transparent);
  --gd-ok: var(--accent-teal);
  --gd-ok-soft: color-mix(in srgb, var(--accent-teal) 14%, transparent);
  --gd-g1: #dc2626;
  --gd-g2: #d97706;
  --gd-festivo: #7c3aed;
  --gd-festivo-soft: color-mix(in srgb, #7c3aed 14%, transparent);
  --gd-gcal: #4285f4;
  --gd-radius-s: var(--radius-sm);
  --gd-radius-m: var(--radius-md);
  --gd-radius-l: 14px;
  --gd-shadow-pop: 0 12px 38px rgba(2, 6, 23, 0.32);
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
  font-size: 13px;
}
:root[data-theme="dark"] .gd-view,
:root[data-theme="dark"] .gd-tokens,
:root:not([data-theme="light"]) .gd-view,
:root:not([data-theme="light"]) .gd-tokens { --gd-shadow-pop: 0 14px 44px rgba(0, 0, 0, 0.62); }

.gd-monthnav { display: flex; align-items: center; gap: 2px; background: var(--gd-sunken); border: 1px solid var(--gd-line); border-radius: 999px; padding: 3px; }
.gd-monthnav button { border: 0; background: transparent; color: var(--text-secondary); width: 28px; height: 28px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; }
.gd-monthnav button:hover { background: var(--gd-elevated); color: var(--text-primary); }
.gd-monthnav .label { padding: 0 14px; font-family: var(--font-heading); font-weight: 700; font-size: 13px; white-space: nowrap; }
/* El color lo fija el estado real de la suscripción (--gd-feed), sellado por
   ical_feeds.last_fetched_at. Por defecto, gris (desconocido / comprobando). */

.gd-menu-wrap { position: relative; }
.gd-menu-backdrop { position: fixed; inset: 0; z-index: 39; }
.gd-menu-backdrop[hidden], .gd-menu[hidden] { display: none; }
.gd-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 264px; background: var(--gd-elevated); border: 1px solid var(--gd-line-strong); border-radius: var(--gd-radius-m); box-shadow: var(--gd-shadow-pop); padding: 5px; text-align: left; }
.gd-menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; color: var(--text-primary); font-family: inherit; font-size: 12px; padding: 7px 9px; border-radius: var(--gd-radius-s); cursor: pointer; text-align: left; }
.gd-menu button svg { color: var(--text-muted); flex: none; }
.gd-menu button:hover { background: var(--gd-accent-soft); }
.gd-menu button:hover svg { color: var(--gd-accent); }
.gd-menu .sep { height: 1px; background: var(--gd-line); margin: 5px 2px; }
/* Opción de menú con su consecuencia debajo: los menús de impresión dicen
   cuántas hojas salen, que es el dato que frena mandar 38 sin querer. */
.gd-mi { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.gd-mi b { font-weight: 700; }
.gd-mi > span { font-size: 10.5px; color: var(--text-muted); line-height: 1.35; }
button:hover > .gd-mi > span { color: var(--text-secondary); }
.gd-mi > span.is-heavy { color: var(--bad); }
/* En la carpeta clínica el menú es .pp-menu y sus botones no son flex por
   defecto: sin esto el icono y el texto se apilan. */
.pp-menu button:has(> .gd-mi) { display: flex; align-items: flex-start; gap: 9px; }
.gd-menu .k { font-size: 9.5px; color: var(--text-muted); padding: 6px 9px 3px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; display: flex; align-items: center; gap: 4px; }
.gd-menu .mnote { font-size: 10px; color: var(--text-muted); line-height: 1.5; padding: 2px 9px 6px; }
.gd-menu .mnote b { color: var(--text-secondary); }

/* minmax(0, 1fr) y no 1fr: el mínimo "auto" de 1fr deja que un nombre largo
   (p. ej. una localización en Personal -> Mes) ensanche el calendario y saque
   el recuento de la pantalla. Así las tres vistas miden lo mismo. */
.gd-board { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 1160px) { .gd-board { grid-template-columns: minmax(0, 1fr); } }
.gd-panel { background: var(--gd-panel); border: 1px solid var(--gd-line); border-radius: var(--gd-radius-l); box-shadow: var(--shadow-lg); }

.gd-hintbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 11px; color: var(--text-secondary); border-bottom: 1px solid var(--gd-line); }
.gd-hintbar svg { color: var(--gd-accent); flex: none; }
.gd-hintbar b { color: var(--text-primary); font-weight: 700; }

.gd-calwrap { position: relative; }
.gd-cal-head { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--gd-line-strong); }
.gd-cal-head > div { padding: 8px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.gd-cal-head > div.we { color: var(--text-secondary); }
.gd-cal-grid { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); border-radius: 0 0 var(--gd-radius-l) var(--gd-radius-l); overflow: hidden; }

.gd-weekbtn { border-right: 1px solid var(--gd-line); border-bottom: 1px solid var(--gd-line); background: var(--gd-sunken); display: grid; place-items: center; }
.gd-weekbtn button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--gd-line-strong); background: var(--gd-panel); color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.gd-weekbtn button:hover { color: var(--gd-accent); border-color: var(--gd-accent); }
.gd-weekbtn button.on { background: var(--gd-accent); border-color: var(--gd-accent); color: #fff; }

.gd-day { border-right: 1px solid var(--gd-line); border-bottom: 1px solid var(--gd-line); min-height: 94px; padding: 6px 7px 8px; display: flex; flex-direction: column; gap: 5px; position: relative; }
.gd-day:nth-child(8n) { border-right: 0; }
.gd-day.we { background: var(--gd-weekend); }
.gd-day.festivo { background: var(--gd-festivo-soft); }
.gd-day.out { background: var(--gd-sunken); }
.gd-day.out .gd-dnum { color: var(--text-muted); opacity: 0.5; }
.gd-day.pick { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Se selecciona arrastrando sobre los días: sin selección de texto ni menú de pulsación larga. */
.gd-cal-grid { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cuad-day-dragging, .cuad-day-dragging * { cursor: cell !important; -webkit-user-select: none !important; user-select: none !important; }
.gd-day.pick:hover { background: var(--gd-accent-soft); }
.gd-day.sel { background: var(--gd-accent-soft); box-shadow: inset 0 0 0 2px var(--gd-accent-line); z-index: 1; }
.gd-day.sel.we { background: color-mix(in srgb, var(--gd-accent) 16%, var(--gd-weekend)); }
.gd-day.sel-rep { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gd-accent) 42%, transparent); }
.gd-dnum { font-family: var(--font-heading); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; }
.gd-day.today .gd-dnum > span.n { color: #fff; background: var(--gd-accent); width: 21px; height: 21px; border-radius: 999px; display: inline-grid; place-items: center; }
.gd-festivo-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gd-festivo); border: 1px solid color-mix(in srgb, var(--gd-festivo) 45%, transparent); border-radius: 999px; padding: 0 5px; white-space: nowrap; }

.gd-chip { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 5px 3px 4px; border-radius: 6px; font-size: 11px; line-height: 1.2; border-left: 3px solid var(--gc); background: color-mix(in srgb, var(--gc) 12%, var(--gd-panel)); }
.gd-chip .lbl { font-family: var(--font-heading); font-weight: 800; font-size: 8.5px; color: var(--gc); flex: none; }
.gd-chip .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-chip.empty { border-left-color: color-mix(in srgb, var(--gc) 40%, transparent); background: transparent; color: var(--text-muted); font-style: italic; }
.gd-chip .gd-av { width: 17px; height: 17px; border-radius: 999px; display: inline-grid; place-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 8px; color: #fff; flex: none; background: var(--ac, var(--gd-accent)); }

/* Calendario de Ausencias: 1-2 personas/día = .gd-chip a ancho completo (una
   por línea, igual que guardias); 3+ = .ga-dense, media anchura, 2 por línea,
   tantas filas como haga falta (nunca se trunca). */
.ga-chips { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; }
.ga-chips.ga-dense { flex-direction: row; flex-wrap: wrap; gap: 3px 4px; }
.ga-chips.ga-dense .gd-chip { flex: 0 0 calc(50% - 2px); min-width: 0; padding: 2px 4px 2px 3px; font-size: 10px; gap: 4px; }
.ga-chips.ga-dense .gd-chip .lbl { font-size: 7.5px; }
.ga-chips.ga-dense .gd-chip .gd-av { width: 14px; height: 14px; font-size: 7px; }
/* Salientes (130). En el calendario de Guardias no se pintan: van dos
   contadores en la esquina del día -- rosa los diferidos, gris los de su
   día -- que abren un menú con las pastillas apiladas y, al pulsar una, el
   calendario (clases .sdp-* de datepicker.css) para diferirla. */
.gd-dhead { display: flex; align-items: center; gap: 4px; min-width: 0; }
.gd-dhead .gd-dnum { margin-right: auto; min-width: 0; }
.gd-count {
  --c: #64748b;
  display: inline-flex; align-items: center; gap: 3px; flex: none; height: 18px; min-width: 18px; padding: 0 5px;
  border: 0; border-radius: 999px; cursor: pointer; background: var(--c); color: #fff; line-height: 1;
  font-family: var(--font-heading); font-size: 10px; font-weight: 800;
}
.gd-count svg { width: 10px; height: 10px; }
.gd-count:hover { filter: brightness(1.15); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }
.gd-count.dif { --c: #db2777; }
.gd-cpop {
  position: fixed; z-index: 1200; width: 272px; max-width: calc(100vw - 20px);
  background: var(--gd-elevated); border: 1px solid var(--gd-line-strong); border-radius: var(--gd-radius-m);
  box-shadow: var(--gd-shadow-pop); padding: 10px 11px; display: flex; flex-direction: column; gap: 6px;
}
.gd-cpop .h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 12px; }
.gd-cpop .h small { font-family: var(--font-sans); font-weight: 600; font-size: 10.5px; color: var(--text-muted); }
.gd-cpop .gd-chip { width: 100%; border: 0; border-left: 3px solid var(--gc); text-align: left; font: inherit; font-size: 11px; color: var(--text-primary); }
.gd-cpop button.gd-chip[data-click] { cursor: pointer; }
.gd-cpop .gd-chip:hover, .gd-cpop .gd-chip.open { background: color-mix(in srgb, var(--gc) 24%, var(--gd-panel)); }
.gd-cpop .gd-chip .why { margin-left: auto; font-size: 9.5px; color: var(--text-muted); white-space: nowrap; }
.gd-cpop .dfr { border: 1px dashed var(--gd-line-strong); border-radius: var(--gd-radius-s); padding: 7px; background: var(--gd-sunken); }
.gd-cpop .dfr .t { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.gd-cpop .dfr .back {
  width: 100%; margin-top: 5px; border: 1px solid var(--gd-line-strong); background: var(--gd-panel); color: var(--text-primary);
  border-radius: 7px; padding: 4px 2px; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer;
}
.gd-cpop .dfr .back:hover { border-color: var(--gd-accent); color: var(--gd-accent); }
.sal-sdp .sdp-head { margin-bottom: 0.2rem; }
.sal-sdp .sdp-title { font-size: 0.82rem; padding: 0.2rem 0.3rem; }
.sal-sdp .sdp-nav { width: 26px; height: 26px; }
.sal-sdp .sdp-dow { height: 20px; }
.sal-sdp .sdp-day { height: 28px; font-size: 0.74rem; border-radius: 8px; }
.sal-sdp .sdp-day.edge { background: transparent; box-shadow: inset 0 0 0 1.5px #db2777; }
.saliente-err { margin: 0.45rem 0 0; font-size: 0.72rem; color: #ef4444; }
/* Tarjeta del saliente en Localizaciones y Profesionales; pulsable. */
.roster-card.cuad-card.saliente-card { cursor: pointer; }
.roster-card.cuad-card.saliente-card.is-deferred { border-style: dashed; }
.cuad-cell .saliente-card + .roster-card { margin-top: 0; }

/* Editor de guardias: un desplegable propio por guardia (el <select> no
   deja pintar la etiqueta de saliente ni bloquear una opción con motivo). */
.gd-editor .gd-fld label .md { margin-left: 4px; font-weight: 800; letter-spacing: 0; color: var(--gc); }
.gd-editor .gd-bsel { position: relative; }
.gd-editor .gd-bsel-btn {
  width: 100%; display: flex; align-items: center; gap: 6px; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 12px; padding: 5px 7px; border-radius: var(--gd-radius-s);
  border: 1px solid var(--gd-line-strong); border-left: 3px solid var(--gc); background: var(--gd-panel); color: var(--text-primary);
}
.gd-editor .gd-bsel-btn .v { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-editor .gd-bsel-btn .v.muted { color: var(--text-muted); font-style: italic; }
.gd-editor .gd-bsel-btn svg { flex: none; color: var(--text-muted); }
.gd-bsel-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 5; max-height: 280px; overflow: auto;
  background: var(--gd-elevated); border: 1px solid var(--gd-line-strong); border-radius: var(--gd-radius-s);
  box-shadow: var(--gd-shadow-pop); padding: 4px;
}
.gd-bsel-list .opt {
  width: 100%; display: flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer;
  color: var(--text-primary); font-family: inherit; font-size: 11.5px; text-align: left; padding: 5px 6px; border-radius: 6px;
}
.gd-bsel-list .opt:hover:not([disabled]) { background: var(--gd-accent-soft); }
.gd-bsel-list .opt.on { background: var(--gd-accent-soft); font-weight: 700; }
.gd-bsel-list .opt[disabled] { cursor: not-allowed; color: var(--text-muted); }
.gd-bsel-list .opt[disabled] .gd-av { opacity: 0.45; }
.gd-bsel-list .opt .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-bsel-list .opt .nm.muted { color: var(--text-muted); font-style: italic; }
.gd-bsel-list .sep { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); padding: 6px 6px 3px; }
.gd-tag { flex: none; font-size: 9px; font-weight: 800; border-radius: 999px; padding: 1px 6px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.gd-which { display: flex; flex-wrap: wrap; gap: 4px; }
.gd-which button {
  border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); background: var(--gd-panel); color: var(--text-muted);
  border-radius: 999px; padding: 2px 9px; font-family: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer;
}
.gd-which button.on { background: color-mix(in srgb, var(--gc) 18%, var(--gd-panel)); color: var(--gc); border-color: var(--gc); }

/* editor emergente anclado a la selección */
.gd-editor { position: absolute; z-index: 30; width: 250px; background: var(--gd-elevated); border: 1px solid var(--gd-line-strong); border-radius: var(--gd-radius-m); box-shadow: var(--gd-shadow-pop); padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
.gd-editor[hidden] { display: none; }
.gd-editor::after { content: ""; position: absolute; width: 10px; height: 10px; background: var(--gd-elevated); border: 1px solid var(--gd-line-strong); transform: rotate(45deg); }
.gd-editor[data-side="right"]::after { left: -6px; top: 22px; border-right: 0; border-bottom: 0; }
.gd-editor[data-side="left"]::after { right: -6px; top: 22px; border-left: 0; border-top: 0; }
.gd-editor[data-side="bottom"]::after { top: -6px; left: 26px; border-right: 0; border-bottom: 0; }
.gd-editor .ehead { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; }
.gd-editor .ehead .cnt { background: var(--gd-accent); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 10.5px; }
.gd-editor .ehead .x { margin-left: auto; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.gd-editor .esub { font-size: 10.5px; color: var(--text-secondary); margin-top: -5px; }
.gd-editor .fld { display: flex; flex-direction: column; gap: 3px; }
.gd-editor label { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.gd-editor select, .gd-editor input { font-family: inherit; font-size: 12px; padding: 5px 7px; border-radius: var(--gd-radius-s); border: 1px solid var(--gd-line-strong); background: var(--gd-panel); color: var(--text-primary); width: 100%; }
.gd-editor .fld.g1 select { border-left: 3px solid var(--gd-g1); }
.gd-editor .grp2 { display: flex; gap: 6px; }
.gd-editor .grp2 .fld { flex: 1 1 0; min-width: 0; }
.gd-editor .blocknote { font-size: 10px; color: var(--text-muted); line-height: 1.45; margin-top: -3px; }
.gd-editor .blocknote b { color: var(--text-secondary); }
.gd-editor .cad { border: 1px dashed var(--gd-line-strong); border-radius: var(--gd-radius-s); background: var(--gd-sunken); padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.gd-editor .cad .top { display: flex; align-items: center; gap: 6px; font-weight: 700; font-family: var(--font-heading); font-size: 11.5px; text-transform: none; letter-spacing: 0; color: var(--text-primary); }
.gd-editor .cad .top input { width: auto; }
.gd-editor .cad .grp { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-editor .cad .grp .fld { flex: 1; min-width: 0; }
.gd-editor .cad .grp .fld:nth-child(3) { flex: 1 1 100%; }
.gd-editor .cad input[type="number"] { text-align: center; }
.gd-editor .cad .prev { font-size: 10px; color: var(--text-secondary); line-height: 1.45; }
.gd-editor .cad .prev b { color: var(--gd-accent); }
.gd-editor .conflict { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; background: var(--gd-warn-soft); border: 1px solid color-mix(in srgb, var(--gd-warn) 40%, transparent); border-radius: var(--gd-radius-s); padding: 6px 8px; color: var(--gd-warn); }
.gd-editor .conflict.err { background: color-mix(in srgb, #ef4444 12%, transparent); border-color: color-mix(in srgb, #ef4444 40%, transparent); color: #dc2626; }
.gd-editor .conflict .l { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.gd-editor .conflict .l svg { flex: none; }
.gd-editor .conflict .l button { margin-left: auto; border: 0; background: transparent; color: inherit; text-decoration: underline; cursor: pointer; font-size: 10px; font-family: inherit; padding: 0; }
.gd-editor .conflict ul { margin: 0; padding-left: 15px; color: var(--text-secondary); font-weight: 500; }
.gd-editor .conflict ul[hidden] { display: none; }
.gd-editor .conflict .after { color: var(--text-secondary); font-weight: 500; }
.gd-editor .conflict .after b { color: var(--text-primary); }
.gd-editor .erow { display: flex; gap: 6px; }
.gd-editor .erow button { flex: 1; font-family: var(--font-heading); font-weight: 700; font-size: 12px; padding: 7px 10px; border-radius: var(--gd-radius-s); cursor: pointer; border: 1px solid var(--gd-line-strong); background: var(--gd-panel); color: var(--text-secondary); }
.gd-editor .erow button.pri { background: var(--gd-accent); border-color: var(--gd-accent); color: #fff; }
.gd-editor .erow button.pri[disabled] { opacity: 0.5; cursor: not-allowed; }
@keyframes gdShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }

/* editor de ausencias: lista de asignados + chips de tipo, sobre .gd-editor */
.ga-assigned { display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto; }
.ga-assigned-row { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 2px; border-bottom: 1px solid var(--gd-line); }
.ga-assigned-row:last-child { border-bottom: 0; }
.ga-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.ga-aname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.ga-atype { font-size: 10px; color: var(--text-secondary); flex: none; }
.ga-assigned-row .x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; flex: none; }
.ga-assigned-row .x:hover { color: #dc2626; }
.ga-empty { font-size: 10.5px; color: var(--text-muted); font-style: italic; }
.ga-addhead { font-family: var(--font-heading); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-top: 1px solid var(--gd-line); padding-top: 8px; }
.ga-typechips { display: flex; flex-wrap: wrap; gap: 5px; }
.ga-type-chip { border: 1px solid color-mix(in srgb, var(--gc) 45%, var(--gd-line-strong)); border-radius: 999px; background: color-mix(in srgb, var(--gc) 10%, var(--gd-panel)); color: var(--gc); font-family: var(--font-heading); font-weight: 700; font-size: 10.5px; padding: 4px 9px; cursor: pointer; }
.ga-type-chip.sel { background: var(--gc); border-color: var(--gc); color: #fff; }

/* right rail: recuento */
.gd-rail { padding: 14px; }
.gd-rail .rh { display: flex; align-items: center; gap: 8px; }
.gd-rail h3 { font-family: var(--font-heading); font-size: 13px; font-weight: 700; margin: 0; }
.gd-period { display: flex; gap: 3px; background: var(--gd-sunken); border: 1px solid var(--gd-line); border-radius: 999px; padding: 3px; margin: 10px 0 8px; width: fit-content; }
.gd-period button { border: 0; background: transparent; color: var(--text-secondary); font-family: var(--font-heading); font-weight: 600; font-size: 11px; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.gd-period button[aria-pressed="true"] { background: var(--gd-accent); color: #fff; }
.gd-range { display: none; gap: 8px 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.gd-range.show { display: flex; }
.gd-range .fld { display: flex; flex-direction: column; gap: 3px; }
.gd-range .fld label { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.gd-range .fld input { font-size: 11.5px; padding: 4px 7px; border-radius: var(--gd-radius-s); border: 1px solid var(--gd-line-strong); background: var(--gd-panel); color: var(--text-primary); }
.gd-range .presets { display: flex; gap: 4px; flex-wrap: wrap; }
.gd-range .presets button { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--gd-line); background: var(--gd-sunken); color: var(--text-secondary); cursor: pointer; font-family: var(--font-heading); }
.gd-range .presets button[aria-pressed="true"] { background: var(--gd-accent-soft); color: var(--gd-accent); border-color: var(--gd-accent-line); }
.gd-scope { font-size: 11px; color: var(--text-secondary); margin: 4px 0 6px; }
.gd-scope b { color: var(--text-primary); font-family: var(--font-heading); }
.gd-legend { display: flex; gap: 12px; margin: 6px 0; font-size: 10.5px; color: var(--text-secondary); }
.gd-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 4px; }
.gd-tally { display: flex; flex-direction: column; }
.gd-loading { font-size: 11px; color: var(--text-muted); padding: 8px 0; }
.gd-trow { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--gd-line); align-items: center; }
.gd-trow:last-child { border-bottom: 0; }
.gd-tname { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px; min-width: 0; }
.gd-tname .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-tname .gd-av { width: 18px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 8px; color: #fff; flex: none; background: var(--ac, var(--gd-accent)); }
.gd-tag-low { font-size: 9px; font-weight: 800; color: var(--gd-accent); border: 1px solid var(--gd-accent-line); border-radius: 999px; padding: 0 5px; }
.gd-tnums { font-family: var(--font-heading); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-secondary); text-align: right; white-space: nowrap; }
.gd-tnums b { color: var(--text-primary); font-size: 13px; }
.gd-tbar { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--gd-sunken); overflow: hidden; display: flex; margin-top: 2px; position: relative; }
.gd-tbar i { height: 100%; display: block; }
.gd-tbar .d { background: var(--gd-accent); }
.gd-tbar .w { background: var(--gd-g2); }
/* Guardias por colectivo: el selector de la barra (el mismo .cuad-views de
   las vistas) con las guardias sin cubrir del mes, y los grupos del recuento,
   cada uno con su media. */
.cuad-views.gc-views { grid-column: auto; margin-right: 8px; }
.gc-views .gc-n { position: absolute; top: -7px; right: -7px; z-index: 2; font-style: normal; font-size: 9.5px; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-grid; place-items: center; background: #f59e0b; color: #1f1300; box-shadow: 0 0 0 2px var(--bg-input); }
.gc-grupo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 12px 0 0; padding-bottom: 3px; border-bottom: 1px solid var(--gd-line); font-family: var(--font-heading); font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gc, var(--text-muted)); }
.gc-grupo:first-child { margin-top: 2px; }
.gc-grupo i { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.gd-tbar .avg { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-primary); opacity: 0.5; }
.gd-rail .foot { margin-top: 12px; font-size: 10.5px; color: var(--text-muted); line-height: 1.55; }
.gd-rail .foot b { color: var(--text-secondary); }

/* Cambio de guardia -- cesión y permuta (botón repeat de la barra Guardias).
   Reutiliza los tokens --gd-* de .gd-view; panel anclado como el menú ☰. */
.gd-swap-wrap { position: relative; }
.gd-swap-btn { border: 1px solid var(--gd-line); background: var(--gd-panel); color: var(--text-secondary); padding: 7px 9px; border-radius: var(--gd-radius-s); cursor: pointer; display: inline-flex; align-items: center; }
.gd-swap-btn:hover { color: var(--text-primary); border-color: var(--gd-line-strong); }
.gd-swap-btn.on { background: var(--gd-accent); border-color: var(--gd-accent); color: #fff; }
.gd-swap-backdrop { position: fixed; inset: 0; z-index: 39; }
.gd-swap-backdrop[hidden], .gd-swap[hidden] { display: none; }
.gd-swap { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 430px; max-width: min(430px, 92vw); background: var(--gd-elevated); border: 1px solid var(--gd-line-strong); border-radius: var(--gd-radius-m); box-shadow: var(--gd-shadow-pop); display: flex; flex-direction: column; overflow: hidden; text-align: left; max-height: 80vh; }
.gd-swap-head { flex: none; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid var(--gd-line); }
.gd-swap-head .ic { color: var(--gd-accent); display: grid; place-items: center; flex: none; }
.gd-swap-head h3 { font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; margin: 0; flex: 1; }
.gd-swap-head .who { font-size: 10.5px; color: var(--text-secondary); }
.gd-swap-head .who b { color: var(--text-primary); font-family: var(--font-heading); font-weight: 600; }
.gd-swap-head .x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; flex: none; }
.gd-swap-body { flex: 1 1 auto; min-height: 0; padding: 12px 13px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain; }
.gd-swap-sec { flex: none; display: flex; flex-direction: column; gap: 7px; }
.gd-swap-lbl { font-family: var(--font-heading); font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.gd-swap-lbl .step { background: var(--gd-accent); color: #fff; width: 15px; height: 15px; border-radius: 999px; display: grid; place-items: center; font-size: 9px; flex: none; }
.gd-swap-lbl .free { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-secondary); }

.gd-mc { border: 1px solid var(--gd-line); border-radius: var(--gd-radius-s); background: var(--gd-panel); overflow: hidden; }
.gd-mc-top { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-bottom: 1px solid var(--gd-line); }
.gd-mc-top .m { font-family: var(--font-heading); font-weight: 700; font-size: 11px; }
.gd-mc-top .nav { display: flex; gap: 2px; }
.gd-mc-top .nav button { border: 0; background: transparent; color: var(--text-muted); width: 20px; height: 20px; border-radius: 5px; cursor: pointer; display: grid; place-items: center; }
.gd-mc-top .nav button:hover { background: var(--gd-sunken); color: var(--text-primary); }
.gd-mc-dow { display: grid; grid-template-columns: repeat(7, 1fr); padding: 4px 4px 0; }
.gd-mc-dow span { text-align: center; font-size: 8px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.gd-mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 4px; }
.gd-mc-cell { aspect-ratio: 1 / 1; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 600; font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--text-muted); border: 1px solid transparent; position: relative; }
.gd-mc-cell.pad { visibility: hidden; }
.gd-mc-cell.off { opacity: 0.3; }
.gd-mc-cell.duty { color: var(--text-primary); background: var(--gd-sunken); cursor: pointer; border-color: var(--gd-line); }
.gd-mc-cell.duty:hover { border-color: var(--gd-accent); }
.gd-mc-cell.duty.we { background: var(--gd-weekend); }
.gd-mc-cell.duty.fest { background: var(--gd-festivo-soft); color: var(--gd-festivo); }
.gd-mc-cell.sel, .gd-mc-cell.sel.fest, .gd-mc-cell.sel.we { background: var(--gd-accent); color: #fff; border-color: var(--gd-accent); }
.gd-mc-cell .tag { font-size: 6.5px; font-weight: 800; margin-top: 1px; opacity: 0.9; }
.gd-mc-cell .dot { position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 999px; background: var(--gd-festivo); }
.gd-mc-cell.sel .dot { background: #fff; }
.gd-mc-foot { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 8px; border-top: 1px solid var(--gd-line); font-size: 9.5px; }
.gd-mc-foot .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: var(--gd-sunken); border: 1px solid var(--gd-line); font-family: var(--font-heading); font-weight: 600; }
.gd-mc-foot .pill .k { color: var(--text-muted); font-weight: 800; font-size: 8px; text-transform: uppercase; }
.gd-mc-foot .pill.fest { color: var(--gd-festivo); border-color: color-mix(in srgb, var(--gd-festivo) 40%, transparent); }
.gd-mc-foot .empty { color: var(--text-muted); font-style: italic; }

.gd-swap-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: end; }
.gd-swap-row .fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gd-swap-row label { font-family: var(--font-heading); font-size: 8.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.gd-swap-row select { font-family: inherit; font-size: 11.5px; padding: 6px 7px; border-radius: var(--gd-radius-s); border: 1px solid var(--gd-line-strong); background: var(--gd-panel); color: var(--text-primary); width: 100%; }
.gd-swap-modeseg { display: flex; gap: 3px; background: var(--gd-sunken); border: 1px solid var(--gd-line); border-radius: 999px; padding: 3px; flex: none; }
.gd-swap-modeseg button { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 10.5px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.gd-swap-modeseg button[aria-pressed="true"] { background: var(--gd-accent); color: #fff; }
.gd-swap-note { font-size: 10px; color: var(--text-secondary); line-height: 1.5; }
.gd-swap-note b { color: var(--text-primary); }

.gd-swap-equity { flex: none; border: 1px dashed var(--gd-line-strong); border-radius: var(--gd-radius-s); background: var(--gd-sunken); padding: 9px 10px; display: flex; flex-direction: column; gap: 8px; }
.gd-swap-equity .et { font-family: var(--font-heading); font-weight: 700; font-size: 11px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gd-swap-equity .et svg { flex: none; }
.gd-swap-equity .et .sc { font-size: 9px; color: var(--text-muted); font-weight: 400; }
.gd-swap-eglabel { font-family: var(--font-heading); font-size: 8px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); padding: 6px 0 1px; }
.gd-swap-bkt { display: grid; grid-template-columns: 104px 1fr auto; gap: 8px; align-items: center; font-size: 10px; padding: 4px 0; border-top: 1px solid var(--gd-line); }
.gd-swap-bkt:first-of-type, .gd-swap-eglabel + .gd-swap-bkt { border-top: 0; }
.gd-swap-bkt .bn { font-family: var(--font-heading); font-weight: 700; color: var(--text-secondary); }
.gd-swap-bkt .bv { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.gd-swap-bkt .bv .n { font-family: var(--font-heading); font-weight: 800; }
.gd-swap-bkt .bv .cap { color: var(--text-muted); font-size: 8px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 800; margin-right: 3px; }
.gd-swap-bkt .bv .ar { color: var(--text-muted); margin: 0 4px; }
.gd-swap-stat { font-family: var(--font-heading); font-weight: 700; font-size: 8.5px; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.gd-swap-stat.ok { color: var(--gd-ok); background: var(--gd-ok-soft); border: 1px solid color-mix(in srgb, var(--gd-ok) 40%, transparent); }
.gd-swap-stat.warn { color: var(--gd-warn); background: var(--gd-warn-soft); border: 1px solid color-mix(in srgb, var(--gd-warn) 45%, transparent); }
.gd-swap-stat.mute { color: var(--text-muted); border: 1px solid var(--gd-line); }
.gd-swap-verdict { display: flex; align-items: flex-start; gap: 6px; font-size: 10px; font-weight: 600; border-radius: 6px; padding: 6px 8px; line-height: 1.45; }
.gd-swap-verdict svg { flex: none; margin-top: 1px; }
.gd-swap-verdict.ok { background: var(--gd-ok-soft); color: var(--gd-ok); border: 1px solid color-mix(in srgb, var(--gd-ok) 40%, transparent); }
.gd-swap-verdict.warn { background: var(--gd-warn-soft); color: var(--gd-warn); border: 1px solid color-mix(in srgb, var(--gd-warn) 45%, transparent); }
.gd-swap-verdict.err { background: color-mix(in srgb, #ef4444 12%, transparent); color: #dc2626; border: 1px solid color-mix(in srgb, #ef4444 40%, transparent); }
.gd-swap-verdict b { font-weight: 800; }
.gd-swap-foot { flex: none; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-top: 1px solid var(--gd-line); background: var(--gd-panel); }
.gd-swap-foot .sm { flex: 1; font-size: 10px; color: var(--text-secondary); line-height: 1.4; }
.gd-swap-foot .sm b { color: var(--text-primary); font-family: var(--font-heading); font-weight: 600; }
.gd-swap-foot button { font-family: var(--font-heading); font-weight: 700; font-size: 11.5px; padding: 8px 14px; border-radius: var(--gd-radius-s); cursor: pointer; border: 1px solid var(--gd-accent); background: var(--gd-accent); color: #fff; white-space: nowrap; }
.gd-swap-foot button.warn { background: var(--gd-warn); border-color: var(--gd-warn); color: #1a1206; }
.gd-swap-foot button:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 900px) { .gd-swap { position: fixed; left: 50%; right: auto; top: 60px; transform: translateX(-50%); } }

.btn-card-remove:hover {
  color: #ef4444 !important;
  background: transparent !important;
  transform: scale(1.25) !important;
}

.btn-room-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
  transition: var(--transition-fast);
  opacity: 0.75;
}

.btn-room-remove:hover {
  opacity: 1;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
}

/* Tag Pills for Candidate Sidebar Cards */
.tag-pill {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  letter-spacing: 0.01em;
}

.tag-valvular { background: rgba(2, 132, 199, 0.28) !important; color: #38bdf8 !important; border: 1px solid rgba(2, 132, 199, 0.55) !important; font-weight: 800; }
.tag-coronario { background: rgba(234, 179, 8, 0.28) !important; color: #facc15 !important; border: 1px solid rgba(234, 179, 8, 0.55) !important; font-weight: 800; }
.tag-aorta { background: rgba(239, 68, 68, 0.28) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, 0.55) !important; font-weight: 800; }
.tag-marcapasos { background: rgba(249, 115, 22, 0.28) !important; color: #fb923c !important; border: 1px solid rgba(249, 115, 22, 0.55) !important; font-weight: 800; }
.tag-tavi { background: rgba(34, 197, 94, 0.28) !important; color: #4ade80 !important; border: 1px solid rgba(34, 197, 94, 0.55) !important; font-weight: 800; }
.tag-herida { background: rgba(180, 83, 9, 0.32) !important; color: #fbbf24 !important; border: 1px solid rgba(180, 83, 9, 0.55) !important; font-weight: 800; }
.tag-ecmo { background: rgba(168, 85, 247, 0.28) !important; color: #c084fc !important; border: 1px solid rgba(168, 85, 247, 0.55) !important; font-weight: 800; }
.tag-pericardio { background: rgba(148, 163, 184, 0.28) !important; color: #cbd5e1 !important; border: 1px solid rgba(148, 163, 184, 0.55) !important; font-weight: 800; }
.tag-endo { background: rgba(6, 182, 212, 0.28) !important; color: #22d3ee !important; border: 1px solid rgba(6, 182, 212, 0.55) !important; font-weight: 800; }

.preop-card .tag-valvular { background: rgba(2, 132, 199, 0.18) !important; color: #0284c7 !important; border: 1px solid rgba(2, 132, 199, 0.45) !important; }
.preop-card .tag-coronario { background: rgba(234, 179, 8, 0.22) !important; color: #b45309 !important; border: 1px solid rgba(234, 179, 8, 0.45) !important; }
.preop-card .tag-aorta { background: rgba(239, 68, 68, 0.18) !important; color: #dc2626 !important; border: 1px solid rgba(239, 68, 68, 0.45) !important; }
.preop-card .tag-marcapasos { background: rgba(249, 115, 22, 0.2) !important; color: #c2410c !important; border: 1px solid rgba(249, 115, 22, 0.45) !important; }
.preop-card .tag-tavi { background: rgba(34, 197, 94, 0.18) !important; color: #15803d !important; border: 1px solid rgba(34, 197, 94, 0.45) !important; }
.preop-card .tag-herida { background: rgba(180, 83, 9, 0.22) !important; color: #78350f !important; border: 1px solid rgba(180, 83, 9, 0.45) !important; }
.preop-card .tag-ecmo { background: rgba(168, 85, 247, 0.18) !important; color: #7e22ce !important; border: 1px solid rgba(168, 85, 247, 0.45) !important; }
.preop-card .tag-pericardio { background: rgba(148, 163, 184, 0.22) !important; color: #334155 !important; border: 1px solid rgba(148, 163, 184, 0.45) !important; }
.preop-card .tag-endo { background: rgba(6, 182, 212, 0.18) !important; color: #0891b2 !important; border: 1px solid rgba(6, 182, 212, 0.45) !important; }
.tag-urgente {
  background: rgba(239, 68, 68, 0.35) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(239, 68, 68, 0.6) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.preop-card .tag-urgente {
  background: rgba(239, 68, 68, 0.35) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(239, 68, 68, 0.6) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Compact Patient Diagnosis / Procedure Styling (Global) */
.patient-diag-compact {
  font-size: 0.74rem;
  font-weight: 600;
  color: #38bdf8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ULTRA-COMPACT PATIENT CARDS IN CANDIDATE SIDEBAR */
.or-sidebar .patient-card-compact {
  padding: 0.4rem 0.6rem;
  gap: 0.15rem;
  border-radius: var(--radius-sm);
}

/* Preoperative Patient Cards Visual Style (Crisp Pure White) */
.patient-card.preop-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.patient-card-compact.preop-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.patient-card-compact.preop-card .patient-name {
  color: #0f172a !important;
}

/* Paciente con cirugía puesta: se tiñe del color de SU quirófano, que el JS
   pasa en --rc (getORColorHex, el mismo que usa el Parte). Antes era un verde
   fijo para todos, que no decía en qué quirófano entraba. El verde sigue de
   reserva para cuando no se sepa el quirófano. */
.patient-card.scheduled-card,
.patient-card-compact.scheduled-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc, #10b981) 17%, transparent) 0%, color-mix(in srgb, var(--rc, #10b981) 7%, transparent) 100%) !important;
  border: 1.5px solid color-mix(in srgb, var(--rc, #10b981) 55%, transparent) !important;
}

.patient-card.scheduled-card {
  box-shadow: 0 0 12px color-mix(in srgb, var(--rc, #10b981) 16%, transparent) !important;
}

/* UCI en naranja (antes azul): el azul chocaba con el cian de la marca -- los
   diagnósticos, los enlaces y los botones-- y con el azul del preoperatorio. */
.patient-card.uci-card, .patient-card-compact.uci-card {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.16) 0%, rgba(251, 146, 60, 0.08) 100%) !important;
  border: 1.5px solid rgba(249, 115, 22, 0.6) !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.18) !important;
}

/* URP Postoperative Cards Visual Style (Vibrant Purple Tint & Border) */
.patient-card.urp-card, .patient-card-compact.urp-card {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.16) 0%, rgba(192, 132, 252, 0.08) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.18) !important;
}

.or-sidebar .patient-card-compact .patient-name {
  font-size: 0.76rem;
  font-weight: 700;
}

.or-sidebar .patient-diag-compact {
  font-size: 0.68rem;
  font-weight: 600;
  color: #38bdf8;
  line-height: 1.15;
}

.or-sidebar .patient-card-compact .bottom-line {
  font-size: 0.64rem;
  color: var(--text-secondary);
}

/* Caja neutra (gris claro, sin tinte cian) para el equipo quirúrgico. */
.surgical-team-box {
  font-size: 0.68rem;
  color: var(--text-secondary);
  background: var(--bg-primary);
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: var(--transition-fast);
}

.surgical-team-box:hover {
  border-color: var(--border-highlight);
  background: var(--bg-card-hover);
}

/* Surgical team as compact columns (CIR/AYU/MIR/ANE) -- only the filled
   roles render, so this stays a flex row rather than a fixed 4-col grid. */
.team-columns {
  display: flex;
  padding: 0;
  overflow: hidden;
}

.team-col {
  flex: 1;
  min-width: 0;
  padding: 0.2rem 0.3rem 0.3rem;
  text-align: center;
  border-top: 3px solid transparent;
  border-left: 1px solid rgba(148, 163, 184, 0.25);
}

.team-col:first-child {
  border-left: none;
}

.team-col-role {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.team-col-name {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.15;
  margin-top: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Module 3 Header & Layout */
/* El título de módulo sería redundante con el menú superior y ocuparía una
   franja alta del viewport: el <h2> queda solo para lectores de pantalla, sin
   subtítulo, y la cabecera es una sola fila de acciones/filtros. Tampoco lo
   rescata ninguna regla de impresión: el papel tiene su propio encabezado, con
   el membrete del centro. */
.module-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Si la cabecera se queda sin acciones (p.ej. Histórico) no debe dejar hueco. */
/* ==========================================================================
   NAVEGADOR DE SEMANA (Parte, Cuadrante, modal Programar)
   Lo pinta app.js::renderWeekNavigator. ‹ Hoy › en píldora (lenguaje de
   .gd-monthnav), el rango como botón que abre un calendario propio y, a la
   derecha, lo que cada pantalla quiera meter en la misma fila.
   ========================================================================== */
.week-navigator-bar {
  --wkn-accent: var(--nav-active-text, var(--accent-cyan));
  --wkn-soft: color-mix(in srgb, var(--wkn-accent) 13%, transparent);
  --wkn-line: color-mix(in srgb, var(--wkn-accent) 42%, transparent);
  --wkn-line-strong: color-mix(in srgb, var(--text-primary) 16%, transparent);
  --wkn-festivo: #7c3aed;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  background: var(--bg-card);
  padding: 0.4rem 0.6rem;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  margin-bottom: 0.6rem;
}
:root[data-theme="dark"] .week-navigator-bar { --wkn-festivo: #a78bfa; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .week-navigator-bar { --wkn-festivo: #a78bfa; } }
.week-navigator-bar.wkn-is-open { z-index: 60; }

.wkn-host { min-width: 0; }

.wkn { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.wkn-step {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--bg-input); border: 1px solid var(--border-color);
  border-radius: 999px; padding: 3px;
}
.wkn-step button {
  border: 0; background: transparent; color: var(--text-secondary);
  height: 30px; min-width: 30px; border-radius: 999px; cursor: pointer;
  display: inline-grid; place-items: center;
  font-family: var(--font-sans); transition: background 0.15s, color 0.15s;
}
.wkn-step button:hover:not(:disabled) { background: var(--bg-secondary); color: var(--text-primary); }
.wkn-step button:focus-visible { outline: 2px solid var(--wkn-accent); outline-offset: 1px; }
.wkn-step .wkn-today { padding: 0 0.75rem; font-weight: 700; font-size: 0.75rem; }
.wkn-step .wkn-today:disabled { color: var(--text-muted); opacity: 0.55; cursor: default; }

.wkn-anchor { position: relative; }
.wkn-title {
  display: inline-flex; align-items: center; gap: 0.6rem; text-align: left;
  border: 1px solid transparent; background: transparent; color: var(--text-primary);
  padding: 4px 10px 4px 5px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-sans); transition: background 0.15s, border-color 0.15s;
}
.wkn-title:hover, .wkn-title[aria-expanded="true"] { background: var(--bg-input); border-color: var(--border-color); }
.wkn-title:focus-visible { outline: 2px solid var(--wkn-accent); outline-offset: 1px; }
.wkn-sem {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--wkn-soft); color: var(--wkn-accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  font-family: var(--font-heading);
}
.wkn-sem b { font-size: 0.56rem; letter-spacing: 0.06em; }
.wkn-sem span { font-size: 0.95rem; font-weight: 800; margin-top: 1px; }
.wkn-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wkn-range { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; white-space: nowrap; }
.wkn-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }
.wkn-rel {
  font-weight: 700; font-size: 0.65rem; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color);
}
.wkn-rel.is-now { background: var(--wkn-soft); color: var(--wkn-accent); border-color: var(--wkn-line); }
.wkn-semtxt { display: none; }
.wkn-chev { color: var(--text-muted); transition: transform 0.2s; }
.wkn-title[aria-expanded="true"] .wkn-chev { transform: rotate(180deg); }

.wkn-festivo {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 0.7rem; font-weight: 600; color: var(--wkn-festivo);
  background: color-mix(in srgb, var(--wkn-festivo) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--wkn-festivo) 35%, transparent);
  padding: 3px 9px; border-radius: 999px;
}
.wkn-festivo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Calendario */
.wkn-backdrop { position: fixed; inset: 0; z-index: 1; }
.wkn-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 2; width: 318px;
  background: var(--bg-secondary); border: 1px solid var(--wkn-line-strong);
  border-radius: 14px; box-shadow: 0 14px 44px rgba(2, 6, 23, 0.45); padding: 12px;
  font-family: var(--font-sans); color: var(--text-primary);
  animation: wkn-pop-in 0.14s ease-out;
}
@keyframes wkn-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.wkn-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wkn-pop-arrow {
  border: 0; background: transparent; color: var(--text-secondary); width: 30px; height: 30px;
  border-radius: 8px; cursor: pointer; display: grid; place-items: center;
}
.wkn-pop-arrow:hover { background: var(--bg-input); color: var(--text-primary); }
.wkn-pop-label {
  border: 0; background: transparent; color: var(--text-primary); cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem;
  padding: 4px 10px; border-radius: 8px; display: inline-flex; gap: 5px; align-items: center;
}
.wkn-pop-label:hover { background: var(--bg-input); }
.wkn-pop-label svg { color: var(--text-muted); }

.wkn-grid { display: flex; flex-direction: column; gap: 2px; }
.wkn-row { display: grid; grid-template-columns: 26px repeat(7, 1fr); position: relative; border-radius: 9px; }
.wkn-row:not(.wkn-dow):hover { background: var(--bg-input); }
.wkn-row.is-selected, .wkn-row.is-selected:hover { background: var(--wkn-soft); box-shadow: inset 2px 0 0 var(--wkn-accent); }
.wkn-dow span { font-size: 0.66rem; font-weight: 700; color: var(--text-muted); text-align: center; padding: 2px 0 6px; letter-spacing: 0.04em; }
.wkn-dow span:first-child { font-size: 0.58rem; align-self: end; }
.wkn-wk { font-size: 0.62rem; color: var(--text-muted); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.wkn-row.is-selected .wkn-wk { color: var(--wkn-accent); font-weight: 700; }
.wkn-day {
  position: relative; border: 0; background: transparent; height: 38px; cursor: pointer; padding: 2px 0 0;
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 500;
  color: var(--text-primary); display: grid; place-items: start center;
}
.wkn-day > i { font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.wkn-day.is-weekend { color: var(--text-muted); }
.wkn-day.is-out { color: var(--text-muted); opacity: 0.55; }
.wkn-day.is-today > i { background: var(--accent-gradient); color: #fff; font-weight: 800; opacity: 1; }
/* Puntos bajo el número: cirugías (acento), sin ubicar (ámbar), festivo (morado). */
.wkn-marks { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 2px; pointer-events: none; }
.wkn-mark { width: 4px; height: 4px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.wkn-mark-cases { background: var(--wkn-accent); }
.wkn-mark-unplaced { background: #d97706; }
.wkn-mark-festivo { background: var(--wkn-festivo); }
.wkn-day.is-out .wkn-marks { opacity: 0.8; }
.wkn-day:focus-visible { outline: none; }
.wkn-day:focus-visible > i { box-shadow: 0 0 0 2px var(--wkn-accent); }

.wkn-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0 2px; }
.wkn-months button {
  border: 1px solid var(--border-color); background: var(--bg-input); border-radius: 9px; padding: 10px 0;
  cursor: pointer; font-family: var(--font-sans); font-weight: 600; font-size: 0.78rem; color: var(--text-secondary);
}
.wkn-months button:hover { color: var(--text-primary); border-color: var(--wkn-line-strong); }
.wkn-months button.is-selected { background: var(--wkn-soft); color: var(--wkn-accent); border-color: var(--wkn-line); }
.wkn-months button.is-now { box-shadow: inset 0 -2px 0 var(--wkn-accent); }

.wkn-pop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--border-color); margin-top: 10px; padding-top: 10px;
  font-size: 0.68rem; color: var(--text-muted);
}
.wkn-legend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wkn-legend span { display: inline-flex; gap: 4px; align-items: center; }
.wkn-legend .wkn-mark { width: 6px; height: 6px; }
.wkn-go-today {
  border: 1px solid var(--wkn-line); background: var(--wkn-soft); color: var(--wkn-accent);
  padding: 5px 11px; border-radius: 999px; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 0.72rem;
}
.wkn-go-today:hover { filter: brightness(1.1); }

/* Estrecho (banda tablet / ventana partida): sin icono SEM, el nº va en la
   línea de abajo, y el calendario se centra bajo el título. */
@media (max-width: 1100px) {
  .wkn-sem { display: none; }
  .wkn-semtxt { display: inline; }
  .wkn-today-txt { display: none; }
  .wkn-range { font-size: 0.92rem; }
}
@media (max-width: 560px) {
  .wkn-pop { left: 50%; transform: translateX(-50%); width: min(318px, calc(100vw - 24px)); animation: none; }
}

/* ==========================================================================
   CUADRANTE -- BARRA ÚNICA (app.js::renderCuadranteBar)
   Una sola línea en todas las vistas. Rejilla: navegador (ancho fijo, según el
   ancho de la barra) · selector de vista · hueco · herramientas + acciones.
   Nada depende de la vista activa, así que al cambiar de vista no se mueve nada.
   El hueco del navegador se mide por el rango de fechas más largo que puede
   salir ("28 dic 2026 – 3 ene 2027"), para que ni la semana más ancha se meta
   debajo del selector de vista; si aun así no cupiese, la columna cede hasta su
   mínimo y el rango se recorta con puntos suspensivos, nunca se monta encima.
   ========================================================================== */
.cuad-bar-wrap { container-type: inline-size; container-name: cuadbar; margin-bottom: 0.6rem; }
.week-navigator-bar.cuad-bar {
  display: grid;
  grid-template-columns: minmax(min-content, var(--cuad-nav-w, 392px)) max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  margin-bottom: 0;
  font-size: 13px;
  color: var(--text-primary);
}
.cuad-bar-nav { min-width: 0; }
.cuad-bar-nav > [hidden] { display: none; }
.cuad-bar .wkn { flex-wrap: nowrap; }
.cuad-bar .wkn-anchor, .cuad-bar .wkn-title, .cuad-bar .wkn-text { min-width: 0; }
/* El botón del rango es un <button>: sin este tope se queda con su ancho
   natural y se sale de su columna en vez de encoger con ella. */
.cuad-bar .wkn-title { max-width: 100%; }
.cuad-bar .wkn-range { overflow: hidden; text-overflow: ellipsis; }
.cuad-bar .wkn-meta { overflow: hidden; }
/* El festivo ya se ve en la cabecera de días del tablero y en el calendario. */
.cuad-bar .wkn-festivo { display: none; }
.wkn-sem-month b { font-size: 0.5rem; letter-spacing: 0.02em; }
.wkn-sem-month span { font-size: 0.66rem !important; letter-spacing: 0.02em; }

/* Selector de vista: iconos fijos, resaltado que se desliza, nombre en hueco fijo */
.cuad-views { grid-column: 2; position: relative; display: inline-flex; align-items: center; gap: 2px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px; padding: 3px; }
.cuad-vbtn { position: relative; z-index: 1; width: 32px; height: 30px; border: 0; padding: 0; background: transparent; color: var(--text-secondary); border-radius: 7px; display: grid; place-items: center; cursor: pointer; transition: color 0.15s; }
.cuad-vbtn:hover { color: var(--text-primary); }
.cuad-vbtn.is-active { color: var(--nav-active-text, var(--accent-cyan)); }
.cuad-vbtn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; }
.cuad-views-pill { position: absolute; left: 0; top: 3px; width: 32px; height: 30px; border-radius: 7px; background: var(--seg-active-bg); border: 1px solid var(--seg-active-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transform: translateX(var(--cuad-pill-x, 3px)); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.cuad-views-div { width: 1px; height: 18px; background: var(--border-color); margin: 0 4px; flex-shrink: 0; }
.cuad-views-label { display: grid; margin: 0 8px 0 6px; padding-left: 9px; border-left: 1px solid var(--border-color); font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: var(--text-primary); }
.cuad-views-label > span { grid-area: 1 / 1; visibility: hidden; }
.cuad-views-label > span.is-active { visibility: visible; }

/* Herramientas + acciones */
.cuad-bar-right { grid-column: 4; display: flex; align-items: center; gap: 6px; }
.cuad-bar-tools { display: flex; align-items: center; gap: 4px; }
.cuad-bar-tools:empty + .cuad-bar-sep { display: none; }
.cuad-bar-sep { width: 1px; height: 24px; background: var(--border-color); margin: 0 2px; }
.cuad-bar-actions { display: flex; align-items: center; gap: 4px; }
.cuad-tool { position: relative; display: block; }
.cuad-tool.is-reserved { visibility: hidden; }
.cuad-ibtn { position: relative; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; padding: 0; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.cuad-ibtn:hover { color: var(--text-primary); border-color: color-mix(in srgb, var(--text-primary) 18%, transparent); background: var(--bg-secondary); }
.cuad-ibtn.primary { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.cuad-ibtn.primary:hover { filter: brightness(1.08); }
.cuad-ibtn-ghost { background: transparent; border-color: transparent; }
.cuad-ibtn-ghost:hover { background: var(--bg-input); border-color: var(--border-color); }
.cuad-ibtn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; }
.cuad-ibtn[data-tip]::after,
.cuad-mini-seg button[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 7px); right: 0; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid color-mix(in srgb, var(--text-primary) 16%, transparent); border-radius: 7px; padding: 4px 8px; box-shadow: 0 10px 24px rgba(2, 6, 23, 0.3); opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 0.12s, transform 0.12s; z-index: 70; }
/* El botón que enseña su aviso sube por encima del lateral de candidatos
   (1300) y de la cabecera fija del Parte; si no, el filter del :hover de
   .primary encierra el aviso en el botón y lo tapan. */
.cuad-ibtn[data-tip]:hover, .cuad-ibtn[data-tip]:focus-visible { z-index: 1301; }
.cuad-ibtn[data-tip]:hover::after, .cuad-ibtn[data-tip]:focus-visible::after,
.cuad-mini-seg button[data-tip]:hover::after { opacity: 1; transform: none; }
.cuad-mini-seg button[data-tip]::after { right: auto; left: 50%; transform: translate(-50%, -3px); }
.cuad-mini-seg button[data-tip]:hover::after { transform: translate(-50%, 0); }
/* Cambios y Solicitar libranza reutilizan su botón (.gd-swap-btn) con el tamaño de la barra */
.cuad-tool .gd-swap-btn { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 9px; background: transparent; border-color: transparent; }
.cuad-tool .gd-swap-btn:hover { background: var(--bg-input); border-color: var(--border-color); }
.cuad-tool .gd-swap-btn.on { background: var(--gd-accent); border-color: var(--gd-accent); color: #fff; }
.cuad-mini-seg { display: inline-flex; gap: 2px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 9px; padding: 2px; margin-right: 2px; }
.cuad-mini-seg button { position: relative; width: 30px; height: 28px; border: 0; padding: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; }
.cuad-mini-seg button.is-active { background: var(--seg-active-bg); border: 1px solid var(--seg-active-border); color: var(--nav-active-text, var(--accent-cyan)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.cuad-gcal-dot { position: absolute; right: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 0 2px var(--bg-card); }
.cuad-gcal-dot.is-live { background: #16a34a; }
.cuad-gcal-dot.is-stale { background: #d97706; }
.cuad-gcal-dot.is-idle { background: #dc2626; }
.cuad-gcal-status { --gd-feed: var(--text-secondary); display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; margin: 2px 9px 6px; padding: 6px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--gd-feed); background: color-mix(in srgb, var(--gd-feed) 10%, transparent); }
.cuad-gcal-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cuad-gcal-status small { grid-column: 2; font-size: 10.5px; font-weight: 500; color: var(--text-muted); line-height: 1.4; }
.cuad-gcal-status.is-live { --gd-feed: #16a34a; }
.cuad-gcal-status.is-stale { --gd-feed: #d97706; }
.cuad-gcal-status.is-idle { --gd-feed: #dc2626; }

/* Ancho medio: sin el icono SEM / mes */
@container cuadbar (max-width: 1180px) {
  .week-navigator-bar.cuad-bar { --cuad-nav-w: 350px; gap: 10px; }
  .cuad-bar .wkn-sem, .cuad-bar .wkn-semtxt { display: none; }
}
/* Estrecho (≈ 1024 px de ventana): tampoco «hoy mié 16», el año actual ni el separador */
@container cuadbar (max-width: 1000px) {
  .week-navigator-bar.cuad-bar { --cuad-nav-w: 316px; gap: 8px; }
  .cuad-bar .wkn-year.is-current, .cuad-bar .wkn-today-txt, .cuad-bar-sep { display: none; }
  .cuad-bar .wkn { gap: 4px; }
  .cuad-bar .wkn-step .wkn-today { padding: 0 8px; }
  .cuad-bar .wkn-title { padding: 4px 6px 4px 4px; gap: 4px; }
  .cuad-bar .wkn-range { font-size: 0.94rem; }
  .cuad-bar-right, .cuad-bar-tools, .cuad-bar-actions { gap: 2px; }
  .cuad-bar-actions { margin-left: 6px; }
  .cuad-views-label { margin-right: 4px; }
}

/* ==========================================================================
   CUADRANTE -- TABLERO SEMANAL (Localizaciones / Profesionales)
   app.js::cuadranteLocationsBoardHtml / cuadranteStaffBoardHtml
   ========================================================================== */
.cuad-board { display: grid; grid-template-columns: 172px repeat(var(--cuad-cols, 5), minmax(118px, 1fr)); gap: 6px; min-width: 780px; }
.cuad-board > * { min-width: 0; }
/* Fila de días fija arriba mientras se baja (el contenedor hace el scroll).
   El fondo sube hasta el borde del contenedor (top = -su padding-top, que el
   sticky respeta) para que no quede una rendija por la que asome el tablero,
   y es opaco: --bg-card es translúcido en oscuro, así que se compone sobre
   --bg-primary (el fondo real bajo el panel). */
.cuad-board-headbg { grid-column: 1 / -1; grid-row: 1; position: sticky; top: -0.2rem; z-index: 4; background: linear-gradient(var(--bg-card), var(--bg-card)) var(--bg-primary); margin: -0.2rem -0.4rem 0; box-shadow: 0 8px 10px -8px rgba(0, 0, 0, 0.35); }
.cuad-board-corner, .cuad-board-dh { grid-row: 1; position: sticky; top: 0; z-index: 5; }
/* Ocupa toda la fila (no align-self: end): así no «sube» al fijarse y queda
   centrado en vertical con las cabeceras de los días. */
.cuad-board-corner { display: flex; align-items: center; padding: 0 4px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

.cuad-dh { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 11px; padding: 7px 8px 7px 11px; color: var(--text-primary); font-family: var(--font-sans); text-align: left; }
.cuad-dh-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cuad-dh-txt b { font-family: var(--font-heading); font-size: 0.88rem; }
.cuad-dh-txt small { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuad-dh.is-today { border-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent); background: color-mix(in srgb, var(--accent-cyan) 12%, var(--bg-secondary)); }
.cuad-dh.is-today b, .cuad-dh.is-today small { color: var(--nav-active-text, var(--accent-cyan)); }
.cuad-dh.is-festivo { border-color: color-mix(in srgb, #7c3aed 40%, transparent); }
.cuad-dh.is-festivo small { color: #8b5cf6; font-weight: 600; }
.cuad-dh-warn { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; border: 1px solid color-mix(in srgb, #d97706 40%, transparent); background: color-mix(in srgb, #d97706 12%, transparent); color: #d97706; font-weight: 700; font-size: 0.68rem; border-radius: 999px; padding: 2px 7px 2px 5px; font-family: var(--font-sans); }
button.cuad-dh-warn { cursor: pointer; }
button.cuad-dh-warn:hover, .cuad-dh-warn.is-active { background: #d97706; color: #fff; border-color: #d97706; }

.cuad-board-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding: 10px 4px 0; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cuad-board-group small { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.68rem; display: inline-flex; gap: 4px; align-items: center; }

.cuad-board-rl { display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 6px; border-radius: 11px; position: sticky; left: 0; z-index: 3; background: linear-gradient(var(--bg-card), var(--bg-card)) var(--bg-primary); }
.cuad-board-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; color: var(--loc); background: color-mix(in srgb, var(--loc) 15%, transparent); }
.cuad-board-ico svg { width: 16px !important; height: 16px !important; }
.cuad-board-rl-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cuad-board-rl-txt b { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuad-board-rl-txt small { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuad-board-rl-person { box-shadow: inset 3px 0 0 var(--loc); }
.cuad-hours { display: block; height: 4px; border-radius: 999px; background: var(--bg-input); overflow: hidden; margin: 4px 0 1px; width: 100%; }
.cuad-hours i { display: block; height: 100%; border-radius: 999px; background: var(--accent-teal); }
.cuad-hours.is-over i { background: #d97706; }
.cuad-board-rl-txt .cuad-hours-txt { font-size: 0.6rem; font-variant-numeric: tabular-nums; }
.cuad-board-rl-txt .cuad-hours-txt.is-over { color: #d97706; font-weight: 700; }
.cuad-board-rl-txt .cuad-hours-gd { color: var(--text-muted, #64748b); font-weight: 400; }

/* Celdas: tarjeta con aire alrededor; las llenas llevan la marca del puesto */
.cuadrante-cell.cuad-cell { position: relative; min-height: 50px; border-radius: 11px; padding: 5px; display: flex; flex-direction: column; gap: 4px; justify-content: center; text-align: left; background: var(--bg-card); border: 1px solid var(--border-color); transition: border-color 0.12s, box-shadow 0.12s, background 0.12s; }
.cuad-cell[data-click] { cursor: pointer; }
.cuad-cell.is-empty:not(.is-readonly) { background: transparent; border-style: dashed; }
.cuad-cell.is-today { background-color: color-mix(in srgb, var(--accent-cyan) 5%, var(--bg-card)); border-color: color-mix(in srgb, var(--accent-cyan) 28%, var(--border-color)); }
.cuad-cell.is-empty.is-today:not(.is-readonly) { background: color-mix(in srgb, var(--accent-cyan) 4%, transparent); }
.cuad-cell.is-festivo { background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, #7c3aed 9%, transparent) 7px 14px); }
.cuad-cell.is-readonly { background-color: color-mix(in srgb, var(--loc) 6%, var(--bg-card)); border-color: color-mix(in srgb, var(--loc) 22%, var(--border-color)); cursor: default; }
.cuad-cell.is-readonly.is-empty { background-color: transparent; border-color: var(--border-color); }
.cuad-cell[data-click]:hover { border-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent); }
.cuadrante-cell.cuad-cell.drag-over { outline: none; border-style: solid; border-color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 13%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 13%, transparent); }
.cuad-cell-add { display: block; text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--accent-cyan); opacity: 0; transition: opacity 0.12s; }
.cuad-cell:hover .cuad-cell-add { opacity: 1; }
.cuad-cell-empty-ro { font-size: 0.7rem; color: var(--text-muted); text-align: center; }
.cuad-cell-gap { align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 0.66rem; font-weight: 700; color: #d97706; background: rgba(217, 119, 6, 0.12); border: 1px dashed rgba(217, 119, 6, 0.5); border-radius: 6px; padding: 2px 7px; }
.cuad-or { display: flex; flex-direction: column; gap: 3px; padding: 1px 3px 1px 6px; }
.cuad-or-count { font-size: 0.72rem; font-weight: 700; color: var(--loc); }
.cuad-or-team { display: flex; }
.cuad-or-team > * + * { margin-left: -5px; }
.cuad-or-team > * { box-shadow: 0 0 0 2px var(--bg-card); border-radius: 50%; }
.cuad-or-names { font-size: 0.66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tarjetas (estilo de siempre: borde del color + franja izquierda), en una línea */
.roster-card.cuad-card { align-items: center; }
.roster-card.cuad-card::before { align-self: stretch; }
.cuad-card-av { display: inline-flex; margin-left: 5px; flex-shrink: 0; }
.roster-card.cuad-card .roster-card-l1 { display: flex; align-items: center; gap: 3px; }
.roster-card.cuad-card .roster-card-l1 svg { color: #d97706; flex-shrink: 0; }

/* ── Lateral: Plantilla / Puestos ── */
#cuadrante-sidebar-panel { display: flex; flex-direction: column; }
.cuad-pool-tools:empty, .cuad-pool-legend:empty { display: none; }
.cuad-pool-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cuad-pool-search { display: flex; align-items: center; gap: 7px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 9px; padding: 0 9px; color: var(--text-muted); }
.cuad-pool-search:focus-within { border-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent); }
.cuad-pool-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.78rem; padding: 7px 0; outline: none; }
.cuad-pool-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 9px; padding: 3px; gap: 2px; }
.cuad-pool-seg button { border: 0; background: transparent; border-radius: 6px; padding: 5px 0; cursor: pointer; font-weight: 600; font-size: 0.74rem; color: var(--text-secondary); font-family: var(--font-sans); }
.cuad-pool-seg button.is-active { background: var(--seg-active-bg); border: 1px solid var(--seg-active-border); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.cuad-pool-seg button span { font-size: 0.66rem; font-weight: 700; color: #d97706; margin-left: 2px; }
.cuad-pool-filter { display: flex; align-items: center; gap: 7px; padding: 5px 5px 5px 9px; border-radius: 9px; font-size: 0.74rem; color: #d97706; background: color-mix(in srgb, #d97706 12%, transparent); border: 1px solid color-mix(in srgb, #d97706 35%, transparent); }
.cuad-pool-filter span { flex: 1; }
.cuad-pool-filter button { border: 0; background: transparent; color: inherit; cursor: pointer; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; padding: 0; }
.cuad-pool-list { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.2rem; }
.cuad-pool-empty { font-size: 0.75rem; color: var(--text-secondary); text-align: center; padding: 1rem 0.5rem; }
.staff-drag-badge.cuad-person, .location-drag-badge.cuad-loc-badge { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 7px; margin: 0; border-radius: 10px; border: 1px solid transparent; border-left: 1px solid transparent; background: transparent; box-shadow: none; transform: none; cursor: grab; font-weight: 400; }
.staff-drag-badge.cuad-person:hover, .location-drag-badge.cuad-loc-badge:hover { background: var(--bg-input); border-color: var(--border-color); transform: none; box-shadow: none; }
.location-drag-badge.cuad-loc-badge.is-readonly { cursor: default; opacity: 0.75; }
.cuad-person-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cuad-person-txt b { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuad-person-txt small { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuad-person.has-gap .cuad-person-txt small { color: #d97706; font-weight: 600; }
.cuad-person-week { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.cuad-person-week i, .cuad-pool-legend i { width: 7px; height: 12px; border-radius: 2px; display: block; }
.cuad-person-week i.is-today { height: 16px; }
.cuad-person-week i.is-p, .cuad-pool-legend i.is-p { background: color-mix(in srgb, var(--text-secondary) 45%, transparent); }
.cuad-person-week i.is-u, .cuad-pool-legend i.is-u { background: transparent; box-shadow: inset 0 0 0 1.5px #d97706; }
.cuad-person-week i.is-f, .cuad-pool-legend i.is-f { background: color-mix(in srgb, #7c3aed 45%, transparent); }
.cuad-pool-legend { display: flex; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color); font-size: 0.66rem; color: var(--text-muted); }
.cuad-pool-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cuad-pool-legend i { height: 10px; }
.cuad-loc-badge .cuad-board-ico { width: 28px; height: 28px; }
.cuad-loc-lock { color: var(--text-muted); display: inline-flex; }

/* ── Horario ── */
.cuad-tl-daycards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; background: none; border: 0; border-radius: 0; padding: 0; margin-bottom: 4px; }
.cuad-tl-daycards .cuad-dh { cursor: pointer; }
.cuad-tl-daycards .cuad-dh:hover { border-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent); }
.cuad-tl-daycards .cuad-dh.is-weekend:not(.is-active) { background: color-mix(in srgb, var(--text-muted) 8%, var(--bg-secondary)); }
.cuad-tl-daycards .cuad-dh.is-active { border-color: var(--accent-cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-cyan) 16%, transparent); background: color-mix(in srgb, var(--accent-cyan) 14%, var(--bg-secondary)); }
.cuad-tl-daycards .cuad-dh.is-active b { color: var(--nav-active-text, var(--accent-cyan)); }
.cuad-tl-hint { display: flex; align-items: center; gap: 6px; margin: 8px 2px; font-size: 0.7rem; color: var(--text-muted); }
.cuad-tl-block { border-left-width: 4px; border-radius: 7px; }
.cuad-tl-block.readonly { background: repeating-linear-gradient(135deg, var(--bg-card) 0 6px, color-mix(in srgb, var(--rc-color, var(--accent-cyan)) 10%, var(--bg-card)) 6px 12px); }
.cuad-tl-team .cuad-tl-lane.is-unplaced .cuad-tl-track { background-color: transparent; }
.cuad-tl-team .cuad-tl-lane.is-unplaced .cuad-tl-lane-head { box-shadow: inset 3px 0 0 #d97706; }
.cuad-tl-team .cuad-tl-lane.is-unplaced .cuad-tl-lane-head small { color: #d97706; font-weight: 700; }
.cuad-tl-team .cuad-tl-empty { left: 8px; right: 8px; top: 8px; bottom: 8px; transform: none; display: flex; align-items: center; padding-left: 10px; border: 1px dashed rgba(217, 119, 6, 0.55); border-radius: 8px; pointer-events: none; }
@container cuadbar (max-width: 1000px) {
  .cuad-tl-daycards .cuad-dh { padding: 6px 6px 6px 8px; }
}

.or-planner-layout {
  display: grid;
  grid-template-columns: 295px 1fr;
  gap: 1rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Cuadrante: pega la barra lateral a los calendarios, sin apenas separación.
   La columna de la barra se ajusta a su ancho real (max-width 240px del panel)
   en vez de reservar 295px fijos, que dejaban ~55px de hueco muerto.
   grid-template-rows con minmax(0, 1fr) deja que la fila se encoja por debajo
   del alto natural de la tabla; sin esto la rejilla crecía a lo alto y
   .or-planner-layout (overflow: hidden) recortaba el contenido sin scroll. */
#tab-cuadrante .or-planner-layout {
  grid-template-columns: auto 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 0.25rem;
}

/* El contenedor de la rejilla necesita min-height: 0 para poder encogerse
   dentro de su columna flex y activar su propio scroll.
   overflow va aquí (no solo inline) porque renderCuadrante() borra el estilo
   inline en cada render de las vistas que no son Guardias
   (matrixContainer.style.overflow = ''), lo que dejaba el div sin scroll.
   La vista Guardias sigue forzando overflow: visible inline, que prevalece. */
#tab-cuadrante #cuadrante-matrix-container {
  min-height: 0;
  overflow: auto;
  /* Tope de altura contra el viewport como red de seguridad: aunque la
     cadena flex/grid de ancestros no acote bien la altura, el contenedor
     nunca pasa de esto y su overflow: auto genera scroll. ~200px = cabecera
     de la app + barra del módulo + navegador semanal + paddings. */
  max-height: calc(100dvh - 200px);
}

.or-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0.75rem;
}

/* Cuadrante Matrix Table & Cell Styles */

/* Columna de HOY resaltada. */

.cuadrante-cell {
  padding: 0.3rem;
  vertical-align: middle !important;
  text-align: center;
  min-height: 40px;
  transition: var(--transition-fast);
}

.cuadrante-cell.drag-over {
  outline: 2px solid var(--accent-cyan);
  outline-offset: -2px;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3) inset;
}

.cuadrante-cell.readonly-or {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px);
}

/* Menú rápido "Asignar cirujano" (alternativa a arrastrar): lista de
   profesionales dentro del popover .cuadrante-quick-assign-popover. */
.cuad-quick-assign-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  transition: var(--transition-fast);
}
.cuad-quick-assign-item:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: var(--accent-cyan);
}

.location-drag-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: grab;
  font-weight: 800;
  font-size: 0.76rem;
  transition: var(--transition-fast);
}

.location-drag-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.or-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.patient-card-compact {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.75rem;
  cursor: grab;
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
}

.patient-card-compact:hover {
  border-color: var(--border-highlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  background: var(--bg-card-hover);
}

.patient-card-compact:active {
  cursor: grabbing;
}

.weekly-schedule-container {
  flex: 1;
  height: 100%;
  overflow-x: auto !important;
  overflow-y: auto !important;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.weekly-schedule-container::-webkit-scrollbar-track {
  margin: 6px;
  background: transparent;
}

.weekly-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1050px;
  table-layout: fixed;
  height: 100%;
}

.weekly-table th {
  background: var(--bg-primary);
  padding: 0.65rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  font-size: 0.82rem;
  font-weight: 700;
}

.weekly-table th.or-header-col {
  width: 125px;
  min-width: 125px;
  max-width: 125px;
  text-align: center;
  padding: 0.5rem;
}

.weekly-table th.day-header-col,
.weekly-table td.day-cell {
  width: calc((100% - 125px) / 5);
}

/* Parte: semana entera (lun-dom). Cada día mide lo mismo que cuando solo
   había 5 (el ancho visible menos la columna de quirófanos, entre 5), así que
   de lunes a viernes llenan la pantalla y sábado y domingo quedan a la derecha
   con scroll horizontal; la columna de quirófanos se queda fija. El mínimo
   (185px por día) es el que ya daba el min-width de 1050px con 5 días. */
#parte-weekly-container .weekly-table {
  width: calc(125px + (100% - 125px) * 7 / 5);
  min-width: calc(125px + 185px * 7);
  flex-shrink: 0;
}

#parte-weekly-container .weekly-table th.or-header-col,
#parte-weekly-container .weekly-table td.or-row-label {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-primary);
  box-shadow: 1px 0 0 var(--border-color);
}

/* Esquina (Quirófanos): fija en los dos ejes, por encima del resto. */
#parte-weekly-container .weekly-table thead th.or-header-col {
  z-index: 4;
  box-shadow: 1px 0 0 var(--border-color), inset 0 -1px 0 var(--border-color);
}

/* Igual que en el timeline: la barra de scroll siempre visible (la global,
   superpuesta en macOS, no aparece hasta desplazar y con ratón no hay forma). */
#parte-weekly-container {
  scrollbar-width: auto;
  scrollbar-color: auto;
}

#parte-weekly-container::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

#parte-weekly-container::-webkit-scrollbar-track {
  margin: 0;
  background: var(--bg-primary);
  border-radius: 0;
}

#parte-weekly-container::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.45);
  border: 3px solid transparent;
  border-radius: 9999px;
  background-clip: padding-box;
}

#parte-weekly-container::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.75);
  background-clip: padding-box;
}

#parte-weekly-container .weekly-table th.day-header-col,
#parte-weekly-container .weekly-table td.day-cell {
  width: calc((100% - 125px) / 7);
}

#parte-weekly-container .weekly-table th.or-header-col {
  width: 125px;
}

/* Día actual: toda la columna (cabecera + cada celda de cada fila) con un
   azul pastel muy tenue, para localizarlo de un vistazo entre los demás. */
.weekly-table th.day-header-col.is-today,
.weekly-table td.day-cell.is-today {
  background: rgba(2, 132, 199, 0.07);
}

/* Parte: la fila de los días queda fija al desplazar en vertical, a cualquier
   ancho. Fondo opaco (si no, las tarjetas se verían a través) con el tinte de
   "hoy" superpuesto como degradado; border-collapse descuelga el borde
   inferior de una celda sticky, así que se repone con box-shadow. */
#parte-weekly-container .weekly-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-primary);
  box-shadow: inset 0 -1px 0 var(--border-color);
}

#parte-weekly-container .weekly-table thead th.day-header-col.is-today {
  background: linear-gradient(rgba(2, 132, 199, 0.07), rgba(2, 132, 199, 0.07)), var(--bg-primary);
}

.weekly-table td {
  padding: 0.4rem;
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  vertical-align: top;
}

/* Compact Operating Room Row Header Label Size -- antes esta celda llevaba
   display:flex para maquetar sus dos divs (nombre+botón y tipo), pero eso la
   saca del algoritmo de tabla: al dejar de comportarse como table-cell,
   border-collapse ya no le fusiona bordes con la celda de al lado ni con la
   fila de abajo, y el propio borde declarado en la celda no llega a
   pintarse (se perdían la línea vertical con la columna Lunes y la línea
   horizontal entre filas). Sin display:flex, los dos divs ya se apilan
   solos (ambos son bloque) contra el borde superior -- que es justo donde
   deben quedar; vertical-align:top (heredado de .weekly-table td) ya lo
   consigue sin que haga falta declararlo aquí. */
.weekly-table td.or-row-label {
  padding: 0.45rem 0.5rem;
  font-weight: 700;
  font-size: 0.78rem;
  width: 125px;
  min-width: 125px;
  max-width: 125px;
  background: var(--bg-primary);
  box-sizing: border-box;
}

.or-row-label span {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.25;
}

.or-tag {
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.2;
}

/* El color del quirófano es un hexadecimal libre (migración 123): cada
   fila lleva style="--or-color:#…" y una sola regla pinta la franja y la
   etiqueta de tipo. Sustituye a las doce clases .or-color-*. */
.or-colored { border-left: 5px solid var(--or-color, #10b981) !important; }
.or-colored .or-tag {
  background: color-mix(in srgb, var(--or-color, #10b981) 15%, transparent);
  color: color-mix(in srgb, var(--or-color, #10b981) 55%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--or-color, #10b981) 30%, transparent);
}

/* Sin caja propia (ni fondo ni borde) -- el slot es solo un contenedor de
   layout; el "Libre" centrado o la tarjeta de la cirugía ya se distinguen
   por sí solos. El resalte al arrastrar un paciente encima sigue marcado. */
.weekly-slot {
  min-height: 70px;
  height: 100%;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.28rem;
  background: transparent;
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.weekly-slot.drag-over {
  border: 1px dashed var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
}

.weekly-slot.readonly {
  cursor: not-allowed;
  opacity: 0.85;
}

/* ==========================================================================
   PARTE QUIRÚRGICO SEMANAL -- Tarjeta de caso (rediseño 2026-08)
   Objetivos: borde exterior neutro (el azul intenso queda reservado a
   selección/arrastre), nombre y procedimiento hasta 2 líneas sin truncar,
   ubicación en una barra plana y sobria, y estado/alertas en una única
   línea inferior alineada. Paleta reducida: cian (datos clínicos y
   ubicación), violeta (intervención), verde (estados correctos), coral
   (alertas tipo CEC) y naranja (requisitos pendientes / incidencias).
   Todo el bloque va scopeado a .weekly-table para no tocar el lateral de
   candidatos, la vista Timeline ni el resto de la app.
   ========================================================================== */
.weekly-table .pqc-card {
  gap: 0.35rem;
  border: 1px solid var(--border-color);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

/* Separación entre las cajas de la tarjeta: la controla únicamente el `gap`
   de arriba. Se anulan los margin sueltos (algunos inline) que se sumaban
   al gap y agrandaban los huecos. */
.weekly-table .pqc-card .pqc-header,
.weekly-table .pqc-card .patient-diag-compact,
.weekly-table .pqc-card .pqc-proc {
  margin-bottom: 0 !important;
}

.weekly-table .pqc-card .pqc-loc,
.weekly-table .pqc-card .pqc-footer {
  margin-top: 0 !important;
}

.weekly-table .pqc-card:hover {
  border-color: var(--border-highlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  background: var(--bg-card-hover);
}

/* Cirugía suspendida: se queda en su sitio del Parte, en rojo y sin acciones
   (no se arrastra ni ocupa el hueco). Ver renderSuspendedParteCard. */
.weekly-table .pqc-card.pqc-card--suspended,
.weekly-table .pqc-card.pqc-card--suspended:hover {
  gap: 0.2rem;
  cursor: default;
  border: 1.5px solid rgba(220, 68, 60, 0.85);
  background: rgba(220, 68, 60, 0.09);
  box-shadow: inset 3px 0 0 rgba(220, 68, 60, 0.9);
  transform: none;
  padding: 0.34rem 0.48rem 0.34rem 0.6rem;
  margin-bottom: 0.24rem;
}

.weekly-table .pqc-card--suspended .pqc-suspended-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.16rem 0.4rem;
  border-radius: 6px;
  background: #d8413a;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.weekly-table .pqc-card--suspended .pqc-suspended-head {
  display: flex;
  align-items: center;
  gap: 0.24rem;
  min-width: 0;
}

.weekly-table .pqc-card--suspended .pqc-name {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-primary);
}

.weekly-table .pqc-card--suspended .pqc-suspended-proc,
.weekly-table .pqc-card--suspended .pqc-suspended-reason {
  font-size: 0.62rem;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.weekly-table .pqc-card--suspended .pqc-suspended-proc {
  color: var(--text-secondary);
  font-weight: 600;
}

.weekly-table .pqc-card--suspended .pqc-suspended-reason {
  color: #d8413a;
  font-weight: 700;
}

/* El azul/cian intenso solo aparece al seleccionar o arrastrar. */
.weekly-table .pqc-card.tap-selected,
.weekly-table .pqc-card.dragging,
.weekly-table .pqc-card.pcm-dragging {
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-glow);
}

/* ==========================================================================
   ARRASTRE CON PULSACIÓN LARGA -- anti-tirones
   La tarjeta levantada la mueve JS escribiendo style.transform en cada frame.
   `.patient-card-compact` (que llevan tanto la tarjeta de la rejilla como la
   del cajón) define `transition: var(--transition-fast)` = "all 0.18s", que
   incluye transform: sin anular esa transición, el navegador ANIMA cada
   escritura 180ms en vez de aplicarla al instante y la tarjeta persigue al
   dedo con retraso -- eso es la lentitud/tirones (mismo hallazgo que en el
   arrastre de Censo en iPhone; allí la solución vive en mobile.css bajo
   @media <=480px y no llegaba a la rejilla del Parte en tablet).
   No van en un @media: solo actúan mientras las clases de arrastre están
   puestas, es decir, durante un arrastre real, en cualquier ancho.
   ========================================================================== */
.pcm-dragging {
  transition: none !important;
  will-change: transform;
  contain: layout paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 600;
  pointer-events: none;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
}

body.pcm-drag-active {
  -webkit-user-select: none;
  user-select: none;
}

/* Se quita el backdrop-filter (el blur de los .glass-panel) del cajón y de la
   rejilla durante un arrastre, por dos motivos:
   1. Rendimiento: se recalcula en cada frame mientras la tarjeta position:fixed
      pasa por delante; en Safari/iOS es de lo más caro de recomponer.
   2. Arrastre nativo (portátil): backdrop-filter en un ancestro, igual que un
      transform, impide que Chrome genere la miniatura de arrastre de una
      tarjeta que esté dentro -- por eso no se podía arrastrar un candidato
      desde el cajón. La clase se pone en dragstart (arrastre nativo) o en
      beginMobileCardDrag (táctil), antes de que el navegador capture la
      miniatura, y se recupera al soltar.
   El selector cubre los dos estados: .parte-dragging (nativo) y
   .pcm-drag-active (táctil / pulsación larga). */
body.pcm-drag-active #parte-weekly-container,
body.pcm-drag-active #or-sidebar-dropzone,
body.parte-dragging #parte-weekly-container,
body.parte-dragging #or-sidebar-dropzone {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ==========================================================================
   TAP-TO-SELECT / TAP-TO-PLACE
   Alternativa táctil al drag&drop nativo (que no dispara con el dedo en iOS
   Safari). Va aquí y sin media query, no en mobile.css, para que también
   funcione en tablet/portátil táctil.
   El modo lo activa JS únicamente con pointerType 'touch' (handleTapSelect),
   así que con ratón estas reglas nunca llegan a aplicarse.
   ========================================================================== */
.tap-selected {
  outline: 2px solid var(--accent-cyan);
  outline-offset: -2px;
  box-shadow: var(--shadow-glow);
}

body.tap-drag-active .hospital-dropzone,
body.tap-drag-active .unit-dropzone,
body.tap-drag-active .day-cell,
body.tap-drag-active .cuadrante-cell {
  outline: 2px dashed var(--accent-cyan);
  outline-offset: -2px;
  background: rgba(6, 182, 212, 0.06);
}

/* ==========================================================================
   Quirófano no disponible ese día (Configurar Quirófano → Solo ciertos días)
   Parte semanal, línea de tiempo y modal Programar: rojo con una X en medio y
   sin poder soltar/asignar nada. Va después del resaltado de "toca un
   destino" para que ese no lo tape.
   ========================================================================== */
.weekly-table td.day-cell.day-cell--unavailable,
body.tap-drag-active .day-cell.day-cell--unavailable {
  background: repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.13) 0 8px, rgba(239, 68, 68, 0.07) 8px 16px);
  outline: none;
  cursor: not-allowed;
}

.day-cell--unavailable .weekly-slot {
  position: relative;
}

.room-unavailable-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  pointer-events: none;
}

.room-unavailable-x {
  width: 34px;
  height: 34px;
  opacity: 0.75;
}

.room-track.room-track--unavailable {
  background-color: rgba(239, 68, 68, 0.08);
  background-image: repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0 8px, transparent 8px 16px) !important;
  background-size: auto !important;
  cursor: not-allowed;
}

.room-track--unavailable .room-unavailable-mark {
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.room-track--unavailable .room-unavailable-x {
  width: 22px;
  height: 22px;
}

.program-cell-unavailable-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ef4444;
}

.program-cell-unavailable-label .room-unavailable-x {
  width: 14px;
  height: 14px;
  opacity: 1;
}

body.tap-drag-active::after {
  content: "Toca un destino para colocarlo aquí — toca la tarjeta de nuevo para cancelar";
  position: fixed;
  left: 0.5rem;
  right: 0.5rem;
  bottom: calc(var(--mobile-nav-h, 0px) + 1rem);
  z-index: 210;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

/* Cuando el candidato se cogió desde el cajón (que se ha cerrado), la tarjeta
   ya no está a la vista: el aviso indica cómo cancelar sin ella. */
body.tap-drag-active.parte-tap-held::after {
  content: "Toca un quirófano/día para colocar — o abre «Candidatos a programar» para elegir otro";
}

/* Cabecera: nº de turno y hora con tamaño fijo. Todo va centrado
   verticalmente entre sí (badge, hora y nombre), aunque el nombre ocupe
   dos líneas. */
.weekly-table .pqc-card .turn-badge {
  flex: none;
  font-size: 0.62rem;
  padding: 0.06rem 0.3rem;
}

.weekly-table .pqc-card .pqc-tag {
  font-size: 0.54rem !important;
  padding: 0.06rem 0.3rem !important;
}

/* Columna con el carácter y la hora, apilados, a la izquierda del nombre. */
.weekly-table .pqc-card .pqc-header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.06rem;
  flex: none;
}

/* La hora en una cajita gris clara, sin borde. */
.weekly-table .pqc-card .pqc-time {
  flex: none;
  color: var(--text-secondary);
  background: rgba(120, 130, 145, 0.15);
  border: 0;
  border-radius: 4px;
  padding: 0.02rem 0.22rem !important;
  font-size: 0.5rem !important;
  line-height: 1.3;
}

.weekly-table .pqc-card .pqc-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  line-height: 1.16;
  word-break: break-word;
}

/* Intervención quirúrgica: mismo tono violeta que el resto (mockup #b52bdc),
   fondo plano de ese mismo color. Es el dato que define el caso, así que
   nunca se recorta a "quirúr…": hasta 2 líneas y, si va a 2, la segunda
   línea se alinea con la primera (sangría francesa) y NO se mete bajo el
   icono del bisturí -- icono en su propia columna, texto en la suya. */
.weekly-table .pqc-card .pqc-proc {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #b52bdc;
  background: rgba(181, 43, 220, 0.08);
  border: 1px solid rgba(181, 43, 220, 0.26);
  line-height: 1.22;
}

.weekly-table .pqc-card .pqc-proc-icon {
  flex: none;
}

.weekly-table .pqc-card .pqc-proc-text {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.weekly-table .pqc-card .pqc-proc svg.icon-inline {
  color: currentColor;
}

/* Equipo quirúrgico: se mantiene la caja de columnas CIR/AYU/MIR/ANE pero
   gris claro y neutra, sin tinte cian, para bajar el ruido visual. */
.weekly-table .pqc-card .surgical-team-box.team-columns {
  background: var(--bg-primary);
  border-color: var(--border-color);
}

.weekly-table .pqc-card .surgical-team-box.team-columns:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-highlight);
}

/* Ubicación: una sola barra plana, en blanco (sin tinte), en vez de las dos
   cajas con degradado que parecían campos editables. */
.weekly-table .pqc-card .pqc-loc {
  display: flex;
  align-items: stretch;
  margin-top: 0.16rem;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.weekly-table .pqc-card .pqc-loc-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.14rem 0.24rem;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--accent-cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compacta las columnas CIR/AYU/MIR/ANE dentro de la tarjeta del Parte
   (rediseño "más pequeñas para que quepan 4-5 por hueco de quirófano") sin
   tocar la caja más grande que usa el mismo team-columns fuera de aquí
   (p.ej. el lateral de candidatos). */
.weekly-table .pqc-card .team-columns .team-col {
  padding: 0.1rem 0.2rem 0.16rem;
}

.weekly-table .pqc-card .team-columns .team-col-role {
  font-size: 0.5rem;
}

.weekly-table .pqc-card .team-columns .team-col-name {
  font-size: 0.6rem;
}

.weekly-table .pqc-card .pqc-loc-item svg.icon-inline {
  color: currentColor;
}

.weekly-table .pqc-card .pqc-loc-item--dest {
  font-weight: 800;
}

.weekly-table .pqc-card .pqc-loc-item--dest[onclick] {
  cursor: pointer;
}

.weekly-table .pqc-card .pqc-loc-item--dest[onclick]:hover {
  background: rgba(6, 182, 212, 0.12);
}

.weekly-table .pqc-card .pqc-loc-sep {
  flex: none;
  width: 1px;
  align-self: stretch;
  background: rgba(6, 182, 212, 0.28);
}

/* Tarjeta de marcapasos: fila "CX <cirujano> | cama" + botones redondos de
   acción, sustituyendo el bloque de equipo (CIR/AYU/MIR/ANE) y la ubicación
   para que la tarjeta quede más corta y quepan 4-5 por hueco de quirófano. */
.weekly-table .pqc-card .pqc-cx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  margin-top: 0.18rem;
}

.weekly-table .pqc-card .pqc-cx-info {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.weekly-table .pqc-card .pqc-cx-label {
  color: var(--accent-cyan);
  font-weight: 800;
  font-size: 0.56rem;
  flex-shrink: 0;
}

.weekly-table .pqc-card .pqc-cx-sep {
  color: var(--border-color);
  flex-shrink: 0;
}

.weekly-table .pqc-card .pqc-cx-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

/* Pie: "Operado" a la izquierda, "Material" centrado y la alerta (CEC /
   MARCAPASOS) a la derecha. Sin línea separadora respecto a la ubicación.
   Los tres van sobre la misma base; si no caben, envuelven sin descolocarse
   (los márgenes auto de "Material" lo centran en la fila que le toque). */
.weekly-table .pqc-card .pqc-footer {
  display: flex;
  align-items: center;
  gap: 0.24rem;
  margin-top: 0.22rem;
  flex-wrap: wrap;
}

/* El chip de Material va pegado a Suspendido (los tres botones de acción
   agrupados a la izquierda); antes se centraba con margin auto cuando solo
   había Operado + Material. */
.weekly-table .pqc-card .pqc-chip--mat {
  margin-left: 0;
  margin-right: 0;
}

/* La alerta (CEC / MARCAPASOS) siempre a la derecha, también cuando envuelve
   a una segunda fila. */
.weekly-table .pqc-card .pqc-footer > .pqc-tag {
  margin-left: auto;
  flex: none;
}

.weekly-table .pqc-card .pqc-tag {
  flex: none;
}

/* "Operado" y "Material" con la misma forma que la etiqueta de CEC
   (.tag-pill): rectángulo de esquinas 4px, mismo tamaño de texto y padding.
   Solo cambia el color, que se conserva (verde / verde sólido / naranja). */
.weekly-table .pqc-card .pqc-chip {
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  padding: 0.08rem 0.34rem;
  gap: 0.18rem;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}

/* Variante solo-icono: el texto no cabía en la tarjeta, así que Operado /
   Suspendido / Material quedan como botones cuadrados de icono. */
.weekly-table .pqc-card .pqc-chip--icon {
  gap: 0;
  padding: 0.12rem;
  line-height: 0;
}

.weekly-table .pqc-card .pqc-chip--icon .icon-inline {
  width: 13px;
  height: 13px;
}

.weekly-table .pqc-card .pqc-chip--ok {
  color: #0f9d6b;
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.1);
}

.weekly-table .pqc-card .pqc-chip--ok:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.18);
}

.weekly-table .pqc-card .pqc-chip--solid {
  color: #ffffff;
  border-color: #10b981;
  background: #10b981;
  font-weight: 800;
}

.weekly-table .pqc-card .pqc-chip--solid:hover {
  background: #0ea371;
}

/* Naranja: reservado a requisitos pendientes (material sin visto bueno). */
.weekly-table .pqc-card .pqc-chip--warn {
  color: #b7791f;
  border-color: rgba(217, 119, 6, 0.5);
  background: rgba(217, 119, 6, 0.1);
}

.weekly-table .pqc-card .pqc-chip--warn:hover {
  border-color: #d97706;
  background: rgba(217, 119, 6, 0.18);
}

/* Coral: suspender la cirugía (el paciente vuelve a preoperatorio). Distinto
   del naranja de "material pendiente" y del verde de "operado". */
.weekly-table .pqc-card .pqc-chip--susp {
  color: #d1544a;
  border-color: rgba(239, 107, 103, 0.5);
  background: rgba(239, 107, 103, 0.1);
}

.weekly-table .pqc-card .pqc-chip--susp:hover {
  border-color: #ef6b67;
  background: rgba(239, 107, 103, 0.18);
}

/* Coral (no rojo puro) para la alerta de CEC. */
.weekly-table .pqc-card .pqc-tag--cec {
  background: rgba(239, 107, 103, 0.14) !important;
  color: #d9534f !important;
  -webkit-text-fill-color: #d9534f !important;
  border: 1px solid rgba(239, 107, 103, 0.45) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.weekly-table .pqc-card .pqc-tag--cec svg {
  filter: saturate(0.8);
}

/* ==========================================================================
   PARTE QUIRÚRGICO · restyling 2026-09
   Tarjeta (misma estructura y altura, estilos de la barra única y del
   Cuadrante), carácter en la pastilla de la hora, cabeceras de día con
   resumen, raíl del fin de semana y panel de candidatos a la derecha.
   ========================================================================== */

/* Colores de texto del parte: claros sobre el tema oscuro, más saturados
   sobre el claro para que se lean sobre blanco. */
:root {
  --pq-diag: #67e8f9;
  --pq-proc: #c4b5fd;
  --pq-proc-bg: rgba(167, 139, 250, 0.09);
  --pq-warn: #fcd34d;
  --pq-danger: #fca5a5;
  --pq-ok: #6ee7b7;
  --pq-urg: #fdba74;
  --pq-uci: #7dd3fc;
  --pq-urp: #d8b4fe;
}
[data-theme="light"] {
  --pq-diag: #0e7490;
  --pq-proc: #7c3aed;
  --pq-proc-bg: rgba(124, 58, 237, 0.08);
  --pq-warn: #b45309;
  --pq-danger: #dc2626;
  --pq-ok: #047857;
  --pq-urg: #c2410c;
  --pq-uci: #0369a1;
  --pq-urp: #7e22ce;
}

/* ---- Tarjeta ---- */
.weekly-table .pqc-card {
  border-radius: 10px;
  gap: 0.3rem;
}

/* Orden: pastilla tintada sin borde ni sombra */
.weekly-table .pqc-card .turn-badge {
  background: rgba(6, 182, 212, 0.14);
  color: var(--accent-cyan);
  border: 0;
  box-shadow: none;
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.08rem 0.34rem;
  line-height: 1.25;
}
.weekly-table .pqc-card .turn-badge:hover { background: rgba(6, 182, 212, 0.24); transform: none; }

/* Hora (+ carácter) en línea con el orden */
.weekly-table .pqc-card .pqc-header-meta { flex-direction: row; align-items: center; gap: 0.2rem; }
.weekly-table .pqc-card .pqc-time {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 0.58rem !important;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0.02rem 0.24rem !important;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.weekly-table .pqc-card button.pqc-time { cursor: pointer; margin: 0; }
.weekly-table .pqc-card button.pqc-time:hover,
.weekly-table .pqc-card button.pqc-time:focus-visible { border-style: dashed; border-color: var(--accent-cyan); color: var(--text-primary); outline: none; }
.weekly-table .pqc-card .pqc-time--notime { color: var(--text-muted); }
.weekly-table .pqc-card .pqc-time--car { padding: 0 0.24rem 0 0 !important; }
.weekly-table .pqc-card .pqc-time--car .pqc-car {
  display: inline-grid;
  place-items: center;
  padding: 0 0.2rem;
  margin-right: 0.22rem;
  font-weight: 800;
  font-size: 0.54rem;
}
.weekly-table .pqc-card .pqc-time--car.pqc-time--notime .pqc-car { margin-right: -0.24rem; }
.weekly-table .pqc-card .pqc-time--urg { border-color: rgba(249, 115, 22, 0.55); }
.weekly-table .pqc-card .pqc-time--urg .pqc-car { background: rgba(249, 115, 22, 0.22); color: var(--pq-urg); }
.weekly-table .pqc-card .pqc-time--emerg { border-color: #ef4444; }
.weekly-table .pqc-card .pqc-time--emerg .pqc-car { background: #dc2626; color: #fff; }
.weekly-table .pqc-card.pqc-card--urg { box-shadow: inset 3px 0 0 #f97316; }
.weekly-table .pqc-card.pqc-card--emerg { box-shadow: inset 3px 0 0 #ef4444; border-color: rgba(239, 68, 68, 0.4); }

/* Nombre, diagnóstico y procedimiento (el tamaño del nombre lo ajusta
   fitPatientCardNames en línea, aquí solo el peso) */
.weekly-table .pqc-card .pqc-name { font-weight: 700 !important; letter-spacing: -0.005em; line-height: 1.2; }
.weekly-table .pqc-card .patient-diag-compact { font-size: 0.66rem !important; font-weight: 500 !important; color: var(--pq-diag) !important; }
.weekly-table .pqc-card .pqc-proc {
  color: var(--pq-proc);
  background: var(--pq-proc-bg);
  border: 0;
  border-radius: 6px !important;
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  padding: 0.2rem 0.4rem !important;
}
.weekly-table .pqc-card .pqc-proc-icon { width: 13px; height: 13px; opacity: 0.85; }

/* Equipo: mismas columnas, más planas */
.weekly-table .pqc-card .surgical-team-box.team-columns { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 7px; }
.weekly-table .pqc-card .team-columns .team-col { border-top-width: 2px; border-left-color: var(--border-color); padding: 0.12rem 0.2rem 0.16rem; }
.weekly-table .pqc-card .team-columns .team-col-role { font-size: 0.5rem; letter-spacing: 0.06em; }
.weekly-table .pqc-card .team-columns .team-col-name { font-weight: 600; }

/* Ubicación → destino: texto neutro que se recorta con «…» por detrás */
.weekly-table .pqc-card .pqc-loc { border-radius: 7px; background: var(--bg-input); }
.weekly-table .pqc-card .pqc-loc-item { display: block; line-height: 1.5; color: var(--text-secondary); font-size: 0.62rem; font-weight: 600; padding: 0.12rem 0.36rem; }
.weekly-table .pqc-card .pqc-loc-item > svg.icon-inline { width: 12px; height: 12px; vertical-align: -2px; margin-right: 1px; }
.weekly-table .pqc-card .pqc-loc-item:first-child { flex: 1.5; }
.weekly-table .pqc-card .pqc-loc-item--dest { font-weight: 700; }
.weekly-table .pqc-card .pqc-loc-sep { background: var(--border-color); }

/* Botones: cuadrados de 22px con el color en icono y borde */
.weekly-table .pqc-card .pqc-chip--icon { width: 22px; height: 22px; padding: 0; display: inline-grid; place-items: center; border-radius: 7px; background: var(--bg-input); }
.weekly-table .pqc-card .pqc-chip--icon .icon-inline { width: 13px; height: 13px; }
/* Faltan consentimientos: el icono y cuántos (consents de /api/parte). */
.weekly-table .pqc-card .pqc-chip--ci { width: auto; display: inline-flex; gap: 2px; padding: 0 5px; font-size: 0.62rem; }
.weekly-table .pqc-card .pqc-chip--ok { color: var(--pq-ok); border-color: rgba(16, 185, 129, 0.35); }
.weekly-table .pqc-card .pqc-chip--susp { color: var(--pq-danger); border-color: rgba(239, 68, 68, 0.35); }
.weekly-table .pqc-card .pqc-chip--warn { color: var(--pq-warn); border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); }
.weekly-table .pqc-card .pqc-chip--solid { color: var(--pq-ok); border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.12); }
.weekly-table .pqc-card .pqc-chip--solid:hover { background: rgba(16, 185, 129, 0.2); }

/* CEC */
.weekly-table .pqc-card .pqc-tag--cec {
  background: rgba(239, 68, 68, 0.14) !important;
  color: var(--pq-danger) !important;
  -webkit-text-fill-color: var(--pq-danger) !important;
  border: 0 !important;
  border-radius: 5px;
  font-size: 0.56rem !important;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.36rem !important;
}

/* Marcapasos: CX | cama */
.weekly-table .pqc-card .pqc-cx-info { font-size: 0.64rem; font-weight: 600; }
.weekly-table .pqc-card .pqc-cx-label { font-size: 0.54rem; letter-spacing: 0.06em; }
.weekly-table .pqc-card .manufacturer-logo-badge { border-radius: 5px; }

/* Suspendida: etiqueta compacta en vez de banda roja de ancho completo */
.weekly-table .pqc-card.pqc-card--suspended,
.weekly-table .pqc-card.pqc-card--suspended:hover {
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.06);
  box-shadow: inset 3px 0 0 #ef4444;
  border-radius: 10px;
}
.weekly-table .pqc-card--suspended .pqc-suspended-tag {
  align-self: flex-start;
  background: rgba(239, 68, 68, 0.16);
  color: var(--pq-danger);
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  padding: 0.08rem 0.36rem;
  border-radius: 5px;
}
.weekly-table .pqc-card--suspended .pqc-suspended-tag svg { width: 11px; height: 11px; }
.weekly-table .pqc-card--suspended .pqc-name { font-size: 0.75rem; font-weight: 700; }
.weekly-table .pqc-card--suspended .pqc-suspended-proc { font-size: 0.64rem; color: var(--text-secondary); }
.weekly-table .pqc-card--suspended .pqc-suspended-reason { font-size: 0.64rem; color: var(--pq-danger); font-weight: 600; }

/* ---- Tablero semanal ---- */
/* Quirófanos a 100px y días repartiendo el resto. Plegado: lunes-viernes
   llenan el ancho y el raíl de 36px queda a la derecha. Desplegado: sin raíl
   (el botón de plegar va en la cabecera del domingo), cada día mide lo mismo
   que plegado y sábado y domingo quedan con scroll lateral. */
#parte-weekly-container .weekly-table {
  width: calc(100px + (100% - 136px) * 7 / 5);
  min-width: calc(100px + 185px * 7);
}
#parte-weekly-container .weekly-table.is-weekend-folded {
  width: 100%;
  min-width: calc(136px + 185px * 5);
}
#parte-weekly-container .weekly-table.is-weekend-folded .is-weekend { display: none; }
#parte-weekly-container .weekly-table th.day-header-col,
#parte-weekly-container .weekly-table td.day-cell { width: auto; }
#parte-weekly-container .weekly-table th.or-header-col,
#parte-weekly-container .weekly-table td.or-row-label { width: 100px; min-width: 100px; max-width: 100px; }
#parte-weekly-container .weekly-table th.or-header-col {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 0.5rem 0.55rem;
}
#parte-weekly-container .weekly-table td.or-row-label { padding: 0.45rem 0.4rem 0.45rem 0.5rem; }
#parte-weekly-container .weekly-table td.or-row-label.or-colored { border-left-width: 3px !important; }
#parte-weekly-container .or-row-label span { font-family: var(--font-heading); font-size: 0.74rem !important; line-height: 1.2; }
#parte-weekly-container .or-row-label .or-tag {
  display: block !important;
  margin-top: 0.15rem !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: var(--text-muted) !important;
  font-size: 0.62rem !important;
  font-weight: 500;
}

/* Cabecera de cada día: nombre y fecha a la izquierda, nº de cirugías y
   cuántas van sin cirujano principal a la derecha */
#parte-weekly-container .weekly-table thead th.day-header-col { padding: 0.45rem 0.5rem 0.45rem 0.6rem; text-align: left; }
.parte-dh { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.parte-dh-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.parte-dh-txt b { font-family: var(--font-heading); font-size: 0.84rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parte-dh-txt small { font-size: 0.68rem; font-weight: 500; color: var(--text-muted); }
th.is-today .parte-dh-txt b { color: var(--accent-cyan); }
#parte-weekly-container .weekly-table thead th.day-header-col.is-today { box-shadow: inset 0 3px 0 var(--accent-cyan), inset 0 -1px 0 var(--border-color); }
.parte-dh-stats { display: inline-flex; gap: 4px; flex-shrink: 0; }
.parte-dh-count,
.parte-dh-warn { display: inline-flex; align-items: center; gap: 3px; font-size: 0.64rem; font-weight: 700; border-radius: 6px; padding: 0.05rem 0.36rem; }
.parte-dh-count { color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border-color); }
.parte-dh-warn { color: var(--pq-warn); background: rgba(245, 158, 11, 0.14); }
/* Quién no está disponible ese día (Ausencias del Cuadrante): rojo y pulsable */
.parte-unavail-pop {
  position: fixed; z-index: 1200; width: 270px; max-width: calc(100vw - 20px);
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px;
  padding: 0.6rem 0.7rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.parte-unavail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.parte-unavail-head b { font-family: var(--font-heading); font-size: 0.82rem; color: #ef4444; }
.parte-unavail-head small { font-size: 0.7rem; color: var(--text-muted); }
.parte-unavail-pop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.parte-unavail-pop li { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.parte-unavail-pop .nm { flex: 1; min-width: 0; font-size: 0.78rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parte-unavail-pop .why {
  flex: none; font-size: 0.64rem; font-weight: 700; border-radius: 999px; padding: 0.08rem 0.45rem;
  color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent);
}
/* Cirugía con alguien del equipo no disponible ese día (se marcó la ausencia
   con la cirugía ya puesta): borde rojo y quién, sin quitar nada. */
.weekly-table .pqc-card.pqc-card--unavail { border-color: rgba(239, 68, 68, 0.8); box-shadow: inset 3px 0 0 rgba(239, 68, 68, 0.9); }
.pqc-unavail {
  display: flex; align-items: center; gap: 4px; margin-bottom: 0.14rem; min-width: 0;
  font-size: 0.6rem; font-weight: 700; color: #ef4444;
}
.pqc-unavail span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Celdas vacías: sin «Libre» (se lee igual) */
#parte-weekly-container .weekly-slot { min-height: 60px; }

/* Raíl del fin de semana */
#parte-weekly-container .weekly-table th.parte-weekend-col,
#parte-weekly-container .weekly-table td.parte-weekend-cell { width: 36px; min-width: 36px; max-width: 36px; padding: 0; }
#parte-weekly-container .weekly-table th.parte-weekend-col { vertical-align: middle; }
#parte-weekly-container .weekly-table:not(.is-weekend-folded) .parte-weekend-col,
#parte-weekly-container .weekly-table:not(.is-weekend-folded) .parte-weekend-cell { display: none; }
.parte-weekend-fold { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; padding: 0; border-radius: 7px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); cursor: pointer; }
.parte-weekend-fold:hover { color: var(--text-primary); border-color: var(--border-highlight); }
/* Plegado, el raíl se queda pegado al borde derecho aunque la rejilla haga
   scroll lateral (portátil/tablet), para que el aviso se vea siempre. */
#parte-weekly-container .weekly-table.is-weekend-folded .parte-weekend-col,
#parte-weekly-container .weekly-table.is-weekend-folded .parte-weekend-cell { position: sticky; right: 0; z-index: 3; box-shadow: -1px 0 0 var(--border-color); }
#parte-weekly-container .weekly-table.is-weekend-folded thead .parte-weekend-col { z-index: 4; box-shadow: -1px 0 0 var(--border-color), inset 0 -1px 0 var(--border-color); }
.parte-weekend-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 28px;
  min-height: 40px;
  margin: 0 auto;
  padding: 4px 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
}
.parte-weekend-btn:hover { color: var(--text-primary); border-color: var(--border-highlight); }
.parte-weekend-btn.has-cases { border-color: rgba(245, 158, 11, 0.55); }
.parte-weekend-days { font-size: 0.56rem; font-weight: 700; line-height: 1.05; letter-spacing: 0.02em; color: var(--text-muted); }
.parte-weekend-badge { min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: #f59e0b; color: #1f1300; font-size: 0.6rem; font-weight: 800; display: grid; place-items: center; }
#parte-weekly-container .weekly-table td.parte-weekend-cell { background: var(--bg-primary); vertical-align: middle; text-align: center; }
#parte-weekly-container .weekly-table td.parte-weekend-cell.has-cases { background: rgba(245, 158, 11, 0.06); }
/* Arrastrando: el raíl se enciende mientras cuenta el tiempo de espera para
   desplegar el fin de semana (ver PARTE_WEEKEND_HOLD_MS en app.js). */
#parte-weekly-container .weekly-table .parte-weekend-cell.is-arming,
#parte-weekly-container .weekly-table .parte-weekend-col.is-arming { background: rgba(6, 182, 212, 0.12); }
.parte-weekend-col.is-arming .parte-weekend-btn { border-color: var(--accent-cyan); color: var(--accent-cyan); animation: parte-weekend-arm 0.9s linear; }
@keyframes parte-weekend-arm { from { box-shadow: inset 0 0 0 0 rgba(6, 182, 212, 0.35); } to { box-shadow: inset 0 -40px 0 0 rgba(6, 182, 212, 0.35); } }
.parte-weekend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }

/* ---- Barra única del Parte (reutiliza .cuad-bar / .cuad-views / .cuad-ibtn) ---- */
.cuad-ibtn[hidden] { display: none; }
.parte-bar-tools { grid-column: 3; display: flex; align-items: center; gap: 8px; min-width: 0; }
.parte-bar-tools > [hidden] { display: none !important; }
.parte-day-seg { margin-right: 0; }
.parte-day-seg button { width: auto; padding: 0 7px; display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; }
.parte-day-seg button small { font-size: 10.5px; font-weight: 500; color: var(--text-muted); }
.parte-day-seg button.is-active small { color: inherit; }
.parte-day-seg button.is-weekend:not(.is-active) { color: var(--text-muted); }
.parte-day-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-cyan); margin-left: 1px; }
.parte-zoom { display: inline-flex; align-items: center; height: 34px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 9px; }
.parte-zoom button { width: 28px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 15px; cursor: pointer; }
.parte-zoom button:hover:not(:disabled) { color: var(--text-primary); }
.parte-zoom button:disabled { opacity: 0.35; cursor: default; }
.parte-zoom-label { min-width: 34px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text-primary); }
.parte-readonly { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; margin-right: 2px; border-radius: 7px; border: 1px dashed var(--border-color); color: var(--text-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.parte-readonly[hidden] { display: none; }

@container cuadbar (max-width: 1180px) {
  .parte-drawer-toggle-label { display: none; }
}
@container cuadbar (max-width: 1000px) {
  .parte-day-seg button small { display: none; }
  .parte-readonly { font-size: 0; gap: 0; padding: 0 6px; }
}
/* Muy estrecho: las herramientas del Timeline bajan a una segunda línea */
@container cuadbar (max-width: 820px) {
  .week-navigator-bar.parte-bar { grid-template-columns: minmax(0, 1fr) max-content max-content; row-gap: 6px; }
  .parte-bar .cuad-views-label { display: none; }
  .parte-bar-tools { grid-column: 1 / -1; grid-row: 2; }
  .parte-bar-tools:not(:has(> :not([hidden]))) { display: none; }
  .parte-bar .cuad-bar-right { grid-column: 3; }
}

/* ---- Candidatos a programar: panel a la derecha ---- */
#tab-parte .or-planner-layout { grid-template-columns: minmax(0, 1fr) 320px; }
#tab-parte .or-planner-layout > .or-sidebar { order: 2; }
#or-sidebar-dropzone { padding: 0; gap: 0; }
.pcand-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 9px 14px; border-bottom: 1px solid var(--border-color); color: var(--accent-cyan); flex-shrink: 0; }
.pcand-title { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.pcand-count { font-size: 0.66rem; font-weight: 800; color: var(--accent-cyan); background: rgba(6, 182, 212, 0.18); border-radius: 6px; padding: 0.05rem 0.4rem; }
.pcand-count[hidden] { display: none; }
.pcand-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pcand-tools { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.pcand-search { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-muted); cursor: text; }
.pcand-search:focus-within { border-color: var(--border-highlight); }
.pcand-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text-primary); font-family: var(--font-sans); font-size: 0.76rem; }
.pcand-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-input); }
.pcand-tab { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); font-family: var(--font-sans); font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.pcand-tab svg { width: 14px; height: 14px; }
.pcand-tab small { font-size: 0.64rem; font-weight: 700; color: var(--text-muted); }
.pcand-tab:hover { color: var(--text-primary); }
.pcand-tab.is-active { background: var(--seg-active-bg); border: 1px solid var(--seg-active-border); color: var(--nav-active-text, var(--accent-cyan)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.pcand-tab.is-active small { color: inherit; }
.or-sidebar-scroll.pcand-scroll { padding: 8px 10px 12px 12px; gap: 2px; }
.pcand-group > summary { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-radius: 8px; list-style: none; cursor: pointer; user-select: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
.pcand-group > summary::-webkit-details-marker { display: none; }
.pcand-group > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin: 0 3px 0 2px; transition: transform 0.15s; flex-shrink: 0; }
.pcand-group[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
.pcand-group > summary:hover { background: var(--bg-input); }
.pcand-group[open] > summary { color: var(--text-primary); }
.pcand-group-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pcand-group-name svg { width: 13px; height: 13px; flex-shrink: 0; }
.pcand-group-count { margin-left: auto; font-size: 0.64rem; font-weight: 700; letter-spacing: 0; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; padding: 0 0.4rem; }
.pcand-group--accent .pcand-group-name svg { color: var(--accent-cyan); }
.pcand-group--warn .pcand-group-count { color: var(--pq-warn); border-color: rgba(245, 158, 11, 0.4); }
.pcand-group--danger .pcand-group-name svg { color: #f87171; }
.pcand-group--danger .pcand-group-count { color: var(--pq-danger); border-color: rgba(239, 68, 68, 0.4); }
.pcand-group--device .pcand-group-name svg { color: #fb923c; }
.pcand-list { display: flex; flex-direction: column; gap: 5px; padding: 2px 0 8px; }
.pcand-empty { font-size: 0.7rem; color: var(--text-muted); padding: 0.4rem 0.3rem; }
.pcand-empty--big { text-align: center; margin-top: 1.5rem; }

/* Tarjeta de candidato (sin depender de .or-sidebar: la miniatura de arrastre
   es un clon colgado de <body> y tiene que verse igual) */
.patient-card-compact.pcand-card {
  --pc: var(--border-color);
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 7px 9px 7px 6px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--pc);
  background: var(--bg-secondary);
}
.patient-card-compact.pcand-card:hover { border-color: var(--border-highlight); border-left-color: var(--pc); }
.pcand-card--preop { --pc: var(--accent-cyan) !important; }
.pcand-card--uci { --pc: #38bdf8 !important; }
.pcand-card--urp { --pc: #c084fc !important; }
.pcand-card--postop { --pc: #64748b !important; }
.pcand-card--device { --pc: #f97316 !important; }
.pcand-grip { color: var(--text-muted); padding-top: 2px; flex-shrink: 0; }
.pcand-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pcand-card-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.patient-card-compact.pcand-card .patient-name { font-size: 0.76rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.patient-card-compact.pcand-card .patient-name small { font-size: 0.66rem; font-weight: 500; color: var(--text-muted); }
.pcand-units { margin-left: auto; display: inline-flex; gap: 3px; flex-shrink: 0; }
.pcand-unit { display: inline-flex; align-items: center; gap: 3px; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 5px; padding: 0.05rem 0.32rem; color: var(--text-secondary); background: var(--bg-input); }
.pcand-unit svg { width: 11px; height: 11px; }
.pcand-unit--preop { color: var(--accent-cyan); background: rgba(6, 182, 212, 0.14); }
.pcand-unit--uci { color: var(--pq-uci); background: rgba(56, 189, 248, 0.14); }
.pcand-unit--urp { color: var(--pq-urp); background: rgba(192, 132, 252, 0.14); }
.patient-card-compact.pcand-card .pcand-diag { font-size: 0.66rem; font-weight: 500; color: var(--pq-diag); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcand-proc { display: flex; align-items: flex-start; gap: 5px; font-size: 0.66rem; font-weight: 600; color: var(--pq-proc); background: var(--pq-proc-bg); border-radius: 6px; padding: 0.15rem 0.4rem; line-height: 1.3; }
.pcand-proc svg { flex-shrink: 0; margin-top: 1px; opacity: 0.85; }
.pcand-proc span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.pcand-device { display: flex; align-items: center; gap: 6px; font-size: 0.64rem; font-weight: 700; color: var(--pq-urg); }
.pcand-device-type { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pcand-stock { font-size: 0.62rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.pcand-stock.is-ok { color: var(--pq-ok); }
.pcand-stock.is-bad { color: var(--pq-danger); }
.pcand-material { font-size: 0.62rem; font-weight: 700; color: var(--pq-warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.pcand-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 1px; }
.pcand-priority { font-size: 0.56rem; font-weight: 800; color: var(--pq-warn); background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 5px; padding: 0.02rem 0.32rem; }

@media (max-width: 480px) {
  .pcand-head { display: none; }
}

/* Ya no hay reglas @media print. Lo que se imprime no es esta pantalla: cada
   botón construye su propio documento con core/print.js, con el membrete de la
   clínica, su paginación y sin un solo botón dentro. Las reglas que había aquí
   intentaban maquetar la pantalla para el papel -- esconder la barra, forzar
   el fondo blanco, rescatar el título del lector de pantalla-- y no llegaban:
   los colores van en línea con las variables del tema, así que en tema oscuro
   el texto salía blanco sobre papel blanco. */

/* Modals & Login Overlay */
.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 13, 25, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  display: none;
  /* flex-start + margin:auto en la tarjeta: centrada si cabe y, si es más alta
     que la pantalla (QR de "Entrar con el móvil"), se desplaza sin cortarse
     por arriba como pasaría con align-items:center. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 1.5rem;
}

.login-overlay > .login-card,
.login-overlay > .act-card { margin: auto; }

.login-card {
  width: 100%;
  max-width: 440px;
  padding: 2.25rem;
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.login-card .form-group label {
  color: #334155;
}

.login-card .input-field {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.login-card .input-field::placeholder {
  color: #64748b;
}

/* Acceso con passkey (Face ID / huella / código del dispositivo) */
.login-passkey-btn {
  width: 100%;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1rem;
  font-size: 1rem;
}

.login-passkey-btn[disabled] { opacity: 0.7; cursor: progress; }

.login-help {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #475569;
}

/* Entrar con el móvil (ordenadores compartidos) */
.login-remote-btn { width: 100%; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.75rem 1rem; }
.login-remote-block { text-align: left; }
.login-remote-block[hidden] { display: none; }
.login-remote-block .form-label { color: #334155; }
.remote-number {
  font-family: var(--font-heading); font-size: 3rem; font-weight: 800; letter-spacing: 0.08em;
  text-align: center; margin: 0.25rem 0 0.5rem; color: #0f172a;
}
.remote-qr { display: flex; justify-content: center; margin: 0.5rem 0; }
.remote-qr svg { width: 168px; height: 168px; }
.remote-steps { font-size: 0.8rem; line-height: 1.5; color: #475569; margin: 0.5rem 0; padding-left: 1.1rem; }
.remote-meta { font-size: 0.75rem; color: #64748b; text-align: center; }
.remote-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 0.75rem; }
.login-card .mc-msg { text-align: left; margin-top: 0.75rem; }
.reauth-remote { margin-bottom: 0.9rem; }
.reauth-remote[hidden] { display: none; }
.reauth-remote .remote-number { color: var(--text-primary); font-size: 2.4rem; }
.reauth-remote .remote-meta { color: var(--text-secondary); }

/* Aprobación en el móvil */
.apr-details { display: grid; gap: 0.35rem; font-size: 0.82rem; margin: 0.75rem 0 1rem; }
.apr-details div { display: flex; justify-content: space-between; gap: 0.75rem; }
.apr-details span:first-child { color: var(--text-secondary); }
.apr-details span:last-child { font-weight: 700; color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
/* El número se teclea mirando la pantalla del ordenador (antes se elegía
   entre tres). Campo ancho y tipografía grande: se escribe a una mano y de
   pie, con el móvil en la otra. */
.apr-number-entry { display: flex; gap: 0.6rem; align-items: stretch; margin: 0.6rem 0 0.4rem; }
.apr-number-entry input {
  flex: 1; min-width: 0; text-align: center; letter-spacing: 0.3em;
  font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; padding: 0.9rem 0;
  border-radius: 14px; border: 1px solid var(--border-color); background: var(--bg-input, transparent); color: var(--text-primary);
}
.apr-number-entry button { border-radius: 14px; padding: 0 1.2rem; font-size: 1rem; }
.apr-number-entry input:disabled, .apr-number-entry button:disabled { opacity: 0.5; cursor: progress; }

.login-dev-block {
  margin-top: 1.5rem;
  padding: 0.85rem;
  border: 1px dashed #f59e0b;
  border-radius: var(--radius-lg, 12px);
  background: #fffbeb;
  display: grid;
  gap: 0.55rem;
  text-align: left;
}

.login-dev-block[hidden] { display: none; }
.login-dev-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #b45309; }

/* Confirmación de identidad antes de una acción crítica */
.modal-overlay.reauth-modal { z-index: 20000; }
.reauth-modal .modal-content { text-align: center; }
.reauth-icon { color: var(--accent-cyan); margin-bottom: 0.5rem; }
.reauth-icon svg { width: 40px; height: 40px; }
.reauth-title { font-size: 1.15rem; font-weight: 800; font-family: var(--font-heading); margin-bottom: 0.5rem; }
.reauth-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 1rem; }
.reauth-modal .mc-msg { margin-bottom: 0.9rem; text-align: left; }
.reauth-actions { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; }

/* Mi cuenta → Seguridad: dispositivos de acceso */
.pk-list { display: grid; gap: 0.5rem; margin-top: 0.25rem; }
.pk-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.8rem; border: 1px solid var(--border-color); border-radius: 10px;
}
.pk-item svg { width: 18px; height: 18px; color: var(--accent-cyan); flex-shrink: 0; }
.pk-main { flex: 1; min-width: 0; }
.pk-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.pk-meta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.15rem; }
.pk-tag { font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); color: var(--accent-cyan); margin-left: 0.35rem; }
.pk-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.pk-actions button { padding: 0.3rem 0.55rem; font-size: 0.74rem; }
/* Dos botones: registrar ESTE aparato y sacar el código para OTRO. */
.pk-footer { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.85rem; }
@media (max-width: 520px) {
  .pk-item { flex-wrap: wrap; }
  .pk-actions { width: 100%; justify-content: flex-end; }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-overlay.active {
  display: flex !important;
}

/* Overlays a pantalla completa de Sesiones (Lista de Espera > Nueva sesión / Sesiones).
   No usan .modal-overlay (centrado, ancho fijo) porque el requisito es que ocupen
   toda la pantalla, con dos columnas propias en vez de una tarjeta centrada. */
.fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg-primary);
  display: none;
  flex-direction: column;
}

.fullscreen-overlay.active {
  display: flex;
}

/* Contextual Discharge Popover (Floating next to button) */
@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color);
}

/* Popover "Suspender cirugía" (Parte Quirúrgico) -- sale del botón ✕ de la
   tarjeta, mismo aspecto flotante que .vca-popover pero más estrecho. */
.suspend-popover {
  position: fixed;
  z-index: 2500;
  width: 300px;
  max-width: calc(100vw - 20px);
  background: var(--bg-card);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  padding: 0.65rem;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  animation: popoverFadeIn 0.15s ease-out;
}
.suspend-popover.open { display: flex; }
.suspend-popover-sep { height: 1px; background: var(--border-color); margin: 0.1rem 0; }
.suspend-popover-body { display: flex; flex-direction: column; gap: 0.5rem; }
.suspend-popover-body[hidden] { display: none; }

/* "Deshacer la última acción" (server/undo_service.py): el botón que sale en
   el popover de la propia acción y el mensaje de por qué no se pudo. */
.undo-done-text { font-size: 0.78rem; color: var(--text-primary); line-height: 1.4; }
.undo-btn { color: #06b6d4; border-color: rgba(6, 182, 212, 0.45); background: rgba(6, 182, 212, 0.1); display: inline-flex; align-items: center; gap: 0.3rem; }
.undo-btn:disabled { opacity: 0.6; cursor: progress; }
.undo-error { font-size: 0.72rem; color: #ef4444; line-height: 1.4; }
.undo-error[hidden] { display: none; }
.undo-btn[hidden] { display: none; }
.undo-ok { color: #10b981; }

/* ==========================================================================
   FESTIVOS (Panel de Administración -> Configuración -> Festivos)
   Calendario anual de 12 mini-meses: los festivos cargados se ven de un
   vistazo y se pulsa el día para marcarlo/desmarcarlo en un popover anclado
   al propio día -- el mismo que abre el botón "Añadir festivo" de la barra.
   ========================================================================== */
/* Color por ámbito -- en :root para que lo vean el calendario, la leyenda,
   las chapas de la tabla y el popover por igual. */
:root {
  --af-nacional: #7c3aed;
  --af-autonomico: var(--accent-cyan);
  --af-local: #f59e0b;
}
.af-intro { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 0.9rem; line-height: 1.5; }
.af-toolbar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 0.9rem;
}
.af-yearnav { display: flex; align-items: center; gap: 2px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 999px; padding: 3px; }
.af-yearnav button {
  width: 26px; height: 26px; border: 0; background: transparent; color: var(--text-secondary);
  border-radius: 999px; cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.af-yearnav button:hover { background: var(--bg-card); color: var(--text-primary); }
.af-year { font-family: var(--font-heading); font-weight: 800; font-size: 0.95rem; color: var(--text-primary); font-variant-numeric: tabular-nums; padding: 0 0.5rem; }
.af-count { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }
.af-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; font-size: 0.7rem; color: var(--text-secondary); }
.af-legend span { display: inline-flex; align-items: center; gap: 5px; }
.af-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.af-legend i.am-nacional { background: var(--af-nacional); }
.af-legend i.am-autonomico { background: var(--af-autonomico); }
.af-legend i.am-local { background: var(--af-local); }

.af-year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 0.7rem; }
.af-month { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 8px 9px 9px; }
.af-mtitle {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.af-mcount {
  font-size: 9.5px; font-weight: 800; color: var(--af-nacional);
  border: 1px solid color-mix(in srgb, var(--af-nacional) 45%, transparent);
  border-radius: 999px; min-width: 16px; height: 15px; padding: 0 4px;
  display: inline-grid; place-items: center;
}
.af-dow, .af-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.af-dow { margin-bottom: 3px; }
.af-dow span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); text-align: center; }
.af-dow span.we { color: var(--text-secondary); }
.af-day {
  aspect-ratio: 1 / 1; min-height: 20px; border: 1px solid transparent; background: transparent;
  color: var(--text-secondary); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  border-radius: 5px; display: grid; place-items: center; padding: 0; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.af-day.out { visibility: hidden; }
.af-day.we { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 8%, transparent); }
.af-day:not(.out):not([disabled]):hover { border-color: var(--accent-cyan); color: var(--text-primary); }
.af-day.today { box-shadow: inset 0 0 0 1.5px var(--accent-cyan); }
.af-day.fest { color: #fff; font-weight: 800; border-color: transparent; }
.af-day.fest.am-nacional { background: var(--af-nacional); }
.af-day.fest.am-autonomico { background: var(--af-autonomico); }
.af-day.fest.am-local { background: var(--af-local); }
.af-day.fest:not([disabled]):hover { filter: brightness(1.15); }
.af-day[disabled] { cursor: default; }

.af-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 999px; padding: 1px 8px; border: 1px solid transparent; white-space: nowrap;
}
.af-badge.am-nacional { color: var(--af-nacional); border-color: color-mix(in srgb, var(--af-nacional) 45%, transparent); background: color-mix(in srgb, var(--af-nacional) 12%, transparent); }
.af-badge.am-autonomico { color: var(--af-autonomico); border-color: color-mix(in srgb, var(--af-autonomico) 45%, transparent); background: color-mix(in srgb, var(--af-autonomico) 12%, transparent); }
.af-badge.am-local { color: var(--af-local); border-color: color-mix(in srgb, var(--af-local) 45%, transparent); background: color-mix(in srgb, var(--af-local) 12%, transparent); }

/* Popover de festivo: flota junto al día y dentro lleva las piezas de los
   editores (.mc-head, .mc-body, .ed-foot), solo más apretadas. */
.festivo-popover {
  position: fixed; z-index: 2500; width: 320px; max-width: calc(100vw - 20px);
  background: var(--bg-card); border: 1px solid var(--border-highlight);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: none; flex-direction: column;
  animation: popoverFadeIn 0.15s ease-out;
}
.festivo-popover.open { display: flex; }

@media (max-width: 640px) {
  .af-year-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .af-legend { margin-left: 0; }
}

/* Popover de la tarjeta recién colocada en el Parte ("Selecciona día de
   ingreso" / aviso de fecha pasada) -- sale pegado a la tarjeta, sustituyendo
   al antiguo modal a pantalla completa que bloqueaba la colocación hasta
   responder, y a los alert() del navegador para el aviso de fecha pasada. */
.placed-case-popover {
  position: fixed; z-index: 2500; width: 320px; max-width: calc(100vw - 20px);
  background: var(--bg-card); border: 1px solid var(--border-highlight);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: none; flex-direction: column;
  animation: popoverFadeIn 0.15s ease-out;
}
.placed-case-popover .mc-head, .festivo-popover .mc-head { padding: 0.8rem 2.8rem 0.8rem 0.9rem; gap: 0.65rem; }
.placed-case-popover .mc-body, .festivo-popover .mc-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem 0.9rem; }
.placed-case-popover .mc-foot, .festivo-popover .mc-foot { padding: 0.6rem 0.9rem; }
.placed-case-popover.open { display: flex; }
/* Sello de la tarjeta programada en un día ya pasado y aún sin confirmar: al
   pulsarlo se reabre el menú (confirmar que se realizó / deshacer). */
.pqc-unconfirmed {
  flex-shrink: 0;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.28rem;
  border-radius: 4px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  cursor: pointer;
  white-space: nowrap;
}
.timeline-case-card.is-unconfirmed {
  border-style: dashed;
  border-color: rgba(245, 158, 11, 0.7);
}

/* Popover "Asignar casa comercial" (Parte Quirúrgico) */
.vca-popover {
  position: fixed;
  z-index: 2500;
  width: 360px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  padding: 0.65rem;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  animation: popoverFadeIn 0.15s ease-out;
}
.vca-popover.open { display: flex; }
.vca-section-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); font-weight: 700; margin: 0 0 0.45rem; }
.vca-section-label span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.vca-hint { font-size: 0.72rem; color: var(--text-muted); margin: 0.3rem 0 0; }
.vca-muted { color: var(--text-secondary); }

/* Hoja del popover: cabecera, migas y pie fijos; solo el cuerpo se desplaza.
   El alto máximo lo pone positionVendorAssignmentPopover() según el hueco
   que queda hasta el borde de la ventana. Todos los colores salen de los
   tokens del tema: los amarillos fijos del modo oscuro no se leían en claro. */
.vca-popover.vca-sheet { padding: 0; gap: 0; overflow: hidden; width: 380px; }
.vca-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.7rem 0.55rem 0.8rem; border-bottom: 1px solid var(--border-color); }
.vca-head > span { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; font-size: 0.82rem; color: var(--text-primary); }
.vca-head > span svg { color: var(--accent-cyan); }
.vca-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem; padding: 0.4rem 0.8rem; border-bottom: 1px solid var(--border-color); font-size: 0.72rem; color: var(--text-muted); }
.vca-crumbs .is-done { color: var(--text-secondary); }
.vca-crumbs .is-current { color: var(--text-primary); font-weight: 600; }
.vca-crumb-sep { display: inline-flex; color: var(--text-muted); }
.vca-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.75rem 0.8rem; display: flex; flex-direction: column; gap: 0.9rem; }
.vca-foot { flex: none; border-top: 1px solid var(--border-color); padding: 0.6rem 0.8rem; background: var(--bg-card); }
.vca-foot-actions { display: flex; gap: 0.5rem; }
.vca-btn { flex: 1; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); font-size: 0.78rem; font-weight: 600; font-family: var(--font-sans); cursor: pointer; transition: var(--transition-fast); }
.vca-btn:hover:not(:disabled) { border-color: var(--accent-cyan); }
.vca-btn-primary { flex: 2; background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; font-weight: 700; }
.vca-btn-primary:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--accent-blue); }
.vca-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.vca-error { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0 0 0.5rem; font-size: 0.74rem; color: var(--status-critical-text); }
.vca-error svg { flex: none; margin-top: 1px; }

.vca-chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vca-chip, .vca-day { border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font-family: var(--font-sans); cursor: pointer; transition: var(--transition-fast); }
.vca-chip { padding: 0.4rem 0.7rem; font-size: 0.76rem; font-weight: 600; }
.vca-chip:hover, .vca-day:hover { border-color: var(--accent-cyan); }
.vca-chip[aria-pressed="true"], .vca-day[aria-pressed="true"] { background: var(--status-info-bg); border-color: var(--accent-cyan); color: var(--text-primary); box-shadow: 0 0 0 1px var(--accent-cyan) inset; }
.vca-day { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; padding: 0.3rem 0.45rem; }
.vca-day .vca-dow { font-size: 0.62rem; color: var(--text-muted); }
.vca-day .vca-dnum { font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; color: var(--text-primary); }
.vca-day .vca-dtag { font-size: 0.58rem; font-weight: 700; }
.vca-dtag.familia-mp_dai { color: var(--status-info-text); }
.vca-dtag.familia-tavi { color: var(--status-stable-text); }
.vca-dtag.familia-tevar { color: var(--status-warning-text); }

.vca-last { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 8px; background: var(--bg-input); font-size: 0.72rem; color: var(--text-secondary); }
.vca-last svg { flex: none; }
.vca-last b { color: var(--text-primary); font-weight: 700; }
.vca-vendor-head, .vca-vendor { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--vca-cols, 2), 52px); align-items: center; column-gap: 0.5rem; }
.vca-vendor-head { padding: 0 0.6rem 0.25rem; font-size: 0.62rem; font-weight: 700; color: var(--text-muted); }
.vca-vendor-head span { text-align: right; }
.vca-vendor-list { display: flex; flex-direction: column; gap: 0.3rem; }
.vca-vendor { width: 100%; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font-family: var(--font-sans); font-size: 0.8rem; text-align: left; cursor: pointer; transition: var(--transition-fast); }
.vca-vendor:hover { border-color: var(--accent-cyan); }
.vca-vendor[aria-pressed="true"] { background: var(--status-info-bg); border-color: var(--accent-cyan); box-shadow: 0 0 0 1px var(--accent-cyan) inset; }
.vca-vendor-name { display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-weight: 600; }
.vca-vendor-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vca-vendor-check { display: inline-flex; color: var(--accent-cyan); }
.vca-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vca-tag { flex: none; font-size: 0.6rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); }
.vca-pct { display: block; text-align: right; font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vca-pct.is-empty { color: var(--text-muted); font-weight: 500; }
.vca-bar { display: block; height: 3px; margin-top: 3px; border-radius: 2px; background: var(--border-color); overflow: hidden; }
.vca-bar i { display: block; height: 100%; border-radius: 2px; }
.vca-foot-note { margin: 0.4rem 0 0; font-size: 0.66rem; color: var(--text-muted); }

.vca-warn { background: var(--status-warning-bg); border: 1px solid var(--status-warning-border); border-radius: 8px; padding: 0.55rem 0.65rem; font-size: 0.74rem; color: var(--text-primary); }
.vca-warn-title { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.35rem; font-weight: 700; color: var(--status-warning-text); }
.vca-warn-title svg { flex: none; }
.vca-warn-list { list-style: none; margin: 0 0 0.3rem; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vca-warn-list li { display: flex; justify-content: space-between; gap: 0.5rem; }
.vca-warn > .vca-muted { margin: 0 0 0.3rem; }
.vca-warn-confirm { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-weight: 600; cursor: pointer; }
.vca-warn-confirm input { accent-color: var(--status-warning-text); }

.vca-more { border-top: 1px solid var(--border-color); padding-top: 0.55rem; }
.vca-more > summary, .vca-email-more > summary { display: flex; align-items: center; gap: 0.3rem; list-style: none; cursor: pointer; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); }
.vca-more > summary::-webkit-details-marker, .vca-email-more > summary::-webkit-details-marker { display: none; }
.vca-more > summary svg, .vca-email-more > summary svg { transition: transform 0.15s ease; }
.vca-more[open] > summary svg, .vca-email-more[open] > summary svg { transform: rotate(90deg); }
.vca-more-body { padding-top: 0.6rem; }

.vca-done { display: flex; align-items: flex-start; gap: 0.55rem; background: var(--status-stable-bg); border: 1px solid var(--status-stable-border); border-radius: 8px; padding: 0.6rem 0.7rem; color: var(--status-stable-text); }
.vca-done svg { flex: none; margin-top: 1px; }
.vca-done b { display: block; font-size: 0.8rem; }
.vca-done span { display: block; font-size: 0.72rem; color: var(--text-secondary); }
.vca-done.is-quiet { background: transparent; border-color: var(--border-color); }
.vca-note { margin: 0; font-size: 0.73rem; color: var(--text-secondary); background: var(--bg-input); border-radius: 8px; padding: 0.55rem 0.65rem; }
.vca-email { border: 1px solid var(--border-color); border-radius: 8px; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.74rem; }
.vca-email-title { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 700; color: var(--text-primary); }
.vca-email dl { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0.2rem 0.4rem; margin: 0; }
.vca-email dt { color: var(--text-muted); }
.vca-email dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.vca-email-body { margin-top: 0.4rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.45rem 0.55rem; color: var(--text-secondary); line-height: 1.5; }

.vca-recent-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 0.5rem; align-items: center; font-size: 0.71rem; padding: 0.28rem 0; border-bottom: 1px dashed var(--border-color); }
.vca-recent-row:last-child { border-bottom: none; }
.vca-recent-vendor { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; min-width: 0; }
.vca-donut-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.vca-donut-card { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.vca-donut-card h4 { margin: 0; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }
.vca-donut-wrap { position: relative; width: 84px; height: 84px; }
.vca-donut-wrap svg { transform: rotate(-90deg); }
.vca-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vca-donut-center .vca-n { font-family: var(--font-heading); font-weight: 800; font-size: 1rem; color: var(--text-primary); }
.vca-donut-center .vca-lbl { font-size: 0.5rem; color: var(--text-muted); text-transform: uppercase; }
.vca-legend { display: flex; flex-direction: column; gap: 2px; width: 100%; font-size: 0.62rem; }
.vca-legend-item { display: flex; align-items: center; gap: 4px; color: var(--text-secondary); }
.vca-legend-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.vca-legend-pct { margin-left: auto; color: var(--text-primary); font-weight: 700; }

.modal-content {
  width: 100%;
  max-width: 650px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.75rem;
  border-radius: var(--radius-xl);
  box-sizing: border-box;
}

/* Form Layout Utilities */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-group label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.input-field {
  width: 100%;
  box-sizing: border-box;
}

/* Tag Selectors */
.tag-selector-group {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Module 1 Full Cards & Columns */
.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  /* Las filas rellenan el alto disponible del módulo (1fr), con un suelo
     legible de 450px; si hay más filas de las que caben, el grid hace scroll
     interno en vez de estirar la página. Un `max-height` calculado contra el
     viewport dependería del alto de la cabecera y podría dejar una franja
     vacía debajo. */
  grid-auto-rows: minmax(450px, 1fr);
  gap: 0.6rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.1rem;
}

/* El nombre y la forma del árbol (.units-grid > .unit-column >
   .unit-patients-list) se conservan a propósito: el Censo de móvil los
   reutiliza y los reescribe entero en mobile.css, donde hay un comentario
   largo explicando por qué no se puede tocar sin romper Safari/iOS. Lo que
   cambia aquí es sólo el aspecto. */
.unit-column {
  padding: 0.6rem 0.55rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 450px;
  overflow: hidden !important;
  position: relative;
  border-radius: var(--radius-lg);
  border-top: 2px solid color-mix(in srgb, var(--cen-c, var(--accent-cyan)) 55%, transparent);
  box-sizing: border-box;
}

.unit-patients-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
  margin-right: -0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.unit-patients-list::-webkit-scrollbar {
  width: 6px;
}

.unit-patients-list::-webkit-scrollbar-track {
  background: transparent;
  margin-top: 4px;
  margin-bottom: 4px;
  border-radius: 9999px;
}

.unit-patients-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  border: 1px solid transparent;
}

.unit-patients-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
}

.patient-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.75rem;
  transition: var(--transition-fast);
}

.patient-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.data-table-container {
  overflow-x: auto;
  overflow-y: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  flex: 1;
  min-height: 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.82rem;
}

/* File Upload & Drop Zone Styling */
.file-drop-zone {
  border: 2px dashed var(--accent-cyan);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: rgba(6, 182, 212, 0.04);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.file-drop-zone:hover, .file-drop-zone.drag-over {
  background: rgba(6, 182, 212, 0.12);
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}

/* Fila de paciente como diana de arrastre del PDF. */
.data-table tr.row-drop-target > td {
  background: rgba(6, 182, 212, 0.14);
  box-shadow: inset 0 1px 0 var(--accent-cyan), inset 0 -1px 0 var(--accent-cyan);
}

.data-table th {
  background: var(--bg-primary);
  padding: 0.7rem 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 2;
}

.data-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border-color);
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.device-manufacturer-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Logo oficial del fabricante (Marcapasos): chip blanco para que se lea bien en ambos temas */
.manufacturer-logo-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0.08rem 0.28rem;
  background: #ffffff;
  border-radius: 4px;
  line-height: 0;
  vertical-align: middle;
}
.manufacturer-logo-badge img {
  height: 100%;
  width: auto;
  display: block;
}

.user-avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* Layout de detalle de usuario: 2/3 edición con pestañas + 1/3 resumen,
   proporcional y pensado para vivir dentro de #admin-console-content --
   a diferencia de .modal-content.split-view (fijo a 680px, solo para modal). */
.admin-detail-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.admin-detail-left {
  flex: 2 1 0;
  min-width: 0;
}

.admin-detail-right {
  flex: 1 1 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-detail-tabs {
  display: flex;
  gap: 1.4rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.1rem;
  /* Una sola línea siempre: si no caben (iPad), la tira se desliza de lado
     en vez de partir las etiquetas en dos y tres renglones. */
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-detail-tabs::-webkit-scrollbar { display: none; }

@media (max-width: 1180px) {
  .admin-detail-tabs { gap: 0.6rem; }
  .admin-detail-tab { font-size: 0.76rem; }
}

.admin-detail-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.1rem 0.1rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  white-space: nowrap;
}

.admin-detail-tab:hover {
  color: var(--text-primary);
}

.admin-detail-tab.active {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.admin-pagination-pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.admin-pagination-pages button {
  min-width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
}

.admin-pagination-pages button.active {
  background: var(--accent-cyan);
  color: #fff;
  border-color: var(--accent-cyan);
}

/* ==========================================================================
   MODULE: CUADRANTE DE PERSONAL & NOTIFICACIONES EMAIL
   ========================================================================== */

/* Draggable Staff Badges */
.staff-drag-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  cursor: grab;
  user-select: none;
  transition: var(--transition-fast);
}

.staff-drag-badge:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.staff-drag-badge:active {
  cursor: grabbing;
}

/* ==========================================================================
   Parte Quirúrgico -- Vista Timeline (horas en el eje, quirófanos en filas)
   ========================================================================== */

.timeline-panel {
  overflow: hidden;
  /* En su celda de grid (.or-planner-layout, 1fr) el panel por defecto se
     estira a rellenar toda la columna -- y toda la fila, por el
     align-items:stretch implícito del grid -- aunque el contenido real
     (horas visibles x zoom en ancho, nº de quirófanos en alto) sea mucho
     más pequeño. Que se ajuste al contenido real en ambos ejes, con la
     celda como límite máximo (el scroll interno ya cubre el caso contrario). */
  justify-self: start;
  align-self: start;
  max-width: 100%;
}

.timeline-scroll {
  overflow-x: auto;
}

/* Las 24 h no caben en pantalla, así que la barra horizontal tiene que verse
   siempre. La regla global (* { scrollbar-width: thin }) deja en macOS una
   barra superpuesta que solo aparece al desplazar -- y con ratón sin trackpad
   no hay forma de moverse. Devolver scrollbar-width/color a auto hace que el
   navegador vuelva a usar los ::-webkit-scrollbar, que fuerzan una barra
   clásica siempre visible. */
.timeline-panel .timeline-scroll {
  scrollbar-width: auto;
  scrollbar-color: auto;
}

.timeline-panel .timeline-scroll::-webkit-scrollbar {
  height: 12px;
}

.timeline-panel .timeline-scroll::-webkit-scrollbar-track {
  margin: 0 4px 0 174px; /* empieza tras la columna fija de quirófanos */
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  border-radius: 0;
}

.timeline-panel .timeline-scroll::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.45);
  border: 3px solid transparent;
  background-clip: padding-box;
}

.timeline-panel .timeline-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.75);
  background-clip: padding-box;
}

.timeline .ruler {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding-left: 170px;
}

.timeline .ruler-hour {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.5rem 0 0.5rem 0.4rem;
  border-left: 1px solid var(--border-color);
  position: relative;
}

.timeline .ruler-hour.day-boundary {
  border-left: 1px solid #f59e0b;
}

.timeline .ruler-hour.day-boundary::after {
  content: 'día siguiente';
  position: absolute;
  top: -0.05rem;
  left: 0.4rem;
  font-size: 0.56rem;
  font-weight: 700;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.timeline .ruler-hour .lbl {
  display: block;
  margin-top: 0.65rem;
}

.timeline .ruler-hour.day-boundary .lbl {
  margin-top: 0.9rem;
}

.timeline .room-row {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.timeline .room-row:last-child {
  border-bottom: none;
}

/* La fila del panel se recorta con el borde redondeado del .glass-panel
   (overflow:hidden), pero una barra de color recta cortada a lo bruto por esa
   curva se ve como un corte brusco -- redondeamos la propia etiqueta en la
   última fila para que la barra siga la curva en vez de chocar con ella. */
.timeline .room-row:last-child .room-label {
  border-bottom-left-radius: var(--radius-lg);
}

.timeline .room-label {
  flex-shrink: 0;
  width: 170px;
  padding: 0.7rem 0.9rem;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  border-right: 1px solid var(--border-color);
  border-left: 3px solid transparent; /* .or-colored la pisa con !important (ver override de ancho más abajo) */
}

/* .or-colored trae su propio ancho de 5px vía !important -- aquí, en el
   timeline, el prototipo usaba 3px, más fino; se cambia solo el ancho. */
.timeline .room-label.or-colored {
  border-left-width: 3px !important;
}

.timeline .room-label .name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text-primary);
}

.timeline .room-label .type {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.timeline .room-segments {
  display: flex;
  flex: 1;
}

.timeline .room-track {
  position: relative;
  flex-shrink: 0;
  height: 84px;
  overflow: hidden;
  /* Tamaño de la rejilla (cada cuántos minutos hay una línea) lo fija el JS
     por elemento vía background-size, según el zoom activo -- los stops en
     % (no px) hacen que la línea caiga siempre al final de cada celda,
     tenga el tamaño que tenga. */
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% - 1px), var(--border-color) 100%);
}

.timeline .room-track.drag-over {
  background-color: rgba(6, 182, 212, 0.1);
}

.timeline .now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #f87171;
  z-index: 2;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
  pointer-events: none;
}

.timeline .now-tag {
  position: absolute;
  top: -1.35rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: #fca5a5;
  white-space: nowrap;
}

.timeline-case-card {
  position: absolute;
  top: 8px;
  height: 68px;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-card-hover) 0%, var(--bg-card) 100%);
  border: 1px solid var(--cat-color, var(--accent-cyan));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: stretch;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: box-shadow 0.15s ease;
}

.timeline-case-card.dragging {
  cursor: grabbing;
  z-index: 5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.timeline-case-card.pushed {
  transition: left 0.12s ease, width 0.12s ease;
}

/* Pasa de las 08:00 del día siguiente: la pista la corta en el borde, y esta
   etiqueta (colocada por timelinePositionCard justo antes del corte) lo dice. */
.timeline-continues-tag {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.15rem 0.45rem;
  border-radius: 999px 0 0 999px;
  background: var(--cat-color, var(--accent-cyan));
  color: #0b1220;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}

.timeline-case-card.continues-next .timeline-continues-tag {
  display: block;
}

/* Tramo de una cirugía de la jornada anterior que sigue pasadas las 08:00:
   ocupa el quirófano pero no se arrastra desde aquí (rayado = no editable). */
.timeline-carryover {
  position: absolute;
  top: 8px;
  height: 68px;
  border-radius: 0 9px 9px 0;
  overflow: hidden;
  padding: 0.3rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  border: 1px dashed var(--cat-color, var(--accent-cyan));
  border-left: none;
  background: repeating-linear-gradient(135deg, var(--bg-card) 0 8px, var(--bg-card-hover) 8px 16px);
  opacity: 0.85;
  user-select: none;
}

.timeline-carryover.is-link {
  cursor: pointer;
}

.timeline-carryover.is-link:hover {
  opacity: 1;
}

.timeline-carryover-tag {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cat-color, var(--accent-cyan));
  white-space: nowrap;
}

.timeline-carryover .timeline-case-name,
.timeline-carryover .timeline-case-time {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dos cirugías a la vez en el mismo quirófano (p.ej. una urgencia de madrugada
   que pisa la primera de las 08:00): no se corrige sola, se marca. */
.timeline-case-card.is-overlapping,
.timeline-carryover.is-overlapping {
  outline: 2px solid #ef4444;
  outline-offset: -2px;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.timeline-case-card::before {
  content: '';
  width: 4px;
  flex-shrink: 0;
  background: var(--cat-color, var(--accent-cyan));
}

.timeline-case-body {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  cursor: pointer;
}

.timeline-case-time-row {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
}

.timeline-case-time {
  min-width: 0;
  flex: 1;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--cat-color, var(--accent-cyan));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-case-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-case-proc {
  font-size: 0.64rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-resize-handle {
  flex-shrink: 0;
  width: 9px;
  cursor: ew-resize;
  position: relative;
}

.timeline-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--text-secondary);
  opacity: 0.45;
}

.timeline-resize-handle:hover::after,
.timeline-resize-handle:focus-visible::after {
  background: var(--text-primary);
  opacity: 0.85;
}

.timeline-resize-handle:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 1px;
}

/* ==========================================================================
   CAPA ADAPTATIVA -- portátil y tablet (481px - 1500px)
   Un único modo flexible entre el móvil (<=480px, mobile.css) y el escritorio
   grande (>1500px, layout fijo de siempre): no toca ninguno de los dos.
   El panel de candidatos deja de ocupar 295px fijos y pasa a un cajón
   superpuesto; la rejilla semanal gana scroll horizontal propio con columnas
   de ancho legible y con la columna de quirófanos y la cabecera de días fijas.
   Aditiva: sin cambiar datos, permisos, arrastre ni impresión.
   ========================================================================== */

/* Controles del cajón: inertes fuera de la banda. */
.parte-drawer-toggle,
.parte-drawer-close,
.parte-drawer-scrim {
  display: none;
}

@media (min-width: 481px) and (max-width: 1500px) {

  /* ---- 1. Panel de candidatos: cajón superpuesto ----
     Overlay que entra desde la derecha, justo debajo de la barra del parte
     (donde está su botón; --parte-drawer-top lo fija setParteDrawerState), por
     encima de la rejilla, que no se mueve. Se desliza con `right`, NO con `transform`:
     Chrome no genera la miniatura de arrastre nativa de una tarjeta cuyo
     ancestro tiene transform (position:fixed sí está permitido). Aun así,
     handleDragStart le pasa una miniatura explícita (setDragImage con un clon
     colgado de <body>) como refuerzo. */
  #tab-parte .or-planner-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #tab-parte .or-planner-layout > .or-sidebar {
    position: fixed;
    top: var(--parte-drawer-top, 72px);
    bottom: 12px;
    left: auto;
    right: calc(-1 * min(360px, 86vw) - 48px);
    height: auto;
    width: min(360px, 86vw);
    min-width: 0;
    max-width: none;
    z-index: 1300;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
    background: linear-gradient(var(--bg-card), var(--bg-card)) var(--bg-primary);
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.45);
    visibility: hidden;
    transition: right 0.24s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.24s;
  }

  #tab-parte .or-planner-layout > .or-sidebar.drawer-open {
    right: 12px;
    visibility: visible;
    transition: right 0.24s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }

  /* Durante un arrastre nativo: el velo no debe interceptar la soltada y el
     cajón no debe animarse ni filtrar (defensa para que nada del overlay
     cancele el dragstart / dragover). El cajón se retira cerrándose (JS, al
     primer 'drag'). */
  body.parte-dragging #parte-drawer-scrim {
    display: none !important;
  }

  body.parte-dragging #tab-parte .or-planner-layout > .or-sidebar {
    transition: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* El acordeón que usa el móvil no pinta aquí; se usa el botón/scrim propios. */
  #tab-parte .or-planner-layout > .or-sidebar .mobile-sidebar-toggle {
    display: none;
  }

  /* Botón de cierre en la cabecera del panel. */
  .parte-drawer-close {
    display: inline-grid;
    place-items: center;
    margin-left: auto;
    width: 30px;
    height: 30px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
  }

  .parte-drawer-close:hover {
    color: var(--text-primary);
    background: var(--bg-input);
    border-color: var(--border-color);
  }

  /* Velo modal: oscurece todo el parte tras el cajón (que va por encima, con
     z-index mayor). Aparece/desaparece con opacidad. Un clic cierra el cajón. */
  .parte-drawer-scrim {
    display: block;
    position: fixed;
    inset: var(--parte-drawer-top, 72px) 0 0 0;
    z-index: 1290;
    background: rgba(2, 6, 16, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }

  .parte-drawer-scrim.drawer-open {
    opacity: 1;
    pointer-events: auto;
  }

  .parte-drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 10px 0 9px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }

  .parte-drawer-toggle:hover {
    border-color: color-mix(in srgb, var(--text-primary) 18%, transparent);
    background: var(--bg-secondary);
  }

  .parte-drawer-toggle[aria-expanded="true"] {
    color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.14);
    border-color: rgba(6, 182, 212, 0.5);
  }

  .parte-drawer-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.18);
    border-radius: 6px;
  }

  .parte-drawer-toggle[aria-expanded="true"] .parte-drawer-toggle-count {
    color: #04202a;
    background: var(--accent-cyan);
  }

  .parte-drawer-toggle-count[hidden] {
    display: none;
  }

  /* ---- 2. Rejilla semanal: scroll horizontal propio + columnas legibles ---- */

  /* Pista visual de scroll horizontal: un degradado discreto sobre el borde
     derecho de la rejilla cuando queda contenido oculto en esa dirección.
     Va sobre .or-planner-layout (que no hace scroll) y lo activa/desactiva
     updateParteScrollCue() con la clase .scroll-x-end. Desaparece al llegar
     al extremo derecho. */
  #tab-parte .or-planner-layout {
    position: relative;
  }

  #tab-parte .or-planner-layout::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.6rem;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
  }

  #tab-parte .or-planner-layout.scroll-x-end::after {
    opacity: 1;
  }

  /* Igual que en escritorio ancho (cada día = ancho visible menos quirófanos,
     entre 5; sábado y domingo con scroll), pero con un mínimo legible de
     230px por día a este ancho. */
  #parte-weekly-container .weekly-table {
    width: max(calc(100px + 230px * 7), calc(100px + (100% - 136px) * 7 / 5));
    min-width: 0;
  }

  #parte-weekly-container .weekly-table.is-weekend-folded {
    width: max(calc(136px + 200px * 5), 100%);
    min-width: 0;
  }
}

/* ==========================================================================
   MÓDULO 4 · BASE DE DATOS  (Registros + Resultados + Avisos al busca)
   Clases an-* (las analytics-* que quedan son de Avisos y de los estados).
   Todo con tokens para que funcione en tema claro y oscuro; el rojo se reserva
   para alertas y éxitus.
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Hueco abajo para que el botón flotante del busca no tape lo último. */
.analytics-root { display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 5rem; }
.analytics-body { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

/* La pestaña hace scroll (antes se cortaba: main tiene overflow:hidden y la
   mitad de abajo de Resultados quedaba inalcanzable). */
#tab-historico.active { overflow-y: auto; overscroll-behavior: contain; }

/* Superficies y series. Claro por defecto; oscuro por preferencia del sistema o
   por data-theme. Series validadas (banda de luminosidad, daltonismo y
   contraste) en los dos temas. */
:root {
  --an-surface: #ffffff; --an-line: #dce5ed; --an-line-strong: #c5d1dc;
  --an-hover: #f1f6fa; --an-s1: #0284c7; --an-s2: #b3478c;
  --an-grid: #e9eef3; --an-axis: #c5d1dc; --an-ok: #059669; --an-warn: #d97706; --an-bad: #dc2626; --an-info: #0284c7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --an-surface: #0f1b30; --an-line: rgba(255,255,255,0.09); --an-line-strong: rgba(255,255,255,0.16);
    --an-hover: rgba(148,163,184,0.08); --an-s1: #0c96d6; --an-s2: #c0569b;
    --an-grid: rgba(255,255,255,0.06); --an-axis: rgba(255,255,255,0.16); --an-ok: #10b981; --an-warn: #f59e0b; --an-bad: #ef4444; --an-info: #38bdf8;
  }
}
:root[data-theme="dark"] {
  --an-surface: #0f1b30; --an-line: rgba(255,255,255,0.09); --an-line-strong: rgba(255,255,255,0.16);
  --an-hover: rgba(148,163,184,0.08); --an-s1: #0c96d6; --an-s2: #c0569b;
  --an-grid: rgba(255,255,255,0.06); --an-axis: rgba(255,255,255,0.16); --an-ok: #10b981; --an-warn: #f59e0b; --an-bad: #ef4444; --an-info: #38bdf8;
}

.an-muted { color: var(--text-muted); }
.an-nowrap { white-space: nowrap; }

/* --- Cabecera fija: vistas + periodo + filtros --- */
.an-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.1rem 0 0.55rem; background: var(--bg-primary);
}
.an-topbar { display: flex; align-items: center; gap: 0.6rem 0.75rem; flex-wrap: wrap; }
.an-topbar-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.an-updating { font-size: 0.74rem; color: var(--text-muted); }

.an-seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--an-surface); border: 1px solid var(--an-line);
}
.an-seg-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 30px; padding: 0 0.85rem;
  border: none; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; white-space: nowrap;
  transition: var(--transition-fast);
}
.an-seg-btn:hover { color: var(--text-primary); }
.an-seg-btn.is-active { background: var(--status-info-bg); color: var(--text-primary); }
.an-seg-btn.is-active svg { color: var(--accent-cyan); }

.an-ctl {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem;
  height: 34px; padding: 0 0.75rem; border-radius: 10px;
  border: 1px solid var(--an-line); background: var(--an-surface);
  color: var(--text-primary); font-size: 0.8rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  font-family: var(--font-sans); transition: border-color 0.15s;
}
.an-ctl:hover, .an-ctl.is-open, .an-ctl:focus-within { border-color: var(--an-line-strong); }
.an-ctl > svg { color: var(--text-muted); flex-shrink: 0; }
.an-ctl b { font-weight: 600; }
.an-ctl--select select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  font-size: 16px; /* evita el zoom de iOS al abrir */
}
.an-period { display: inline-flex; }
.an-period-preset { border-radius: 10px 0 0 10px; }
.an-period-dates { border-radius: 0 10px 10px 0; border-left: 0; cursor: default; gap: 0.35rem; }
.an-period-dates > svg:first-child { color: var(--accent-cyan); }
.an-period-dates input {
  border: none; background: transparent; outline: none; color: var(--text-primary);
  font-size: 0.8rem; font-family: var(--font-sans); color-scheme: light dark; width: 7.1rem; padding: 0;
}
.an-period-dates input::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
.an-cohort-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* --- Barra de filtros en una fila --- */
.an-filterbar {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  padding: 0.45rem; border: 1px solid var(--an-line); border-radius: 12px; background: var(--an-surface);
}
.an-search {
  display: flex; align-items: center; gap: 0.45rem; height: 32px; padding: 0 0.65rem;
  width: 280px; max-width: 100%; border-radius: 8px; border: 1px solid var(--an-line);
  background: var(--bg-input); color: var(--text-muted);
}
.an-search:focus-within { border-color: var(--border-highlight); }
.an-search input { border: none; outline: none; background: transparent; color: var(--text-primary); font-size: 0.8rem; width: 100%; min-width: 0; font-family: var(--font-sans); }
.an-filterbar-sep { width: 1px; height: 20px; background: var(--an-line); margin: 0 0.15rem; }

.an-fpill {
  position: relative; display: inline-flex; align-items: center; height: 30px; max-width: 280px;
  border-radius: 999px; border: 1px dashed var(--an-line-strong); background: transparent;
  color: var(--text-secondary); font-size: 0.77rem; font-weight: 500; font-family: var(--font-sans);
  white-space: nowrap; transition: var(--transition-fast);
}
.an-fpill:hover { color: var(--text-primary); border-color: var(--text-muted); }
.an-fpill-main { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; height: 100%; padding: 0 0.7rem; min-width: 0; }
.an-fpill-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.an-fpill-main select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.an-fpill-main svg { flex-shrink: 0; color: var(--text-muted); }
.an-fpill.is-set { border-style: solid; border-color: var(--border-highlight); background: var(--status-info-bg); color: var(--text-primary); }
.an-fpill.is-set b { font-weight: 600; color: var(--accent-blue); }
:root[data-theme="dark"] .an-fpill.is-set b { color: var(--accent-cyan); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .an-fpill.is-set b { color: var(--accent-cyan); } }
.an-fpill.is-set .an-fpill-main { padding-right: 0.2rem; }
.an-fpill-clear {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 4px; flex-shrink: 0;
  border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer;
}
.an-fpill-clear:hover { background: var(--an-hover); color: var(--text-primary); }
.an-fpill--more { gap: 0.35rem; padding: 0 0.7rem; border-style: solid; border-color: var(--an-line); cursor: pointer; }
.an-fpill--more.is-open { border-color: var(--an-line-strong); color: var(--text-primary); }
.an-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--accent-blue); color: #fff; font-size: 0.66rem; font-weight: 700;
}
.an-filterbar-clear {
  margin-left: auto; border: none; background: transparent; color: var(--text-muted);
  font-size: 0.76rem; font-weight: 600; cursor: pointer; padding: 0 0.4rem; height: 30px;
}
.an-filterbar-clear:hover { color: var(--text-primary); }

/* --- Menús desplegables --- */
.an-pop-anchor { position: relative; display: inline-flex; }
.an-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 240px; padding: 0.85rem; border-radius: 12px;
  border: 1px solid var(--an-line-strong); background: var(--an-surface); box-shadow: var(--shadow-lg);
  color: var(--text-primary); font-size: 0.8rem;
}
.an-pop--right { left: auto; right: 0; }
.an-pop--filters { width: 480px; }
.an-pop--cohort { width: 320px; display: flex; flex-direction: column; gap: 0.55rem; }
.an-pop--columns { display: flex; flex-direction: column; gap: 0.45rem; min-width: 230px; }
.an-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.8rem; }
.an-pop-foot { display: flex; justify-content: flex-end; gap: 0.45rem; margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--an-line); }
.an-pop-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.an-pop-sep { height: 1px; background: var(--an-line); margin: 0.15rem 0; }
.an-pop-row { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.an-pop-empty { margin: 0; color: var(--text-muted); font-size: 0.78rem; }
.an-pop-confirm { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; border-radius: 8px; background: var(--status-critical-bg); font-size: 0.78rem; }
.an-pop-msg { margin: 0; font-size: 0.76rem; font-weight: 600; }
.an-pop-msg--ok { color: var(--an-ok); }
.an-pop-msg--warn { color: var(--an-warn); }
.an-pop-msg--bad { color: var(--an-bad); }
.an-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.an-field > span:first-child { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.an-field select, .an-field input {
  width: 100%; height: 32px; padding: 0 0.55rem; border-radius: 8px; min-width: 0;
  border: 1px solid var(--an-line); background: var(--bg-input); color: var(--text-primary);
  font-size: 0.8rem; font-family: var(--font-sans);
}
.an-range { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.an-inline-form { display: flex; gap: 0.4rem; }
.an-inline-form input { flex: 1; }
.an-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; cursor: pointer; }
.an-check input { accent-color: var(--accent-blue); }
.an-cohort-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.an-cohort-item {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.45rem 0.5rem; border-radius: 7px;
  border: none; background: transparent; color: var(--text-primary); font-size: 0.8rem; text-align: left; cursor: pointer;
}
.an-cohort-item:hover { background: var(--an-hover); }
.an-cohort-item.is-active { font-weight: 600; }
.an-cohort-item.is-active svg { color: var(--accent-cyan); }
.an-cohort-bullet { width: 14px; height: 14px; display: inline-block; }

/* --- Botones --- */
.an-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  height: 32px; padding: 0 0.75rem; border-radius: 9px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--an-line); background: var(--an-surface); color: var(--text-primary);
  font-size: 0.78rem; font-weight: 600; font-family: var(--font-sans); transition: var(--transition-fast);
}
.an-btn:hover, .an-btn.is-open { border-color: var(--an-line-strong); background: var(--an-hover); }
.an-btn svg { flex-shrink: 0; }
.an-btn--icon { width: 32px; padding: 0; color: var(--text-secondary); }
.an-btn--primary { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.an-btn--primary:hover { background: var(--accent-gradient); border-color: transparent; filter: brightness(1.06); }
.an-btn--ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.an-btn--ghost:hover { color: var(--text-primary); }
.an-btn--danger { background: var(--an-bad); border-color: transparent; color: #fff; }
.an-btn--danger:hover { background: var(--an-bad); filter: brightness(1.08); }
.an-btn--danger-text { color: var(--an-bad); }
.an-icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
  border: 1px solid var(--an-line); background: transparent; color: var(--text-secondary); cursor: pointer;
}
.an-icon-btn:hover { background: var(--an-hover); color: var(--text-primary); }
.an-link {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0; border: none; background: none;
  color: var(--accent-blue); font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: var(--font-sans);
}
:root[data-theme="dark"] .an-link { color: var(--accent-cyan); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .an-link { color: var(--accent-cyan); } }
.an-mini-select { position: relative; display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text-muted); }
.an-mini-select select {
  appearance: none; -webkit-appearance: none; height: 28px; padding: 0 1.4rem 0 0.6rem; border-radius: 8px;
  border: 1px solid var(--an-line); background: var(--an-surface); color: var(--text-primary);
  font-size: 0.74rem; font-weight: 500; font-family: var(--font-sans); cursor: pointer;
}
.an-mini-select svg { position: absolute; right: 0.45rem; pointer-events: none; }

/* --- Registros: tabla --- */
.an-tablecard { border: 1px solid var(--an-line); border-radius: 12px; background: var(--an-surface); }
.an-tablehead { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--an-line); }
.an-summary { display: flex; align-items: center; gap: 0.35rem 0.8rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-secondary); min-width: 0; }
.an-summary-item { white-space: nowrap; }
.an-summary-item strong { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.an-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); opacity: 0.7; }
.an-tablehead-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }

.an-tablescroll { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 960px; font-size: 0.8rem; }
.an-table th {
  text-align: left; padding: 0 0.75rem; height: 36px; white-space: nowrap;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--an-line);
}
.an-th-btn {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.an-th-btn:hover, .an-table th.is-sorted { color: var(--text-primary); }
.an-sort { color: var(--accent-cyan); font-size: 0.8rem; }
.an-table td { padding: 0 0.75rem; height: 46px; vertical-align: middle; border-bottom: 1px solid var(--an-line); color: var(--text-primary); overflow: hidden; }
.an-table tbody tr:last-child td { border-bottom: none; }
.an-table tbody tr[data-click] { cursor: pointer; }
.an-table tbody tr[data-click]:hover { background: var(--an-hover); }
.an-table tbody tr.is-open { background: var(--status-info-bg); box-shadow: inset 3px 0 0 var(--accent-cyan); }
.an-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table th.is-num .an-th-btn { flex-direction: row-reverse; }
.an-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent-blue); cursor: pointer; vertical-align: middle; }
.an-col-check { width: 40px; }
/* Anchos fijos salvo Diagnóstico · procedimiento, que se queda con lo que sobre. */
.an-table th.an-col-patientName { width: 210px; }
.an-table th.an-col-surgeryDate { width: 128px; }
.an-table th.an-col-waitDays { width: 100px; }
.an-table th.an-col-uci { width: 92px; }
.an-table th.an-col-dischargeDate { width: 96px; }
.an-table th.an-col-euroscore { width: 108px; }
.an-table th.an-col-estado { width: 136px; }
.an-table th.an-col-completeness { width: 118px; }
@media (max-width: 1280px) {
  .an-table th.an-col-patientName { width: 150px; }
  .an-table th.an-col-surgeryDate { width: 128px; }
  .an-table th.an-col-waitDays { width: 90px; }
  .an-table th.an-col-uci { width: 78px; }
  .an-table th.an-col-dischargeDate { width: 90px; }
  .an-table th.an-col-euroscore { width: 92px; }
  .an-table th.an-col-estado { width: 124px; }
  .an-table th.an-col-completeness { width: 108px; }
  .an-table th, .an-table td { padding: 0 0.55rem; }
}
.an-table td.an-col-surgeryDate, .an-table td.an-col-dischargeDate, .an-table td.an-col-uci { font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-empty-row td { height: auto; }

.an-two { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.an-two--num { align-items: flex-end; }
.an-t1, .an-t2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.an-t1 { font-weight: 500; }
.an-t2 { font-size: 0.72rem; color: var(--text-muted); }

.an-tag {
  display: inline-flex; align-items: center; height: 17px; padding: 0 0.35rem; margin-left: 0.4rem; border-radius: 5px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: 1px;
}
.an-tag--urg { color: var(--status-warning-text); background: var(--status-warning-bg); }
.an-tag--eme { color: var(--status-critical-text); background: var(--status-critical-bg); }
.an-tag--heur { opacity: 0.7; }
.an-view-value .an-tag { margin-left: 0; }

.an-wait-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.35rem; vertical-align: 1px; }
.an-wait-dot--ok { background: var(--an-ok); }
.an-wait-dot--warning { background: var(--an-warn); }
.an-wait-dot--critical { background: var(--an-bad); }
.an-wait--bad { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--an-bad); }

.an-risk { display: inline-flex; align-items: center; gap: 0.4rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-risk::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--an-ok); }
.an-risk--warn::before { background: var(--an-warn); }
.an-risk--bad::before { background: var(--an-bad); }

.an-status { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; font-size: 0.78rem; }
.an-status svg { stroke-width: 2.4; flex-shrink: 0; }
.an-status span { color: var(--text-primary); }
.an-status--ok { color: var(--an-ok); }
.an-status--bad { color: var(--an-bad); }
.an-status--warn { color: var(--an-warn); }
.an-status--info { color: var(--an-info); }

.an-tablefoot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.5rem 0.85rem; border-top: 1px solid var(--an-line); font-size: 0.76rem; color: var(--text-muted);
}
.an-tablefoot-info { display: flex; align-items: center; gap: 0.7rem; }
.an-pager { display: flex; align-items: center; gap: 3px; }
.an-pager button {
  min-width: 28px; height: 28px; padding: 0 0.3rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--an-line); background: transparent; color: var(--text-secondary);
  font-size: 0.76rem; font-family: var(--font-sans); font-variant-numeric: tabular-nums;
}
.an-pager button:hover:not(:disabled) { color: var(--text-primary); border-color: var(--an-line-strong); }
.an-pager button.is-active { border-color: var(--border-highlight); background: var(--status-info-bg); color: var(--text-primary); font-weight: 600; }
.an-pager button:disabled { opacity: 0.4; cursor: default; }
.an-pager-gap { padding: 0 0.2rem; }

/* --- Ficha del paciente: cajón por la derecha, encima de la tabla --- */
.an-drawer {
  /* Empieza bajo la cabecera de la app (60px) para no tapar búsqueda ni avisos. */
  position: fixed; top: 60px; right: 0; bottom: 0; z-index: 2500;
  width: 400px; max-width: 100vw; display: flex; flex-direction: column;
  background: var(--an-surface); border-left: 1px solid var(--an-line-strong);
  box-shadow: -18px 0 40px rgba(15, 23, 42, 0.22);
}
.an-drawer--enter { animation: anDrawerIn 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes anDrawerIn { from { transform: translateX(100%); } to { transform: none; } }
.an-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding: 1rem 1.1rem 0.75rem; }
.an-drawer-titles { min-width: 0; }
.an-drawer-name { margin: 0; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.an-drawer-sub { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.25rem; font-size: 0.76rem; color: var(--text-muted); }
.an-drawer-tabs { display: flex; gap: 0.1rem; padding: 0 0.85rem; border-bottom: 1px solid var(--an-line); }
.an-drawer-tab {
  padding: 0.55rem 0.5rem; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.78rem; font-weight: 600; font-family: var(--font-sans);
}
.an-drawer-tab:hover { color: var(--text-primary); }
.an-drawer-tab.is-active { color: var(--text-primary); border-bottom-color: var(--accent-cyan); }
.an-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.1rem; }
.an-drawer-actions { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.1rem; border-top: 1px solid var(--an-line); }
.an-drawer-actions .an-btn { flex: 1; height: 34px; }
.an-drawer-note { flex: 1; text-align: center; font-size: 0.74rem; color: var(--text-muted); }
.an-view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; }
.an-view-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.an-view-field.is-full { grid-column: 1 / -1; }
.an-view-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.an-view-value { font-size: 0.85rem; color: var(--text-primary); line-height: 1.35; overflow-wrap: anywhere; }

.analytics-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.analytics-timeline li { display: flex; gap: 0.7rem; font-size: 0.82rem; color: var(--text-primary); border-left: 2px solid var(--border-highlight); padding-left: 0.7rem; }
.analytics-timeline-date { color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.analytics-doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.82rem; }
.analytics-detail-loading { color: var(--text-muted); font-size: 0.82rem; padding: 0.5rem 0; }

/* --- Resultados: franja de indicadores --- */
.an-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--an-line); border-radius: 12px; background: var(--an-surface); }
.an-kpi { min-width: 0; padding: 0.65rem 1rem 0.7rem; }
.an-kpi + .an-kpi { border-left: 1px solid var(--an-line); }
.an-kpi-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; }
.an-kpi-label span:first-child { overflow: hidden; text-overflow: ellipsis; }
.an-kpi-label svg { color: var(--text-muted); flex-shrink: 0; cursor: help; }
.an-kpi-row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.15rem; min-width: 0; }
.an-kpi-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-kpi-value small { margin-left: 0.2rem; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; }
.an-kpi-value .an-muted { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; }
.an-kpi-foot { margin-top: 0.1rem; font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-delta { font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.an-delta--good { color: var(--an-ok); }
.an-delta--bad { color: var(--an-bad); }
.an-delta--flat { color: var(--text-muted); font-weight: 500; }

/* --- Resultados: rejilla de 12 columnas, filas de igual altura --- */
.an-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.75rem; }
.an-card { grid-column: span 6; display: flex; flex-direction: column; min-width: 0; padding: 0.85rem 1rem; border: 1px solid var(--an-line); border-radius: 12px; background: var(--an-surface); }
.an-span-8 { grid-column: span 8; }
.an-span-6 { grid-column: span 6; }
.an-span-4 { grid-column: span 4; }
.an-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.an-card-titles { min-width: 0; }
.an-card-head h4 { margin: 0; font-family: var(--font-heading); font-size: 0.93rem; font-weight: 600; color: var(--text-primary); }
.an-card-head p { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--text-muted); }
.an-card-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.an-card-body { flex: 1; min-height: 0; margin-top: 0.7rem; }
.an-card-foot { display: flex; align-items: center; gap: 0.4rem 0.9rem; flex-wrap: wrap; margin-top: 0.7rem; font-size: 0.7rem; color: var(--text-muted); }
.an-card-foot-note { margin-left: auto; }
.an-card .analytics-state { padding: 1.5rem 0.5rem; }

.an-legend { display: flex; gap: 0.8rem; font-size: 0.72rem; color: var(--text-secondary); }
.an-legend span { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.an-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.an-swatch--1 { background: var(--an-s1); }
.an-swatch--2 { background: var(--an-s2); }

.an-svg { display: block; width: 100%; height: auto; overflow: visible; }
.an-svg text { font-family: var(--font-sans); }
.an-svg-grid { stroke: var(--an-grid); stroke-width: 1; }
.an-svg-base { stroke: var(--an-axis); stroke-width: 1; }
.an-svg-axis { fill: var(--text-muted); font-size: 11px; }
.an-svg-value { fill: var(--text-primary); font-size: 11px; font-weight: 600; }
.an-svg-s1 { fill: var(--an-s1); }
.an-svg-s2 { fill: var(--an-s2); }
.an-svg-hover { fill: var(--text-primary); opacity: 0; }
.an-svg-col:hover .an-svg-hover { opacity: 0.05; }
.an-svg-line { fill: none; stroke: var(--an-s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-svg-area { fill: var(--an-s1); opacity: 0.12; }
.an-svg-dot { fill: var(--an-s1); stroke: var(--an-surface); stroke-width: 2; }
.an-svg-hit { fill: transparent; }

.an-data-table { margin-top: 0.5rem; font-size: 0.74rem; }
.an-data-table summary { cursor: pointer; color: var(--text-muted); font-weight: 600; width: fit-content; }
.an-data-table summary:hover { color: var(--text-primary); }
.an-data-table .an-tablescroll { margin-top: 0.4rem; max-height: 260px; overflow-y: auto; border: 1px solid var(--an-line); border-radius: 8px; }
.an-table--compact { min-width: 0; table-layout: auto; font-size: 0.76rem; }
.an-table--compact td, .an-table--compact th { height: 30px; }

.an-stock { display: flex; flex-direction: column; gap: 0.6rem; }
.an-stock-hero { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.an-stock-hero strong { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.an-stock-hero span { font-size: 0.76rem; color: var(--text-secondary); }
.an-flow { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--an-line); border-radius: 8px; }
.an-flow div { padding: 0.4rem 0.6rem; min-width: 0; }
.an-flow div + div { border-left: 1px solid var(--an-line); }
.an-flow span { display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.an-flow b { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.an-svg--stock { margin-top: auto; }
.an-status-line { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0; font-size: 0.74rem; color: var(--text-secondary); line-height: 1.4; }
.an-status-line svg { flex-shrink: 0; margin-top: 1px; }
.an-status-line--bad svg { color: var(--an-warn); }
.an-status-line--good svg { color: var(--an-ok); }
.an-status-line--flat svg { color: var(--text-muted); }

.an-hbars { display: flex; flex-direction: column; gap: 0.55rem; }
.an-hbar { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) 84px; align-items: center; gap: 0.7rem; font-size: 0.78rem; }
.an-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.an-hbar-track { position: relative; height: 10px; }
.an-hbar-fill, .an-hbar-p75 { position: absolute; left: 0; border-radius: 0 4px 4px 0; background: var(--an-s1); }
.an-hbar-fill { top: 0; bottom: 0; }
.an-hbar-p75 { top: 3px; bottom: 3px; opacity: 0.3; }
.an-hbar-val { text-align: right; white-space: nowrap; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.an-hbar-val small { margin-left: 0.3rem; font-size: 0.68rem; font-weight: 400; color: var(--text-muted); }
.an-hbar:hover .an-hbar-label { color: var(--accent-cyan); }
.an-key { display: inline-flex; align-items: center; gap: 0.35rem; }
.an-key i { display: inline-block; width: 16px; border-radius: 0 3px 3px 0; background: var(--an-s1); }
.an-key-median { height: 8px; }
.an-key-p75 { height: 4px; opacity: 0.3; }

.an-quality { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.an-quality-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 82px; align-items: center; gap: 0.7rem; font-size: 0.78rem; }
.an-quality-name { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.an-quality-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-quality-meter { display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; }
.an-quality-meter i { display: block; height: 100%; min-width: 3px; background: var(--an-ok); opacity: 0.5; }
.an-quality-meter i.is-missing { background: var(--an-warn); opacity: 1; }
.an-quality-val { text-align: right; white-space: nowrap; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.an-quality-val b { color: var(--text-primary); }

.an-godb {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem 0.85rem; border: 1px dashed var(--an-line-strong); border-radius: 12px;
  font-size: 0.8rem; color: var(--text-secondary);
}
.an-godb strong { color: var(--text-primary); }

.an-table th.an-col-avAcciones { width: 132px; }
.an-table .an-col-avAcciones { text-align: right; }
.an-table td.an-col-avFecha { font-variant-numeric: tabular-nums; }
.analytics-state strong { color: var(--text-primary); }

/* --- Estados --- */
.analytics-state { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 3rem 1rem; text-align: center; color: var(--text-secondary); }
.analytics-state p { margin: 0; }
.analytics-state--error { color: var(--status-critical-text); }
.analytics-skeleton { display: flex; flex-direction: column; gap: 0.75rem; }
.analytics-skel-block { height: 200px; border-radius: 12px; background: var(--bg-input); animation: analyticsPulse 1.4s ease-in-out infinite; }
@keyframes analyticsPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .analytics-skel-block, .an-drawer--enter { animation: none; }
}

/* --- Responsive --- */
@media (max-width: 1180px) {
  .an-span-8, .an-span-6, .an-span-4 { grid-column: 1 / -1; }
  .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-kpi:nth-child(4) { border-left: 0; }
  .an-kpi:nth-child(n+4) { border-top: 1px solid var(--an-line); }
}
@media (max-width: 760px) {
  .an-head { position: static; }
  .an-topbar-controls { margin-left: 0; width: 100%; }
  .an-period { width: 100%; min-width: 0; }
  .an-period-dates { flex: 1; min-width: 0; }
  .an-period-dates input { width: auto; flex: 1; min-width: 0; }
  .an-seg { max-width: 100%; overflow-x: auto; }
  .an-search { width: 100%; }
  .an-filterbar-sep { display: none; }
  .an-pop--filters, .an-pop--cohort { position: fixed; left: 12px !important; right: 12px !important; top: auto; bottom: 12px; width: auto; }
  .an-pop-grid { grid-template-columns: 1fr; }
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-kpi + .an-kpi { border-left: 0; }
  .an-kpi:nth-child(n+2) { border-top: 1px solid var(--an-line); }
  .an-kpi:nth-child(2n) { border-left: 1px solid var(--an-line); }
  .an-hbar { grid-template-columns: minmax(90px, 36%) minmax(0, 1fr) 70px; }
  .an-quality-row { grid-template-columns: minmax(0, 1fr) 60px 72px; }
  .an-drawer { top: 0; width: 100vw; border-left: none; }
  .an-tablehead-actions { margin-left: 0; }
}

/* Avisos al busca -- botón flotante global (visible en cualquier pestaña) y
   panel anclado a él (mismo lenguaje visual que .gd-swap del Cuadrante, pero
   con los tokens globales para poder vivir fuera de esa vista). */
.busca-fab-wrap { position: fixed; right: 26px; bottom: 26px; z-index: 500; display: none; }
.busca-fab {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-glow), var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}
.busca-fab:hover { transform: scale(1.06); }
.busca-fab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--status-critical-text);
  color: #450a0a;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-primary);
}
/* Panel de aviso nuevo: mismo lenguaje que la hoja del móvil (m-in, m-tile,
   m-sec de mobile-screens.css) a tamaño de escritorio. Sin fondo: la app
   sigue siendo usable con el panel abierto. */
.busca-panel[hidden] { display: none; }
.busca-panel {
  position: absolute; bottom: calc(100% + 12px); right: 0; z-index: 501;
  width: 600px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; overflow: hidden; text-align: left;
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 20px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35); font-family: var(--font-sans);
  animation: busca-panel-in 0.18s cubic-bezier(.2, .8, .3, 1) both; transform-origin: bottom right;
}
@keyframes busca-panel-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .busca-panel { animation: none; } }
.busca-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; flex: none; }
.busca-glyph {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent-cyan) 16%, transparent); color: var(--accent-cyan);
}
.busca-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.busca-title b { font-family: var(--font-heading); font-weight: 800; font-size: 1.02rem; color: var(--text-primary); line-height: 1.2; }
.busca-title small { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-pend-pill {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px 0 12px;
  border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-input); cursor: pointer;
  font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700; color: var(--text-secondary);
}
.busca-pend-pill:hover { color: var(--text-primary); border-color: var(--border-highlight); }
.busca-pend-pill svg { color: var(--text-muted); }
.busca-pend-pill i { font-style: normal; font-size: 0.66rem; font-weight: 800; background: #fca5a5; color: #450a0a; border-radius: 999px; padding: 0 6px; }
.busca-pend-pill i[hidden], .busca-pend-pill[hidden] { display: none; }
.busca-x {
  width: 36px; height: 36px; flex: none; border-radius: 11px; border: 1px solid var(--border-color);
  background: var(--bg-input); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.busca-x:hover { border-color: var(--border-highlight); }
.busca-panel-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; overflow-y: auto; border-top: 1px solid var(--border-color); min-height: 0; }
.busca-panel-body [hidden] { display: none !important; }
.busca-form-error { font-size: 0.78rem; color: var(--status-critical-text); background: var(--status-critical-bg); border: 1px solid var(--status-critical-border); border-radius: 10px; padding: 8px 10px; }
.busca-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; }
.busca-when {
  display: flex; align-items: center; gap: 7px; height: 46px; min-width: 0; padding: 0 12px;
  background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 11px;
}
.busca-when > svg { color: var(--accent-cyan); flex: none; }
.busca-when b { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.busca-when span { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.busca-link { margin-left: auto; flex: none; background: none; border: 0; padding: 2px 0 2px 6px; cursor: pointer; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; color: var(--accent-cyan); }
.busca-prio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.busca-tile {
  height: 46px; min-width: 0; padding: 0 4px; border-radius: 11px; border: 1px solid var(--border-color); background: var(--bg-input);
  display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700; color: var(--text-secondary);
}
.busca-tile svg { color: var(--c); flex: none; }
.busca-tile:hover { color: var(--text-primary); }
.busca-tile.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--text-primary); }
.busca-sec { display: flex; align-items: center; gap: 8px; padding-top: 6px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.busca-sec::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.busca-grid { display: grid; gap: 8px; }
.busca-grid--name { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 84px; }
.busca-grid--diag { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.busca-grid--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.busca-in {
  display: flex; flex-direction: column; justify-content: center; height: 50px; min-width: 0; padding: 0 12px; cursor: text;
  background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 11px;
}
.busca-in:focus-within { border-color: var(--border-highlight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 18%, transparent); }
.busca-in > span { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-in input, .busca-in select, .busca-in textarea {
  width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary);
  font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; line-height: 1.35; -webkit-appearance: none; appearance: none;
}
.busca-in select { cursor: pointer; text-overflow: ellipsis; }
.busca-in select option { color: var(--text-primary); background: var(--bg-secondary); }
.busca-in input[type="number"]::-webkit-inner-spin-button { display: none; }
.busca-in input[type="datetime-local"] { color-scheme: light dark; }
.busca-in--tall { height: auto; padding: 8px 12px; }
.busca-in textarea { resize: vertical; min-height: 3.4em; }
.busca-add {
  display: flex; align-items: center; gap: 8px; height: 50px; min-width: 0; padding: 0 12px; cursor: pointer;
  border: 1px dashed var(--border-color); border-radius: 11px; background: transparent;
  font-family: var(--font-sans); font-size: 0.84rem; font-weight: 700; color: var(--text-primary); text-align: left;
}
.busca-add:hover { border-color: var(--border-highlight); }
.busca-add svg { color: var(--accent-cyan); flex: none; }
.busca-add i { margin-left: auto; font-style: normal; font-size: 0.66rem; font-weight: 800; color: var(--text-muted); background: var(--bg-input); border-radius: 999px; padding: 1px 8px; }
.busca-panel-foot { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--border-color); flex: none; }
.busca-hint { margin-right: auto; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.busca-hint kbd {
  font-family: var(--font-sans); font-size: 0.66rem; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-input); border: 1px solid var(--border-color); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px;
}
.busca-btn {
  height: 42px; padding: 0 18px; border: 0; border-radius: 12px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; background: var(--accent-gradient); color: #fff;
  font-family: var(--font-sans); font-size: 0.86rem; font-weight: 800; box-shadow: var(--shadow-glow);
}
.busca-btn:disabled { opacity: 0.55; cursor: default; }
.busca-btn--ghost { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); box-shadow: none; }
.busca-btn--ghost:hover { border-color: var(--border-highlight); }
@media (max-width: 620px) {
  .busca-top, .busca-grid--diag, .busca-grid--half { grid-template-columns: minmax(0, 1fr); }
  .busca-grid--name { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .busca-grid--name .busca-in:last-child { grid-column: 1 / -1; }
  .busca-hint { display: none; }
  .busca-panel-foot .busca-btn { flex: 1; justify-content: center; }
  .busca-panel-foot .busca-btn--ghost { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .busca-fab-wrap { right: 16px; bottom: 84px; }
  .busca-fab { width: 48px; height: 48px; }
}

/* Aviso flotante no bloqueante (showAppToast), sustituye al alert() nativo
   para los errores de escritura del Cuadrante (ver cuadranteReportError). */
#eiren-toast-host { position: fixed; top: 76px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; max-width: min(340px, calc(100vw - 32px)); }
.eiren-toast {
  pointer-events: auto; cursor: pointer; background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-left: 4px solid #ef4444; border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem; font-size: 0.82rem; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  white-space: pre-line; overflow-wrap: anywhere;
  opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.eiren-toast.show { opacity: 1; transform: translateY(0); }
.eiren-toast.error { border-left-color: #ef4444; }
.eiren-toast.info { border-left-color: var(--accent-teal, #14b8a6); }
.eiren-toast.success { border-left-color: #10b981; }
.eiren-toast-action {
  display: block; margin-top: 0.45rem; padding: 0.3rem 0.75rem; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-color); background: transparent; color: var(--accent-teal, #14b8a6);
  font: inherit; font-weight: 600; cursor: pointer;
}
.eiren-toast-action:hover { background: color-mix(in srgb, var(--accent-teal, #14b8a6) 12%, transparent); }
.eiren-toast-action:disabled { opacity: 0.6; cursor: default; }

/* ============================================================================
   MI CUENTA -- ficha personal (identidad + Perfil / Seguridad / Notificaciones)
   Sustituye al modal genérico de secciones apiladas: cabecera con avatar,
   pestañas y tarjetas. Todo con los tokens del tema, así que sirve igual en
   claro y en oscuro (ver core/theme). Prefijo .mc- para no chocar con nada.
   ========================================================================== */
.mc-modal {
  --mc-surface: color-mix(in srgb, var(--text-primary) 4%, transparent);
  --mc-surface-strong: color-mix(in srgb, var(--text-primary) 7%, transparent);
  width: 100%;
  max-width: 660px;
  max-height: min(90vh, 880px);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
}
:root:not([data-theme="light"]) .mc-modal {
  --mc-surface: color-mix(in srgb, var(--text-primary) 7%, transparent);
  --mc-surface-strong: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

/* --- Cabecera de identidad --- */
.mc-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem 3.2rem 1.15rem 1.35rem;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent-cyan) 16%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 12%, transparent) 0%, transparent 65%);
  border-bottom: 1px solid var(--border-color);
}
.mc-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent),
              0 0 0 5px color-mix(in srgb, currentColor 10%, transparent);
}
.mc-id { min-width: 0; }
.mc-id-name {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 800; color: var(--text-primary);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-id-sub {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin-top: 0.3rem; font-size: 0.75rem; color: var(--text-secondary);
}
.mc-role-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.14rem 0.5rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--accent-cyan);
  background: color-mix(in srgb, var(--accent-cyan) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 32%, transparent);
}
.mc-user-chip { font-size: 0.72rem; color: var(--text-muted); }
.mc-close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  color: var(--text-secondary); cursor: pointer; transition: var(--transition-fast);
}
.mc-close:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }

/* --- Pestañas --- */
.mc-tabs {
  display: flex; gap: 1.4rem;
  padding: 0 1.35rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.mc-tab {
  position: relative;
  appearance: none; border: 0; background: none;
  padding: 0.75rem 0.1rem;
  font-family: inherit; font-size: 0.82rem; font-weight: 700;
  color: var(--text-secondary); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color 0.18s ease;
}
.mc-tab svg { width: 15px; height: 15px; }
.mc-tab:hover { color: var(--text-primary); }
.mc-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0; background: transparent; transition: background 0.18s ease;
}
.mc-tab[aria-selected="true"] { color: var(--accent-cyan); }
.mc-tab[aria-selected="true"]::after { background: var(--accent-gradient); }

/* --- Cuerpo --- */
.mc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.15rem 1.35rem 1.35rem; }
.mc-panel { display: flex; flex-direction: column; gap: 0.9rem; }
.mc-panel[hidden] { display: none; }

.mc-card {
  background: var(--mc-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.95rem 1rem;
}
.mc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.mc-card-title { font-size: 0.83rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; }
.mc-card-title svg { width: 15px; height: 15px; color: var(--accent-cyan); }
.mc-card-sub { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; margin-top: 0.2rem; }

/* --- Campos --- */
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 0.85rem; }
.mc-grid .mc-full { grid-column: 1 / -1; }
.mc-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.mc-field > label { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }
.mc-field .req { color: var(--accent-cyan); }
.mc-input-wrap { position: relative; display: flex; align-items: center; }
.mc-input-wrap > svg {
  position: absolute; left: 0.7rem; width: 15px; height: 15px;
  color: var(--text-muted); pointer-events: none; transition: color 0.18s ease;
}
.mc-input-wrap:focus-within > svg { color: var(--accent-cyan); }
.mc-modal .input-field { background: var(--bg-input); padding: 0.58rem 0.8rem; font-size: 0.85rem; }
.mc-input-wrap .input-field { padding-left: 2.15rem; }

/* --- Pie de acción (solo en Perfil) --- */
.mc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.8rem 1.35rem; border-top: 1px solid var(--border-color);
  background: var(--mc-surface); flex-shrink: 0;
}
.mc-foot[hidden] { display: none; }
.mc-foot-hint { font-size: 0.74rem; color: var(--text-muted); }

/* --- Mensaje en línea (sustituye a alert()) --- */
.mc-msg {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.76rem; font-weight: 600; line-height: 1.4;
  padding: 0.5rem 0.65rem; border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.mc-msg[hidden] { display: none; }
.mc-msg svg { width: 14px; height: 14px; flex-shrink: 0; }
.mc-msg.error { color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); border-color: color-mix(in srgb, #ef4444 32%, transparent); }
.mc-msg.ok { color: var(--accent-teal); background: color-mix(in srgb, var(--accent-teal) 12%, transparent); border-color: color-mix(in srgb, var(--accent-teal) 32%, transparent); }
.mc-msg.info { color: var(--text-secondary); background: var(--mc-surface); border-color: var(--border-color); }

/* --- Conexiones (Telegram, push) --- */
.mc-conn { display: flex; align-items: center; gap: 0.8rem; }
.mc-conn-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.mc-conn-ico svg { width: 19px; height: 19px; }
.mc-conn-body { flex: 1; min-width: 0; }
.mc-conn-title { font-size: 0.83rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; }
.mc-conn-sub { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.45; margin-top: 0.15rem; }
.mc-conn-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.mc-conn-actions .btn-secondary, .mc-conn-actions .btn-primary { font-size: 0.74rem; padding: 0.35rem 0.7rem; }
.mc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.mc-dot.on { background: var(--accent-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-teal) 20%, transparent); }
.mc-dot.off { background: var(--text-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 18%, transparent); }

.mc-groups { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.mc-group-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.74rem; font-weight: 600; text-decoration: none;
  padding: 0.32rem 0.65rem; border-radius: 999px;
  color: var(--accent-cyan);
  background: color-mix(in srgb, var(--accent-cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent);
  transition: var(--transition-fast);
}
.mc-group-link:hover { background: color-mix(in srgb, var(--accent-cyan) 20%, transparent); }
.mc-group-link svg { width: 13px; height: 13px; }

/* Confirmación dentro de la propia tarjeta -- nada de confirm() del navegador */
.mc-confirm {
  margin-top: 0.7rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  font-size: 0.76rem; color: var(--text-primary);
  background: color-mix(in srgb, #ef4444 10%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}
.mc-confirm[hidden] { display: none; }
.mc-btn-danger {
  border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
  background: color-mix(in srgb, #ef4444 16%, transparent);
  color: #ef4444; font-family: inherit; font-size: 0.74rem; font-weight: 700;
  padding: 0.32rem 0.7rem; border-radius: var(--radius-md); cursor: pointer;
  transition: var(--transition-fast);
}
.mc-btn-danger:hover { background: color-mix(in srgb, #ef4444 26%, transparent); }

/* --- Avisos: una fila por evento, canales como píldoras --- */
.mc-evt { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.62rem 0; }
.mc-evt + .mc-evt { border-top: 1px solid var(--border-color); }
.mc-evt-name { font-size: 0.81rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.mc-chans { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.mc-chan {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.6rem 0.28rem 0.42rem; border-radius: 999px;
  border: 1px solid var(--border-color); background: var(--bg-input);
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; user-select: none; transition: var(--transition-fast);
}
.mc-chan input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mc-chan-box {
  width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid color-mix(in srgb, var(--text-muted) 70%, transparent);
  display: grid; place-items: center; transition: var(--transition-fast);
}
.mc-chan-box svg { width: 10px; height: 10px; color: #fff; opacity: 0; transition: opacity 0.15s ease; }
.mc-chan:hover { border-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent); color: var(--text-primary); }
.mc-chan:has(input:checked) {
  color: var(--accent-cyan);
  border-color: color-mix(in srgb, var(--accent-cyan) 50%, transparent);
  background: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
}
.mc-chan:has(input:checked) .mc-chan-box { background: var(--accent-cyan); border-color: var(--accent-cyan); }
.mc-chan:has(input:checked) .mc-chan-box svg { opacity: 1; }
.mc-chan:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 18%, transparent); }

.mc-empty { font-size: 0.79rem; color: var(--text-secondary); }

/* --- Avisos agrupados por categoría, con interruptor de apartado --- */
.mc-cat { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.mc-cat + .mc-cat { margin-top: 0.55rem; }
.mc-cat-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; background: var(--mc-surface, var(--bg-input)); }
.mc-cat-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; text-align: left;
}
.mc-cat-name { font-family: var(--font-heading); font-size: 0.83rem; font-weight: 700; color: var(--text-primary); flex: 1; min-width: 0; }
.mc-cat-count { font-size: 0.71rem; color: var(--text-muted); white-space: nowrap; }
.mc-cat-chevron { display: inline-grid; place-items: center; color: var(--text-muted); transition: var(--transition-fast); }
.mc-cat-chevron svg { width: 15px; height: 15px; }
.mc-cat-chevron.open { transform: rotate(180deg); }
.mc-cat-toggle:hover .mc-cat-name { color: var(--accent-cyan); }
.mc-cat-rows { padding: 0 0.7rem 0.4rem; }
.mc-cat-off .mc-cat-name, .mc-cat-off .mc-cat-count { color: var(--text-muted); }

.mc-mod-label {
  font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); padding: 0.7rem 0 0.25rem;
}

/* Interruptor: el único control nuevo de esta pantalla. Toma el mismo
   degradado que el segmentado del modo de entrega para no desentonar. */
.mc-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.mc-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mc-switch-track {
  width: 32px; height: 18px; border-radius: 999px; position: relative;
  background: var(--border-color); transition: var(--transition-fast);
}
.mc-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--text-muted); transition: var(--transition-fast);
}
.mc-switch:has(input:checked) .mc-switch-track { background: var(--accent-gradient); }
.mc-switch:has(input:checked) .mc-switch-track::after { left: 16px; background: #fff; }
.mc-switch:has(input:disabled) { cursor: not-allowed; opacity: 0.45; }
.mc-switch:has(input:focus-visible) .mc-switch-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 22%, transparent); }

.mc-evt-name em {
  display: block; font-style: normal; font-weight: 400;
  font-size: 0.71rem; color: var(--text-muted); margin-top: 0.1rem; line-height: 1.4;
}
.mc-evt-off .mc-evt-name, .mc-evt-off .mc-evt-name em { color: var(--text-muted); }
.mc-chan-dim { opacity: 0.4; cursor: not-allowed; }
.mc-chan-dim input { pointer-events: none; }
.mc-chan-locked { border-style: dashed; opacity: 0.55; cursor: not-allowed; }

/* El aviso de guardia del "Derecho al descanso": es la regla que impide que
   alguien se silencie la noche que le toca, así que se ve siempre. */
.mc-quiet-note {
  display: flex; gap: 0.6rem; margin-top: 0.8rem;
  padding: 0.6rem 0.75rem; border-radius: var(--radius-md);
  font-size: 0.75rem; line-height: 1.5;
  color: var(--status-warning-text);
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
}
.mc-quiet-note b { font-weight: 700; }

/* --- Modo de entrega (compartido con el Panel de Administración) --- */
.ndm-row { padding: 0.6rem 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ndm-row + .ndm-row { border-top: 1px solid var(--border-color); }
.ndm-row-name { font-size: 0.79rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; }
.ndm-controls { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.ndm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border-color); }
.ndm-seg label {
  position: relative; cursor: pointer; border-radius: 999px;
  padding: 0.26rem 0.7rem; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  transition: var(--transition-fast); white-space: nowrap;
}
.ndm-seg label:hover { color: var(--text-primary); }
.ndm-seg input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ndm-seg label:has(input:checked) { background: var(--accent-gradient); color: #fff; box-shadow: var(--shadow-sm); }
.ndm-hour {
  font-family: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 0.28rem 0.5rem; border-radius: 999px;
  background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color); cursor: pointer;
}
.ndm-hour:focus { outline: none; border-color: var(--accent-cyan); }

@media (max-width: 560px) {
  .mc-head { padding: 1rem 3rem 1rem 1rem; gap: 0.7rem; }
  .mc-avatar { width: 44px; height: 44px; font-size: 0.9rem; }
  .mc-id-name { font-size: 1rem; }
  .mc-tabs { padding: 0 1rem; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; }
  .mc-tabs::-webkit-scrollbar { display: none; }
  .mc-body { padding: 1rem; }
  .mc-foot { padding: 0.75rem 1rem; }
  .mc-foot-hint { display: none; }
  .mc-grid { grid-template-columns: 1fr; }
  .mc-evt { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .mc-chans { justify-content: flex-start; }
  .mc-conn { flex-wrap: wrap; }
  .mc-conn-actions { width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITORES (.ed-*): la anatomía común de todos los modales de crear/editar,
   montada sobre la de «Mi cuenta» (mc-modal · mc-head · mc-body · mc-foot).
   El modal se mide por su propio ancho (container-type), no por la ventana,
   así la misma pieza sirve en el panel, en un cajón o en el móvil.
   Aprobado en docs/bocetos/editores/ (docs/plan-editores.md).
   ═══════════════════════════════════════════════════════════════════════════ */
.ed-modal { container-type: inline-size; }
.ed-modal.sm { max-width: 480px; }
.ed-modal.md { max-width: 640px; }
.ed-modal.lg { max-width: 880px; }
.ed-modal.xl { max-width: 1080px; }
.ed-av.xs { width: 20px; height: 20px; font-size: 0.55rem; }
.qf-mt { margin-top: 0.85rem; }

.ed-badge {
  --loc: var(--accent-cyan);
  width: 50px; height: 50px; border-radius: 15px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--loc);
  font-family: var(--font-heading); font-size: 1rem; font-weight: 800;
  background: color-mix(in srgb, var(--loc) 16%, var(--bg-secondary));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--loc) 45%, transparent), 0 0 0 5px color-mix(in srgb, var(--loc) 10%, transparent);
}
.ed-badge.round { border-radius: 50%; }
.ed-badge svg { width: 23px; height: 23px; }
.ed-eyebrow { font-size: 0.63rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.15rem; }
.ed-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; color: var(--text-secondary); background: var(--mc-surface-strong); border: 1px solid var(--border-color);
}
.ed-chip.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border-radius: 6px; font-weight: 500; }
.ed-chip.warn { color: var(--status-warning-text); background: var(--status-warning-bg); border-color: var(--status-warning-border); }
.ed-chip.crit { color: var(--status-critical-text); background: var(--status-critical-bg); border-color: var(--status-critical-border); }
.ed-chip.ok { color: var(--status-stable-text); background: var(--status-stable-bg); border-color: var(--status-stable-border); }
.ed-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ed-chip svg { width: 12px; height: 12px; }

.ed-cols { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
.ed-col { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
@container (min-width: 720px) { .ed-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

.ed-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem 0.85rem; }
@container (min-width: 440px) {
  .ed-grid.two { grid-template-columns: 1fr 1fr; }
  .ed-grid.two > .ed-full { grid-column: 1 / -1; }
}
.mc-card-head .ed-card-action { flex-shrink: 0; font-size: 0.72rem; padding: 0.32rem 0.65rem; }

.ed-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.ed-label-row > label, .ed-lbl { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }
.ed-hint { font-size: 0.7rem; color: var(--text-muted); line-height: 1.45; }
.ed-counter { font-size: 0.66rem; font-weight: 700; color: var(--text-muted); }
.ed-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem !important; }
.ed-modal .input-field:disabled { opacity: 1; color: var(--text-secondary); background: var(--mc-surface) !important; cursor: not-allowed; }
.ed-modal textarea.input-field { resize: vertical; min-height: 4.2rem; line-height: 1.5; font-family: inherit; }
.ed-modal select.input-field { cursor: pointer; }

/* Tarjetas-radio */
.ed-choice { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0.5rem; }
@container (max-width: 439px) { .ed-choice { grid-template-columns: 1fr; } }
.ed-opt {
  position: relative; display: flex; gap: 0.6rem; align-items: center;
  padding: 0.6rem 0.7rem; border-radius: var(--radius-md); cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-input); transition: var(--transition-fast);
}
.ed-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ed-opt-ico { --c: var(--accent-cyan); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: var(--text-muted); background: var(--mc-surface-strong); transition: var(--transition-fast); }
.ed-opt-ico svg { width: 16px; height: 16px; }
.ed-opt-title { display: block; font-size: 0.79rem; font-weight: 700; color: var(--text-primary); }
.ed-opt-sub { display: block; font-size: 0.68rem; color: var(--text-muted); line-height: 1.35; margin-top: 0.08rem; }
.ed-opt:hover { border-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent); }
.ed-opt:has(input:checked) { border-color: color-mix(in srgb, var(--accent-cyan) 60%, transparent); background: color-mix(in srgb, var(--accent-cyan) 9%, var(--bg-input)); }
.ed-opt:has(input:checked) .ed-opt-ico { color: #fff; background: var(--accent-gradient); }

/* Segmentado a lo ancho */
.ed-seg { display: flex; width: 100%; box-sizing: border-box; }
.ed-seg label { flex: 1; text-align: center; }

/* Fila con interruptor y bloque que se despliega */
.ed-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-input); }
.ed-toggle-t { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
.ed-toggle-s { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.08rem; line-height: 1.35; }

/* Franja horaria */
.ed-range { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.ed-range .input-field { flex: 1; min-width: 92px; font-variant-numeric: tabular-nums; }
.ed-range .arrow { color: var(--text-muted); flex-shrink: 0; display: grid; }
.ed-range .arrow svg { width: 15px; height: 15px; }
.ed-pill { flex-shrink: 0; font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 999px; color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent); white-space: nowrap; }
.ed-pill.warn { color: var(--status-warning-text); background: var(--status-warning-bg); border-color: var(--status-warning-border); }

/* Paso a paso */
.ed-stepper { display: flex; align-items: stretch; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-input); overflow: hidden; }
.ed-stepper button { appearance: none; border: 0; background: none; color: var(--text-secondary); width: 2.2rem; cursor: pointer; font-size: 1rem; font-weight: 700; }
.ed-stepper button:hover { color: var(--accent-cyan); background: var(--mc-surface); }
.ed-stepper input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; text-align: center; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.ed-stepper input::-webkit-inner-spin-button, .ed-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ed-stepper .unit { align-self: center; font-size: 0.7rem; color: var(--text-muted); padding-right: 0.3rem; }

/* Color */
.ed-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ed-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0; border: 2px solid var(--bg-secondary); background: var(--sw); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw) 60%, transparent); display: grid; place-items: center; transition: var(--transition-fast); }
.ed-swatch:hover { transform: scale(1.08); }
.ed-swatch svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.ed-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sw); }
.ed-swatch[aria-pressed="true"] svg { opacity: 1; }
.ed-swatch.custom { background: conic-gradient(#ef4444, #f59e0b, #84cc16, #06b6d4, #6366f1, #ec4899, #ef4444); --sw: var(--text-muted); }

/* Días de la semana */
.ed-days { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ed-day { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font-weight: 700; font-size: 0.78rem; cursor: pointer; font-family: inherit; }
.ed-day[aria-pressed="true"] { color: #fff; background: var(--accent-gradient); border-color: transparent; }

/* Chips de elección */
.ed-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ed-pick { font-family: inherit; font-size: 0.73rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); transition: var(--transition-fast); }
.ed-pick:hover { color: var(--text-primary); border-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent); }
.ed-pick[aria-pressed="true"] { color: var(--accent-cyan); border-color: color-mix(in srgb, var(--accent-cyan) 55%, transparent); background: color-mix(in srgb, var(--accent-cyan) 12%, transparent); }

/* Listas (gestores, selectores) */
.ed-list { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-input); }
.ed-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; position: relative; }
.ed-row + .ed-row { border-top: 1px solid var(--border-color); }
.ed-row.stripe::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.ed-row-main { flex: 1; min-width: 0; }
.ed-row-t { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ed-row-s { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; line-height: 1.35; }
.ed-row-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
.ed-ibtn { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; border: 1px solid transparent; background: none; color: var(--text-muted); cursor: pointer; }
.ed-ibtn:hover { color: var(--accent-cyan); border-color: var(--border-color); background: var(--mc-surface); }
.ed-ibtn.danger:hover { color: #ef4444; }
.ed-ibtn svg { width: 15px; height: 15px; }
.ed-ibtn.star.on { color: #f59e0b; }
.ed-av { --c: var(--accent-cyan); width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 0.66rem; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.ed-av.sq { border-radius: 9px; }
.ed-av svg { width: 15px; height: 15px; }
.ed-row.selectable { cursor: pointer; }
button.ed-row { appearance: none; border: 0; background: none; width: 100%; text-align: left; font: inherit; color: inherit; }
.ed-row.selectable:hover { background: var(--mc-surface); }
.ed-row.selectable.on { background: color-mix(in srgb, var(--accent-cyan) 8%, transparent); }
.ed-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text-muted) 70%, transparent); flex-shrink: 0; display: grid; place-items: center; }
.ed-row.on .ed-radio { border-color: var(--accent-cyan); }
.ed-row.on .ed-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-cyan); }
.ed-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid color-mix(in srgb, var(--text-muted) 70%, transparent); flex-shrink: 0; display: grid; place-items: center; }
.ed-check svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.ed-row.on .ed-check { background: var(--accent-cyan); border-color: var(--accent-cyan); }
.ed-row.on .ed-check svg { opacity: 1; }
.ed-list-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding: 0.55rem 0.75rem 0.3rem; background: var(--mc-surface); }
.ed-row + .ed-list-label, .ed-list-label + .ed-list-label { border-top: 1px solid var(--border-color); }

/* Persona en un desplegable */
.ed-person { display: flex; align-items: center; gap: 0.55rem; }
.ed-person .input-field { flex: 1; min-width: 0; }
.ed-person .ed-av.empty { color: var(--text-muted); border-style: dashed; background: none; border-color: var(--border-color); }

/* Zona de soltar ficheros */
.ed-drop { border: 1.5px dashed color-mix(in srgb, var(--accent-cyan) 45%, var(--border-color)); border-radius: var(--radius-md); padding: 1.4rem 1rem; text-align: center; background: color-mix(in srgb, var(--accent-cyan) 4%, var(--bg-input)); cursor: pointer; transition: var(--transition-fast); }
.ed-drop:hover { background: color-mix(in srgb, var(--accent-cyan) 9%, var(--bg-input)); }
/* Los hijos no reciben el arrastre: si no, pasar el fichero sobre el texto parpadea. */
.ed-drop > * { pointer-events: none; }
.ed-drop-ico { width: 42px; height: 42px; border-radius: 12px; margin: 0 auto 0.5rem; display: grid; place-items: center; color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); }
.ed-drop-ico svg { width: 20px; height: 20px; }
.ed-drop-t { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.ed-drop-s { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem; }

/* Avisos dentro del cuerpo */
.ed-callout { display: flex; gap: 0.55rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-md); font-size: 0.74rem; line-height: 1.5; color: var(--text-secondary); background: var(--mc-surface); border: 1px solid var(--border-color); }
.ed-callout svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.1rem; color: var(--accent-cyan); }
.ed-callout.warn { color: var(--status-warning-text); background: var(--status-warning-bg); border-color: var(--status-warning-border); }
.ed-callout.warn svg { color: currentColor; }
.ed-callout.crit { color: var(--status-critical-text); background: var(--status-critical-bg); border-color: var(--status-critical-border); }
.ed-callout.crit svg { color: currentColor; }
.ed-callout b { font-weight: 700; }

/* Vista previa */
.ed-preview { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: flex-end; }
.ed-pv-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem; }
.ed-pv-chip { --loc: var(--accent-cyan); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.33rem 0.65rem 0.33rem 0.45rem; border-radius: 999px; font-size: 0.77rem; font-weight: 700; color: var(--text-primary); background: color-mix(in srgb, var(--loc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--loc) 40%, transparent); }
.ed-pv-chip svg { color: var(--loc); width: 15px; height: 15px; }
.ed-pv-cell { --loc: var(--accent-cyan); width: 64px; height: 56px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-input); display: flex; flex-direction: column; padding: 5px; gap: 4px; box-sizing: border-box; }
.ed-pv-cell .d { font-size: 0.6rem; font-weight: 700; color: var(--text-muted); }
.ed-pv-cell .a { font-size: 0.66rem; font-weight: 800; text-align: center; border-radius: 6px; padding: 3px 2px; color: #fff; background: var(--loc); }

/* Parrilla de iconos dentro del editor */
.ed-modal .icon-pool-grid { max-height: 176px; background: var(--bg-input); }

/* Pie */
.ed-foot { flex-wrap: wrap; }
.ed-foot-actions { display: flex; gap: 0.5rem; margin-left: auto; }
.ed-foot .btn-primary, .ed-foot .btn-secondary { display: inline-flex; align-items: center; gap: 0.35rem; }
.ed-foot .btn-primary svg { width: 15px; height: 15px; }
.ed-btn-danger { appearance: none; font-family: inherit; font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.8rem; border-radius: var(--radius-md); cursor: pointer; color: #ef4444; background: none; border: 1px solid transparent; }
.ed-btn-danger:hover { background: color-mix(in srgb, #ef4444 12%, transparent); border-color: color-mix(in srgb, #ef4444 30%, transparent); }
.ed-btn-danger svg { width: 15px; height: 15px; }
.ed-foot .btn-primary.danger { background: #dc2626; box-shadow: none; }
.ed-foot .btn-primary.danger:hover { background: #b91c1c; }
@container (max-width: 459px) {
  .ed-foot .mc-foot-hint { display: none; }
  .ed-foot-actions { width: 100%; }
  .ed-foot-actions .btn-primary { flex: 1; justify-content: center; }
}

/* Tamaño mínimo: menús pegados a una tarjeta */
.ed-modal.xs { max-width: 360px; }
.ed-btn-danger.sm { font-size: 0.72rem; padding: 0.3rem 0.55rem; }

/* Cabecera con imagen (logotipo) */
.ed-badge.img { background: #fff; padding: 7px; box-sizing: border-box; }
.ed-badge.img img { width: 100%; height: 100%; object-fit: contain; }

/* Logotipo */
.ed-logo { display: flex; gap: 0.8rem; align-items: stretch; }
.ed-logo-tile {
  width: 118px; flex-shrink: 0; border-radius: var(--radius-md); border: 1px solid var(--border-color);
  background: repeating-conic-gradient(color-mix(in srgb, var(--text-muted) 10%, transparent) 0 25%, transparent 0 50%) 0 0 / 14px 14px, #fff;
  display: grid; place-items: center; padding: 0.7rem; box-sizing: border-box; min-height: 96px;
}
.ed-logo-tile img { max-width: 100%; max-height: 64px; object-fit: contain; }
.ed-logo-empty { color: var(--text-muted); }
.ed-logo-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ed-drop.sm { padding: 0.8rem; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ed-drop.sm .ed-drop-t { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.76rem; }
.ed-drop.sm .ed-drop-t svg { width: 14px; height: 14px; color: var(--accent-cyan); }
.ed-logo-actions { display: flex; justify-content: flex-end; }
@container (max-width: 380px) { .ed-logo { flex-direction: column; } .ed-logo-tile { width: 100%; } }

/* --- Selector de centro: «Todos · centro A · centro B» (Censo y Parte) --- */
.ctr-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border-color); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ctr-seg::-webkit-scrollbar { display: none; }
.ctr-seg button {
  appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit; white-space: nowrap;
  padding: 0.24rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 0.3rem; transition: var(--transition-fast);
}
.ctr-seg button:hover { color: var(--text-primary); }
.ctr-seg button[aria-pressed="true"] { background: var(--accent-gradient); color: #fff; box-shadow: var(--shadow-sm); }
.ctr-seg button svg { width: 13px; height: 13px; }

/* --- Modales comunes «Todos los iconos» y «Más colores» --- */
.edp-modal { max-width: 560px; }
.edp-busca { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.7rem; padding: 0 0.6rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-muted); }
.edp-busca input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text-primary); font: inherit; font-size: 0.82rem; padding: 0.5rem 0; outline: none; }
.edp-modal .icon-pool-grid { max-height: 44vh; }
.edp-prev { margin-top: 0.9rem; }
.edp-paleta { display: flex; flex-direction: column; gap: 6px; }
.edp-fila { display: flex; align-items: center; gap: 7px; }
.edp-fila > span { width: 80px; font-size: 0.7rem; color: var(--text-muted); font-weight: 600; }
.edp-libre { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border-color); font-size: 0.74rem; color: var(--text-muted); font-weight: 600; }
.edp-libre .input-field { width: 6.5rem; }
.edp-libre small { flex-basis: 100%; font-weight: 500; }
.ed-more { display: inline-flex; align-items: center; gap: 0.3rem; height: 26px; padding: 0 0.55rem; border-radius: 8px; border: 1px dashed var(--border-color); background: none; color: var(--text-secondary); font: inherit; font-size: 0.7rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ed-more:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.ed-more svg { width: 13px; height: 13px; }
.ed-swatch.custom { position: relative; overflow: hidden; }
.ed-swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.edp-prev { margin-top: 0.9rem; }
.ed-overlay { padding: 1rem; }
.ed-modal .icon-pool-item[aria-pressed="true"] { color: var(--accent-cyan); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIGURADOR PERSONAL ("Configura tu app") Y ACTIVACIÓN INICIAL
   Reutiliza los tokens y las piezas de "Mi cuenta" (.mc-card, .mc-conn,
   .mc-msg): son la misma conversación con el usuario en dos sitios distintos,
   y se ven igual en tema claro y oscuro porque todo sale de las variables.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Llamada a la acción dentro de Mi cuenta → Perfil */
.mc-card-cta {
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--accent-cyan) 14%, transparent) 0%, transparent 62%),
    var(--mc-surface);
  border-color: color-mix(in srgb, var(--accent-cyan) 28%, var(--border-color));
}

.cfg-modal { max-width: 620px; }
.cfg-head { padding-left: 1.35rem; }
.cfg-body { padding-top: 1rem; }

.cfg-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--accent-cyan); text-transform: uppercase; margin-bottom: 0.35rem;
}
.cfg-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem; }
.cfg-lead { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1rem; }
.cfg-fine { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; margin: 1rem 0 0; }

.cfg-row {
  display: flex; align-items: center; gap: 0.8rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--mc-surface, color-mix(in srgb, var(--text-primary) 4%, transparent));
  padding: 0.9rem 1rem; margin-bottom: 0.7rem;
}
.cfg-badge {
  display: inline-block; margin-top: 0.4rem;
  font-size: 0.68rem; color: var(--text-muted);
}
.cfg-badge.ok { color: var(--accent-teal); }

.cfg-back {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: 0; padding: 0 0 0.9rem;
  color: var(--text-secondary); font-family: var(--font-sans); font-size: 0.76rem; cursor: pointer;
}
.cfg-back:hover { color: var(--accent-cyan); }

.cfg-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.cfg-actions .btn-primary, .cfg-actions .btn-secondary { font-size: 0.78rem; padding: 0.45rem 0.85rem; }

.cfg-panel {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text-secondary);
  padding: 0.8rem 0.95rem; margin-top: 0.9rem; font-size: 0.78rem; line-height: 1.5;
}
.cfg-panel.cfg-warn {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
  display: block;
}

.cfg-spinner {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent);
  border-top-color: var(--accent-cyan);
  animation: cfg-spin 0.8s linear infinite;
}
@keyframes cfg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cfg-spinner { animation: none; } }

.cfg-tg { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.cfg-tg-steps { flex: 1; min-width: 220px; }
.cfg-step { display: flex; gap: 0.7rem; margin-bottom: 0.75rem; font-size: 0.79rem; color: var(--text-secondary); line-height: 1.5; }
.cfg-num {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent-cyan) 16%, transparent);
  color: var(--accent-cyan); font-size: 0.7rem; font-weight: 700;
}

/* El QR se pinta como SVG en línea (core/qr.js): fondo blanco siempre, también
   en tema oscuro -- un QR invertido lo leen bastantes menos lectores. */
.cfg-qr {
  width: 158px; height: 158px; flex-shrink: 0;
  border-radius: var(--radius-md); background: #ffffff; padding: 8px;
  border: 1px solid var(--border-color);
}
.cfg-qr svg { border-radius: 4px; }
.cfg-qr-fail { font-size: 0.7rem; color: var(--text-muted); text-align: center; padding: 0.5rem; }

.cfg-choices { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.cfg-choice {
  display: flex; align-items: center; gap: 0.45rem; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-input); padding: 0.5rem 0.8rem;
  font-size: 0.78rem; color: var(--text-secondary);
}
.cfg-choice.on { border-color: var(--accent-cyan); color: var(--text-primary); }
.cfg-choice input { accent-color: var(--accent-cyan); }

.cfg-details { margin-top: 1.1rem; border-top: 1px solid var(--border-color); padding-top: 0.8rem; }
.cfg-details summary { cursor: pointer; font-size: 0.78rem; color: var(--text-secondary); padding: 0.3rem 0; }
.cfg-details summary:hover { color: var(--accent-cyan); }
.cfg-details[open] summary { margin-bottom: 0.7rem; }

.cfg-url {
  display: block; margin-top: 0.5rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-secondary);
  font-size: 0.68rem; word-break: break-all; user-select: all;
}

/* ── Pantalla de activación inicial ──────────────────────────────────────── */
/* Por encima del login (z-index 9999): quien abre una invitación no tiene
   todavía sesión, así que el login está visible debajo. */
.act-overlay { z-index: 10000; }
.act-card {
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  padding: 1.6rem 1.7rem 1.8rem; border-radius: var(--radius-xl);
}
.act-brand-logo { display: block; height: 34px; margin: 0 auto 1.2rem; }
.act-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.6rem; }

.act-steps { display: flex; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 1.3rem; }
.act-steps li {
  flex: 1; display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.68rem; color: var(--text-muted);
  border-top: 2px solid var(--border-color); padding-top: 0.5rem;
}
.act-steps li span {
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-input); font-size: 0.62rem; font-weight: 700;
}
.act-steps li.now { color: var(--accent-cyan); border-top-color: var(--accent-cyan); }
.act-steps li.now span { background: color-mix(in srgb, var(--accent-cyan) 20%, transparent); color: var(--accent-cyan); }
.act-steps li.done { color: var(--accent-teal); border-top-color: color-mix(in srgb, var(--accent-teal) 55%, transparent); }

.act-person { display: block; }
.act-person-name { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.act-person-sub { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.15rem; }
.act-person-user { font-size: 0.73rem; color: var(--text-muted); margin-top: 0.4rem; }
.act-finish { border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 1.2rem; }

/* ── El bloque de un enlace de acceso con su QR ───────────────────────────
   En tres sitios: la ficha del profesional y la pestaña Invitaciones del
   Panel de Administración, y «Añadir otro dispositivo» de Mi cuenta. */
.adm-inv { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; margin: 0.7rem 0; }
.adm-inv-qr {
  width: 150px; height: 150px; flex-shrink: 0; padding: 8px;
  background: #ffffff; border-radius: var(--radius-md); border: 1px solid var(--border-color);
}
.adm-inv-side { flex: 1; min-width: 230px; }
.adm-inv-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }

@media (max-width: 640px) {
  .cfg-tg { gap: 1rem; }
  .cfg-qr { margin: 0 auto; }
  .cfg-row { flex-wrap: wrap; }
  /* El botón baja a su propia línea, alineado con el texto: con width:100%
     más el sangrado se salía del modal por la derecha en 375px. */
  .cfg-row .mc-conn-actions { flex: 1 1 100%; margin-left: 3.3rem; }
  .cfg-row .mc-conn-actions .btn-primary,
  .cfg-row .mc-conn-actions .btn-secondary { flex: 1; justify-content: center; }
  .act-card { padding: 1.2rem 1.1rem 1.4rem; max-height: 100vh; border-radius: 0; }
  .act-steps li { font-size: 0.62rem; }
  .adm-inv-qr { margin: 0 auto; }
}

/* ---- Curso quirúrgico en las tarjetas del censo (renderSurgicalCourseHtml) ----
   Una línea por episodio de UCI/URP con sus días por unidad; las
   reintervenciones y los episodios anteriores se resumen en contadores que
   abren el detalle anclado (openSurgicalCoursePopover). */
.surgical-course { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 0.35rem; }
.surgical-episode { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 0.2rem; }
.surgical-episode-line {
  font-size: 0.73rem; font-weight: 800; color: #10b981; background: rgba(16, 185, 129, 0.12);
  padding: 0.15rem 0.45rem; border-radius: 4px; border: 1px solid rgba(16, 185, 129, 0.4);
  display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.surgical-episode--compact .surgical-episode-line { font-size: 0.64rem; background: none; border: 0; padding: 0; gap: 0.25rem; }
.surgical-course-chip {
  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 700; color: #6ee7b7; background: transparent;
  border: 1px dashed rgba(16, 185, 129, 0.45); border-radius: 999px; padding: 0.08rem 0.5rem;
  margin: 0.2rem 0 0.15rem 0.6rem;
}
.surgical-course-chip--prev { margin-left: 0; margin-bottom: 0.3rem; color: var(--text-secondary); border-color: var(--border-color); }
.surgical-course--compact .surgical-course-chip { font-size: 0.6rem; padding: 0 0.4rem; margin-left: 0.4rem; }
.surgical-course--compact .surgical-course-chip--prev { margin-left: 0; }
.surgical-course-chip:hover, .surgical-course-chip:focus-visible { background: rgba(16, 185, 129, 0.14); border-style: solid; }
.badge.surgical-live { border-style: dashed !important; }
[data-theme="light"] .surgical-course-chip { color: #047857; }

.surgical-course-popover {
  position: fixed; z-index: 3000; display: none;
  width: min(360px, calc(100vw - 20px)); max-height: min(440px, calc(100vh - 20px)); overflow-y: auto;
  background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); padding: 0.6rem 0.7rem;
}
.surgical-course-popover.open { display: block; }
.surgical-course-popover .scp-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 0.8rem; margin-bottom: 0.4rem; }
.surgical-course-popover .scp-x { background: none; border: 0; color: var(--text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.surgical-course-popover .scp-ep { border-top: 1px solid var(--border-color); padding: 0.45rem 0 0.35rem; }
.surgical-course-popover .scp-ep-head { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.surgical-course-popover .scp-ep-badges { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.surgical-course-popover .scp-ep-title { font-size: 0.72rem; font-weight: 800; color: #10b981; text-transform: uppercase; letter-spacing: 0.03em; }
.surgical-course-popover .scp-ep-range { font-size: 0.7rem; color: var(--text-muted); margin: 0.15rem 0 0.3rem; }
.surgical-course-popover ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.surgical-course-popover li {
  display: grid; grid-template-columns: 5.4rem 1fr auto; gap: 0.4rem; align-items: baseline;
  font-size: 0.74rem; padding: 0.18rem 0.3rem; border-radius: 5px; cursor: pointer;
}
.surgical-course-popover li:hover, .surgical-course-popover li:focus-visible { background: rgba(127, 127, 127, 0.12); outline: none; }
.surgical-course-popover li:not(.scp-initial) { padding-left: 0.9rem; }
.surgical-course-popover .scp-d { color: var(--text-secondary); font-weight: 700; }
.surgical-course-popover .scp-initial .scp-p { font-weight: 800; }
.surgical-course-popover .scp-r { color: var(--text-muted); font-size: 0.68rem; }
.surgical-course-popover .scp-foot { border-top: 1px solid var(--border-color); padding-top: 0.4rem; font-size: 0.68rem; color: var(--text-muted); }

/* ==========================================================================
   RECORRIDO DEL INGRESO (barra de tramos)
   Una sola pieza para las tres pantallas: la banda de la carpeta clínica, la
   tarjeta del Censo (modo tl--card) y la ficha del registro en Base de datos.
   El cálculo es compartido: EirenAnalytics.episodeTimeline.
   ========================================================================== */
.tl { --tl-h: 30px; display: flex; flex-direction: column; min-width: 0; }

/* La cabecera es el botón que pliega: plegada deja una tira de 7 px. */
.tl-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0.5rem;
  width: 100%; background: none; border: 0; padding: 0; text-align: left; color: inherit; font-family: inherit;
}
button.tl-title { cursor: pointer; }
.tl-title > span { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
.tl-title b { font: 800 0.72rem var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tl-total { font: 700 0.75rem var(--font-sans); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-total em { font-style: normal; color: var(--pp-warn, #fbbf24); }
.tl-chev { width: 13px; height: 13px; color: var(--text-muted); transition: transform 0.15s; flex: none; }
.tl:not(.is-folded) .tl-chev { transform: rotate(90deg); }
button.tl-title:hover b, button.tl-title:hover .tl-chev { color: var(--text-secondary); }

.tl-pins { position: relative; height: 34px; }
.tl-pin { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.tl-pin em { display: block; width: 1px; height: var(--stem, 0px); background: var(--u-qx); }
.tl-pin i {
  font: 800 0.64rem var(--font-sans); font-style: normal; color: var(--u-qx); white-space: nowrap;
  background: var(--pp-panel, var(--bg-card-solid)); padding: 0 3px; border-radius: 3px;
}
.tl-pin::after {
  content: ''; width: 0; height: 0; margin-top: 2px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--u-qx);
}

.tl-bar { position: relative; height: var(--tl-h); border-radius: 8px; overflow: hidden; background: var(--bg-input); }
button.tl-bar { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; }
.tl-seg {
  position: absolute; top: 0; bottom: 0; min-width: 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--seg); color: var(--seg-ink);
  font: 700 0.66rem var(--font-sans); white-space: nowrap;
}
.tl-seg--preop { --seg: var(--u-preop); --seg-ink: var(--u-preop-ink); }
.tl-seg--uci { --seg: var(--u-uci); --seg-ink: var(--u-uci-ink); }
.tl-seg--urp { --seg: var(--u-urp); --seg-ink: var(--u-urp-ink); }
.tl-seg--postop { --seg: var(--u-postop); --seg-ink: var(--u-postop-ink); }
.tl-seg--hospital_externo { --seg: var(--u-hospital_externo); --seg-ink: var(--u-hospital_externo-ink); }
.tl-seg--casa { --seg: transparent; --seg-ink: var(--u-casa-ink); border: 1px dashed var(--border-color); }
/* Estancia abierta: el tramo no se cierra, se desvanece contra el carril. En el
   Censo el último tramo está abierto SIEMPRE, así que esto tiene que ser un
   matiz; rayarlo llenaba el censo de textura y tapaba el color de la unidad. */
.tl-seg--live { background: linear-gradient(90deg, var(--seg) 0 calc(100% - 16px), color-mix(in srgb, var(--seg) 22%, transparent) 100%); }

/* La cirugía es un punto, no un tramo: cae casi siempre sobre el naranja de la
   UCI, así que el cian lleva un perfil oscuro a cada lado. */
.tl-cut {
  position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-1px);
  background: var(--u-qx); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.75);
}

.tl-rail { position: relative; height: 30px; margin-top: 0.35rem; }
.tl-mark { position: absolute; top: 0; display: flex; flex-direction: column; gap: 1px; transform: translateX(-50%); }
.tl-mark.at-start { transform: none; }
.tl-mark.at-end { transform: translateX(-100%); align-items: flex-end; }
.tl-mark b { font: 800 0.7rem var(--font-sans); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-mark span { font-size: 0.64rem; color: var(--text-muted); white-space: nowrap; }
.tl-mark::before { content: ''; position: absolute; top: -6px; left: 50%; width: 1px; height: 4px; background: var(--border-color); }
.tl-mark.at-start::before { left: 0; }
.tl-mark.at-end::before { left: auto; right: 0; }

.tl-legend { display: flex; flex-wrap: wrap; gap: 0.15rem 0.85rem; margin-top: 0.6rem; font-size: 0.7rem; color: var(--text-muted); }
.tl-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.tl-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--seg); }
.tl-legend i.is-cut { width: 3px; height: 13px; border-radius: 1px; }

.tl-detail { margin-top: 0.6rem; border-top: 1px solid var(--border-color); }
.tl-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.35rem 0.1rem; border-bottom: 1px solid var(--border-color); font-size: 0.78rem; }
.tl-row:last-child { border-bottom: 0; }
.tl-row .when { color: var(--text-muted); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.tl-row .what { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; min-width: 0; }
.tl-row .what i { width: 9px; height: 9px; border-radius: 3px; background: var(--seg); flex: none; }
.tl-row .what small { color: var(--text-muted); font-weight: 500; }
.tl-row .dur { font: 700 0.74rem var(--font-sans); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tl-row--qx .what { color: var(--u-qx); }
.tl-row--qx .what i { background: var(--u-qx); border-radius: 999px; }

/* Plegada: solo la cabecera y una tira, para devolverle el sitio a la historia. */
.tl.is-folded .tl-pins,
.tl.is-folded .tl-rail,
.tl.is-folded .tl-legend,
.tl.is-folded .tl-detail { display: none; }
.tl.is-folded .tl-title { margin-bottom: 0.3rem; }
.tl.is-folded .tl-bar { height: 7px; border-radius: 4px; }
.tl.is-folded .tl-seg span { display: none; }
.tl.is-folded .tl-cut { width: 1px; }

/* Modo tarjeta (Censo): la barra sola, con las fechas de los extremos. */
.tl--card { --tl-h: 14px; }
.tl--card .tl-pins { display: none; }
.tl--card .tl-bar { border-radius: 5px; }
.tl--card .tl-seg { font-size: 0.56rem; }
.tl--card .tl-seg--live { background: linear-gradient(90deg, var(--seg) 0 calc(100% - 9px), color-mix(in srgb, var(--seg) 22%, transparent) 100%); }
.tl--card .tl-rail { height: 14px; margin-top: 0.25rem; }
.tl--card .tl-mark b { font-size: 0.64rem; font-weight: 700; }
.tl--card .tl-mark span, .tl--card .tl-mark::before { display: none; }
.tl--card .tl-title { margin-bottom: 0.3rem; }
.tl--card .tl-title b { font-size: 0.62rem; }
.tl--card .tl-total { font-size: 0.68rem; }

/* ==========================================================================
   PÁGINA DEL PACIENTE (carpeta clínica, #/paciente/<id>)
   Plan: docs/plan-carpeta-clinica.md
   ========================================================================== */

:root {
  /* Un color por tipo de evento en toda la carpeta */
  --ev-ingreso: #34d399;
  --ev-traslado: #fbbf24;
  --ev-cirugia: #22d3ee;
  --ev-nota: #a78bfa;
  --ev-enfermeria: #f472b6;
  --ev-prueba: #f472b6;
  --ev-farmaco: #fdba74;
  --ev-sesion: #67e8f9;
  /* Apartados de la ficha y del contexto: tonos suaves */
  --sec-alertas: #fca5a5;
  --sec-farmacos: #fdba74;
  --sec-diagnostico: #93c5fd;
  --sec-intervencion: #67e8f9;
  --sec-datos: #cbd5e1;
  --sec-etiquetas: #5eead4;
  --sec-pruebas: #f9a8d4;
  --sec-documentos: #c4b5fd;
  /* Recorrido del ingreso (barra de tramos). Tonos pastel, los mismos en los
     dos temas. No son inventados: #fdba74 y #c084fc son el color del TEXTO de
     .badge-uci y .badge-urp, y #7dd3fc es --pq-uci; la version saturada de
     cada uno se queda para bordes e insignias. Llevan color solo las unidades
     donde pasa algo -- planta azul, UCI naranja, URP morada --; preop y
     hospital de origen son grises, que son esperas.
     OJO al tocarlos: en pastel los tramos se distinguen casi solo por el tono,
     y eso es justo lo que quita el daltonismo. Bajar el morado al escalon 300
     (#d8b4fe) deja planta/URP en dE 3,1 simulando deuteranopia, o sea
     indistinguibles, y son dos tramos que van pegados. Este reparto es el mas
     suave que aguanta: peor pareja 16,2 (URP/hospital externo, tritanopia). */
  --u-preop: #cbd5e1;      --u-preop-ink: #0f172a;
  --u-postop: #7dd3fc;     --u-postop-ink: #0f172a;
  --u-hospital_externo: #94a3b8; --u-hospital_externo-ink: #0f172a;
  --u-uci: #fdba74;        --u-uci-ink: #0f172a;
  --u-urp: #c084fc;        --u-urp-ink: #0f172a;
  --u-casa: #94a3b8;       --u-casa-ink: #64748b;
  --u-qx: #22d3ee;
  --pp-danger: #f87171;
  --pp-warn: #fbbf24;
  --pp-ok: #34d399;
  --pp-panel: #17223a;
  --pp-sunken: #0b1424;
  --pp-raised: #223150;
  --pp-border-strong: rgba(148, 163, 184, 0.5);
}

[data-theme="light"] {
  --ev-ingreso: #059669;
  --ev-traslado: #b45309;
  --ev-cirugia: #0891b2;
  --ev-nota: #7c3aed;
  --ev-enfermeria: #db2777;
  --ev-prueba: #db2777;
  --ev-farmaco: #c2410c;
  --ev-sesion: #0e7490;
  --sec-alertas: #dc2626;
  --sec-farmacos: #c2410c;
  --sec-diagnostico: #2563eb;
  --sec-intervencion: #0e7490;
  --sec-datos: #475569;
  --sec-etiquetas: #0f766e;
  --sec-pruebas: #be185d;
  --sec-documentos: #6d28d9;
  --u-preop: #cbd5e1;      --u-preop-ink: #0f172a;
  --u-postop: #7dd3fc;     --u-postop-ink: #0f172a;
  --u-hospital_externo: #94a3b8; --u-hospital_externo-ink: #0f172a;
  --u-uci: #fdba74;        --u-uci-ink: #0f172a;
  --u-urp: #c084fc;        --u-urp-ink: #0f172a;
  --u-casa: #94a3b8;       --u-casa-ink: #64748b;
  --u-qx: #0891b2;
  --pp-danger: #dc2626;
  --pp-warn: #b45309;
  --pp-ok: #059669;
  --pp-panel: #ffffff;
  --pp-sunken: #f8fafc;
  --pp-raised: #ffffff;
  --pp-border-strong: #cbd5e1;
}

body.patient-page-open main > .tab-content { display: none !important; }

.patient-page {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  min-height: 0;
  color: var(--text-primary);
}
.patient-page[hidden] { display: none; }

.pp-ico { flex: none; vertical-align: middle; }
.pp-ico-scalpel { fill: currentColor; }
.pp-spacer { flex: 1; }
.pp-muted { color: var(--text-muted); }

/* Botones y controles propios de la página */
.pp-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
  font: 600 0.8rem var(--font-sans); padding: 0.42rem 0.75rem; border-radius: 8px;
  border: 1px solid var(--pp-border-strong); background: transparent; color: var(--text-primary);
  cursor: pointer; text-decoration: none; transition: var(--transition-fast);
}
.pp-btn:hover:not(:disabled) { background: var(--bg-card-hover); }
.pp-btn:disabled { opacity: 0.5; cursor: default; }
.pp-btn .pp-ico { color: var(--accent-cyan); }
.pp-btn.primary { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.pp-btn.primary .pp-ico { color: #fff; }
.pp-btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent-gradient); }
.pp-btn.ghost { border-color: transparent; color: var(--text-secondary); }
.pp-btn.ghost:hover:not(:disabled) { color: var(--text-primary); }
.pp-btn.danger { border-color: color-mix(in srgb, var(--pp-danger) 45%, transparent); color: var(--pp-danger); }
.pp-btn.danger .pp-ico { color: var(--pp-danger); }
.pp-btn.sm { font-size: 0.74rem; padding: 0.3rem 0.55rem; }
.pp-icon-btn {
  width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary);
}
.pp-icon-btn:hover:not(:disabled) { background: var(--bg-card-hover); color: var(--text-primary); }
.pp-icon-btn:disabled { opacity: 0.35; cursor: default; }
.pp-icon-btn.sm { width: 28px; height: 28px; }
.pp-link {
  background: none; border: 0; padding: 0; cursor: pointer; font: 600 0.72rem var(--font-sans);
  color: var(--accent-cyan); text-transform: none; letter-spacing: 0;
}
.pp-link:hover { text-decoration: underline; }
.pp-input {
  width: 100%; box-sizing: border-box; font: 0.84rem var(--font-sans); color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--pp-border-strong); border-radius: 8px; padding: 0.45rem 0.6rem;
}
.pp-input.sm { font-size: 0.76rem; padding: 0.3rem 0.45rem; }
textarea.pp-input { resize: vertical; }
.pp-input:focus, .pp-textarea:focus { outline: none; border-color: var(--border-highlight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 18%, transparent); }
.pp-textarea {
  width: 100%; box-sizing: border-box; font: 0.88rem/1.55 var(--font-sans); color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--pp-border-strong); border-radius: 10px; padding: 0.55rem 0.7rem; resize: vertical;
}
.pp-textarea.doc { min-height: 320px; }
.pp-seg { display: inline-flex; background: var(--pp-sunken); border: 1px solid var(--border-color); border-radius: 8px; padding: 2px; }
.pp-seg button {
  border: 0; background: none; font: 600 0.74rem var(--font-sans); padding: 0.28rem 0.65rem; border-radius: 6px;
  color: var(--text-secondary); cursor: pointer;
}
.pp-seg button.on { background: var(--pp-raised); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.pp-seg.wide { margin-bottom: 0.7rem; flex-wrap: wrap; }
.pp-hint { font-size: 0.72rem; color: var(--text-muted); }
.pp-hint kbd { font: 600 0.66rem var(--font-sans); padding: 0 0.3rem; border-radius: 4px; border: 1px solid var(--pp-border-strong); background: var(--pp-sunken); }
.pp-inline-msg { font-size: 0.78rem; margin: 0.5rem 0; padding: 0.45rem 0.65rem; border-radius: 8px; background: var(--pp-sunken); color: var(--text-secondary); }
.pp-inline-msg.danger { color: var(--pp-danger); background: color-mix(in srgb, var(--pp-danger) 10%, transparent); }
.pp-inline-msg.warn { color: var(--pp-warn); background: color-mix(in srgb, var(--pp-warn) 10%, transparent); }
.pp-inline-msg.ok { color: var(--pp-ok); background: color-mix(in srgb, var(--pp-ok) 10%, transparent); }
.pp-soft { font-size: 0.8rem; color: var(--text-muted); margin: 0.1rem 0; display: flex; align-items: center; gap: 0.35rem; }
.pp-soft.warn { color: var(--pp-warn); }
.pp-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-top: 0.55rem; flex-wrap: wrap; }
.pp-pill { font-size: 0.66rem; font-weight: 700; padding: 0.12rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.pp-pill.ok { color: var(--pp-ok); background: color-mix(in srgb, var(--pp-ok) 14%, transparent); }
.pp-pill.warn { color: var(--pp-warn); background: color-mix(in srgb, var(--pp-warn) 14%, transparent); }
.pp-pill.info { color: var(--ev-cirugia); background: color-mix(in srgb, var(--ev-cirugia) 14%, transparent); }
.pp-pill.muted { color: var(--text-muted); background: var(--pp-sunken); border: 1px solid var(--border-color); }

/* Migas */
.pp-crumbs { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.35rem; min-height: 32px; font-size: 0.8rem; color: var(--text-secondary); flex-wrap: wrap; }
.pp-back { color: var(--accent-cyan); }
.pp-crumbs-path { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex-wrap: wrap; }
.pp-crumbs-path b { color: var(--text-primary); font-weight: 600; }
.pp-crumbs-sep { color: var(--text-muted); }
.pp-crumbs-nav { display: flex; align-items: center; gap: 0.4rem; }
.pp-crumbs-pos { font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-crumbs-pos b { color: var(--text-primary); }

/* Hoja */
.pp-sheet {
  flex: 1; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--pp-panel); border: 1px solid var(--pp-border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}

/* Cabecera */
.pp-head { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem 0.7rem 1.25rem; flex-wrap: wrap; }
.pp-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-gradient); color: #fff; font: 700 0.9rem var(--font-heading);
}
.pp-id { flex: 1 1 360px; min-width: 0; }
.pp-name { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pp-name h2 { margin: 0; font: 800 1.2rem var(--font-heading); letter-spacing: -0.01em; }
.pp-status { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.15rem 0.45rem; border-radius: 6px; border: 1px solid; }
.pp-status.ok { color: var(--pp-ok); border-color: color-mix(in srgb, var(--pp-ok) 35%, transparent); background: color-mix(in srgb, var(--pp-ok) 12%, transparent); }
.pp-status.warn { color: var(--pp-warn); border-color: color-mix(in srgb, var(--pp-warn) 35%, transparent); background: color-mix(in srgb, var(--pp-warn) 12%, transparent); }
.pp-status.danger { color: var(--pp-danger); border-color: color-mix(in srgb, var(--pp-danger) 35%, transparent); background: color-mix(in srgb, var(--pp-danger) 12%, transparent); }
.pp-idline { font-size: 0.8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-top: 0.1rem; }
.pp-idline b { color: var(--text-primary); font-weight: 600; }
.pp-facts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.pp-fact {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; font-weight: 600; white-space: nowrap;
  padding: 0.18rem 0.55rem; border-radius: 999px; border: 1px solid var(--border-color); background: var(--pp-sunken); color: var(--text-secondary);
}
.pp-fact .pp-ico { color: var(--accent-cyan); }
.pp-fact b { color: var(--text-primary); }
.pp-fact.danger { color: var(--pp-danger); border-color: color-mix(in srgb, var(--pp-danger) 40%, transparent); background: color-mix(in srgb, var(--pp-danger) 11%, transparent); }
.pp-fact.danger .pp-ico, .pp-fact.danger b { color: var(--pp-danger); }
.pp-fact.warn { color: var(--pp-warn); border-color: color-mix(in srgb, var(--pp-warn) 40%, transparent); background: color-mix(in srgb, var(--pp-warn) 10%, transparent); }
.pp-fact.warn .pp-ico { color: var(--pp-warn); }
.pp-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.pp-anchor { position: relative; }
.pp-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 230px;
  background: var(--pp-raised); border: 1px solid var(--pp-border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 0.3rem;
}
.pp-menu.wide { min-width: 280px; }
.pp-menu > button {
  width: 100%; display: flex; align-items: center; gap: 0.55rem; text-align: left; background: none; border: 0; cursor: pointer;
  border-radius: 7px; padding: 0.5rem 0.65rem; font: 500 0.8rem var(--font-sans); color: var(--text-primary);
}
.pp-menu > button:hover { background: var(--bg-card-hover); }
.pp-menu > button .pp-ico { color: var(--accent-cyan); }
.pp-menu hr { border: 0; border-top: 1px solid var(--border-color); margin: 0.3rem 0.25rem; }
.pp-menu .danger-item, .pp-menu .danger-item .pp-ico { color: var(--pp-danger); }
.pp-menu-delete { border-top: 1px solid var(--border-color); margin-top: 0.3rem; padding: 0.55rem 0.5rem 0.3rem; }
.pp-menu-delete p { font-size: 0.76rem; color: var(--text-secondary); margin: 0 0 0.45rem; line-height: 1.45; }

/* Pestañas */
.pp-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 0 0.9rem; border-bottom: 1px solid var(--pp-border-strong); overflow-x: auto; scrollbar-width: none; }
.pp-tab {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; cursor: pointer;
  padding: 0.6rem 0.8rem 0.7rem; border: 0; background: none; font: 600 0.83rem var(--font-sans); color: var(--text-secondary);
}
.pp-tab .pp-ico { color: var(--accent-cyan); opacity: 0.85; }
.pp-tab:hover { color: var(--text-primary); }
.pp-tab.on { color: var(--text-primary); }
.pp-tab.on::after { content: ''; position: absolute; left: 0.6rem; right: 0.6rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent-cyan); }
.pp-tab.empty { color: var(--text-muted); }
.pp-tab.empty .pp-ico { color: var(--text-muted); opacity: 0.7; }
.pp-count { font-size: 0.68rem; font-weight: 700; padding: 0 0.4rem; border-radius: 999px; background: var(--pp-sunken); border: 1px solid var(--border-color); color: var(--text-secondary); }
.pp-done { color: var(--pp-ok) !important; opacity: 1 !important; }
.pp-pending { font-size: 0.66rem; font-weight: 600; font-style: italic; color: var(--text-muted); }

.pp-view { min-height: 0; position: relative; }
.pp-scroll { height: 100%; overflow-y: auto; padding: 1rem 1.2rem 2rem; box-sizing: border-box; background: var(--pp-sunken); }
.pp-view-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 auto 0.8rem; max-width: 1100px; }
.pp-view-head h3 { margin: 0; font: 700 1rem var(--font-heading); display: flex; align-items: center; gap: 0.45rem; }
.pp-view-head h3 .pp-ico { color: var(--accent-cyan); }

.pp-empty { text-align: center; padding: 3.5rem 1rem; max-width: 560px; margin: 0 auto; }
.pp-empty.small { padding: 1.5rem 1rem; }
.pp-empty-ico { width: 56px; height: 56px; margin: 0 auto 0.9rem; border-radius: 16px; display: grid; place-items: center; background: var(--pp-panel); border: 1px dashed var(--pp-border-strong); color: var(--text-muted); }
.pp-empty h3 { margin: 0 0 0.4rem; font: 700 1rem var(--font-heading); }
.pp-empty p { margin: 0 auto 1rem; color: var(--text-secondary); font-size: 0.84rem; line-height: 1.5; }

/* ── Historia: ficha · línea de tiempo · contexto ───────────────────────── */
.pp-historia { display: grid; grid-template-columns: 290px minmax(0, 1fr) 310px; height: 100%; min-height: 0; }
.pp-side { display: contents; }
.pp-ficha, .pp-ctx { min-height: 0; overflow-y: auto; padding: 0.9rem; background: var(--pp-sunken); scrollbar-width: thin; }
/* Hueco al final para que el botón flotante de busca no tape la última fila */
.pp-ctx { padding-bottom: 4.5rem; }
.pp-ficha { grid-column: 1; grid-row: 1; border-right: 1px solid var(--border-color); }
.pp-ctx { grid-column: 3; grid-row: 1; border-left: 1px solid var(--border-color); }
.pp-main { grid-column: 2; grid-row: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; background: var(--pp-panel); position: relative; }

.pp-sec { --sec: var(--text-muted); }
.pp-sec + .pp-sec { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border-color); }
.pp-sec-title { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.5rem; }
.pp-sec-name {
  display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0;
  font: 700 0.68rem var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sec) 75%, var(--text-secondary));
}
.pp-sec-ico { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex: none; background: color-mix(in srgb, var(--sec) 15%, transparent); color: var(--sec); }
.pp-fold-btn { background: none; border: 0; padding: 0; cursor: default; pointer-events: none; }
.pp-fold-sum, .pp-fold-chev { display: none; }

.pp-alert-box { border: 1px solid color-mix(in srgb, var(--pp-danger) 40%, transparent); background: color-mix(in srgb, var(--pp-danger) 9%, transparent); border-radius: 10px; padding: 0.5rem 0.65rem; display: grid; gap: 0.4rem; margin-bottom: 0.35rem; }
.pp-alert-row { display: flex; gap: 0.5rem; font-size: 0.8rem; line-height: 1.35; }
.pp-alert-row .pp-ico { color: var(--pp-danger); margin-top: 1px; }
.pp-alert-row span { display: block; color: var(--text-secondary); }
.pp-drug { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 0.5rem; font-size: 0.8rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--border-color); }
.pp-drug:last-child { border-bottom: 0; }
.pp-drug-kind { grid-row: span 2; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding-top: 0.1rem; }
.pp-drug-since { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pp-drug.off .pp-drug-val { color: var(--text-muted); text-decoration: line-through; }
.pp-side-text { font-size: 0.82rem; line-height: 1.45; }
.pp-side-text small { display: block; color: var(--text-muted); font-size: 0.72rem; margin-top: 0.15rem; }
.pp-kv { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.7rem; font-size: 0.8rem; margin: 0; }
.pp-kv dt { color: var(--text-muted); }
.pp-kv dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pp-tag { font: 700 0.68rem var(--font-sans); letter-spacing: 0.03em; padding: 0.18rem 0.45rem; border-radius: 6px; border: 1px solid transparent; background: color-mix(in srgb, var(--accent-cyan) 13%, transparent); color: var(--accent-cyan); }
.pp-plain-list { margin: 0; padding-left: 1rem; font-size: 0.8rem; line-height: 1.45; }

.pp-card { border: 1px solid var(--border-color); border-radius: 12px; background: var(--pp-raised); padding: 0.65rem 0.75rem; }
.pp-card-head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.pp-card-when { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.pp-card-title { font-size: 0.86rem; font-weight: 700; line-height: 1.35; }
.pp-path { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; font-size: 0.7rem; color: var(--text-muted); margin: 0.4rem 0 0.2rem; }
.pp-path .done { color: var(--text-secondary); }
.pp-path .warn { color: var(--pp-warn); }
.pp-team { display: grid; gap: 0.25rem; font-size: 0.78rem; padding-top: 0.45rem; margin-top: 0.45rem; border-top: 1px dashed var(--border-color); }
.pp-team div { display: flex; justify-content: space-between; gap: 0.5rem; }
.pp-team span { color: var(--text-muted); }
.pp-files { display: grid; gap: 2px; }
.pp-file { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem; border-radius: 8px; font-size: 0.8rem; color: var(--text-primary); text-decoration: none; }
.pp-file:hover { background: var(--bg-card-hover); }
.pp-file-ico, .pp-doc-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.pp-file-ico { background: color-mix(in srgb, var(--ev-prueba) 14%, transparent); color: var(--ev-prueba); }
.pp-file-name, .pp-doc-name { flex: 1; min-width: 0; }
.pp-file-name b, .pp-doc-name b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-file-name small, .pp-doc-name small { color: var(--text-muted); font-size: 0.7rem; }
.pp-drop {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; margin-top: 0.45rem; cursor: pointer;
  border: 1.5px dashed var(--pp-border-strong); border-radius: 10px; padding: 0.6rem; background: transparent;
  font: 0.74rem var(--font-sans); color: var(--text-muted); transition: var(--transition-fast);
}
.pp-drop b { color: var(--accent-cyan); font-weight: 600; }
.pp-drop.large { padding: 1.4rem; margin: 1rem auto 0; max-width: 1100px; font-size: 0.82rem; }
.pp-drop:hover, .pp-drop.active { border-color: var(--accent-cyan); color: var(--text-primary); background: color-mix(in srgb, var(--accent-cyan) 7%, transparent); }
.pp-docs { padding: 0.2rem 0.5rem; }
.pp-doc { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.2rem; font-size: 0.8rem; }
.pp-doc + .pp-doc { border-top: 1px solid var(--border-color); }
.pp-doc-ico { background: color-mix(in srgb, var(--ev-nota) 14%, transparent); color: var(--ev-nota); }
.pp-doc.pending .pp-doc-ico { background: var(--pp-sunken); color: var(--text-muted); border: 1px dashed var(--pp-border-strong); }

/* Barra de filtros y línea de tiempo */
.pp-toolbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  padding: 0.6rem 1.1rem; background: color-mix(in srgb, var(--pp-panel) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
}
.pp-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pp-chip {
  --c: var(--text-muted); display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; cursor: pointer;
  font: 600 0.73rem var(--font-sans); padding: 0.22rem 0.5rem; border-radius: 999px; border: 1px solid var(--border-color);
  background: transparent; color: var(--text-muted);
}
.pp-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.pp-chip em { font-style: normal; font-weight: 500; color: var(--text-muted); }
.pp-chip.on { color: var(--c); border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.pp-chip.on i { background: var(--c); }
/* Banda del recorrido del ingreso: primer bloque de la columna de la historia,
   encima del primer día. Se desplaza con ella (no se queda fija) para no tener
   que recolocar las cabeceras de día, que se pegan bajo la barra de filtros. */
.pp-band:not(:empty) { padding: 0.7rem 1.1rem 0.8rem; border-bottom: 1px solid var(--border-color); }
.pp-tl { flex: 1; padding: 0.2rem 1.1rem 1rem; }
.pp-tl-loading, .pp-tl-empty { padding: 1.5rem 0; color: var(--text-muted); font-size: 0.84rem; }
.pp-day-head { position: sticky; top: 46px; z-index: 3; display: flex; align-items: baseline; gap: 0.55rem; padding: 0.8rem 0 0.4rem; background: linear-gradient(var(--pp-panel) 75%, transparent); }
.pp-day-head h4 { margin: 0; font: 700 0.86rem var(--font-sans); }
.pp-day-head h4::first-letter { text-transform: uppercase; }
.pp-rel { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.pp-rel.hi { color: var(--ev-cirugia); }
.pp-today { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; color: #fff; background: var(--accent-gradient); padding: 0.1rem 0.4rem; border-radius: 999px; }
.pp-day-items { position: relative; display: flex; flex-direction: column; }
.pp-day-items::before { content: ''; position: absolute; left: 67px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--border-color); }
.pp-day-empty { padding-left: 90px; }
.pp-day-gap { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0 0.1rem 58px; font-size: 0.72rem; color: var(--text-muted); }
.pp-day-gap::before { content: ''; width: 20px; border-top: 2px dotted var(--pp-border-strong); }
.pp-ev { --c: var(--text-muted); display: grid; grid-template-columns: 50px 20px minmax(0, 1fr) auto; gap: 0 0.75rem; align-items: center; padding: 0.3rem 0; }
.pp-time { font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.pp-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; z-index: 1; background: color-mix(in srgb, var(--c) 18%, var(--pp-panel)); color: var(--c); box-shadow: 0 0 0 3px var(--pp-panel); }
.pp-dot .pp-ico-scalpel { width: 12px; height: 12px; }
.pp-line { min-width: 0; font-size: 0.83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-line b { font-weight: 600; }
.pp-line span { color: var(--text-secondary); }
.pp-line span::before { content: '·'; margin: 0 0.4rem; color: var(--text-muted); }
.pp-ev.major .pp-line b { font-weight: 700; }
.pp-ev.major .pp-dot { width: 24px; height: 24px; margin-left: -2px; }
.pp-go { opacity: 0; }
.pp-ev:hover .pp-go, .pp-go:focus-visible { opacity: 1; }
.pp-note { display: grid; grid-template-columns: 50px 20px minmax(0, 1fr); gap: 0 0.75rem; padding: 0.35rem 0; }
.pp-note .pp-time { padding-top: 0.7rem; }
.pp-note .pp-dot { margin-top: 0.55rem; }
.pp-note-card { border: 1px solid var(--border-color); border-radius: 10px; background: var(--pp-raised); padding: 0.55rem 0.8rem 0.65rem; max-width: 80ch; }
[data-theme="light"] .pp-note-card { background: #fff; }
.pp-note-card.editing { border-color: var(--border-highlight); }
.pp-note-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.74rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.pp-note-type { color: var(--ev-nota); font-weight: 700; }
.pp-note-type.other { color: var(--text-secondary); }
.pp-note-author { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text-secondary); font-weight: 600; }
.pp-note-author .pp-ico { color: var(--pp-ok); }
.pp-note-edited { font-style: italic; }
.pp-note-tools { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.pp-note-card:hover .pp-note-tools, .pp-note-tools:focus-within { opacity: 1; }
.pp-note-tools button { display: inline-flex; align-items: center; gap: 0.25rem; border: 0; background: none; cursor: pointer; font: 600 0.72rem var(--font-sans); color: var(--text-muted); padding: 0.15rem 0.35rem; border-radius: 6px; }
.pp-note-tools button:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.pp-note-body { font-size: 0.87rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-note-edit .pp-seg { margin-bottom: 0.45rem; }

/* Compositor fijo al pie */
.pp-composer {
  position: sticky; bottom: 0; z-index: 6; margin-top: auto; padding: 0.6rem 1.1rem 0.8rem;
  background: color-mix(in srgb, var(--pp-panel) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border-color);
}
.pp-composer-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap; font-size: 0.74rem; }
.pp-composer-status { font-size: 0.72rem; color: var(--text-muted); }
.pp-composer-status.ok { color: var(--pp-ok); }
.pp-composer-status.warn { color: var(--pp-warn); }
.pp-composer-status.danger { color: var(--pp-danger); }
.pp-composer .pp-textarea { min-height: 64px; }
.pp-composer-actions { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.45rem; }
.pp-composer-actions .pp-hint { margin-right: auto; }
/* El botón flotante del busca vive abajo a la derecha: los botones del pie no se meten debajo */
body:has(#busca-fab-wrap:not([hidden])) .pp-composer-actions { padding-right: 4.2rem; }
.pp-composer-readonly { justify-content: center; padding: 0.3rem 0; }

/* ── Paciente: tarjetas ─────────────────────────────────────────────────── */
.pp-table-wrap { overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.pp-table th { text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--border-color); }
.pp-table td { padding: 0.5rem 0.55rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.pp-table tr:last-child td { border-bottom: 0; }
.pp-table tr.off td { color: var(--text-muted); }
.pp-table tr.off td b { font-weight: 500; text-decoration: line-through; }
.pp-table tr.new td { background: color-mix(in srgb, var(--accent-cyan) 6%, transparent); }
.pp-table td small { display: block; color: var(--text-muted); font-size: 0.7rem; }
.pp-act { text-align: right; white-space: nowrap; }
.pp-atb-reason { display: block; }
.pp-atb-inline { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; flex-wrap: wrap; font-size: 0.76rem; }
.pp-atb-inline label { display: inline-flex; align-items: center; gap: 0.35rem; }
.pp-atb-inline .pp-input { width: auto; font-size: 0.76rem; padding: 0.25rem 0.4rem; }

/* ── Cirugía, pruebas y documentos ──────────────────────────────────────── */
.pp-surg-list { display: grid; gap: 0.8rem; max-width: 1100px; margin: 0 auto; }
/* ── Carpeta · pestaña Paciente: sectores que se editan en el sitio ─────── */
.hc-pac { max-width: 1100px; margin: 0 auto; display: grid; gap: 0.7rem; }
.hc-sector { display: grid; grid-template-columns: 210px minmax(0, 1fr); border: 1px solid var(--border-color); border-radius: 12px; background: var(--pp-panel); overflow: hidden; }
.hc-sector-side { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.85rem 0.9rem; background: color-mix(in srgb, var(--sec) 5%, var(--pp-sunken)); border-right: 1px solid var(--border-color); box-shadow: inset 3px 0 0 var(--sec); }
.hc-sector-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--sec); background: color-mix(in srgb, var(--sec) 14%, transparent); }
.hc-sector-side h3 { margin: 0.1rem 0 0.15rem; font: 750 0.88rem var(--font-heading, inherit); color: var(--text-primary); }
.hc-sector-side p { margin: 0; font-size: 0.7rem; line-height: 1.35; color: var(--text-muted); }
.hc-save { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.45rem; font-size: 0.68rem; font-weight: 600; min-height: 1em; }
.hc-save.saving { color: var(--text-muted); }
.hc-save.ok { color: var(--pp-ok); }
.hc-save.err { color: var(--pp-danger); }
/* Cuatro columnas iguales en todos los sectores, para que todo alinee. */
.hc-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem 1rem; padding: 0.85rem 1rem 0.95rem; align-items: start; }
.hc-f { min-width: 0; display: grid; gap: 0.25rem; }
.hc-f.s2 { grid-column: span 2; }
.hc-f.s3 { grid-column: span 3; }
.hc-f.s4 { grid-column: 1 / -1; }
.hc-f > label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); min-height: 1rem; }
/* Campos «tranquilos»: parecen texto hasta que se pasa por encima o se escribe. */
.hc-fgrid .pp-input, .hc-sc .pp-input { width: 100%; box-sizing: border-box; background: var(--pp-sunken); border-color: transparent; transition: border-color 0.12s, background 0.12s; }
.hc-fgrid .pp-input:hover, .hc-sc .pp-input:hover { border-color: var(--border-color); }
.hc-fgrid .pp-input:focus, .hc-sc .pp-input:focus { background: var(--pp-panel); border-color: var(--border-highlight); }
.hc-ta { resize: vertical; min-height: 2.6rem; line-height: 1.45; font: inherit; font-size: 0.82rem; }
.hc-ro { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); padding: 0.4rem 0; }
.hc-ro.empty { color: var(--text-muted); font-weight: 500; font-style: italic; }
.hc-etiquetas { display: grid; gap: 0.35rem; padding: 0.3rem 0; }
.hc-etiqueta { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); }
.hc-etiqueta .pp-tag { flex: none; }
.hc-unit { display: flex; align-items: center; gap: 0.35rem; }
.hc-unit span { font-size: 0.8rem; color: var(--text-muted); }
.hc-seg-fill { display: flex; width: 100%; box-sizing: border-box; }
.hc-seg-fill button { flex: 1; white-space: nowrap; }
.hc-doc { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.35rem; }
/* Listas dentro de un campo: NHC, teléfonos, alergias, alertas. */
.hc-list { display: grid; gap: 0.35rem; }
.hc-lrow { display: grid; gap: 0.35rem; align-items: center; }
.hc-lrow.c1 { grid-template-columns: minmax(0, 1fr) 28px; }
.hc-lrow.c2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; }
.hc-del { opacity: 0.45; }
.hc-lrow:hover .hc-del, .hc-teamrow:hover .hc-del, .hc-del:focus-visible { opacity: 1; }
.hc-add { justify-self: start; display: inline-flex; align-items: center; gap: 0.3rem; border: 1px dashed var(--border-color); background: transparent; color: var(--text-secondary); font: 600 0.72rem var(--font-sans, inherit); padding: 0.28rem 0.6rem; border-radius: 7px; cursor: pointer; }
.hc-add:hover { border-color: var(--border-highlight); color: var(--text-primary); }
.hc-f.hc-danger .pp-seg button.on { color: var(--pp-danger); }
.hc-f.hc-warn .pp-seg button.on { color: var(--pp-warn); }
.hc-f.hc-danger .hc-list { margin-top: 0.4rem; padding: 0.45rem; border-radius: 8px; background: color-mix(in srgb, var(--pp-danger) 7%, transparent); }
.hc-empty-row { display: flex !important; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--text-secondary); padding: 0.2rem 0; }
.hc-empty-row > .pp-ico { color: var(--text-muted); }
.hc-empty-row .pp-btn { margin-left: auto; }
@media (max-width: 1100px) {
  .hc-sector { grid-template-columns: minmax(0, 1fr); }
  .hc-sector-side { border-right: 0; border-bottom: 1px solid var(--border-color); }
}
@media (max-width: 700px) {
  .hc-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-f.s3, .hc-f.s4 { grid-column: 1 / -1; }
}

/* ── Carpeta · tarjeta de cirugía, editable en el sitio ─────────────────── */
.hc-sc { position: relative; border: 1px solid var(--border-color); border-radius: 14px; background: var(--pp-panel); padding: 1rem 1.1rem 1.05rem 1.35rem; display: grid; gap: 0.85rem; overflow: hidden; }
.hc-sc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.hc-sc.urgente::before { background: linear-gradient(var(--pp-warn), var(--c)); }
.hc-sc.editando { border-color: var(--border-highlight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 12%, transparent); }
.hc-sc-editbar { display: flex; align-items: center; gap: 0.5rem; margin: -1rem -1.1rem 0 -1.35rem; padding: 0.5rem 1.1rem 0.5rem 1.35rem; background: color-mix(in srgb, var(--accent-cyan) 9%, var(--pp-sunken)); border-bottom: 1px solid var(--border-color); font-size: 0.78rem; color: var(--text-secondary); }
.hc-sc-editbar > .pp-ico { color: var(--accent-cyan); }
.hc-sc-editbar b { color: var(--text-primary); }
.hc-sc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9rem; align-items: start; }
.hc-sc-date { width: 54px; border-radius: 10px; text-align: center; padding: 0.3rem 0 0.35rem; background: color-mix(in srgb, var(--c) 12%, var(--pp-sunken)); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); display: grid; justify-items: center; line-height: 1.1; }
.hc-sc-date b { font: 800 1.35rem var(--font-heading, inherit); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hc-sc-date small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c); }
.hc-sc-date.none { color: var(--text-muted); gap: 0.2rem; padding: 0.5rem 0; background: var(--pp-sunken); border-style: dashed; border-color: var(--border-color); }
.hc-sc-date.none small { color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 600; }
.hc-sc-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.hc-sc-chips .pp-pill { display: inline-flex; align-items: center; gap: 0.2rem; }
.hc-tipo { color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.hc-sc-title { margin: 0.35rem 0 0.3rem; font: 750 1.05rem/1.3 var(--font-heading, inherit); color: var(--text-primary); }
.hc-sc-edit { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: center; }
.hc-sc-edit label { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text-muted); }
.hc-sc-edit .pp-input { width: auto; field-sizing: content; max-width: 240px; font-size: 0.76rem; padding: 0.22rem 0.4rem; background: transparent; color: var(--text-secondary); }
.hc-sc-prog { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid transparent; background: transparent; color: var(--text-secondary); font: 600 0.76rem var(--font-sans, inherit); padding: 0.22rem 0.4rem; border-radius: 7px; cursor: pointer; }
.hc-sc-prog:hover { border-color: var(--border-color); background: var(--pp-sunken); }
.hc-sc-prog span { color: var(--text-muted); display: inline-flex; }
.hc-sc-val { font-size: 0.78rem; color: var(--text-secondary); }
.hc-sc-track { list-style: none; margin: -0.2rem 0 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0; font-size: 0.7rem; color: var(--text-muted); }
.hc-sc-track li { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.hc-sc-track li + li::before { content: ''; width: 22px; height: 1px; margin: 0 0.4rem; background: var(--pp-border-strong); }
.hc-sc-track li.done + li.done::before { background: var(--c); }
.hc-sc-track i { width: 12px; height: 12px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; border: 1.5px solid var(--pp-border-strong); }
.hc-sc-track i .pp-ico { width: 8px; height: 8px; stroke-width: 3.5; }
.hc-sc-track li.done i { background: var(--c); border-color: var(--c); color: var(--pp-panel); }
.hc-sc-track li.last i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.hc-sc-track li.warn i { background: var(--pp-warn); border-color: var(--pp-warn); }
.hc-sc-track b { font-weight: 600; }
.hc-sc-track li.done b { color: var(--text-secondary); }
.hc-sc-callout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid; }
.hc-sc-callout > div:not(.hc-sc-callout-acts) { display: grid; font-size: 0.78rem; }
.hc-sc-callout b { font-size: 0.82rem; color: var(--text-primary); }
.hc-sc-callout span { color: var(--text-secondary); }
.hc-sc-callout.info { border-color: color-mix(in srgb, var(--ev-cirugia) 35%, transparent); background: color-mix(in srgb, var(--ev-cirugia) 8%, transparent); }
.hc-sc-callout.info > .pp-ico { color: var(--ev-cirugia); }
.hc-sc-callout.warn { border-color: color-mix(in srgb, var(--pp-warn) 35%, transparent); background: color-mix(in srgb, var(--pp-warn) 8%, transparent); }
.hc-sc-callout.warn > .pp-ico { color: var(--pp-warn); }
.hc-sc-callout-acts { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hc-sc-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.7rem; }
.hc-sc-panel { background: var(--pp-sunken); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.65rem 0.8rem; min-width: 0; }
.hc-sc-panel .pp-input { background: var(--pp-panel); }
.hc-sc-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.45rem; }
.hc-sc-label .pp-ico { color: var(--c); }
.hc-sc-label-gap { margin-top: 0.75rem; }
.hc-sc-dx b { font-size: 0.9rem; color: var(--text-primary); }
.hc-dx-in { font-weight: 600; color: var(--text-primary); }
.hc-sc-procs { margin: 0; padding-left: 1.1rem; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
.hc-code { font-size: 0.66rem; font-weight: 700; color: var(--text-muted); }
.hc-code.pend { font-style: italic; font-weight: 600; }
/* Diagnósticos: lista de problemas, los del ingreso y los secundarios de la cirugía */
.hc-probs, .hc-dxs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.hc-probs li, .hc-dxs li { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.8rem; color: var(--text-primary); }
.hc-prob-txt { flex: 1; min-width: 0; }
.hc-prob.resuelto .hc-prob-txt { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-color); }
.hc-probs-res { margin-top: 0.4rem; font-size: 0.74rem; color: var(--text-muted); }
.hc-probs-res summary { cursor: pointer; font-weight: 700; }
.hc-dx-papel { flex: none; min-width: 5.6rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.hc-cir-dxs { display: grid; gap: 0.35rem; margin-top: 0.45rem; }
.hc-dxrow { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 28px; gap: 0.4rem; align-items: center; font-size: 0.8rem; }
.hc-sc.ro .hc-dxrow { grid-template-columns: 5.6rem minmax(0, 1fr); }
.hc-rolsel { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; }
.hc-gap { margin-top: 0.7rem; }
/* Hoja quirúrgica: resumen en la tarjeta y su página */
.hc-hoja-res { margin: 0.6rem 0 0.2rem; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--border-color); background: var(--pp-sunken); }
.hc-hoja-res.warn { border-color: color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border-color)); }
.hc-hoja-res.ok { border-color: color-mix(in srgb, var(--success, #10b981) 45%, var(--border-color)); }
.hc-hoja-res-cab { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text-primary); }
/* Consentimientos de la cirugía (src/paciente/consentimientos.js). */
.hc-cons { margin: 0.6rem 0 0.2rem; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--border-color); background: var(--pp-sunken); display: grid; gap: 0.5rem; }
.hc-cons-cab { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text-primary); }
.hc-cons-sub { font-size: 0.74rem; color: var(--text-muted); }
.hc-cons-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.hc-cons-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.6rem; align-items: center; padding: 0.5rem 0.6rem; border-radius: 8px; background: var(--pp-panel, var(--bg-card)); border: 1px solid var(--border-color); }
.hc-cons-nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.45rem; font-size: 0.82rem; }
.hc-cons-nombre small { font-size: 0.7rem; color: var(--text-muted); }
.hc-cons-nombre .hc-cons-sub { flex-basis: 100%; }
.hc-cons-acc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.hc-cons-subir { cursor: pointer; }
.hc-cons-tableta { grid-column: 1 / -1; display: grid; gap: 0.5rem; padding-top: 0.4rem; border-top: 1px dashed var(--border-color); }
.hc-cons-firmante { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; font-size: 0.8rem; }
.hc-cons-firmante .pp-input { flex: 1 1 14rem; }
.hc-cons-lienzo { width: 100%; max-width: 600px; aspect-ratio: 3 / 1; border-radius: 8px; border: 1px solid var(--border-color); background: #fff; touch-action: none; cursor: crosshair; }
.hc-cons-anadir .pp-input { max-width: 22rem; }
/* Panel → Catálogos → Consentimientos (src/admin/consentimientos.js). */
.adm-cons-lista { display: grid; gap: 0.6rem; }
.adm-cons { display: grid; gap: 0.45rem; padding: 0.8rem 0.9rem; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card); }
.adm-cons.baja { opacity: 0.6; }
.adm-cons.editando { border-color: var(--accent-cyan, #06b6d4); margin-bottom: 0.6rem; }
.adm-cons-cab { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; }
.adm-cons-esp { flex: 1; }
.adm-cons-a { margin: 0; font-size: 0.78rem; color: var(--text-secondary); }
.adm-cons-texto { margin: 0; font-size: 0.78rem; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.adm-cons-campo { display: grid; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.adm-cons-campo small { font-weight: 400; color: var(--text-muted); }
.adm-cons-campo textarea { font-family: inherit; resize: vertical; }
.adm-cons-grupos { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.8rem; }
.adm-cons-grupos legend { padding: 0 0.3rem; font-weight: 600; color: var(--text-secondary); }
.adm-cons-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.adm-cons-chips button { margin-left: 0.25rem; border: 0; background: none; color: inherit; cursor: pointer; }
.adm-cons-activo { font-size: 0.8rem; }
.hc-hoja-num { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }
.hc-hoja-acto, .hc-hoja-falta { margin: 0.35rem 0 0; font-size: 0.74rem; color: var(--text-secondary); }
.hc-hoja-falta { color: var(--text-muted); }
.hc-hoja { display: grid; gap: 0.9rem; padding-bottom: 5rem; }
.hc-hoja-cab h2 { margin: 0.3rem 0 0.15rem; font-size: 1.25rem; }
.hc-hoja-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 0.84rem; color: var(--text-secondary); }
.hc-hora { display: flex; gap: 0.35rem; align-items: center; }
.hc-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); }
.hc-impls { display: grid; gap: 0.45rem; }
.hc-impl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 28px; gap: 0.35rem; align-items: center; padding-bottom: 0.45rem; border-bottom: 1px dashed var(--border-color); }
.hc-impl .hc-impl-udi { grid-column: 1 / -2; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.74rem; }
.hc-impl-v { font-size: 0.8rem; color: var(--text-primary); }
.hc-impl-acciones { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hc-impl-pend { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: var(--pp-warn); }
.hc-escaner { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: rgb(0 0 0 / 0.7); }
.hc-escaner-caja { display: grid; gap: 0.6rem; justify-items: center; padding: 1rem; border-radius: 14px; background: var(--pp-panel, var(--bg-card)); }
.hc-escaner-caja video { width: min(80vw, 480px); border-radius: 10px; background: #000; }
.hc-escaner-caja p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.hc-hoja-desc { min-height: 12rem; }
.hc-hoja-desc-ro { white-space: pre-wrap; font-size: 0.86rem; line-height: 1.5; color: var(--text-primary); }
.hc-hoja-pie { margin-right: 4.2rem; position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid var(--border-color); background: var(--pp-panel, var(--bg-card)); box-shadow: 0 -6px 18px rgb(0 0 0 / 0.18); font-size: 0.82rem; }
.hc-hoja-pie.warn { color: var(--text-secondary); }
.hc-hoja-pie.ok { color: var(--text-primary); }
.hc-sc-empty { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
.hc-cir-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 0.8rem; margin-top: 0.75rem; }
.hc-teamrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 0.8fr) 28px; gap: 0.35rem; align-items: center; }
.hc-teamrow .pp-input { font-size: 0.78rem; }
.hc-sc-av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 0.64rem; font-weight: 800; color: hsl(var(--h, 200) 80% 78%); background: hsl(var(--h, 200) 45% 30% / 0.55); }
[data-theme="light"] .hc-sc-av { color: hsl(var(--h, 200) 60% 32%); background: hsl(var(--h, 200) 70% 90%); }
.hc-teamrow.vacio .hc-sc-av { background: transparent; border: 1px dashed var(--border-highlight); color: var(--text-muted); }
.hc-teamrow.vacio select { color: var(--text-muted); font-style: italic; }
.hc-rolfijo { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-rolsel2 { color: var(--text-muted) !important; }
.hc-sc-falta { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--pp-warn); }
.hc-sc-ficha { border-color: color-mix(in srgb, var(--c) 30%, var(--border-color)); }
.hc-sc-ficha .hc-sc-label { color: var(--c); }
.hc-sc-ficha .hc-fgrid { padding: 0; gap: 0.55rem 0.8rem; }
.hc-sc-ficha-de { margin-left: 0.4rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.hc-sc-ficha-casa { margin-left: auto; font-size: 0.68rem; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.hc-audit { border-top: 1px solid var(--border-color); margin: 0 -1.1rem -1.05rem -1.35rem; padding: 0.5rem 1.1rem 0.55rem 1.35rem; background: var(--pp-sunken); font-size: 0.74rem; color: var(--text-muted); }
.hc-audit-bar { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.hc-audit-bar b { color: var(--text-secondary); }
.hc-audit-bar .hc-save { margin: 0; }
.hc-audit-list { list-style: none; margin: 0.5rem 0 0.1rem; padding: 0; display: grid; gap: 0.3rem; }
.hc-audit-list li { display: grid; grid-template-columns: 100px 150px 170px minmax(0, 1fr); gap: 0.6rem; align-items: baseline; padding: 0.3rem 0.5rem; border-radius: 6px; background: var(--pp-panel); }
.hc-audit-when { font-variant-numeric: tabular-nums; }
.hc-audit-list b { color: var(--text-primary); font-weight: 600; }
.hc-audit-what { color: var(--text-secondary); }
.hc-audit-diff { color: var(--text-primary); }
.hc-audit-diff s { color: var(--text-muted); }
@media (max-width: 900px) {
  .hc-sc-grid, .hc-cir-datos { grid-template-columns: minmax(0, 1fr); }
  .hc-audit-list li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

/* Con varias cirugías en cola: cuál describen las tarjetas de la pestaña
   Paciente. Con una sola no se pinta. */
.pp-case-switch { max-width: 1100px; margin: 0 auto 0.85rem; }
.pp-case-switch .pp-hint { margin: 0 0 0.35rem; }
.pp-case-switch .pp-seg { display: flex; width: 100%; }
.pp-case-switch .pp-seg button { flex: 1 1 0; gap: 0.4rem; justify-content: center; }

/* La prioridad y la espera dentro de la tarjeta de una cirugía */

/* Popover de la prioridad: las mismas casillas del menú de ingreso */
.pp-priority-pop {
  position: fixed; z-index: 1200; width: 380px; max-width: calc(100vw - 20px);
  background: var(--pp-raised); border: 1px solid var(--border-highlight); border-radius: 12px;
  padding: 0.6rem 0.7rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.pp-priority-pop .pp-hint { margin: 0 0 0.45rem; }
.pp-priority-pop .pp-inline-msg { margin-bottom: 0; }

.pp-view-pruebas .pp-table-wrap { max-width: 1100px; margin: 0 auto; background: var(--pp-panel); border: 1px solid var(--border-color); border-radius: 12px; }
.pp-view-pruebas .pp-inline-msg { max-width: 1100px; margin-left: auto; margin-right: auto; }
.pp-file-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-primary); font-weight: 600; text-decoration: none; }
.pp-file-link .pp-ico { color: var(--ev-prueba); }
.pp-file-link:hover { text-decoration: underline; }
.pp-cat { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 6px; color: var(--ev-prueba); background: color-mix(in srgb, var(--ev-prueba) 12%, transparent); white-space: nowrap; }
/* Anamnesis e informe de alta de plantilla (src/paciente/documentos.js) */
.hc-documento { display: grid; gap: 1rem; padding-bottom: 5rem; }
.hc-doc-cab { display: flex; align-items: flex-start; gap: 0.6rem; }
.hc-doc-cab h2 { margin: 0; font: 700 1.2rem var(--font-heading); }
.hc-doc-cab p { margin: 0.2rem 0 0; }
.hc-doc-num { font-size: 0.85rem; color: var(--accent-cyan); }
.hc-doc-cuerpo { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.hc-doc-indice { position: sticky; top: 0.5rem; display: grid; gap: 0.15rem; font-size: 0.78rem; }
.hc-doc-indice a { color: var(--text-secondary); text-decoration: none; padding: 0.25rem 0.5rem; border-radius: 6px; }
.hc-doc-indice a:hover { background: var(--pp-sunken); color: var(--text-primary); }
.hc-doc-secciones { display: grid; gap: 0.8rem; max-width: 86ch; }
.hc-doc-sec { display: grid; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: 12px; border: 1px solid var(--border-color); background: var(--pp-panel); scroll-margin-top: 1rem; }
.hc-doc-sec h3 { margin: 0; font: 700 0.9rem var(--font-heading); }
.hc-doc-carpeta { display: grid; gap: 0.3rem; padding: 0.55rem 0.7rem; border-radius: 9px; background: var(--pp-sunken); border-left: 3px solid var(--accent-cyan); }
.hc-doc-de { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; gap: 0.3rem; align-items: center; }
.hc-doc-fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; font-size: 0.82rem; }
.hc-doc-fila span { color: var(--text-secondary); font-size: 0.76rem; }
.hc-doc-campos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.hc-doc-frases, .hc-doc-meds { display: grid; gap: 0.35rem; }
.hc-doc-med { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 28px; gap: 0.35rem; align-items: center; font-size: 0.82rem; }
.hc-doc-cods { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hc-doc-cod { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.78rem; border: 1px solid var(--border-color); background: var(--pp-sunken); }
.hc-doc-cod button { border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.hc-doc-texto { margin: 0; white-space: pre-wrap; font-size: 0.86rem; line-height: 1.55; }
.hc-doc-nuevo { display: flex; gap: 0.5rem; justify-content: center; }
.hc-doc-nombre { max-width: 18rem; }

/* ── Portátil (<1260px): la columna derecha se pliega al pie de la ficha ── */
@media (max-width: 1260px) {
  .pp-historia { grid-template-columns: 290px minmax(0, 1fr); }
  .pp-side { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; min-height: 0; border-right: 1px solid var(--border-color); background: var(--pp-sunken); }
  .pp-ficha { flex: 1; border-right: 0; }
  .pp-ctx {
    flex: 0 1 auto; max-height: 60%; border-left: 0; border-top: 1px solid var(--pp-border-strong);
    padding-top: 0.6rem; box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, 0.5);
  }
  .pp-ctx .pp-sec + .pp-sec { margin-top: 0.45rem; padding-top: 0.45rem; }
  .pp-ctx .pp-sec-title { margin-bottom: 0; }
  .pp-ctx .pp-sec.unfolded .pp-sec-title { margin-bottom: 0.5rem; }
  .pp-ctx .pp-fold-btn { pointer-events: auto; cursor: pointer; flex: 1; }
  .pp-ctx .pp-fold-sum { display: inline; margin-left: auto; font-size: 0.7rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-ctx .pp-fold-chev { display: block; color: var(--text-muted); transition: transform 0.15s; }
  .pp-ctx .pp-sec.unfolded .pp-fold-chev { transform: rotate(90deg); }
  .pp-ctx .pp-sec.unfolded .pp-fold-sum { display: none; }
  .pp-ctx .pp-sec:not(.unfolded) .pp-sec-body { display: none; }
  .pp-ctx .pp-sec:not(.unfolded) .pp-link { display: none; }
}

/* ── Tablet (<900px): una sola columna ─────────────────────────────────── */
@media (max-width: 900px) {
  .pp-historia { display: flex; flex-direction: column; overflow-y: auto; }
  .pp-side { border-right: 0; flex: none; }
  .pp-ficha, .pp-ctx { overflow: visible; max-height: none; }
  .pp-main { overflow: visible; flex: none; }
  .pp-day-head { top: 0; }
  .pp-head { padding: 0.75rem; }
}

/* ── Roles y permisos: origen de cada permiso y excepciones con caducidad ── */
.perm-section-title { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.7rem; }
.perm-exc-empty { font-size: 0.8rem; color: var(--text-secondary); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Panel de Administración · Personas, Roles y Accesos
   Reestructuración tras los roles definitivos (migración 103): el rol manda y
   lo que se aparta de él es una excepción, así que las pantallas dejan de
   girar alrededor de repartir permisos sueltos.
   ══════════════════════════════════════════════════════════════════════════ */

/* Píldoras de filtro con su propio contador: sustituyen a las tarjetas de
   estadística de la cabecera, que informaban pero no filtraban. */
.admin-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.admin-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary);
  border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.76rem; font-weight: 600; cursor: pointer;
  transition: all 0.16s ease;
}
.admin-chip:hover { color: var(--text-primary); border-color: var(--border-strong, var(--border-color)); }
.admin-chip span { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.admin-chip.active { border-color: rgba(6, 182, 212, 0.45); background: rgba(6, 182, 212, 0.12); color: var(--accent-cyan); }
.admin-chip.active span { color: var(--accent-cyan); }
.admin-chip-warn { border-color: rgba(245, 158, 11, 0.4); color: #b45309; }
.admin-chip-warn span { color: #b45309; }
.admin-chip-bad { border-color: rgba(239, 68, 68, 0.4); color: #dc2626; }
.admin-chip-bad span { color: #dc2626; }
[data-theme="dark"] .admin-chip-warn, :root:not([data-theme="light"]) .admin-chip-warn { color: #f59e0b; }
[data-theme="dark"] .admin-chip-warn span, :root:not([data-theme="light"]) .admin-chip-warn span { color: #f59e0b; }
[data-theme="dark"] .admin-chip-bad, :root:not([data-theme="light"]) .admin-chip-bad { color: #ef4444; }
[data-theme="dark"] .admin-chip-bad span, :root:not([data-theme="light"]) .admin-chip-bad span { color: #ef4444; }

/* Toda la fila abre la ficha: antes había que acertar en un botón "⋮" de
   20 px al final de la tabla. */
.admin-row-clickable { cursor: pointer; }

/* Tarjetas de rol: nueve roles se leen de un vistazo, una tabla de cinco
   columnas para nueve filas no aporta nada. */
.admin-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.75rem; }
.admin-role-card {
  background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border-color);
  border-top: 3px solid var(--role-color, var(--accent-cyan)); border-radius: 12px;
  padding: 0.85rem 0.95rem; cursor: pointer; transition: all 0.16s ease;
}
.admin-role-card:hover { border-color: rgba(6, 182, 212, 0.4); transform: translateY(-1px); }
.admin-role-card-head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.admin-role-card p { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 0.7rem; min-height: 2.9em; }
.admin-role-card-foot {
  display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.6rem;
}
.admin-role-card-foot b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Caras apiladas: "¿quién es Cirujano Staff?" es la pregunta real. */
.admin-avatar-stack { display: inline-flex; }
.admin-avatar-stack > * { margin-left: -0.45rem; border: 2px solid var(--bg-secondary); }
.admin-avatar-stack > *:first-child { margin-left: 0; }

/* Barra de borrador del editor de plantillas: N cambios, una sola
   confirmación. Antes cada casilla lanzaba su propio confirm() del navegador
   y recargaba la pantalla. */
.admin-draft-bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  background: var(--bg-secondary); border: 1px solid rgba(6, 182, 212, 0.45); border-radius: 12px;
  padding: 0.7rem 0.9rem; margin-top: 0.8rem; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}
.admin-draft-bar .admin-draft-text { font-size: 0.78rem; line-height: 1.5; flex: 1; min-width: 200px; }
.admin-draft-bar .admin-draft-text b { font-weight: 700; }
.admin-draft-bar .admin-draft-up { color: #059669; font-weight: 700; }
.admin-draft-bar .admin-draft-down { color: #dc2626; font-weight: 700; }
[data-theme="dark"] .admin-draft-bar .admin-draft-up, :root:not([data-theme="light"]) .admin-draft-bar .admin-draft-up { color: #10b981; }
[data-theme="dark"] .admin-draft-bar .admin-draft-down, :root:not([data-theme="light"]) .admin-draft-bar .admin-draft-down { color: #ef4444; }
.admin-draft-bar .admin-draft-actions { display: flex; gap: 0.5rem; margin-left: auto; }

/* "Lo que espera una decisión" en Accesos y sesiones. */
.admin-live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.admin-live { display: flex; gap: 0.6rem; border: 1px solid; border-radius: 12px; padding: 0.7rem 0.85rem; font-size: 0.78rem; line-height: 1.45; }
.admin-live b { display: block; font-weight: 700; margin-bottom: 0.15rem; }
.admin-live small { display: block; color: var(--text-secondary); font-size: 0.72rem; }
.admin-live .admin-live-go { margin-top: 0.45rem; display: inline-flex; gap: 0.4rem; }
.admin-live-bad { background: rgba(239, 68, 68, 0.09); border-color: rgba(239, 68, 68, 0.32); }
.admin-live-bad > svg { color: #ef4444; flex: none; }
.admin-live-warn { background: rgba(245, 158, 11, 0.09); border-color: rgba(245, 158, 11, 0.32); }
.admin-live-warn > svg { color: #f59e0b; flex: none; }

/* Dispositivos y excepciones en la ficha: una fila por cosa, con sus acciones. */
.admin-line {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.55rem 0.7rem; border: 1px solid var(--border-color); border-radius: 9px;
  background: var(--bg-tertiary); margin-bottom: 0.45rem;
  /* Varias de estas filas son <button> (el buscador de permisos, el cambio de
     rol): un botón no hereda el color ni la tipografía de la página, así que
     sin esto el texto salía casi ilegible. */
  color: var(--text-primary); font-family: inherit; font-size: inherit; text-align: left;
}
button.admin-line { width: 100%; }
button.admin-line:not(:disabled) { cursor: pointer; }
button.admin-line:not(:disabled):hover { border-color: rgba(6, 182, 212, 0.4); }
.admin-line:last-child { margin-bottom: 0; }
.admin-line-main { flex: 1; min-width: 150px; }
.admin-line-main b { display: block; font-size: 0.81rem; font-weight: 700; }
.admin-line-main small { display: block; font-size: 0.71rem; color: var(--text-muted); margin-top: 0.1rem; }
.admin-line-actions { display: flex; gap: 0.4rem; flex: none; }
.admin-line-grant { border-left: 3px solid #10b981; }
.admin-line-revoke { border-left: 3px solid #ef4444; }

/* ══════════════════════════════════════════════════════════════════════════
   Panel de Administración · armazón común
   Doce secciones, con la misma anatomía en todas:
   cabecera con una frase, pestañas si las hay, controles, píldoras, contenido.
   ══════════════════════════════════════════════════════════════════════════ */
/* La barra lateral es oscura siempre (#070d19 en index.html), también en modo
   día: sus textos no pueden tirar de los colores del tema, o en claro el
   apartado bajo el ratón salía casi negro sobre casi negro. */
.admin-nav-group {
  font-size: 0.63rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.08em; margin: 0.9rem 0 0.3rem 0.45rem;
}
.admin-console-nav-btn {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left;
  padding: 0.5rem 0.7rem; border-radius: 8px; border: none; background: transparent;
  color: #94a3b8; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.16s ease;
}
.admin-console-nav-btn:hover { background: rgba(255, 255, 255, 0.06); color: #f8fafc; }
.admin-console-nav-btn.active { background: rgba(6, 182, 212, 0.15); color: var(--accent-cyan); }
.admin-console-nav-btn > span:first-of-type { flex: 1; min-width: 0; }
.admin-nav-count {
  font-size: 0.66rem; font-weight: 700; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px; padding: 0 0.4rem; color: #94a3b8; flex: none;
}
.admin-nav-count.alert { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.4); color: #ef4444; }

/* La frase de cada sección: qué es esto y para qué sirve. */
.admin-section-intro { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; margin: 0 0 1rem; max-width: 80ch; }

/* Dos columnas que se apilan solas (Sistema, Inicio). */
.admin-two-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 0.9rem; align-items: start; }

/* Tarjetas de ajuste: pocas cosas que se reconocen de un vistazo (las
   localizaciones y los turnos del cuadrante) en vez de una tabla con una
   columna "Acciones" y veinticinco botones. */
.admin-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.7rem; }
.admin-set-card {
  background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border-color);
  border-top: 3px solid var(--set-color, var(--accent-cyan)); border-radius: 11px; padding: 0.75rem 0.85rem;
}
.admin-set-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; margin-bottom: 0.35rem; }
.admin-set-card p { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 0.6rem; }
.admin-set-foot {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.55rem;
}
.admin-set-foot b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Quién está dentro ahora (Inicio del panel). Fichas mínimas que se reparten
   por filas: con diez personas conectadas, una línea por cabeza se comía la
   pantalla. Son <button> porque cada una lleva a sus sesiones, así que hay
   que devolverles el color y la tipografía que un botón no hereda. */
.admin-who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.45rem; }
.admin-who-card {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0; width: 100%;
  padding: 0.4rem 0.55rem; border: 1px solid var(--border-color); border-radius: 9px;
  background: var(--bg-tertiary); cursor: pointer; text-align: left;
  color: var(--text-primary); font-family: inherit;
}
.admin-who-card:hover { border-color: var(--accent-cyan); }
.admin-who-card-main { flex: 1; min-width: 0; }
.admin-who-card-main b,
.admin-who-card-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-who-card-main b { font-size: 0.78rem; font-weight: 700; }
.admin-who-card-main small { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.05rem; }
/* El punto verde dice "sigue ahí" sin gastar una etiqueta entera. */
.admin-who-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #10b981; }

/* Cabecera de la ficha de una persona: sustituye a la columna lateral. */
.admin-hero {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 0.85rem 1rem; margin: 0.9rem 0 1rem;
}
.admin-hero h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.admin-hero-meta {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin-top: 0.3rem; font-size: 0.74rem; color: var(--text-secondary);
}
.admin-hero-actions { margin-left: auto; position: relative; }
.admin-actions-menu {
  position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 5; min-width: 220px;
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px;
  padding: 0.3rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.admin-actions-menu button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--text-primary); font-family: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 0.45rem 0.6rem; border-radius: 7px; cursor: pointer;
}
.admin-actions-menu button:hover { background: var(--bg-hover); }
.admin-actions-menu button.danger { color: #ef4444; }

/* "Nada esperando una decisión" comparte forma con los avisos de colores. */
.admin-live-calm { background: var(--bg-card, var(--bg-secondary)); border-color: var(--border-color); }
.admin-live-calm > svg { color: var(--text-muted); flex: none; }

/* Avisos del panel: sustituyen a los alert() del navegador. Van por encima de
   los modales del propio panel, porque varios se disparan desde dentro de uno. */
.admin-toast-stack {
  position: fixed; top: 1rem; right: 1rem; z-index: 1200;
  display: flex; flex-direction: column; gap: 0.5rem; max-width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}
.admin-toast {
  display: flex; align-items: flex-start; gap: 0.6rem; pointer-events: auto;
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-left: 3px solid var(--accent-cyan);
  border-radius: 10px; padding: 0.7rem 0.85rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 0.8rem; line-height: 1.45; color: var(--text-primary);
  animation: adminToastIn 0.18s ease;
}
.admin-toast.error { border-left-color: #ef4444; }
.admin-toast.ok { border-left-color: #10b981; }
.admin-toast button {
  margin-left: auto; border: 0; background: transparent; color: var(--text-muted);
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 0 0 0.4rem; flex: none;
}
@keyframes adminToastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   Sistema visual de usuarios y roles: el chip de rol con su punto, los
   avatares apilados en sólido y las cajas de permisos por módulo.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Chips: rol, estado y etiquetas. El de rol lleva su punto de color y se
   tiñe con el color del propio rol (--rc). Se usa en TODA la app. --- */
.eiren-tag {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 2px 9px; font-size: 0.7rem; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap; line-height: 1.5;
}
.eiren-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.eiren-tag svg { width: 12px; height: 12px; flex: none; }
.eiren-tag.role {
  background: color-mix(in srgb, var(--rc, #06b6d4) 14%, transparent);
  color: var(--rc, #06b6d4);
  border-color: color-mix(in srgb, var(--rc, #06b6d4) 34%, transparent);
}
.eiren-tag.ok { background: rgba(16, 185, 129, 0.14); color: #059669; border-color: rgba(16, 185, 129, 0.32); }
.eiren-tag.warn { background: rgba(245, 158, 11, 0.14); color: #b45309; border-color: rgba(245, 158, 11, 0.32); }
.eiren-tag.bad { background: rgba(239, 68, 68, 0.12); color: #dc2626; border-color: rgba(239, 68, 68, 0.32); }
.eiren-tag.mut { background: var(--bg-tertiary); color: var(--text-muted); border-color: var(--border-color); }
.eiren-tag.base {
  background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color);
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em;
}
[data-theme="dark"] .eiren-tag.ok, :root:not([data-theme="light"]) .eiren-tag.ok { color: #10b981; }
[data-theme="dark"] .eiren-tag.warn, :root:not([data-theme="light"]) .eiren-tag.warn { color: #f59e0b; }
[data-theme="dark"] .eiren-tag.bad, :root:not([data-theme="light"]) .eiren-tag.bad { color: #ef4444; }

/* --- Avatares apilados: en SÓLIDO, no traslúcidos. Superpuestos se veían
   feísimos porque el de abajo se transparentaba a través del de arriba. --- */
.admin-avatar-stack > .user-avatar-circle {
  margin-left: -0.45rem; border: 2px solid var(--bg-secondary); color: #fff;
}
.admin-avatar-stack > .user-avatar-circle:first-child { margin-left: 0; }
.admin-avatar-stack .stack-more {
  background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--bg-secondary);
}

/* --- Cajas de permisos por módulo: cabecera con icono, contador a la derecha
   y una fila por permiso. --- */
.perm-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 0.6rem; }
.perm-mod { border: 1px solid var(--border-color); border-radius: 9px; overflow: hidden; background: var(--bg-card, var(--bg-secondary)); }
.perm-mod-head {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.6rem;
  font-size: 0.73rem; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-hover); border-bottom: 1px solid var(--border-color);
}
.perm-mod-head svg { width: 14px; height: 14px; flex: none; color: var(--accent-cyan); }
.perm-mod-head .cnt { margin-left: auto; font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }
.perm-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem;
  font-size: 0.76rem; border-bottom: 1px solid var(--border-color); color: var(--text-primary);
  cursor: pointer; margin: 0;
}
.perm-row:last-child { border-bottom: 0; }
.perm-row input[type=checkbox] { accent-color: var(--accent-cyan); width: 14px; height: 14px; flex: none; margin: 0; }
.perm-row > span:first-of-type { flex: 1; min-width: 0; }
.perm-row .src {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-color);
  color: var(--text-muted); white-space: nowrap; flex: none;
}
.perm-row .src.grant { color: #059669; border-color: rgba(16, 185, 129, 0.34); }
.perm-row .src.revoke { color: #dc2626; border-color: rgba(239, 68, 68, 0.34); }
.perm-row .src.crit { color: #b45309; border-color: rgba(245, 158, 11, 0.34); }
[data-theme="dark"] .perm-row .src.grant, :root:not([data-theme="light"]) .perm-row .src.grant { color: #10b981; }
[data-theme="dark"] .perm-row .src.revoke, :root:not([data-theme="light"]) .perm-row .src.revoke { color: #ef4444; }
[data-theme="dark"] .perm-row .src.crit, :root:not([data-theme="light"]) .perm-row .src.crit { color: #f59e0b; }
.perm-row.off { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(239, 68, 68, 0.6); }
.perm-row.changed { background: rgba(6, 182, 212, 0.1); }

/* ══════════════════════════════════════════════════════════════════════════
   EL KIT DEL PANEL DE ADMINISTRACIÓN.
   La anatomía común de todas sus pantallas: fila única de controles, píldoras
   que filtran, tabla con un solo ⋯ por fila, tarjetas, y errores que se
   quedan en su bloque. Dentro del panel ocupa el lugar de glass-panel/data-table.
   ══════════════════════════════════════════════════════════════════════════ */
.admin-ic { flex: none; vertical-align: -0.15em; }

.admin-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.admin-search {
  display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 220px; max-width: 430px;
  border: 1px solid var(--border-color); border-radius: 9px; padding: 0.35rem 0.6rem;
  background: var(--bg-secondary); color: var(--text-muted);
}
.admin-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary);
  font: inherit; font-size: 0.82rem; outline: none;
}
.admin-toolbar-actions { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.admin-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border-color);
  background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 0.78rem;
  font-weight: 700; padding: 0.4rem 0.7rem; border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.admin-btn:hover { background: var(--bg-hover); }
.admin-btn.primary { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #00222b; }
.admin-btn.primary:hover { filter: brightness(1.08); }
.admin-btn.danger { color: #ef4444; border-color: rgba(239, 68, 68, 0.35); }
.admin-btn.sm { padding: 0.25rem 0.55rem; font-size: 0.74rem; }
.admin-btn[disabled] { opacity: 0.5; cursor: default; }
.admin-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px;
  border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary);
  border-radius: 8px; cursor: pointer;
}
.admin-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.admin-table-wrap {
  border: 1px solid var(--border-color); border-radius: 12px; overflow: auto;
  background: var(--bg-card, var(--bg-secondary));
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.admin-table th {
  text-align: left; font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); font-weight: 700; padding: 0.55rem 0.75rem; white-space: nowrap;
  border-bottom: 1px solid var(--border-color); background: var(--bg-hover);
}
.admin-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--bg-hover); }
.admin-tr-click { cursor: pointer; }
.admin-tr-dim { opacity: 0.6; }
.admin-table-empty { text-align: center; color: var(--text-secondary); padding: 1.5rem !important; }
.admin-row-menu { position: relative; display: inline-block; }
.admin-actions-menu button { display: flex; align-items: center; gap: 0.4rem; }

.admin-card {
  border: 1px solid var(--border-color); border-radius: 12px; padding: 0.8rem 0.9rem;
  background: var(--bg-card, var(--bg-secondary)); margin-bottom: 0.8rem;
}
.admin-card-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; }
.admin-card-head h4 { margin: 0; font-size: 0.86rem; font-weight: 800; }
.admin-card-head > svg { color: var(--accent-cyan); }
.admin-card-meta { font-size: 0.72rem; color: var(--text-muted); margin-left: 0.3rem; }
.admin-card-actions { margin-left: auto; display: flex; gap: 0.4rem; }
.admin-card-bad { border-color: rgba(239, 68, 68, 0.35); }
.admin-card-warn { border-color: rgba(245, 158, 11, 0.35); }

.admin-block-error {
  display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; border-radius: 11px;
  border: 1px solid rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.08); padding: 0.65rem 0.8rem;
}
.admin-block-error > svg { color: #ef4444; flex: none; }
.admin-block-error b { display: block; }
.admin-block-error small { color: var(--text-secondary); }
.admin-block-error .admin-btn { margin-left: auto; }
.admin-empty { color: var(--text-secondary); font-size: 0.8rem; padding: 0.8rem 0; margin: 0; }

.admin-health {
  display: flex; align-items: center; gap: 0.6rem; font-size: 0.79rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--border-color);
}
.admin-health:last-child { border-bottom: 0; }
.admin-health-main { flex: 1; min-width: 0; }
.admin-health-main b { font-weight: 600; }
.admin-health-main small { display: block; font-size: 0.71rem; color: var(--text-muted); }
.admin-health-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.admin-val-ok { color: #10b981; }
.admin-val-warn { color: #f59e0b; }
.admin-val-bad { color: #ef4444; }
.admin-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.admin-dot-ok { background: #10b981; }
.admin-dot-warn { background: #f59e0b; }
.admin-dot-bad { background: #ef4444; }
.admin-dot-mut { background: var(--text-muted); }
.admin-bar { width: 90px; height: 6px; border-radius: 999px; background: var(--bg-tertiary); overflow: hidden; flex: none; }
.admin-bar > span { display: block; height: 100%; background: var(--accent-cyan); }

.admin-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 0.55rem; }
.admin-kv > div { display: flex; flex-direction: column; gap: 0.1rem; }
.admin-kv span { color: var(--text-muted); font-size: 0.7rem; }
.admin-kv b { font-size: 0.92rem; font-weight: 800; }

.admin-set-card.clickable { cursor: pointer; }
.admin-set-card.clickable:hover { border-color: var(--accent-cyan); }
.admin-set-card.dim { opacity: 0.6; }
.admin-set-head svg { color: var(--accent-cyan); }
.admin-pager { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-secondary); }
.admin-pager-btns { display: flex; align-items: center; gap: 0.45rem; }

/* Seguridad: quién, con su avatar en sólido, y la celda de dos líneas. */
.admin-who { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.admin-who > div { min-width: 0; }
.admin-who b { display: block; font-size: 0.79rem; font-weight: 700; white-space: nowrap; }
.admin-who small { display: block; font-size: 0.69rem; color: var(--text-muted); }
.admin-av {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; color: #fff; font-size: 0.67rem; font-weight: 800; flex: none;
}
.admin-cell-sub b { display: block; font-weight: 600; font-size: 0.79rem; }
.admin-cell-sub small { display: block; font-size: 0.7rem; color: var(--text-muted); max-width: 320px; }
.admin-none { color: var(--text-muted); }
.admin-note-line {
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.73rem;
  color: var(--text-muted); margin: 0 0 0.6rem;
}
/* Píldora con un desplegable dentro: "Persona: todas", "Módulo: todos". */
.admin-chip-select { position: relative; padding-right: 0.5rem; cursor: pointer; }
.admin-chip-select select {
  border: 0; background: transparent; color: inherit; font: inherit; font-size: 0.72rem;
  font-weight: 700; cursor: pointer; outline: none; max-width: 170px;
}
.admin-chip-select select option { color: var(--text-primary); background: var(--bg-secondary); }
.admin-subtab-count:not(:empty) {
  margin-left: 0.35rem; font-size: 0.68rem; font-weight: 700; color: var(--text-muted);
  background: var(--bg-tertiary); border-radius: 999px; padding: 0 0.35rem;
}
.admin-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; }
/* Una unidad, dentro de su especialidad (Cardiología › Hemodinámica). */
.admin-esp-unidad { padding-left: 1.1rem; position: relative; color: var(--text-secondary); }
.admin-esp-unidad::before { content: '›'; position: absolute; left: 0.35rem; color: var(--text-muted); }
.admin-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.admin-set-code-tag { margin-left: auto; font-size: 0.68rem; color: var(--text-muted); }
.admin-set-code { display: flex; align-items: center; gap: 0.35rem; }
/* Catálogo de colectivos: el icono del colectivo, en su color. */
.gc-col-ico { display: inline-grid; place-items: center; flex: none; color: var(--c); }
.gc-col-ico svg { width: 14px; height: 14px; }
.admin-set-actions { margin-left: auto; display: flex; gap: 0.35rem; }
.admin-card-text { font-size: 0.78rem; color: var(--text-secondary); margin: 0 0 0.7rem; line-height: 1.5; }
.admin-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; cursor: pointer; }
.admin-check input { accent-color: var(--accent-cyan); width: 15px; height: 15px; margin: 0; }
.admin-check-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.admin-link { border: 0; background: none; color: var(--accent-cyan); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.admin-days { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--text-secondary); }
.admin-days input {
  width: 3.6rem; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-secondary);
  color: var(--text-primary); font: inherit; font-size: 0.78rem; padding: 0.2rem 0.4rem;
}
.admin-crumb {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.8rem; flex-wrap: wrap;
}
.admin-set-open { margin-left: auto; display: inline-flex; align-items: center; gap: 0.2rem; color: var(--accent-cyan); font-weight: 700; }
.admin-contact { font-size: 0.74rem; }
.admin-contact.baja { opacity: 0.5; text-decoration: line-through; }
.admin-terms { margin-bottom: 0.7rem; font-size: 0.78rem; }
.admin-terms > div { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.admin-term {
  display: inline-flex; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary);
}
.admin-field-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; }
.admin-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.73rem; color: var(--text-muted); }
.admin-field input {
  width: 9rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary);
  color: var(--text-primary); font: inherit; font-size: 0.82rem; padding: 0.35rem 0.55rem;
}
.admin-form-msg { font-size: 0.77rem; margin: 0.55rem 0 0; }

/* Membrete: una dirección postal o una URL no caben en los 9rem de
   .admin-field, y el logo necesita verse antes de guardarlo. */
.admin-field-wide { flex: 1 1 100%; }
.admin-field-wide input { width: 100%; }
.admin-logo-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.admin-logo-box {
  width: 120px; height: 46px; flex: none; border: 1px dashed var(--border-color); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; background: var(--bg-secondary);
  color: var(--text-muted); font-size: 0.68rem; text-align: center; padding: 0.3rem; overflow: hidden;
}
.admin-logo-box img { max-width: 100%; max-height: 100%; display: block; }
.admin-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0.5rem; }
.admin-figure {
  border: 1px solid var(--border-color); border-radius: 10px; padding: 0.5rem 0.65rem;
  display: flex; flex-direction: column; gap: 0.1rem; background: var(--bg-secondary);
}
.admin-figure b { font-size: 1.25rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.admin-figure span { font-size: 0.71rem; color: var(--text-muted); }
.admin-figure.clickable { cursor: pointer; }
.admin-figure.clickable:hover { border-color: var(--accent-cyan); }
/* Tablas del panel embebidas dentro de una tarjeta: sin doble marco. */
.admin-card > .admin-table-wrap { border: 0; border-radius: 0; background: transparent; }
.admin-card > .admin-table-wrap .admin-table th { background: transparent; }
.admin-draft-error {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem;
  font-weight: 700; color: #ef4444; margin-right: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   NUEVO PACIENTE — el alta en tres zonas (paciente, ingreso, cirugía).
   El alta en tres zonas: la persona, el episodio y el acto quirúrgico.
   Dos columnas y lo opcional plegado: el formulario viejo medía 810 px de
   alto en una pantalla de 900 y dejaba el material bajo la línea de corte.
   ══════════════════════════════════════════════════════════════════════════ */
/* `hidden` tiene que ganar a los display de aquí (flex/grid): sin esto, el
   acordeón plegado seguía enseñando su contenido. */
#modal-nuevo-paciente [hidden] { display: none !important; }
.np-modal { max-width: 1060px; width: 100%; padding: 0; overflow: hidden; }
.np-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-color); }
.np-head h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; }
.np-head-icon { color: var(--accent-cyan); flex: none; }
.np-lead { font-size: 0.74rem; color: var(--text-secondary); margin-top: 0.1rem; }
.np-grow { flex: 1; min-width: 0; }
.np-close { padding: 0.25rem 0.45rem; }

.np-seg { display: inline-flex; gap: 2px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 9px; padding: 2px; }
.np-seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.np-seg button.on { background: var(--bg-secondary); color: var(--accent-cyan); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }

.np-body { padding: 0.9rem 1rem; max-height: calc(100vh - 230px); overflow-y: auto; }

.np-zona { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); margin-top: 0.25rem; }
.np-zona:first-child { margin-top: 0; }
.np-num { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; font-weight: 800; flex: none; }
.np-num-pac { color: #7dd3fc; background: rgba(56,189,248,0.16); }
.np-num-ing { color: #6ee7b7; background: rgba(16,185,129,0.16); }
.np-num-cir { color: #d8b4fe; background: rgba(168,85,247,0.16); }
.np-tabla { margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.1rem 0.4rem; border-radius: 999px; }
.np-tabla-pac { color: #7dd3fc; background: rgba(56,189,248,0.14); }
.np-tabla-ing { color: #6ee7b7; background: rgba(16,185,129,0.14); }
.np-tabla-cir { color: #d8b4fe; background: rgba(168,85,247,0.14); }
.np-switch { display: inline-flex; align-items: center; gap: 0.35rem; text-transform: none; letter-spacing: 0; font-size: 0.73rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.np-switch input { accent-color: var(--accent-cyan); }
.np-zona.off { opacity: 0.55; }

.np-find { display: flex; align-items: center; gap: 0.5rem; }
.np-find > .icon-inline { color: var(--text-muted); flex: none; }
.np-find-input { flex: 1; min-width: 0; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: var(--radius-md); padding: 0.5rem 0.75rem; font-size: 0.82rem; outline: none; }
.np-find-input:focus { border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(6,182,212,0.15); }
.np-nuevo-btn { flex: none; }
.np-results { margin-top: 0.4rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); overflow: hidden; max-height: 210px; overflow-y: auto; }
.np-result { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.5rem 0.7rem; border: 0; border-bottom: 1px solid var(--border-color); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.np-result:last-child { border-bottom: 0; }
.np-result:hover { background: var(--bg-card-hover); }
.np-result-name { font-weight: 700; font-size: 0.83rem; }
.np-result-meta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.1rem; }
.np-estado { margin-left: auto; font-size: 0.66rem; font-weight: 800; padding: 0.12rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.np-estado-libre { color: var(--status-stable-text); background: var(--status-stable-bg); }
.np-estado-ingresado { color: var(--status-critical-text); background: var(--status-critical-bg); }
.np-estado-espera { color: var(--status-warning-text); background: var(--status-warning-bg); }

.np-known { border: 1px solid var(--border-highlight); background: rgba(56,189,248,0.07); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; }
.np-known-top { display: flex; align-items: center; gap: 0.6rem; }
.np-known-name { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; }
.np-known-meta { font-size: 0.73rem; color: var(--text-secondary); margin-top: 0.1rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.np-known-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.45rem; margin-top: 0.6rem; }
.np-known-item { border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-secondary); padding: 0.45rem 0.55rem; }
.np-known-item h5 { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem; }
.np-known-item p { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; }

.np-hint { font-size: 0.74rem; color: var(--text-muted); line-height: 1.5; }
.np-hint b { color: var(--text-secondary); }
.np-hint-warn { color: #fca5a5; }

.np-foot { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); background: var(--bg-card); }
.np-resumen { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.45; }
.np-resumen b { color: var(--text-primary); }

/* Los dos estados del menú. Compacto son dos columnas; Completo, las tres
   cajas numeradas una debajo de otra. Al cambiar se funde con la misma
   animación que al cambiar de módulo (.tab-content.active). */
.np-body { display: block; }
.np-body.np-fade { animation: fadeIn 0.2s ease-out; }
.np-body-compacto .np-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.1rem; }
.np-col { min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.np-boxes { display: grid; gap: 0.8rem; }
.np-box { border: 1px solid var(--border-color); border-left: 3px solid var(--c, var(--border-color)); border-radius: var(--radius-md); background: var(--bg-secondary); overflow: hidden; }
.np-box-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.np-box-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 0.7rem; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.np-box-id { min-width: 0; }
.np-box-title { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; }
.np-box-sub { font-size: 0.71rem; color: var(--text-muted); margin-top: 1px; }
.np-box-head .np-tabla { margin-left: 0; }
.np-box-body { padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.np-seg-sm button { height: 24px; font-size: 0.7rem; }
.np-add { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin-top: 0.6rem; padding: 0.5rem; border: 1px dashed var(--border-color); border-radius: 9px; background: transparent; color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.np-add:hover { border-color: var(--border-highlight); color: var(--text-primary); }
.np-cirugia-hecha { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border-color); border-left: 3px solid var(--cola-tevar, #a855f7); border-radius: 9px; background: var(--bg-input); }
.np-cirugia-hecha .n { flex: none; width: 1.3rem; text-align: center; font-weight: 800; color: var(--cola-tevar, #a855f7); }
.np-cirugia-hecha .t1 { font-size: 0.8rem; font-weight: 600; }
.np-cirugia-hecha .t2 { font-size: 0.72rem; color: var(--text-muted); }
.np-previas { font-size: 0.75rem; color: var(--text-muted); }
.np-previas[hidden] { display: none; }

/* El conmutador «Edad / Nacimiento» va DENTRO de la etiqueta del campo: es la
   misma casilla contada de dos maneras, no dos campos distintos. */
.np-fld-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.np-fld-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--bg-input); border: 1px solid var(--border-color); width: fit-content; }
/* Los años que salen de la fecha: no es un campo más, es el resultado. */
.np-edad-eco { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-cyan); white-space: nowrap; }
.np-edad-eco:empty { display: none; }
.np-fld-seg button { padding: 1px 7px; border: 0; border-radius: 5px; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.np-fld-seg button.on { background: var(--bg-secondary); color: var(--accent-cyan); }

/* Hay algo escrito detrás del botón: un punto, no un número -- lo que importa
   es que no se olvide, no cuántas filas son. */
.np-con-datos { position: relative; border-color: var(--border-highlight); }
.np-con-datos::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan); }

@media (max-width: 980px) {
  .np-body-compacto .np-cols { grid-template-columns: 1fr; }
  .np-foot { flex-wrap: wrap; }
}

/* --- «Más datos del paciente» ------------------------------------------- */
.md-modal { max-width: 780px; }
.md-tabs { display: flex; gap: 2px; padding: 0 1rem; border-bottom: 1px solid var(--border-color); }
.md-tabs button { padding: 0.55rem 0.8rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.79rem; font-weight: 700; cursor: pointer; }
.md-tabs button:hover { color: var(--text-primary); }
.md-tabs button.on { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }
.md-rows { display: grid; gap: 6px; }
.md-rows:empty { display: none; }
.md-row { display: flex; align-items: center; gap: 6px; }
.md-row > .sq-in { flex: 1; min-width: 0; }
.md-row > .md-label { flex: 0 0 34%; }
.md-row > .md-fecha { flex: 0 0 9.5rem; }
.md-row > .cola-rbtn { flex: none; }
.md-arbol { list-style: none; display: grid; gap: 0.4rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); font-size: 0.78rem; }
.md-arbol ul { list-style: none; margin: 0.25rem 0 0 0.9rem; display: grid; gap: 0.2rem; border-left: 1px solid var(--border-color); padding-left: 0.7rem; }
.md-arbol .y { font-family: var(--font-heading); font-weight: 800; color: var(--accent-cyan); }
.md-arbol .m { color: var(--text-muted); font-size: 0.72rem; }

@media (max-width: 720px) {
  .md-row { flex-wrap: wrap; }
  .md-row > .md-label, .md-row > .md-fecha { flex: 1 1 100%; }
}

/* ==========================================================================
   LISTA DE ESPERA -- LA COLA
   La barra reutiliza la familia .cuad-bar del Parte y el Cuadrante; aquí solo
   se define lo propio de la cola: el buscador y el contador del hueco 1, las
   herramientas del hueco 3, la tarjeta de la tabla y el lenguaje de fila
   (prioridad con nombre, contador de días contra su plazo y estado real).
   ========================================================================== */
/* La paleta va en :root y no en #tab-espera: el menú «Nuevo paciente» es un
   modal que vive fuera de la pestaña y habla el mismo idioma de color. */
:root {
  --cola-bad: #ef4444;
  --cola-warn: #f59e0b;
  --cola-ok: #10b981;
  --cola-info: #38bdf8;
  --cola-mp: #f97316;
  --cola-tavi: #06b6d4;
  --cola-tevar: #a855f7;
  --cola-tint: 0.14;
}
[data-theme="light"] {
  --cola-bad: #dc2626;
  --cola-warn: #d97706;
  --cola-ok: #059669;
  --cola-info: #0284c7;
  --cola-mp: #ea580c;
  --cola-tavi: #0891b2;
  --cola-tevar: #9333ea;
  --cola-tint: 0.12;
}

/* Hueco 1: buscador de la cola + contador. No es el buscador de la cabecera
   (aquel abre la ficha del paciente); este no saca de la lista. */
.cola-bar-nav { display: flex; gap: 6px; align-items: center; min-width: 0; }
.cola-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: var(--radius-md); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-muted); }
.cola-search:focus-within { border-color: var(--border-highlight); }
.cola-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 0.8rem; font-family: inherit; }
.cola-search input::placeholder { color: var(--text-muted); }
.cola-search input::-webkit-search-cancel-button { display: none; }
.cola-search-clear { flex: none; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--text-muted); cursor: pointer; }
.cola-search-clear:hover { color: var(--text-primary); background: var(--bg-secondary); }
.cola-search-clear[hidden] { display: none; }
.cola-count { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: var(--radius-md); background: var(--bg-input); border: 1px solid var(--border-color); white-space: nowrap; }
.cola-count b { font-family: var(--font-heading); font-size: 0.98rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.cola-count span { font-size: 0.72rem; color: var(--text-muted); }

/* Hueco 3: las herramientas propias de cada vista */
.cola-bar-tools { grid-column: 3; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cola-bar .cuad-vbtn img { display: block; opacity: 0.8; }
.cola-bar .cuad-vbtn.is-active img { opacity: 1; }

/* La píldora del filtro: discontinua cuando no filtra nada, sólida con el
   número cuando sí (mismo lenguaje que Base de datos). */
.cola-fpill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--text-muted); background: transparent; color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: var(--transition-fast); }
.cola-fpill:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.cola-fpill.is-set { border-style: solid; border-color: var(--border-highlight); background: color-mix(in srgb, var(--accent-cyan) 12%, transparent); color: var(--text-primary); }
.cola-fpill .n { color: var(--accent-cyan); font-weight: 800; font-variant-numeric: tabular-nums; }
.cola-fpill-x { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -3px; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.cola-fpill-x:hover { background: var(--bg-secondary); }
.cola-seg { display: inline-flex; gap: 2px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 9px; padding: 2px; }
.cola-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; white-space: nowrap; cursor: pointer; font-family: inherit; }
.cola-seg button.is-active { background: var(--seg-active-bg); border: 1px solid var(--seg-active-border); color: var(--accent-cyan); }
.cola-seg button .n { margin-left: 5px; font-variant-numeric: tabular-nums; opacity: 0.75; }

/* Panel del filtro, anclado a la píldora */
.cola-fpop { position: absolute; z-index: 80; width: 420px; max-width: calc(100vw - 32px); border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-secondary); box-shadow: var(--shadow-lg); padding: 13px; }
.cola-fpop-sec { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 7px; display: flex; align-items: center; gap: 7px; }
.cola-fpop-sec + .cola-fpop-sec { margin-top: 14px; }
.cola-fpop hr { border: 0; border-top: 1px solid var(--border-color); margin: 14px 0; }
.cola-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cola-chk { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.cola-chk i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--text-muted); flex: none; display: grid; place-items: center; }
.cola-chk.is-on { border-color: var(--border-highlight); background: color-mix(in srgb, var(--accent-cyan) 12%, transparent); color: var(--text-primary); }
.cola-chk.is-on i { border-color: var(--accent-cyan); background: var(--accent-cyan); }
.cola-chk.is-on i::after { content: ''; width: 5px; height: 8px; border: solid #04121c; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.cola-chk .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--text-muted)); flex: none; }
.cola-swrow { display: flex; align-items: center; gap: 10px; padding: 7px 2px; }
.cola-swrow + .cola-swrow { border-top: 1px solid var(--border-color); }
.cola-swrow .lbl { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 0.79rem; font-weight: 600; color: var(--text-primary); }
.cola-swrow .lbl .dot { width: 8px; height: 8px; border-radius: 3px; background: var(--c, var(--text-muted)); }
.cola-swrow .n { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cola-sw { width: 34px; height: 19px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border-color); position: relative; flex: none; padding: 0; cursor: pointer; }
.cola-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--text-muted); transition: var(--transition-fast); }
.cola-sw.is-on { background: color-mix(in srgb, var(--accent-cyan) 30%, transparent); border-color: var(--border-highlight); }
.cola-sw.is-on::after { left: 17px; background: var(--accent-cyan); }
.cola-fpop-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--border-color); }
.cola-fpop-foot .cola-link { border: 0; background: transparent; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; padding: 0; cursor: pointer; font-family: inherit; }
.cola-fpop-foot .cola-link:hover { color: var(--text-primary); }

/* La tarjeta de la tabla: resumen arriba, tabla con filas de 36 px */
.cola-card { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; }
.cola-summary { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--border-color); font-size: 0.79rem; color: var(--text-secondary); }
.cola-summary:empty { display: none; }
.cola-summary strong { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-right: 3px; }
.cola-summary .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); align-self: center; }
.cola-scroll { overflow-x: auto; }
.cola-table { width: 100%; border-collapse: collapse; }
.cola-table th { text-align: left; padding: 7px 12px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.cola-table td { padding: 6px 12px; font-size: 0.8rem; height: 36px; vertical-align: middle; border-bottom: 1px solid var(--border-color); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cola-table tbody tr:last-child td { border-bottom: 0; }
.cola-table td.r, .cola-table th.r { text-align: right; }
.cola-table .cola-name { font-weight: 600; }
.cola-table .cola-sub { font-size: 0.71rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
/* La intervención prevista manda; el diagnóstico va debajo en .cola-sub */
.cola-table .cola-proc { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cola-table .cola-num { font-variant-numeric: tabular-nums; }
.cola-empty td { text-align: center; padding: 2rem; color: var(--text-muted); }

/* Cabecera de bloque cuando se traen las colas propias «en bloques aparte» */
.cola-blockhead td { background: color-mix(in srgb, var(--c, var(--text-muted)) 10%, transparent); border-bottom: 1px solid var(--border-color); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c, var(--text-secondary)); height: 30px; }
.cola-blockhead .n { font-weight: 600; color: var(--text-muted); letter-spacing: 0; text-transform: none; margin-left: 8px; }

/* Prioridad: nombre y color en vez de «Prioridad 2» siempre en ámbar.
   Lo que se guarda en la base de datos no cambia (decisión 7). */
.cola-pr { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; color: var(--c, var(--text-muted)); }
.cola-pr::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--c, var(--text-muted)); }
.cola-pr-1 { --c: var(--cola-bad); }
.cola-pr-2 { --c: var(--cola-warn); }
.cola-pr-3 { --c: var(--text-secondary); }
.cola-pr-0 { --c: var(--text-muted); }

/* «En lista»: la barra se llena respecto al plazo de esa entrada, no por días
   absolutos. Quien no tiene prioridad no tiene barra, solo el número en gris. */
.cola-age { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.cola-age .bars { display: flex; gap: 2px; }
.cola-age .bars i { width: 4px; height: 12px; border-radius: 1px; background: var(--bg-input); }
.cola-age .bars i.f { background: var(--c); }
.cola-age b { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.78rem; color: var(--c, var(--text-secondary)); }
.cola-age .u { font-size: 0.66rem; color: var(--text-muted); font-weight: 500; }
.cola-age-0 { --c: var(--text-secondary); }
.cola-age-1 { --c: var(--cola-ok); }
.cola-age-2 { --c: var(--cola-warn); }
.cola-age-3 { --c: var(--cola-bad); }

/* Estado: la fecha del quirófano cuando ya la tiene (decisión 4) */
.cola-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; color: var(--c, var(--text-secondary)); background: color-mix(in srgb, var(--c, var(--text-muted)) calc(var(--cola-tint) * 100%), transparent); }
.cola-chip-fecha { --c: var(--cola-info); }
.cola-chip-ok { --c: var(--cola-ok); }
.cola-chip-pte { --c: var(--cola-warn); }
.cola-chip-live { --c: var(--cola-ok); }
.cola-muted { color: var(--text-muted); font-size: 0.74rem; }

/* Acciones: un botón directo (Programar) y el resto en el menú ⋯ (decisión 3b) */
.cola-rowbtns { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.cola-rbtn { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); cursor: pointer; }
.cola-rbtn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.cola-rbtn.primary { color: var(--accent-cyan); border-color: var(--border-highlight); background: color-mix(in srgb, var(--accent-cyan) 10%, transparent); }
.cola-rbtn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; }
.cola-rowmenu { position: absolute; z-index: 80; min-width: 190px; padding: 5px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); box-shadow: var(--shadow-lg); }
.cola-rowmenu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary); font-size: 0.78rem; font-weight: 600; text-align: left; cursor: pointer; font-family: inherit; }
.cola-rowmenu button:hover { background: var(--bg-input); }
.cola-rowmenu button.is-danger { color: var(--cola-bad); }

/* ── Vista «Avisos al busca» (sexta vista de la cola) ──────────────────────
   Decisión cerrada el 19 sept: ni plazos ni semáforos. Lo único con color es
   la etiqueta de prioridad y su carril; el resto de la fila es texto. */
.cola-rowmenu { max-width: 320px; }
.cola-rowmenu .cola-menunote { margin: 4px 6px 7px; font-size: 0.75rem; line-height: 1.45; color: var(--text-secondary); }
.cola-pr-a1 { --c: var(--cola-bad); }
.cola-pr-a2 { --c: var(--accent-cyan); }
.cola-pr-a3 { --c: var(--text-muted); }
.cola-rbtn.cita { color: var(--accent-cyan); border-color: color-mix(in srgb, var(--accent-cyan) 34%, transparent); background: color-mix(in srgb, var(--accent-cyan) 10%, transparent); }
.cola-rbtn.ing { color: var(--cola-ok); border-color: color-mix(in srgb, var(--cola-ok) 34%, transparent); background: color-mix(in srgb, var(--cola-ok) 10%, transparent); }
.cola-linkbtn { border: 0; background: transparent; color: var(--accent-cyan); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.cola-fpop-clear { width: 100%; height: 30px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.cola-fpop-clear:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* Anchos fijos: unas observaciones largas no pueden empujar fuera de la
   pantalla la columna de acciones. */
.cola-table.is-avisos { table-layout: fixed; width: 100%; }

/* El carril de prioridad a la izquierda de la fila, como en el Parte. */
.cola-table tr.cola-aviso > td:first-child { box-shadow: inset 3px 0 0 var(--c, transparent); }
.cola-table tr.cola-aviso.is-pr1 { --c: var(--cola-bad); }
.cola-table tr.cola-aviso.is-pr2 { --c: var(--accent-cyan); }
.cola-table tr.cola-aviso.is-pr3 { --c: var(--text-muted); }
.cola-table tr.cola-aviso.is-dropped > td:first-child { box-shadow: none; }
.cola-table tr.cola-aviso.is-dropped td { color: var(--text-muted); }
.cola-table tr.cola-aviso.is-dropped .cola-name { text-decoration: line-through; font-weight: 500; }
.cola-table tr.cola-aviso.is-open { background: color-mix(in srgb, var(--accent-cyan) 6%, transparent); }

.cola-table td.cola-chevcell { padding-left: 6px; padding-right: 0; text-align: center; }
.cola-expand { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; }
.cola-expand:hover { color: var(--text-primary); background: var(--bg-input); }
.cola-expand .icon-inline { transition: transform 0.16s ease; }
.cola-expand.is-open .icon-inline { transform: rotate(90deg); }

.cola-table .cola-obs { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); white-space: nowrap; }
.cola-table .cola-obs .icon-inline { color: var(--text-muted); flex: none; }
.cola-table .cola-noobs { font-style: italic; }

/* Estados del aviso: el mismo lenguaje de pastilla que el resto de la cola. */
.cola-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 0.73rem; font-weight: 700; white-space: nowrap; color: var(--c, var(--text-secondary)); background: color-mix(in srgb, var(--c, var(--text-muted)) 14%, transparent); }
.cola-st-wait { --c: var(--cola-warn); }
.cola-st-cita { --c: var(--accent-cyan); }
.cola-st-ing { --c: var(--cola-ok); }
.cola-st-drop { --c: var(--text-muted); }

/* La fila desplegada: observaciones enteras y el rastro del aviso. */
.cola-table tr.cola-aviso-exp > td { padding: 0 14px 14px 46px; background: color-mix(in srgb, var(--accent-cyan) 5%, transparent); white-space: normal; }
.cola-expbox { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1100px) { .cola-expbox { grid-template-columns: 1fr; } }
.cola-expbox h5 { margin: 0 0 5px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.cola-expbox p { margin: 0; font-size: 0.8rem; line-height: 1.6; color: var(--text-primary); }
.cola-trail { list-style: none; margin: 0; padding: 0; font-size: 0.77rem; color: var(--text-secondary); }
.cola-trail li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.cola-trail li .icon-inline { color: var(--text-muted); flex: none; }
.cola-trail b { color: var(--text-primary); }
.cola-daysep td { text-transform: none; letter-spacing: 0.04em; }

/* El punto del icono de la vista: solo dice «hay urgentes», no cuántos. */
.cuad-vbtn { position: relative; }
.cuad-vdot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cola-bad); box-shadow: 0 0 0 2px var(--bg-input); }

.cola-rowmenu hr { border: 0; border-top: 1px solid var(--border-color); margin: 4px 2px; }

/* Las cajas de las vistas por especialidad (Marcapasos, TAVI, TEVAR): la misma
   cabecera que las del Cuadrante -- chevron, título, subtítulo, mezcla en barra
   fina y contador a la derecha -- con la .cola-table de la cola dentro. */
/* La columna de cajas de una vista: la que scrollea es ella, no la página */
.cola-boxes { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 3px; }
.cola-boxes > * { flex: none; }
.cola-box { border: 1px solid var(--border-color); border-left: 3px solid var(--c, var(--border-color)); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; margin-bottom: 10px; }
.cola-box-head { display: flex; align-items: center; gap: 11px; padding: 9px 13px; cursor: pointer; }
.cola-box-head:hover { background: var(--bg-input); }
.cola-box-head:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }
.cola-box-id { min-width: 0; }
.cola-chev { flex: none; color: var(--text-muted); transition: transform var(--transition-fast); }
.cola-chev.is-closed { transform: rotate(-90deg); }
.cola-box-title { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: var(--c, var(--text-primary)); }
.cola-box-sub { font-size: 0.71rem; color: var(--text-muted); margin-top: 1px; }
.cola-box-mix { flex: 1; min-width: 60px; max-width: 320px; }
.cola-mixbar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--bg-input); }
.cola-mixlegend { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 5px; font-size: 0.65rem; color: var(--text-muted); }
.cola-mixlegend span { display: inline-flex; align-items: center; gap: 4px; }
.cola-mixlegend i { width: 7px; height: 7px; border-radius: 2px; }
.cola-box-count { margin-left: auto; flex: none; text-align: right; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cola-box-count small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cola-box-sec { display: flex; align-items: center; gap: 7px; padding: 6px 13px; border-top: 1px solid var(--border-color); font-size: 0.73rem; font-weight: 700; color: var(--c2, var(--text-secondary)); cursor: pointer; }
.cola-box-sec:hover { background: var(--bg-input); }
.cola-box-sec:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }
.cola-box-sec .n { color: var(--text-muted); font-weight: 600; }
.cola-box .cola-table th { background: transparent; border-top: 1px solid var(--border-color); }
.cola-box-empty { padding: 1.1rem 13px; text-align: center; color: var(--text-muted); font-size: 0.8rem; }
.cola-table .cola-dev { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; color: var(--c, var(--text-primary)); }
.cola-table .cola-sub2 { font-size: 0.75rem; color: var(--text-secondary); }
.cola-table .cola-via { font-weight: 600; color: var(--c, var(--text-primary)); }

/* Herramienta del hueco 3 con texto (Plegar todo) */
.cola-tbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; white-space: nowrap; cursor: pointer; font-family: inherit; transition: var(--transition-fast); }
.cola-tbtn:hover { color: var(--text-primary); border-color: var(--text-muted); }

@container cuadbar (max-width: 1000px) {
  .cola-count span { display: none; }
}

#work-session-history-list[hidden] { display: none; }

/* ==========================================================================
   LA FICHA QUIRÚRGICA (sq-*) Y LA SESIÓN DENTRO DE LA PANTALLA (wsx-*)
   La ficha la pinta renderSurgicalForm() y la comparten la sesión médico-
   quirúrgica y el menú «Nuevo paciente»: un solo lenguaje de campo.
   ========================================================================== */
.sq-form { display: grid; gap: 11px; }
.sq-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sq-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.sq-fld { display: grid; gap: 5px; min-width: 0; align-content: start; }
.sq-fld > span { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.sq-grp { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }
.sq-in { width: 100%; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); font-size: 0.82rem; font-family: inherit; }
.sq-in:focus { outline: 0; border-color: var(--border-highlight); }
textarea.sq-in { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.45; }
select.sq-in { cursor: pointer; }
.sq-tiles { display: grid; gap: 5px; }
.sq-tiles-2 { grid-template-columns: 1fr 1fr; }
.sq-tiles-3 { grid-template-columns: repeat(3, 1fr); }
.sq-tiles-4 { grid-template-columns: repeat(4, 1fr); }
.sq-tile { display: grid; place-items: center; align-content: center; min-height: 34px; padding: 3px 6px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font-size: 0.76rem; font-weight: 600; line-height: 1.15; cursor: pointer; font-family: inherit; text-align: center; transition: var(--transition-fast); }
.sq-tile:hover { color: var(--text-primary); }
.sq-tile small { display: block; font-size: 0.6rem; font-weight: 500; color: var(--text-muted); }
.sq-tile.is-on { border-color: var(--border-highlight); background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); color: var(--text-primary); }
.sq-tile.is-on small { color: var(--accent-cyan); }
.sq-box { display: grid; gap: 10px; padding: 11px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.sq-box[hidden] { display: none; }
.sq-box-t { display: flex; align-items: center; gap: 7px; font-size: 0.76rem; font-weight: 800; color: var(--c); }
.sq-sub { display: grid; gap: 6px; padding: 9px 10px; border-radius: 9px; border: 1px dashed var(--border-color); }
.sq-sub > span { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.sq-sub[hidden] { display: none; }
.sq-detect { display: flex; align-items: center; gap: 5px; min-height: 1em; font-size: 0.7rem; color: var(--cola-ok); }
.sq-rownum { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.sq-rownum .n { flex: none; width: 1.3rem; text-align: center; font-weight: 800; color: #6366f1; font-variant-numeric: tabular-nums; }
.sq-foot { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: var(--text-muted); }
.sq-grow { flex: 1; }
.sq-acc { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px dashed var(--border-color); background: transparent; color: var(--text-secondary); font-size: 0.76rem; font-weight: 600; text-align: left; cursor: pointer; font-family: inherit; }
.sq-acc:hover { color: var(--text-primary); border-color: var(--text-muted); }
.sq-acc .n { color: var(--text-muted); font-weight: 500; font-size: 0.7rem; }
.sq-acc .cola-chev { transition: transform var(--transition-fast); }
.sq-acc.is-open .cola-chev { transform: rotate(90deg); }
.sq-acc-body { display: grid; gap: 10px; padding: 10px 2px 2px; }
.sq-acc-body[hidden] { display: none; }

/* La sesión: línea de controles propia bajo la barra de la cola */
.wsx { margin-bottom: 0.9rem; }
.wsx[hidden] { display: none; }
.wsx-bar { display: flex; align-items: center; gap: 11px; padding: 9px 13px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.wsx-id { min-width: 0; }
.wsx-t1 { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; }
.wsx-t2 { margin-top: 2px; font-size: 0.72rem; color: var(--text-muted); }
.wsx-counters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.wsx-acts { display: flex; align-items: center; gap: 6px; }
.wsx-body { padding: 13px; display: grid; gap: 11px; }
.wsx-body[hidden] { display: none; }
.wsx-help { font-size: 0.78rem; color: var(--text-secondary); margin: 0; }
.wsx-acta { min-height: 320px; font-family: var(--font-body); line-height: 1.5; }
.wsx-tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wsx-tipo { display: grid; gap: 3px; justify-items: start; padding: 11px; border-radius: 11px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); cursor: pointer; font-family: inherit; text-align: left; transition: var(--transition-fast); }
.wsx-tipo:hover { border-color: var(--text-muted); }
.wsx-tipo b { font-size: 0.85rem; color: var(--text-primary); }
.wsx-tipo small { font-size: 0.68rem; color: var(--text-muted); }
.wsx-tipo > svg, .wsx-tipo > img { color: var(--c); opacity: 0.85; }
.wsx-tipo.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.wsx-tipo.is-on b { color: var(--c); }
.wsx-avs { display: flex; flex-wrap: wrap; gap: 5px; }
.wsx-av { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 3px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-input); font-size: 0.73rem; color: var(--text-primary); }
.wsx-av i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent-cyan) 22%, transparent); color: var(--accent-cyan); font-size: 0.62rem; font-weight: 800; font-style: normal; }
.wsx-av.is-empty { padding: 0 10px; border-style: dashed; color: var(--text-muted); cursor: pointer; font-family: inherit; font-weight: 600; gap: 5px; }
.wsx-av.is-empty:hover { color: var(--text-primary); border-color: var(--text-muted); }
.wsx-cols { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 0; min-height: 52vh; }
.wsx-cols[hidden] { display: none; }
.wsx-col { padding: 13px; min-width: 0; overflow-y: auto; max-height: 72vh; }
.wsx-col + .wsx-col { border-left: 1px solid var(--border-color); }
.wsx-col[hidden] { display: none; }
.wsx-col h5 { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.wsx-col h5 .n { padding: 1px 7px; border-radius: 999px; background: var(--bg-input); color: var(--text-secondary); font-size: 0.66rem; letter-spacing: 0; text-transform: none; }
.wsx-vacio { font-size: 0.8rem; color: var(--text-muted); }
.wsx-pcard { display: grid; gap: 5px; padding: 9px 11px; margin-bottom: 7px; border-radius: 10px; border: 1px solid var(--border-color); border-left: 3px solid var(--c, var(--border-color)); background: var(--bg-input); cursor: pointer; transition: var(--transition-fast); }
.wsx-pcard:hover { border-color: var(--text-muted); border-left-color: var(--c); }
.wsx-pcard.is-on { background: color-mix(in srgb, var(--accent-cyan) 10%, transparent); border-color: var(--border-highlight); border-left-color: var(--c); }
.wsx-pcard-r1 { display: flex; align-items: center; gap: 8px; }
.wsx-pcard-r1 .nm { font-weight: 700; font-size: 0.83rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsx-pcard-r1 .ag { font-size: 0.72rem; color: var(--text-muted); margin-left: auto; flex: none; }
.wsx-pcard-r2 { font-size: 0.74rem; color: var(--text-secondary); }
.wsx-pcard-r3 { display: flex; flex-wrap: wrap; gap: 5px; }
.wsx-ficha-foot { display: flex; align-items: center; gap: 7px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border-color); }
.wsx-ficha-msg { flex: 1; font-size: 0.76rem; font-weight: 600; color: var(--cola-bad); }
.wsx-confirm { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-bottom: 1px solid var(--border-color); background: color-mix(in srgb, var(--cola-warn) 12%, transparent); }
.wsx-confirm[hidden] { display: none; }
.wsx-confirm > svg { color: var(--cola-warn); flex: none; }
.wsx-confirm-text { flex: 1; min-width: 0; }
.wsx-confirm-text b { display: block; font-size: 0.83rem; }
.wsx-confirm-text span { font-size: 0.76rem; color: var(--text-secondary); }
.wsx-confirm-acts { display: flex; gap: 6px; flex: none; }

/* En pantalla estrecha la ficha se apila: la rejilla de tres no cabe y lo que
   pasaba era que los campos se salían por la derecha. */
@media (max-width: 760px) {
  .sq-g2, .sq-g3 { grid-template-columns: 1fr; }
  .sq-tiles-3, .sq-tiles-4 { grid-template-columns: 1fr 1fr; }
  .np-head { flex-wrap: wrap; }
  .np-head h3 { font-size: 0.98rem; }
  .np-lead { display: none; }
  .np-box-head { gap: 0.4rem; }
  .np-foot { flex-wrap: wrap; }
  .np-foot .np-resumen { order: -1; flex-basis: 100%; }
  .wsx-tipos { grid-template-columns: 1fr; }
  .wsx-bar { gap: 8px; }
}

@media (max-width: 1100px) {
  .wsx-cols { grid-template-columns: 1fr; }
  .wsx-col + .wsx-col { border-left: 0; border-top: 1px solid var(--border-color); }
  .wsx-tipos { grid-template-columns: 1fr 1fr; }
}

/* La lista de sesiones: filas dentro del mismo panel que el resto de la
   pestaña, con la etiqueta de estado delante. En curso primero, y las cerradas
   agrupadas por año. */
.wses-group { padding: 10px 14px 5px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.wses-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--border-color); }
.wses-group + .wses-row { border-top: 0; }
.wses-main { flex: 1; min-width: 0; }
.wses-t1 { font-weight: 600; font-size: 0.84rem; }
.wses-t2 { margin-top: 2px; font-size: 0.72rem; color: var(--text-muted); }
.wses-actions { display: flex; gap: 6px; flex: none; }
.wses-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); font-size: 0.76rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: var(--transition-fast); }
.wses-btn:hover { border-color: var(--border-highlight); background: var(--bg-secondary); }
.wses-btn.primary { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.wses-empty { padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.82rem; }

/* ==========================================================================
   CENSO · el módulo entero (cen-*)
   --------------------------------------------------------------------------
   Sustituye a la cabecera antigua (título + tres botones de texto + dos
   botones sueltos + un <select> nativo) y a los estilos en línea que pintaba
   renderCenso dentro del JavaScript. La barra, el selector de vista y los
   botones de acción son los mismos de siempre (.cuad-bar, .cuad-views,
   .cuad-ibtn, .cola-search, .cola-fpill): aquí sólo vive lo que es propio del
   Censo.
   ========================================================================== */

/* Hueco 1: el buscador del censo, y nada más. El recuento de ingresados ya lo
   abre la tira de resumen de debajo (.cen-summary), así que aquí sobraba: se
   caía a una segunda fila y dejaba la barra del doble de alto. */
.cen-bar-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* Hueco 3: las herramientas de cada vista */
.cen-bar-tools { grid-column: 3; display: flex; align-items: center; gap: 8px; min-width: 0; }

/* La tira de resumen, debajo de la barra: lo que antes había que contar a ojo
   columna por columna. */
.cen-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 9px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); font-size: 0.76rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.cen-summary:empty { display: none; }
.cen-summary i { font-style: normal; color: var(--border-color); }
.cen-summary b { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-right: 3px; }
.cen-summary .crit b { color: #f87171; }
.cen-summary .warn b { color: #fbbf24; }

/* Cabecera de columna: icono en su color, nombre, subtítulo y contador */
.cen-colhead { display: flex; align-items: center; gap: 8px; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; margin-bottom: 0.65rem; }
.cen-colhead .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--cen-c, var(--accent-cyan)) 15%, transparent); color: var(--cen-c, var(--accent-cyan)); }
.cen-colhead h3 { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 800; letter-spacing: 0.01em; min-width: 0; }
.cen-colhead h3 small { display: block; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cen-colhead .n { margin-left: auto; flex: none; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cen-c, var(--accent-cyan)); background: color-mix(in srgb, var(--cen-c, var(--accent-cyan)) 13%, transparent); border: 1px solid color-mix(in srgb, var(--cen-c, var(--accent-cyan)) 32%, transparent); border-radius: 999px; padding: 1px 9px; }

/* Hueco vacío: es una zona de soltar, y lo dice */
.cen-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; text-align: center; border: 1px dashed var(--border-color); border-radius: var(--radius-md); color: var(--text-muted); font-size: 0.76rem; }
.cen-empty svg { opacity: 0.55; }
.cen-empty--sm { padding: 10px; }

/* El pie de la tarjeta: la ubicación a la izquierda (información) y a la
   derecha los tres controles (acción). */
.cen-cardfoot { display: flex; align-items: center; gap: 6px; margin-top: 0.55rem; padding-top: 0.45rem; border-top: 1px solid var(--border-color); }
.cen-cardfoot .bed { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 0.72rem; color: var(--text-secondary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La zona del curso quirúrgico alterna entre la lista de episodios y la barra
   del recorrido. Se enciende al pasar por encima para que se note que es
   pulsable, y el aviso sólo aparece entonces: con 40 tarjetas en pantalla, 40
   etiquetas fijas serían ruido. */
.cen-qx {
  position: relative; margin: 0 -0.3rem; padding: 0.2rem 0.3rem 0.1rem; border-radius: 8px;
  cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease;
}
.cen-qx--single { cursor: default; margin: 0; padding: 0.2rem 0 0.1rem; }
.cen-qx:not(.cen-qx--single):hover, .cen-qx:focus-visible {
  background: color-mix(in srgb, var(--accent-cyan) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-cyan) 30%, transparent);
  outline: none;
}
.cen-qx-hint {
  position: absolute; top: -9px; right: 4px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 3px;
  font: 700 0.6rem var(--font-sans); letter-spacing: 0.02em; white-space: nowrap;
  color: var(--accent-cyan); background: var(--bg-card-solid);
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 35%, transparent);
  border-radius: 999px; padding: 1px 7px;
  opacity: 0; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease;
}
.cen-qx--single .cen-qx-hint { display: none; }
.cen-qx:hover .cen-qx-hint, .cen-qx:focus-visible .cen-qx-hint { opacity: 1; transform: none; }
.cen-qx .tl { padding: 0.15rem 0 0.1rem; }

.cen-cardacts { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.cen-act { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity 0.14s, color 0.14s, background 0.14s, border-color 0.14s; }
.cen-act:hover { color: var(--text-primary); background: var(--bg-input); border-color: var(--border-color); }
.cen-act.danger:hover { color: #f87171; border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.1); }
/* Los iconos salen al pasar el ratón; en pantalla táctil no existe "pasar el
   ratón", así que allí están siempre. La píldora de la fecha (.cen-schedchip)
   nunca se esconde: es información, no sólo un botón. */
.patient-card:hover .cen-act,
.patient-card-compact:hover .cen-act,
.cen-act:focus-visible { opacity: 1; }
@media (hover: none) { .cen-act { opacity: 1; } }

/* La cirugía puesta: fecha y quirófano, en el tono de ese quirófano */
.cen-schedchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--rc, #10b981) 55%, transparent); background: color-mix(in srgb, var(--rc, #10b981) 18%, transparent); color: var(--rc, #10b981); font-family: inherit; font-size: 0.7rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.cen-schedchip:hover { background: color-mix(in srgb, var(--rc, #10b981) 30%, transparent); }

/* Días de estancia: el número por el que se ordena la columna */
.cen-days { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border-color); white-space: nowrap; }
.cen-days.long { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.12); }

/* ---- Tarjeta entera del censo -----------------------------------------
   Nombre con la edad y el sexo (una sola vez), diagnóstico con las etiquetas
   en su esquina, y las cirugías con su EuroSCORE. La fila que había entre el
   nombre y el diagnóstico -- edad repetida y EuroSCORE del paciente -- ya no
   existe. */
.cen-full .cen-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin-bottom: 0.3rem; }
.cen-full .cen-hd .nm { font-weight: 800; font-size: 0.95rem; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cen-full .cen-hd .nm small { font-size: 0.78rem; font-weight: 700; opacity: 0.8; }
.cen-full .cen-hd .right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }

.cen-full .cen-dxrow { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.2rem; }
.cen-full .cen-dxrow .dx { flex: 1 1 55%; min-width: 55%; font-size: 0.82rem; font-weight: 600; color: var(--accent-cyan); }
/* Las etiquetas no pueden comerse el diagnóstico: con varias bajan de fila
   dentro de su esquina, de ahí el tope de ancho. */
.cen-full .cen-dxrow .tg { flex: 0 1 auto; max-width: 45%; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem; }
.cen-tagmore { background: var(--bg-input) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-color) !important; font-weight: 800; cursor: default; }

/* Las cirugías: la última manda, la primera queda de contexto */
.cen-full .cen-proc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-bottom: 0.35rem; color: #d946ef; }
.cen-full .cen-proc--stack { flex-direction: column; align-items: flex-start; gap: 1px; }
.cen-full .cen-proc .last { font-size: 0.76rem; font-weight: 800; }
.cen-full .cen-proc .prev { font-size: 0.66rem; font-weight: 700; opacity: 0.58; }

/* EuroSCORE II: de la cirugía, no del paciente */
.cen-es { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 35%, transparent);
  background: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
  color: var(--accent-cyan); font-size: 0.66rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cen-es i { font-style: normal; font-size: 0.56rem; font-weight: 700; opacity: 0.7; }
.cen-es.sm { padding: 0 5px; font-size: 0.58rem; border-color: color-mix(in srgb, var(--accent-cyan) 22%, transparent); }

/* Sobre el blanco del preoperatorio */
.cen-full.preop-card .cen-dxrow .dx { color: #0284c7; }
.cen-full.preop-card .cen-proc { color: #c026d3; }
.cen-full.preop-card .cen-es { color: #0369a1; border-color: rgba(2, 132, 199, 0.4); background: rgba(2, 132, 199, 0.1); }
/* El pie se parte antes que recortar la cama (igual que la tarjeta compacta) */
.cen-full .cen-cardfoot { flex-wrap: wrap; row-gap: 5px; }

/* Tarjeta compacta: dos líneas, para los días de censo lleno */
.patient-card.cen-compact { padding: 0.42rem 0.55rem; display: flex; flex-direction: column; gap: 3px; }
.cen-compact .r1 { display: flex; align-items: center; gap: 6px; }
.cen-compact .nm { font-weight: 800; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cen-compact .nm small { font-weight: 500; font-size: 0.72rem; color: var(--text-secondary); }
.cen-compact .r1 .right, .cen-compact .r2 .right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
/* La segunda línea se parte antes que recortar: en «La provincia» la columna
   es estrecha y cama + días + la píldora de la fecha + los tres botones no
   caben de una tirada (hacían falta hasta 444 px sobre 300 disponibles, y los
   botones se salían de la tarjeta). Al partirse, el grupo de la derecha baja
   entero a su propia línea. */
.cen-compact .r2 { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; gap: 6px; font-size: 0.7rem; min-width: 0; }
/* El diagnóstico manda en la segunda línea: la ubicación y los días ceden
   sitio antes que él (si no, una cama con nombre largo -- "Planta
   Postoperatorio" -- dejaba el diagnóstico en una letra y puntos suspensivos). */
.cen-compact .dg { flex: 1 1 auto; min-width: 45%; color: var(--accent-cyan); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cen-compact .r2 .right .bedtxt { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cen-compact .r2 .right { color: var(--text-muted); }
.cen-compact .badge { font-size: 0.58rem !important; padding: 0.05rem 0.3rem !important; }
.cen-compact .cen-schedchip { height: 19px; padding: 0 6px; font-size: 0.63rem; }
.cen-compact .cen-days { height: 18px; font-size: 0.62rem; }
.cen-compact .cen-act { width: 22px; height: 22px; border-radius: 6px; }
.cen-compact.preop-card .dg { color: #0284c7; }
.cen-compact.preop-card .nm, .cen-compact.preop-card .nm small { color: #0f172a; }

/* Vista «La provincia»: una caja por hospital dentro de la columna del área */
.cen-hosp { border: 1px solid var(--border-color); border-left: 3px solid var(--cen-c, var(--accent-cyan)); border-radius: var(--radius-md); background: var(--bg-input); padding: 0.55rem; }
.cen-hosp + .cen-hosp { margin-top: 0.55rem; }
.cen-hosphead { display: flex; align-items: center; gap: 7px; margin-bottom: 0.4rem; font-size: 0.76rem; font-weight: 700; color: var(--text-primary); }
.cen-hosphead .n { margin-left: auto; font-size: 0.7rem; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Vistas «En casa» y «Marcapasos»: mosaico, no columnas */
.cen-board-flat { display: block; grid-auto-rows: auto; }
.cen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.7rem; }
.cen-groupttl { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 9px; }
.cen-groupttl:first-child { margin-top: 2px; }
.cen-groupttl::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.cen-grid--mp { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 0.6rem; }
.cen-card-casa { border-left: 3px solid #a855f7 !important; }
.cen-badge-casa { background: rgba(168, 85, 247, 0.18); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); font-size: 0.64rem; font-weight: 800; white-space: nowrap; }

/* La tarjeta de «Marcapasos»: pequeña, cinco líneas contadas. Toma del resto
   del censo el color de estado (.preop-card, .scheduled-card, .uci-card...),
   los botones del pie y la píldora de la fecha; lo suyo es la caja naranja del
   dispositivo con el logo de la casa comercial. */
.patient-card.cen-mpcard { padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 4px; }
.cen-mpcard .r1 { display: flex; align-items: center; gap: 6px; }
.cen-mpcard .nm { font-weight: 800; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cen-mpcard .nm small { font-weight: 500; font-size: 0.72rem; color: var(--text-secondary); }
.cen-mpcard .r1 .right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.cen-mpcard .badge { font-size: 0.58rem !important; padding: 0.05rem 0.3rem !important; }
.cen-mpcard .dg { font-size: 0.72rem; font-weight: 600; color: var(--accent-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cen-mpcard .dev { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0.25rem 0.4rem; border-radius: 7px; background: rgba(249, 115, 22, 0.12); border: 1px solid rgba(249, 115, 22, 0.32); color: #fb923c; font-size: 0.7rem; font-weight: 800; }
.cen-mpcard .devtxt { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cen-mpcard .st { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; color: #10b981; }
.cen-mpcard .st.pend { color: #fbbf24; }
.cen-mpcard .cen-cardfoot { margin-top: 1px; padding-top: 5px; flex-wrap: wrap; row-gap: 5px; }
.cen-mpcard .cen-cardfoot .bed { gap: 6px; font-size: 0.68rem; }
/* Con la píldora de la fecha puesta no caben cama y botones en la misma línea:
   antes que recortar la cama a «Planta 3 · ...», los botones bajan. */
.cen-mpcard .bedtxt { display: inline-block; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cen-mpcard .cen-days { height: 18px; font-size: 0.62rem; }
.cen-mpcard .cen-act { width: 22px; height: 22px; border-radius: 6px; }
.cen-mpcard .cen-schedchip { height: 20px; padding: 0 6px; font-size: 0.64rem; }
/* Sobre el blanco del preoperatorio el naranja y el ámbar no se leen */
.cen-mpcard.preop-card .dg { color: #0284c7; }
.cen-mpcard.preop-card .nm small, .cen-mpcard.preop-card .cen-cardfoot .bed { color: #475569; }
.cen-mpcard.preop-card .dev { color: #c2410c; background: rgba(249, 115, 22, 0.14); border-color: rgba(249, 115, 22, 0.45); }
.cen-mpcard.preop-card .st.pend { color: #b45309; }

/* El menú de salida del censo: anclado al icono, nunca un confirm() nativo */
.cen-menu { position: fixed; z-index: 1200; width: 248px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); padding: 5px; }
.cen-menu[hidden] { display: none; }
.cen-menu-ttl { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); padding: 7px 9px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cen-menu button { width: 100%; display: flex; align-items: flex-start; gap: 9px; padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font-family: inherit; font-size: 0.79rem; font-weight: 600; text-align: left; cursor: pointer; }
.cen-menu button svg { flex: none; margin-top: 1px; }
.cen-menu button small { display: block; font-size: 0.66rem; font-weight: 500; color: var(--text-muted); margin-top: 1px; }
.cen-menu button:hover { background: var(--bg-input); }
.cen-menu button.danger:hover { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.cen-menu button.danger:hover small { color: #fca5a5; }
.cen-menu hr { border: 0; border-top: 1px solid var(--border-color); margin: 4px 6px; }

/* Barra estrecha: las herramientas se aprietan antes que nada, igual que en la
   cola. */
@container cuadbar (max-width: 1080px) {
  .cen-bar-tools { gap: 5px; }
}

/* --- Parrilla de iconos (editor de localizaciones del cuadrante) ----------
   El pool entero de core/icon-pool.js a la vista, agrupado y con buscador,
   en lugar del desplegable de cinco opciones que había antes. Alto fijo con
   desplazamiento propio: el modal no puede crecer más que la pantalla. */
.icon-pool-grid {
  max-height: 208px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}
.icon-pool-group + .icon-pool-group { margin-top: 10px; }
.icon-pool-group-title {
  margin: 0 0 6px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.icon-pool-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 5px; }
.icon-pool-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.icon-pool-item:hover { background: var(--bg-input); color: var(--text-primary); }
/* El elegido se tiñe de cian sobre el fondo de la parrilla: con el fondo de
   los selectores segmentados, en modo claro quedaba blanco sobre casi blanco. */
.icon-pool-item.selected {
  background: color-mix(in srgb, var(--accent-cyan) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent-cyan) 55%, transparent);
  color: var(--accent-cyan);
}
.icon-pool-item svg { pointer-events: none; }
.icon-pool-empty { margin: 6px 2px; font-size: 0.76rem; color: var(--text-muted); }

/* ==========================================================================
   EL BUSCADOR DE DIAGNÓSTICO E INTERVENCIÓN (core/buscador-catalogo.js)
   --------------------------------------------------------------------------
   Sustituye al buscador mínimo de la ficha quirúrgica (.sq-cat-sug): mismo
   sitio --colgando del campo-- pero con teclado, códigos, por qué ha salido
   cada ficha y la salida «tal cual» a la vista. Y lo que de verdad cambia:
   elegir una ficha ya no borra lo escrito, así que debajo del campo caben las
   dos cosas, tu texto y la ficha a la que queda enganchado.
   ========================================================================== */
.bc-campo { position: relative; display: block; }
.sq-fld { position: relative; }
.bc-campo input { width: 100%; }
.bc-sello {
  /* Centrado en el alto del campo: con bottom fijo se pegaba arriba en los
     campos bajos (.pp-input.sm del lateral del Parte). */
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px;
  line-height: 1.3;
  font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 1px 4px 1px 8px; white-space: nowrap;
  pointer-events: auto;
}
.bc-sello.cat { color: var(--accent-cyan); background: rgba(6, 182, 212, 0.12); border: 1px solid rgba(6, 182, 212, 0.35); }
.bc-sello.libre { color: #f59e0b; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.35); padding-right: 8px; }
.bc-sello .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.bc-sello button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 2px; line-height: 1; font-size: 0.8rem; opacity: 0.7; }
.bc-sello button:hover { opacity: 1; }
/* Mientras se escribe no se avisa de «texto libre»: se avisa al salir. */
.bc-campo:focus-within .bc-sello.libre { display: none; }

.bc-debajo { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }
.bc-debajo:empty { margin-top: 0; }
.bc-debajo b { color: var(--text-secondary); font-weight: 600; }
.bc-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.bc-linea .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bc-linea button {
  border: 0; background: none; padding: 0; font: inherit; font-size: 0.7rem;
  color: var(--accent-cyan); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.bc-linea.sub { color: var(--text-muted); margin-top: 2px; }
.bc-ojo { color: #f59e0b; font-weight: 700; }

.bc-sug {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 3px);
  min-width: 100%; width: max(100%, 460px); max-width: 92vw;
  background: var(--bg-secondary); border: 1px solid var(--accent-cyan); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); padding: 5px; max-height: 340px; overflow-y: auto;
}
.bc-sug-t { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 5px 8px 4px; }
.bc-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 7px; padding: 7px 9px; color: var(--text-primary); font: inherit; cursor: pointer;
}
.bc-fila.on, .bc-fila:hover { background: var(--bg-hover); }
.bc-fila.on { box-shadow: inset 2px 0 0 var(--accent-cyan); }
.bc-fila .nm { font-size: 0.84rem; font-weight: 600; }
.bc-fila .nm mark { background: none; color: var(--accent-cyan); font-weight: 800; }
.bc-fila .cod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.74rem; color: var(--text-secondary); align-self: center; }
.bc-fila .meta { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 0.7rem; color: var(--text-muted); }
.bc-fila .meta .por { color: var(--accent-cyan); }
.bc-fila .meta .cec { font-weight: 800; font-size: 0.62rem; color: #04222b; background: var(--accent-cyan); border-radius: 4px; padding: 0 4px; }
.bc-libre { border-top: 1px solid var(--border-color); margin-top: 4px; padding-top: 8px; }
.bc-libre .meta { color: #f59e0b; }
.bc-sug-pie { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.66rem; color: var(--text-muted); padding: 6px 8px 3px; border-top: 1px solid var(--border-color); margin-top: 4px; }
.bc-sug kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.68rem; border: 1px solid var(--border-color);
  border-bottom-width: 2px; border-radius: 5px; padding: 0 4px; background: var(--bg-card);
}

/* El abordaje, solo cuando la intervención tiene más de uno */
.bc-abordaje { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; font-size: 0.72rem; color: var(--text-muted); }
.bc-abordaje button {
  border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary);
  border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 0.72rem; cursor: pointer;
}
.bc-abordaje button.on { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(6, 182, 212, 0.1); font-weight: 700; }

/* Varias intervenciones en el mismo acto: cada ficha, una pastilla */
.bc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; align-items: center; }
.bc-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-secondary);
  padding: 4px 6px 4px 11px; font-size: 0.78rem;
}
.bc-chip.principal { border-color: var(--accent-cyan); }
.bc-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-chip .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; color: var(--text-muted); }
.bc-chip .bc-chip-ab { font-size: 0.68rem; color: var(--text-secondary); border-left: 1px solid var(--border-color); padding-left: 7px; }
.bc-chip .bc-tag-p {
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-cyan); background: rgba(6, 182, 212, 0.14); border-radius: 999px; padding: 1px 6px;
}
.bc-chip button { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0 4px; }
.bc-chip button:hover { color: #ef4444; }
.bc-mas { border: 1px dashed var(--border-color); background: none; color: var(--accent-cyan); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.bc-mas:hover { border-color: var(--accent-cyan); }

/* El texto que se leerá: se compone de las fichas y se puede retocar */
.bc-visible { margin-top: 10px; }
.bc-visible label { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.bc-visible-fila { display: flex; align-items: center; gap: 8px; }
.bc-visible input {
  flex: 1; min-width: 0; height: 34px; border-radius: 9px; padding: 0 10px; font: inherit; font-size: 0.85rem;
  background: var(--bg-input); color: var(--text-primary); border: 1px dashed var(--border-strong);
}
.bc-visible input:focus { outline: 0; border-style: solid; border-color: var(--accent-cyan); }
.bc-visible button { border: 0; background: none; color: var(--accent-cyan); font: inherit; font-size: 0.7rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.bc-visible p { margin: 4px 0 0; font-size: 0.7rem; color: var(--text-muted); }

/* En la carpeta caben las dos cosas enteras: el texto que se escribió y, en
   pequeño, de qué ficha del catálogo es. */

/* Lo que más se combina: el ranking de parejas del gráfico de intervenciones.
   Una categoría nueva por cada combinación no sirve --hay infinitas--, pero
   saber cuáles se repiten sí. */
.an-parejas { margin-top: 14px; border-top: 1px solid var(--border-color); padding-top: 10px; }
.an-parejas h5 { margin: 0 0 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.an-parejas div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; padding: 2px 0; color: var(--text-secondary); }
.an-parejas b { color: var(--text-primary); }

/* El código, al lado del texto: en la tarjeta del censo, en el parte, en la
   cola y en la carpeta. El nombre del catálogo va en el title. */
.eiren-cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; font-weight: 600; white-space: nowrap;
  color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 5px; padding: 0 4px; margin-left: 5px;
}

/* ==========================================================================
   PARTE · Modo selección: personal a varias cirugías (app.js::parteSel)
   Las tarjetas se seleccionan (fondo y borde cian) en vez de arrastrarse, y
   el lateral de Candidatos se cambia por «Personal quirúrgico».
   ========================================================================== */
#btn-parte-seleccion.is-on { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #06222b; }
#btn-parte-seleccion.is-on:hover { filter: brightness(1.08); }
#btn-parte-seleccion.is-on svg { color: #06222b; stroke: #06222b; }

#tab-parte.psel-mode .weekly-table .pqc-card { cursor: pointer !important; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s; }
/* Toda la tarjeta es el blanco del clic: sus botones (turno, hora, Operado,
   equipo, destino...) no responden en este modo. */
#tab-parte.psel-mode .weekly-table .pqc-card * { pointer-events: none; }
#tab-parte.psel-mode .weekly-table .pqc-card .btn-card-remove { visibility: hidden; }
#tab-parte.psel-mode .weekly-table .pqc-card[data-psel-id]:hover { border-color: rgba(34, 211, 238, 0.55); }
#tab-parte.psel-mode .weekly-table .pqc-card.psel-sel {
  background: color-mix(in srgb, var(--accent-cyan) 16%, var(--bg-card)) !important;
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 1px var(--accent-cyan), 0 4px 14px -6px rgba(34, 211, 238, 0.55);
}
#tab-parte.psel-mode .weekly-table .pqc-card.psel-sel.pqc-card--unavail { box-shadow: 0 0 0 1px var(--accent-cyan), inset 3px 0 0 rgba(239, 68, 68, 0.9); }
#tab-parte.psel-mode .weekly-table .pqc-card--suspended { opacity: 0.45; cursor: not-allowed !important; }
@keyframes psel-flash { 0% { box-shadow: 0 0 0 2px #34d399; } 100% { box-shadow: 0 0 0 1px var(--accent-cyan); } }
#tab-parte.psel-mode .weekly-table .pqc-card.psel-flash { animation: psel-flash 0.7s ease-out; }
#tab-parte.psel-mode #parte-weekly-container { cursor: crosshair; user-select: none; -webkit-user-select: none; }
.psel-marquee { position: fixed; z-index: 2000; pointer-events: none; border: 1px solid var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); border-radius: 4px; }

/* El lateral: fuera los candidatos, dentro el panel de personal. */
#tab-parte.psel-mode #or-sidebar-dropzone > :not(#parte-team-panel) { display: none !important; }
#tab-parte.psel-mode .parte-drawer-toggle { display: none !important; }
#tab-parte.psel-mode #or-sidebar-dropzone { padding: 0; }

.pteam { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pteam[hidden] { display: none; }
.pteam.is-busy .pteam-list, .pteam.is-busy .pteam-roles { opacity: 0.6; pointer-events: none; }
.pteam-head { color: var(--accent-cyan); }
.pteam-close { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: var(--text-secondary); cursor: pointer; }
.pteam-close:hover { background: var(--bg-input); color: var(--text-primary); }
.pteam-selbar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border-color); font-size: 0.74rem; color: var(--text-secondary); }
.pteam-selbar b { color: var(--text-primary); font-size: 0.8rem; white-space: nowrap; }
.pteam-days { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pteam-clear { border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font: inherit; font-size: 0.7rem; font-weight: 600; border-radius: 7px; padding: 3px 8px; cursor: pointer; }
.pteam-clear:hover:not([disabled]) { color: var(--text-primary); border-color: var(--border-highlight); }
.pteam-clear[disabled] { opacity: 0.4; cursor: default; }
.pteam-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); }
.pteam-role { --rc: var(--accent-cyan); text-align: left; border: 1px solid var(--border-color); border-top: 2px solid var(--rc); background: var(--bg-input); color: var(--text-primary); border-radius: 8px; padding: 5px 8px 6px; cursor: pointer; font: inherit; min-width: 0; }
.pteam-role:hover { border-color: var(--border-highlight); border-top-color: var(--rc); }
.pteam-role.on { background: color-mix(in srgb, var(--rc) 16%, var(--bg-input)); border-color: var(--rc); }
.pteam-role-code { display: block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; color: var(--rc); }
.pteam-role-val { display: block; font-size: 0.72rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pteam-role-val.is-empty, .pteam-role-val.is-mixed { color: var(--text-secondary); font-weight: 500; }
.pteam-role-val.is-mixed { font-style: italic; }
.pteam-search { margin: 10px 12px 6px; }
.pteam-list { flex: 1; min-height: 0; overflow: auto; padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.pteam-group { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 8px 6px 4px; }
.pteam-person { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1px solid transparent; background: none; color: var(--text-primary); font: inherit; border-radius: 9px; padding: 6px 7px; cursor: pointer; }
.pteam-person:hover:not([disabled]) { background: var(--bg-input); border-color: var(--border-color); }
.pteam-person[disabled] { cursor: not-allowed; opacity: 0.6; }
.pteam-pbody { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pteam-pname { font-size: 0.8rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pteam-psub { font-size: 0.68rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.pteam-psub.is-away { color: #f87171; }
.pteam-psub svg { width: 12px; height: 12px; flex-shrink: 0; }
.pteam-in { flex-shrink: 0; font-size: 0.66rem; font-weight: 800; color: var(--accent-cyan); border: 1px solid var(--border-highlight); border-radius: 999px; padding: 1px 7px; }
.pteam-in.is-all { background: var(--accent-cyan); color: #06222b; border-color: var(--accent-cyan); }
.pteam-foot { border-top: 1px solid var(--border-color); padding: 9px 12px; display: flex; flex-direction: column; gap: 8px; }
.pteam-remove { border: 1px dashed var(--border-color); background: none; color: var(--text-secondary); font: inherit; font-size: 0.74rem; font-weight: 600; border-radius: 8px; padding: 6px; cursor: pointer; }
.pteam-remove:hover:not([disabled]) { color: #f87171; border-color: rgba(239, 68, 68, 0.5); }
.pteam-remove[disabled] { opacity: 0.4; cursor: default; }
.pteam-done { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; border-radius: 8px; padding: 7px 9px; background: rgba(52, 211, 153, 0.12); color: #059669; }
[data-theme="dark"] .pteam-done { color: #34d399; }
.pteam-done.is-warn { background: rgba(245, 158, 11, 0.12); color: #b45309; }
[data-theme="dark"] .pteam-done.is-warn { color: #f59e0b; }
.pteam-done span { flex: 1; min-width: 0; }
.pteam-done button { border: 0; background: none; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 0; }
.pteam.is-empty .pteam-roles, .pteam.is-empty .pteam-list, .pteam.is-empty .pteam-search { opacity: 0.45; pointer-events: none; }

/* Portátil / iPad: ahí Candidatos es un cajón flotante que taparía el parte.
   En el modo, el panel de personal se acopla a la derecha como columna. */
@media (min-width: 481px) and (max-width: 1500px) {
  #tab-parte.psel-mode .or-planner-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0.75rem; }
  #tab-parte.psel-mode .or-planner-layout > .or-sidebar {
    position: static; order: 2; visibility: visible; width: auto; right: auto; height: 100%;
    box-shadow: none; transition: none;
  }
  #tab-parte.psel-mode .or-planner-layout > .weekly-schedule-container { order: 1; }
}
/* En el móvil el Parte es de consulta: sin modo selección. */
@media (max-width: 480px) { #btn-parte-seleccion { display: none !important; } }

/* ==========================================================================
   IMPORTAR LA LISTA DEL RDQ (#modal-importar-cola)
   --------------------------------------------------------------------------
   Reutiliza el armazón del menú de alta (.np-modal: cabecera, cuerpo con
   scroll y pie con las acciones) y solo añade lo suyo: la zona donde se suelta
   el archivo, el resumen de lo leído y la tabla de qué va a pasar con cada
   fila. Los colores salen de las mismas variables que el resto de la cola, así
   que el modo claro y el oscuro se resuelven solos.
   ========================================================================== */
.imp-modal { max-width: 940px; }

.imp-zona { margin-bottom: 0.85rem; }
.imp-zona.file-drop-zone { flex-direction: column; gap: 0.25rem; text-align: center; }
.imp-zona.file-drop-zone strong { font-size: 0.92rem; color: var(--text-primary); }
.imp-zona.file-drop-zone span { font-size: 0.76rem; color: var(--text-secondary); }
.imp-zona-espera,
.imp-zona-hecha {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); background: var(--bg-input);
  font-size: 0.82rem; color: var(--text-primary);
}
.imp-zona-hecha span { flex: 1; font-weight: 600; }
.imp-zona-hecha .btn-secondary { padding: 0.25rem 0.6rem; font-size: 0.74rem; }

.imp-error {
  margin: 0 0 0.8rem; padding: 0.55rem 0.7rem;
  border: 1px solid rgba(239, 68, 68, 0.45); border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.1); color: var(--text-primary); font-size: 0.8rem;
}

.imp-resumen {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 0.6rem; font-size: 0.82rem; color: var(--text-secondary);
}
.imp-resumen b { font-size: 0.95rem; color: var(--text-primary); }

.imp-chip {
  display: inline-flex; align-items: center; padding: 0.1rem 0.45rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--border-color); color: var(--text-secondary);
}
.imp-ok { border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.12); color: #15803d; }
.imp-warn { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.12); color: #b45309; }
.imp-bad { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
:root:not([data-theme="light"]) .imp-ok,
:root[data-theme="dark"] .imp-ok { color: #4ade80; }
:root:not([data-theme="light"]) .imp-warn,
:root[data-theme="dark"] .imp-warn { color: #fbbf24; }
:root:not([data-theme="light"]) .imp-bad,
:root[data-theme="dark"] .imp-bad { color: #f87171; }

.imp-tabla-scroll { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.imp-tabla { width: 100%; font-size: 0.78rem; }
.imp-tabla thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-card); }
.imp-tabla td { padding: 0.35rem 0.6rem; vertical-align: top; }
.imp-rdq { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.imp-proc { max-width: 22rem; }
.imp-estado em { display: block; margin-top: 0.15rem; font-size: 0.7rem; font-style: normal; color: var(--text-secondary); }
/* Lo que no entra se atenúa: la vista previa es para mirar las que sí. */
/* Los cuatro bloques de la vista previa y lo que se elige en cada fila. */
.imp-bloque { display: flex; align-items: center; gap: 0.4rem; margin: 0.9rem 0 0.4rem; font-size: 0.82rem; color: var(--text-primary); }
.imp-bloque span { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); }
.imp-pregunta { display: block; font-size: 0.74rem; margin-bottom: 0.25rem; }
.imp-opciones { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.imp-opciones .imp-chip { cursor: pointer; font: inherit; font-size: 0.7rem; white-space: normal; text-align: left; }
.imp-fecha { margin-top: 0.3rem; max-width: 10rem; padding: 0.2rem 0.4rem; font-size: 0.74rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL → RED Y CENTROS (core/red-centros.js). Boceto aprobado en
   docs/bocetos/red-centros/.
   ═══════════════════════════════════════════════════════════════════════════ */
/* cabecera de la red */
.rc-red { display: flex; gap: 1.2rem; align-items: stretch; padding: 0.9rem 1rem; }
.rc-red-main { flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; min-width: 0; }
.rc-red-ic {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); color: var(--accent-cyan);
}
.rc-red-name { display: flex; flex-direction: column; gap: 2px; }
.rc-red-name small { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.rc-red-name input {
  font: inherit; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--text-primary);
  background: transparent; border: 1px dashed transparent; border-radius: 8px; padding: 1px 6px; margin-left: -7px; max-width: 420px; outline: none;
}
.rc-red-name input:hover { border-color: var(--border-color); }
.rc-red-name input:focus { border-color: var(--accent-cyan); border-style: solid; background: var(--bg-secondary); }
.rc-red-hint { grid-column: 2; margin: 2px 0 0; font-size: 0.74rem; color: var(--text-muted); line-height: 1.45; }
.rc-red-side { display: flex; flex-direction: column; justify-content: space-between; gap: 0.6rem; padding-left: 1.2rem; border-left: 1px solid var(--border-color); min-width: 260px; }
.rc-red-fig { display: flex; gap: 0.9rem; font-size: 0.74rem; color: var(--text-muted); }
.rc-red-fig b { color: var(--text-primary); font-size: 0.95rem; font-variant-numeric: tabular-nums; margin-right: 2px; }

.rc-switch { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.8rem; }
.rc-switch input { display: none; }
.rc-switch-ui { width: 34px; height: 20px; border-radius: 999px; background: var(--bg-tertiary); border: 1px solid var(--border-color); position: relative; flex: none; transition: background 0.15s; }
.rc-switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-muted); transition: transform 0.15s, background 0.15s; }
.rc-switch input:checked + .rc-switch-ui { background: color-mix(in srgb, var(--accent-cyan) 30%, transparent); border-color: var(--accent-cyan); }
.rc-switch input:checked + .rc-switch-ui::after { transform: translateX(14px); background: var(--accent-cyan); }
.rc-switch small { display: block; color: var(--text-muted); font-size: 0.7rem; }

/* cuerpo: lista de centros | ficha */
.rc-main { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 1rem; align-items: start; margin-bottom: 1rem; }

.rc-lista { border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card, var(--bg-secondary)); padding: 0.7rem; }
.rc-lista-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.6rem; padding: 0 0.2rem; }
.rc-lista-head h4 { margin: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.rc-pie { display: flex; gap: 0.35rem; align-items: flex-start; font-size: 0.7rem; color: var(--text-muted); margin: 0.7rem 0.2rem 0; line-height: 1.4; }
.rc-pie svg { flex: none; margin-top: 1px; }

.rc-zona { border-left: 2px solid var(--cen-c); padding-left: 0.45rem; margin-bottom: 0.7rem; }
.rc-zona-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.rc-zona-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cen-c); flex: none; }
.rc-zona-head .rc-inline { font-size: 0.78rem; font-weight: 800; color: var(--text-primary); flex: 1; }
.rc-zona-n { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.rc-centro {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 0.45rem 0.5rem; border-radius: 9px; border: 1px solid transparent; background: none; cursor: pointer;
}
.rc-centro + .rc-centro { margin-top: 2px; }
.rc-centro:hover { background: var(--bg-hover); }
.rc-centro.on { background: color-mix(in srgb, var(--accent-cyan) 10%, transparent); border-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent); }
.rc-grip { color: var(--text-muted); opacity: 0.45; cursor: grab; display: inline-flex; }
.rc-centro-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--bg-tertiary); color: var(--text-secondary); }
.rc-centro.on .rc-centro-ic { color: var(--accent-cyan); }
.rc-centro-txt { flex: 1; min-width: 0; }
.rc-centro-txt b { display: block; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-centro-txt small { font-size: 0.68rem; color: var(--text-muted); }
.rc-centro .eiren-tag { flex: none; font-size: 0.64rem; }

.rc-inline {
  font: inherit; color: inherit; background: transparent; border: 1px dashed transparent; border-radius: 6px;
  padding: 1px 4px; margin-left: -5px; outline: none; min-width: 0;
}
.rc-inline:hover { border-color: var(--border-color); }
.rc-inline:focus { border-color: var(--accent-cyan); border-style: solid; background: var(--bg-secondary); }
.rc-inline-lg { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; width: 100%; }

.rc-anadir {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; margin-top: 0.5rem;
  padding: 0.45rem; border-radius: 9px; border: 1px dashed var(--border-color); background: none; color: var(--text-muted);
  font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer;
}
.rc-anadir:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.rc-vacio { font-size: 0.74rem; color: var(--text-muted); margin: 0.3rem 0.4rem; }

/* la ficha del centro */
.rc-ficha { border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card, var(--bg-secondary)); padding: 0.9rem 1rem 1rem; min-width: 0; }
.rc-ficha-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.rc-ficha-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); color: var(--accent-cyan); }
.rc-ficha-t { flex: 1; min-width: 0; }
.rc-ficha-t small { display: block; font-size: 0.72rem; color: var(--text-muted); }
.rc-tabs { margin-bottom: 0.9rem; }
.rc-tab-off { opacity: 0.4; cursor: default !important; }

.rc-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 280px;
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 11px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  padding: 0.7rem 0.8rem; font-size: 0.76rem; line-height: 1.45; display: flex; flex-direction: column; gap: 0.35rem;
}
.rc-pop[hidden] { display: none; }
.rc-pop span { color: var(--text-secondary); }
.rc-pop div { display: flex; justify-content: flex-end; }

.rc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; }
.rc-f { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.rc-f i { font-style: normal; font-weight: 500; opacity: 0.8; }
.rc-f-wide { grid-column: 1 / -1; }
.rc-in-sm { font-size: 0.74rem; padding: 0.22rem 0.4rem; }
.rc-papeles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.rc-papel {
  text-align: left; font: inherit; padding: 0.55rem 0.65rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary);
}
.rc-papel b { display: block; font-size: 0.8rem; }
.rc-papel small { display: block; font-size: 0.69rem; color: var(--text-muted); font-weight: 500; margin-top: 2px; line-height: 1.35; }
.rc-papel.on { border-color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 10%, transparent); }
.rc-papel.on b { color: var(--accent-cyan); }
.rc-mas summary { cursor: pointer; font-weight: 600; }
.rc-mas p { font-weight: 500; margin: 0.35rem 0 0; line-height: 1.45; }

.rc-sub-t { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }
.rc-sub-t > span { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 0.3rem; }
.rc-ubis { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 5px; }
.rc-ubi-nueva { margin-top: 0; }
.rc-ubi { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-secondary); }
.rc-ubi .rc-inline { flex: 1; font-size: 0.8rem; font-weight: 700; }
.rc-ubi-n { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.rc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.5rem; }
.rc-col-nueva { display: flex; align-items: center; justify-content: center; gap: 0.35rem; border-style: dashed; border-top-width: 1px; color: var(--text-muted); font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; min-height: 44px; align-self: start; }
.rc-col-nueva:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.rc-col {
  border: 1px solid var(--border-color); border-top: 2px solid color-mix(in srgb, var(--cen-c) 60%, transparent);
  border-radius: 10px; padding: 0.5rem; background: var(--bg-secondary); transition: background 0.12s, border-color 0.12s;
}
.rc-col.over { background: color-mix(in srgb, var(--cen-c) 10%, var(--bg-secondary)); border-color: var(--cen-c); }
.rc-col .cen-colhead { margin-bottom: 0.45rem; padding-bottom: 0.4rem; }
.rc-col .cen-colhead h3 { font-size: 0.8rem; flex: 1; }
.rc-col-edit { width: 24px; height: 22px; opacity: 0; }
.rc-col:hover .rc-col-edit, .rc-col.editing .rc-col-edit { opacity: 1; }
.rc-chips { display: flex; flex-direction: column; gap: 4px; min-height: 34px; }
.rc-chip {
  display: flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 700; padding: 0.3rem 0.45rem;
  border-radius: 8px; background: var(--bg-input, var(--bg-tertiary)); border: 1px solid var(--border-color); cursor: grab; user-select: none;
}
.rc-chip i { margin-left: auto; font-style: normal; font-size: 0.64rem; font-weight: 600; color: var(--cen-c); }
.rc-chip svg { color: var(--text-muted); flex: none; }
.rc-chip.dragging { opacity: 0.4; }
.rc-chip-vacio { font-size: 0.7rem; color: var(--text-muted); border: 1px dashed var(--border-color); border-radius: 8px; padding: 0.45rem; text-align: center; }

.rc-coled { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.55rem; padding: 0.5rem; border-radius: 8px; background: var(--bg-card, var(--bg-primary)); border: 1px solid var(--border-color); }
.rc-color { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.rc-color.on { border-color: var(--text-primary); }

.rc-intro { font-size: 0.78rem; color: var(--text-secondary); margin: 0 0 0.7rem; line-height: 1.5; }
.rc-cuas { display: flex; flex-direction: column; gap: 4px; }
.rc-cuas-dim { opacity: 0.7; }
.rc-cua { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border-color); border-left: 3px solid var(--q); border-radius: 9px; background: var(--bg-secondary); font-size: 0.8rem; }
.rc-cua-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--q); background: color-mix(in srgb, var(--q) 15%, transparent); flex: none; }
.rc-cua-as { margin-left: auto; font-size: 0.7rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; }
.rc-cua-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-weight: 700; color: var(--q); background: color-mix(in srgb, var(--q) 14%, transparent); border: 1px solid color-mix(in srgb, var(--q) 35%, transparent); }
.rc-anadir-fila { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; font-size: 0.74rem; color: var(--text-muted); }

/* vista previa del Censo (dentro, markup real) */
.rc-prev { border: 1px solid var(--border-color); border-radius: 12px; padding: 0.8rem; background: var(--bg-primary); }
.rc-prev-bar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.rc-prev-t { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.rc-prev-sel { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.rc-prev-sel small { font-size: 0.68rem; color: var(--text-muted); }
.rc-grid { grid-auto-rows: auto; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rc-grid .unit-column { min-height: 230px; height: auto; }
.rc-fake { pointer-events: none; }
.rc-fake .nm, .rc-fake .dg { flex: 1; }

.rc-root { display: flex; flex-direction: column; gap: 0; }
.rc-error { margin: 0 0 1rem; }
.rc-centro.off { opacity: 0.55; }
.rc-centro.over, .rc-zona.over { outline: 2px dashed color-mix(in srgb, var(--accent-cyan) 55%, transparent); outline-offset: 2px; }
.rc-zona-sin { font-size: 0.78rem; flex: 1; }
.rc-menu-wrap { position: relative; margin-left: auto; }
.rc-ubi.off { opacity: 0.55; }
.rc-ubi .input-field { width: auto; }
.rc-sub-t-2 { margin-top: 1rem; }
.rc-aviso { display: flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--status-warning-text); margin: 0.6rem 0 0.3rem; }
.rc-chips-sueltas { flex-direction: row; flex-wrap: wrap; }
.rc-coled-foot { display: flex; justify-content: flex-end; }
.rc-mas-pac { font-size: 0.68rem; color: var(--text-muted); padding: 0.2rem 0.3rem; }
.rc-fake .nm { font-size: 0.76rem; }
.rc-edp-prev { min-height: 0 !important; height: auto !important; padding: 0.6rem 0.7rem 0.5rem; }
.rc-edp-prev .cen-colhead { border-bottom: 0; margin-bottom: 0.2rem; padding-bottom: 0; }
.rc-edp-note { font-size: 0.66rem; color: var(--text-muted); }
.rc-f .input-field { font-size: 0.82rem; }
@media (max-width: 1100px) { .rc-main { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .rc-red { flex-direction: column; }
  .rc-red-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-color); padding-top: 0.7rem; min-width: 0; }
  .rc-form, .rc-papeles { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUIRÓFANOS: gestor, editor y visto bueno (core/quirofanos.js). Boceto
   docs/bocetos/quirofanos/, plan docs/plan-quirofanos.md.
   ═══════════════════════════════════════════════════════════════════════════ */
.qf-stack { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.qf-two { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 0.85rem; }
@container (min-width: 760px) { .qf-two { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } .qf-two.wide-right { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.qf-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 0.7rem; font-weight: 700; color: var(--accent-cyan); cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; }
.qf-link:hover { text-decoration: underline; }
.qf-panel { display: flex; flex-direction: column; gap: 0.9rem; }

/* Vista previa en el Parte, con el centro */
.qf-pv-or { --loc: var(--accent-cyan); max-width: 240px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-input); overflow: hidden; }
.qf-pv-or .bar { height: 5px; background: var(--loc); }
.qf-pv-or .b { padding: 0.5rem 0.65rem; }
.qf-pv-or .t { font-size: 0.82rem; font-weight: 800; color: var(--text-primary); }
.qf-pv-or .s { font-size: 0.7rem; color: var(--text-muted); }
.qf-pv-or .c { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.3rem; font-size: 0.66rem; font-weight: 700; color: var(--text-secondary); }

/* Horario */
.qf-hours { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.65rem; background: var(--bg-input); display: flex; flex-direction: column; gap: 0.6rem; }
.qf-hours-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.qf-hours-top .ed-seg { width: auto; }
.qf-turnos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.45rem; }
.qf-turno { --c: var(--accent-cyan); display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; text-align: left; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); }
.qf-turno b { display: block; font-size: 0.78rem; color: var(--text-primary); }
.qf-turno small { font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.qf-turno-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid color-mix(in srgb, var(--text-muted) 70%, transparent); display: grid; place-items: center; flex-shrink: 0; }
.qf-turno-check svg { color: #fff; opacity: 0; }
.qf-turno[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--bg-secondary)); }
.qf-turno[aria-pressed="true"] .qf-turno-check { background: var(--c); border-color: var(--c); }
.qf-turno[aria-pressed="true"] .qf-turno-check svg { opacity: 1; }
.qf-ranges { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.qf-ranges .ed-range { width: 100%; }
.qf-hours-total { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); }
.qf-add { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Calendario del mes */
.qf-cal { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-input); padding: 0.6rem; }
.qf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem; }
.qf-cal-head b { font-family: var(--font-heading); font-size: 0.88rem; color: var(--text-primary); }
.qf-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.qf-dow { text-align: center; font-size: 0.62rem; font-weight: 800; color: var(--text-muted); padding: 0.2rem 0; }
.qf-day {
  position: relative; min-height: 48px; border-radius: 9px; border: 1px solid transparent; background: var(--bg-secondary);
  font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 4px 5px; color: var(--text-secondary); text-align: left; transition: var(--transition-fast);
}
.qf-day .n { font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.qf-day .t { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.qf-day.out { opacity: 0.3; cursor: default; background: none; }
.qf-day.we { background: color-mix(in srgb, var(--text-muted) 6%, var(--bg-secondary)); }
.qf-day:not(.out):hover { border-color: color-mix(in srgb, var(--accent-cyan) 50%, transparent); }
.qf-day.avail { color: var(--text-primary); background: color-mix(in srgb, var(--accent-teal) 14%, var(--bg-secondary)); border-color: color-mix(in srgb, var(--accent-teal) 40%, transparent); }
.qf-day.add .t { color: var(--accent-teal); }
.qf-day.add { border-style: dashed; }
.qf-day.exc { color: var(--status-critical-text); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, #ef4444 10%, transparent) 5px 10px); border-color: var(--status-critical-border); }
.qf-day.exc .n { text-decoration: line-through; }
.qf-day.sel { color: #fff; background: var(--accent-gradient); border-color: transparent; }
.qf-day.sel .t { color: #fff; text-transform: none; font-size: 0.62rem; }
.qf-day.focus { box-shadow: 0 0 0 2px var(--bg-input), 0 0 0 4px var(--accent-cyan); }
.qf-who { align-self: stretch; text-align: center; font-size: 0.6rem; font-weight: 800; border-radius: 6px; padding: 2px 0; color: #fff; background: var(--c); }
.qf-who.free { color: var(--text-muted); background: var(--mc-surface-strong); font-weight: 700; }
.qf-who.absent { background: repeating-linear-gradient(135deg, var(--c) 0 4px, #ef4444 4px 8px); box-shadow: 0 0 0 1.5px #ef4444; }
.qf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem; margin-top: 0.55rem; font-size: 0.66rem; color: var(--text-muted); }
.qf-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.qf-legend em { font-style: normal; flex-basis: 100%; }
.qf-legend .lg { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.qf-legend .lg.avail { background: color-mix(in srgb, var(--accent-teal) 30%, transparent); border: 1px solid var(--accent-teal); }
.qf-legend .lg.exc { border: 1px solid #ef4444; background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, #ef4444 30%, transparent) 3px 6px); }
.qf-legend .lg.add { border: 1px dashed var(--accent-teal); }
.qf-legend .lg.sel { background: var(--accent-gradient); }
.qf-legend .lg.focus { box-shadow: 0 0 0 2px var(--accent-cyan); }
.qf-legend .lg.absent { background: repeating-linear-gradient(135deg, var(--accent-blue) 0 3px, #ef4444 3px 6px); }

/* Editar un día suelto */
.qf-dayedit { display: flex; flex-direction: column; gap: 0.6rem; }
.qf-dayedit-h { display: flex; align-items: center; gap: 0.45rem; color: var(--accent-cyan); }
.qf-dayedit-h b { font-family: var(--font-heading); font-size: 0.9rem; color: var(--text-primary); }
.qf-dayedit-h .ed-ibtn { margin-left: auto; }
.qf-apply { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; font-size: 0.76rem; }
.qf-sum { padding: 0.55rem 0.7rem; border-radius: var(--radius-md); background: var(--mc-surface); border: 1px solid var(--border-color); }
.qf-sum b { display: block; font-size: 0.8rem; color: var(--text-primary); }
.qf-sum span { font-size: 0.7rem; color: var(--text-muted); }

/* Profesionales */
.qf-owned { display: flex; gap: 0.6rem; align-items: center; padding: 0.65rem 0.75rem; border-radius: var(--radius-md); color: var(--accent-cyan); border: 1px solid color-mix(in srgb, var(--accent-cyan) 40%, transparent); background: color-mix(in srgb, var(--accent-cyan) 7%, transparent); }
.qf-owned b { display: block; font-size: 0.82rem; color: var(--text-primary); }
.qf-owned span { font-size: 0.72rem; color: var(--text-secondary); }
.qf-owners { display: flex; flex-direction: column; gap: 0.35rem; }
.qf-owner { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.6rem; border-radius: var(--radius-md); cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-input); }
.qf-owner b { display: block; font-size: 0.78rem; color: var(--text-primary); }
.qf-owner span:not(.ed-av) { font-size: 0.68rem; color: var(--text-muted); }
.qf-owner:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.qf-owner[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--bg-input)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.qf-can { display: flex; flex-direction: column; gap: 0.4rem; }
.qf-can-row { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.76rem; color: var(--text-secondary); line-height: 1.45; }
.qf-can-row svg { flex-shrink: 0; margin-top: 0.15rem; }
.qf-can-row b { color: var(--text-primary); }
.qf-can-row.ok svg { color: var(--accent-teal); }
.qf-can-row.no svg { color: #ef4444; }

/* Gestor */
.qf-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.qf-search { flex: 1 1 220px; }
.qf-room-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.qf-room .ed-row-t .ed-chip { margin-left: 0.2rem; }
.qf-retired { appearance: none; font-family: inherit; display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; border-radius: var(--radius-md); border: 1px dashed var(--border-color); background: none; color: var(--text-muted); font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.qf-retired span { margin-left: auto; color: var(--accent-cyan); font-weight: 700; }

/* Visto bueno */
.qf-pend { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; padding: 0.7rem 0.8rem; border-radius: var(--radius-md); background: var(--bg-input); border: 1px solid var(--border-color); border-left: 3px solid #f59e0b; }
.qf-pend.rej { border-left-color: #ef4444; }
.qf-pend-main { flex: 1 1 260px; min-width: 0; }
.qf-pend-when { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); }
.qf-pend-p { font-size: 0.86rem; font-weight: 800; color: var(--text-primary); margin-top: 0.15rem; }
.qf-pend-proc { font-size: 0.74rem; color: var(--text-secondary); }
.qf-pend-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.35rem; font-size: 0.68rem; color: var(--text-muted); }
.qf-pend-actions { display: flex; gap: 0.4rem; }
.qf-pend-actions button { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; }
.qf-no:hover { color: #ef4444; border-color: color-mix(in srgb, #ef4444 45%, transparent); }
.qf-reject { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.55rem; border-top: 1px dashed var(--status-critical-border); }
.qf-reject-actions { display: flex; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; }
.qf-reject-actions .btn-primary.danger { background: #dc2626; display: inline-flex; align-items: center; gap: 0.3rem; }

/* Lo que ve el profesional */
/* Notificar el parte (app.js::openNotifyParteModal) -- prefijo .np- solo
   para lo que no tienen las piezas de los editores. */
.np-shortcuts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.np-list { max-height: 52vh; overflow-y: auto; }
.np-list .ed-row-main .ed-chips { margin-top: 0.3rem; gap: 0.25rem; }
.np-list .ed-row-main .ed-chip { font-size: 0.6rem; padding: 0.05rem 0.4rem; }
.np-mail-subject { font-size: 0.76rem; font-weight: 700; color: var(--accent-cyan); margin-bottom: 0.5rem; }
/* El correo se lee sobre blanco: dentro del modal oscuro se vería con otros colores. */
.np-mail { background: #fff; border-radius: var(--radius-sm); overflow: hidden; max-height: 52vh; overflow-y: auto; }

/* «Notificar cambios» (src/notificar/notificar.js::openNotifyChangesModal),
   del boceto docs/bocetos/notificar-cambios/: cada cambio con su etiqueta, su
   antes y ahora, y a quién le llega. */
.nc-list { max-height: 60vh; overflow-y: auto; }
.nc-cambio { align-items: flex-start; padding-left: 0.95rem; }
.nc-cec { font-size: 0.62rem; font-weight: 800; color: #ef4444; letter-spacing: 0.04em; }
.nc-etqs { margin-top: 0.3rem; gap: 0.25rem; }
.nc-etqs .ed-chip { font-size: 0.62rem; padding: 0.05rem 0.45rem; }
.nc-lineas { margin-top: 0.35rem; display: grid; gap: 0.15rem; }
.nc-l { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.4; display: flex; align-items: center; gap: 0.3rem; }
.nc-l svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-muted); }
.nc-l.antes { color: var(--text-muted); text-decoration: line-through; }
.nc-l.ahora { color: var(--text-primary); font-weight: 700; }
.nc-l.ahora svg { color: var(--accent-cyan); }
.nc-l.nota { color: var(--text-muted); }
.nc-llega { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.5rem; }
.nc-llega > span { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-right: 0.15rem; }
.nc-quien {
  display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; font-size: 0.68rem; font-weight: 600;
  padding: 0.12rem 0.5rem 0.12rem 0.15rem; border-radius: 999px; cursor: pointer;
  color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-color);
}
.nc-quien .ed-av.xs { width: 18px; height: 18px; font-size: 0.5rem; }
.nc-quien:hover { color: var(--text-primary); border-color: color-mix(in srgb, var(--accent-cyan) 45%, transparent); }
.nc-quien.on { color: var(--accent-cyan); border-color: color-mix(in srgb, var(--accent-cyan) 55%, transparent); background: color-mix(in srgb, var(--accent-cyan) 12%, transparent); }
.nc-sub { display: grid; gap: 0.1rem; }
.nc-formatos { display: flex; gap: 0.3rem; }
.nc-formatos .ed-pick { font-size: 0.66rem; padding: 0.2rem 0.55rem; }
.nc-app { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-input); padding: 0.6rem 0.75rem; }
.nc-app-t { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; }
.nc-app-t svg { color: var(--accent-cyan); }
.nc-app-lineas { margin-top: 0.4rem; display: grid; gap: 0.2rem; font-size: 0.74rem; color: var(--text-secondary); line-height: 1.45; padding-left: 1.4rem; }
.nc-tg { margin-top: 0.8rem; padding: 0.8rem; border-radius: var(--radius-md); background: #0e1621; }
.nc-tg-b { max-width: 88%; background: #182533; color: #e6edf3; border-radius: 12px 12px 12px 4px; padding: 0.55rem 0.7rem; font-size: 0.74rem; line-height: 1.5; display: grid; gap: 0.15rem; }
.nc-tg-b b { color: #6ab3f3; font-size: 0.72rem; }
/* El contador del avión de papel: ámbar y no el rojo de la campana, porque no
   es un aviso para ti sino algo que te queda por hacer. */
.nc-badge { background: #f59e0b; color: #1f1300; box-shadow: 0 0 0 2px var(--bg-primary); }
.nc-punto { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2px var(--bg-primary); }
.nc-reloj { position: absolute; bottom: -6px; right: -7px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-primary); color: #f59e0b; }
.nc-reloj svg { width: 12px; height: 12px; }
/* Mi cuenta → Avisos: el envío automático (src/cuenta/cuenta.js). */
.mc-auto-ejemplo { margin-top: 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-md); background: var(--bg-input); border: 1px solid var(--border-color); display: grid; gap: 0.2rem; font-size: 0.72rem; color: var(--text-secondary); }
.mc-auto-ejemplo b { color: var(--text-primary); font-variant-numeric: tabular-nums; display: inline-block; min-width: 3rem; }
.mc-auto-quien { margin-top: 0.55rem; font-size: 0.68rem; color: var(--text-muted); }

/* El Parte con centros, dueños y visto bueno (app.js::renderParteSemanal) --
   prefijo .pt-, del boceto docs/bocetos/quirofanos/parte.html. */
/* Barra: filtro por centro y visto bueno */
.pt-pend-btn { appearance: none; font-family: inherit; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; font-weight: 700; padding: 0.34rem 0.6rem; border-radius: 10px; cursor: pointer; color: #f59e0b; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); }
.pt-pend-btn b { min-width: 18px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 0.66rem; color: #fff; background: #f59e0b; }
.pt-mydays { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; font-weight: 700; padding: 0.34rem 0.6rem; border-radius: 10px; color: #f97316; background: rgba(249, 115, 22, 0.12); border: 1px solid rgba(249, 115, 22, 0.4); }

/* Filas de centro */
.weekly-table tr.pt-group td { padding: 0; background: color-mix(in srgb, var(--text-primary) 3%, var(--bg-secondary)); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.pt-group-btn { appearance: none; border: 0; background: none; width: 100%; font-family: inherit; display: flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.75rem; cursor: pointer; color: var(--accent-cyan); text-align: left; position: sticky; left: 0; }
.pt-group-btn b { font-family: var(--font-heading); font-size: 0.8rem; color: var(--text-primary); }
.pt-group-n { font-size: 0.7rem; color: var(--text-muted); }
.pt-group-chev { display: inline-grid; color: var(--text-muted); transition: var(--transition-fast); }
.pt-group-btn[aria-expanded="false"] .pt-group-chev { transform: rotate(-90deg); }
.weekly-table tr.pt-group td.pt-group-lbl { overflow: visible; position: sticky; left: 0; z-index: 2; }
.weekly-table tr.pt-group td.pt-group-lbl .pt-group-btn { width: max-content; white-space: nowrap; position: relative; z-index: 2; }
.weekly-table tr.pt-group td { border-left: 0; border-right: 0; }

/* Columna del quirófano */
.pt-room-meta { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.35rem; font-size: 0.62rem; color: var(--text-muted); }
.pt-room-meta > span { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Cabecera de la casilla: dueño del día y horario propio */
.pt-cellhead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-bottom: 0.3rem; }
.pt-owner { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.62rem; font-weight: 800; color: var(--c); padding: 0.08rem 0.45rem 0.08rem 0.1rem; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); }
.pt-owner-av { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.5rem; font-weight: 800; color: #fff; background: var(--c); }
.pt-hours { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.6rem; font-weight: 700; color: var(--text-secondary); padding: 0.08rem 0.4rem; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border-color); font-variant-numeric: tabular-nums; }

/* Tarjeta pendiente de visto bueno */
.weekly-table .pqc-card.pt-card-pending { border: 1.5px dashed #f59e0b !important; background: color-mix(in srgb, #f59e0b 6%, var(--bg-card)) !important; }
.pt-pend { display: flex; align-items: center; gap: 0.25rem; margin: -0.1rem -0.2rem 0.25rem; padding: 0.12rem 0.3rem; border-radius: 6px; font-size: 0.58rem; font-weight: 800; color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.pt-pend > span:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-pend-actions { margin-left: auto; display: inline-flex; gap: 3px; flex-shrink: 0; }
.pt-mini { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; border: 1px solid transparent; }
.pt-mini.ok { color: #fff; background: var(--accent-teal); }
.pt-mini.no { color: #ef4444; background: transparent; border-color: rgba(239, 68, 68, 0.4); }
.pt-dh-pend { display: inline-flex; align-items: center; gap: 3px; font-size: 0.64rem; font-weight: 700; border-radius: 6px; padding: 0.05rem 0.36rem; color: #f59e0b; background: rgba(245, 158, 11, 0.13); border: 1px solid rgba(245, 158, 11, 0.4); }

/* Vista del profesional */
.day-cell.pt-locked .weekly-slot { opacity: 0.4; }
.day-cell.pt-locked { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--text-muted) 5%, transparent) 8px 16px); }
.pt-lockmark { display: flex; align-items: center; justify-content: center; gap: 0.25rem; font-size: 0.62rem; font-weight: 700; color: var(--text-muted); padding: 0.6rem 0; }
.day-cell.pt-mine { background: color-mix(in srgb, #f97316 7%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f97316 55%, transparent); }
.pt-drop { margin-top: 0.2rem; padding: 0.55rem 0.4rem; border-radius: 8px; border: 1.5px dashed color-mix(in srgb, #f97316 60%, transparent); color: #f97316; font-size: 0.64rem; font-weight: 700; text-align: center; }
.pqc-card.pt-card-mine .pt-pend { color: #f97316; background: rgba(249, 115, 22, 0.12); }
.weekly-table .pqc-card.pt-card-mine.pt-card-pending { border-color: #f97316 !important; }
.pt-room-meta .nw { white-space: nowrap; }
/* En la columna estrecha del quirófano el dueño va como una línea más, sin píldora */
.pt-room-owner { align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.62rem; font-weight: 700; color: var(--c); white-space: nowrap; }
.pt-room-owner.muted { color: var(--text-secondary); }
.pt-mini svg { width: 12px; height: 12px; display: block; }
.pt-mini.ok svg { color: #fff; stroke: #fff; }
.pt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
#parte-approvals-slot:empty, #parte-centros[hidden] { display: none; }
/* El filtro de centro encoge y se desplaza en su hueco de la barra, sin
   montarse encima de Candidatos. */
#parte-centros { min-width: 0; flex: 0 1 auto; display: flex; }
#parte-centros .ctr-seg { min-width: 0; }
.parte-centros-row { display: flex; margin-top: 0.4rem; }
.parte-centros-row[hidden] { display: none; }
.parte-centros-row #parte-centros { flex: 0 1 auto; }

/* Programar en quirófano (app.js::renderProgramPatientModal) -- prefijo .sc-,
   del boceto docs/bocetos/editores. Con varios centros, una fila de cabecera
   por centro dentro de la rejilla. */
.sc-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.6rem; }
.sc-week { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-primary); }
.sc-week b { font-family: var(--font-heading); padding: 0 0.2rem; }
.sc-week .ed-pick { margin-left: 0.3rem; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; font-size: 0.67rem; color: var(--text-muted); }
.sc-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.sc-legend .lg { width: 12px; height: 8px; border-radius: 3px; display: inline-block; }
.sc-legend .lg.bar { background: linear-gradient(90deg, var(--accent-cyan) 60%, var(--mc-surface-strong) 60%); }
.sc-legend .lg.cur { border: 1.5px solid var(--accent-teal); }
.sc-legend .lg.sel { background: color-mix(in srgb, var(--accent-cyan) 35%, transparent); border: 1.5px solid var(--accent-cyan); }

.sc-grid-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-input); }
.sc-grid { display: grid; min-width: 720px; }
.sc-corner { padding: 0.55rem 0.7rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: flex-end; border-bottom: 1px solid var(--border-color); background: var(--mc-surface); }
.sc-dh { padding: 0.45rem 0.45rem 0.4rem; border-bottom: 1px solid var(--border-color); border-left: 1px solid var(--border-color); background: var(--mc-surface); display: flex; flex-direction: column; gap: 0.3rem; }
.sc-dh.past { opacity: 0.5; }
.sc-dh.open { background: color-mix(in srgb, var(--accent-cyan) 10%, var(--bg-input)); box-shadow: inset 0 2px 0 var(--accent-cyan); }
.sc-dh-l { font-size: 0.78rem; font-weight: 800; color: var(--text-primary); }
.sc-dh-l span { margin-left: 0.3rem; font-weight: 600; color: var(--text-muted); }
.sc-dh-row { display: flex; align-items: center; gap: 0.3rem; }
.sc-dh-btn { margin-left: auto; appearance: none; font-family: inherit; display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.66rem; font-weight: 700; padding: 0.18rem 0.45rem; border-radius: 999px; cursor: pointer; color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent); }
.sc-dh-btn:hover { background: color-mix(in srgb, var(--accent-cyan) 18%, transparent); }
.sc-dh.open .sc-dh-btn svg { transform: rotate(180deg); }
.sc-off-pill { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.66rem; font-weight: 800; padding: 0.15rem 0.4rem; border-radius: 999px; color: var(--status-warning-text); background: var(--status-warning-bg); border: 1px solid var(--status-warning-border); }
.sc-off-pill.crit { color: var(--status-critical-text); background: var(--status-critical-bg); border-color: var(--status-critical-border); }

.sc-room { position: relative; padding: 0.55rem 0.6rem 0.55rem 0.85rem; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--border-color); }
.sc-room::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.sc-room b { font-size: 0.78rem; color: var(--text-primary); }
.sc-room span { font-size: 0.65rem; color: var(--text-muted); }
.sc-cell { margin: 5px; min-height: 62px; border-radius: 10px; border: 1px solid transparent; font-family: inherit; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; padding: 0.4rem 0.5rem; font-size: 0.66rem; color: var(--text-muted); background: none; }
.sc-cell.past { align-items: center; opacity: 0.4; }
.sc-cell.off { flex-direction: row; align-items: center; justify-content: center; gap: 0.25rem; opacity: 0.55; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--text-muted) 10%, transparent) 6px 12px); }
.sc-cell.off svg { width: 12px; height: 12px; }
button.sc-cell { cursor: pointer; border-color: var(--border-color); background: var(--bg-secondary); transition: var(--transition-fast); }
button.sc-cell:hover { border-color: color-mix(in srgb, var(--accent-cyan) 55%, transparent); }
button.sc-cell.open { background: color-mix(in srgb, var(--accent-cyan) 4%, var(--bg-secondary)); }
.sc-cell-top { display: flex; align-items: center; gap: 0.3rem; }
.sc-cell-top b { font-size: 0.74rem; color: var(--text-primary); }
.sc-bar { height: 5px; border-radius: 99px; background: var(--mc-surface-strong); overflow: hidden; }
.sc-bar span { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.sc-cell-st { font-weight: 600; }
.sc-cell.full .sc-cell-st { color: var(--status-warning-text); }
.sc-cell.cur { border-color: var(--accent-teal); box-shadow: inset 0 0 0 1px var(--accent-teal); }
.sc-cell.sel { border-color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 14%, var(--bg-secondary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 18%, transparent); }
.sc-flag { margin-left: auto; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.08rem 0.35rem; border-radius: 999px; }
.sc-flag.cur { color: var(--status-stable-text); background: var(--status-stable-bg); }
.sc-flag.sel { color: #fff; background: var(--accent-cyan); }

/* Panel del día */
.sc-panel { margin-top: 0.75rem; padding: 0.8rem; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--accent-cyan) 35%, var(--border-color)); background: color-mix(in srgb, var(--accent-cyan) 4%, var(--bg-input)); display: flex; flex-direction: column; gap: 0.7rem; }
.sc-panel-h { display: flex; align-items: center; gap: 0.45rem; color: var(--accent-cyan); }
.sc-panel-h b { font-family: var(--font-heading); font-size: 0.9rem; color: var(--text-primary); }
.sc-panel-h span { font-size: 0.72rem; color: var(--text-muted); }
.sc-panel-h .ed-ibtn { margin-left: auto; }
.sc-lanes { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0.6rem; }
@container (max-width: 640px) { .sc-lanes { grid-template-columns: 1fr; } }
.sc-lane { border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border-color); padding: 0.55rem; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.sc-lane.sel { border-color: color-mix(in srgb, var(--accent-cyan) 60%, transparent); }
.sc-lane-h { display: flex; align-items: center; gap: 0.4rem; padding-left: 0.45rem; border-left: 3px solid var(--c); }
.sc-lane-h b { font-size: 0.78rem; color: var(--text-primary); }
.sc-lane-h span { font-size: 0.66rem; color: var(--text-muted); }
.sc-lane-h .sc-flag { margin-left: auto; }
.sc-lane-pick { margin-left: auto; appearance: none; font-family: inherit; display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.64rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 999px; cursor: pointer; color: var(--text-secondary); background: none; border: 1px solid var(--border-color); }
.sc-lane-pick:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.sc-lane-cards { display: flex; flex-direction: column; gap: 0.35rem; }
.sc-case { position: relative; padding: 0.4rem 0.5rem 0.42rem 0.65rem; border-radius: 8px; background: var(--bg-input); border: 1px solid var(--border-color); }
.sc-case::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.sc-case-top { display: flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sc-case-top b { font-size: 0.74rem; color: var(--text-primary); }
.sc-case-top span:not(.sc-tag)::before { content: '→ '; }
.sc-tag { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.05rem 0.3rem; border-radius: 4px; color: var(--text-secondary); background: var(--mc-surface-strong); }
.sc-case-p { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); margin-top: 0.1rem; }
.sc-case-p em { font-style: normal; font-weight: 600; color: var(--accent-cyan); }
.sc-case-proc { font-size: 0.68rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-case-foot { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.25rem; font-size: 0.66rem; color: var(--text-muted); }
.sc-dest { margin-left: auto; font-size: 0.6rem; font-weight: 800; padding: 0.05rem 0.35rem; border-radius: 999px; background: var(--mc-surface-strong); color: var(--text-secondary); }
.sc-case.mine { border-color: color-mix(in srgb, var(--accent-teal) 55%, transparent); }
.sc-case.mine .sc-case-p em { color: var(--accent-teal); }
.sc-case.ghost { border: 1.5px dashed var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 8%, transparent); }
.sc-case.ghost::before { background: var(--accent-cyan); }
.sc-case.ghost.nofit { border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.sc-case.ghost.nofit .sc-case-proc { color: var(--status-warning-text); white-space: normal; }
.sc-empty { font-size: 0.7rem; color: var(--text-muted); padding: 0.6rem 0.2rem; text-align: center; }

.sc-off { border-top: 1px solid var(--border-color); padding-top: 0.6rem; }
.sc-off-h { display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 800; color: var(--text-secondary); margin-bottom: 0.45rem; }
.sc-off-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sc-person { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.55rem 0.3rem 0.3rem; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-color); }
.sc-person .ed-av { width: 24px; height: 24px; font-size: 0.58rem; }
.sc-person b { display: block; font-size: 0.72rem; color: var(--text-primary); line-height: 1.1; }
.sc-person div span { font-size: 0.62rem; color: var(--text-muted); }
.sc-why { font-size: 0.62rem; font-weight: 800; padding: 0.1rem 0.4rem; border-radius: 999px; color: var(--status-warning-text); background: var(--status-warning-bg); }
.sc-person.crit { border-color: var(--status-critical-border); }
.sc-person.crit .sc-why { color: var(--status-critical-text); background: var(--status-critical-bg); }
.sc-off-none { font-size: 0.72rem; color: var(--status-stable-text); }

/* Detalles bajo la rejilla */
.sc-details { margin-top: 0.75rem; display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 0.75rem; align-items: end; }
@container (max-width: 720px) { .sc-details { grid-template-columns: 1fr; } }
.sc-time { display: flex; gap: 0.4rem; align-items: center; }
.sc-time .input-field { width: 7.5rem; flex-shrink: 0; }
.sc-choice { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--accent-cyan) 45%, transparent); background: color-mix(in srgb, var(--accent-cyan) 8%, transparent); color: var(--accent-cyan); }
.sc-choice b { display: block; font-size: 0.8rem; color: var(--text-primary); }
.sc-choice span { font-size: 0.68rem; color: var(--text-muted); }
.sc-foot-sum b { color: var(--text-primary); }
.ed-grid > * { min-width: 0; }
.mc-card { min-width: 0; }
@container (max-width: 520px) { .sc-person { border-radius: var(--radius-md); } .sc-panel-h span { display: none; } }
/* La columna de quirófanos se queda fija al desplazar la semana en pantallas estrechas */
.sc-corner, .sc-room { position: sticky; left: 0; z-index: 1; }
.sc-room { background: var(--bg-input); }
@container (max-width: 520px) { .sc-grid { grid-template-columns: 104px repeat(5, 112px) !important; min-width: 0; } .sc-room span { display: none; } }
.sc-corner { background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-input)); }

/* --- No disponibles (función de ausencias que bloquean) --- */
.sc-details { grid-template-columns: 1.2fr 0.9fr 1fr 1.2fr; }
.sc-cell-falta { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.6rem; font-weight: 800; color: var(--status-critical-text); }
.sc-case.falta { border-color: var(--status-critical-border); background: color-mix(in srgb, #ef4444 8%, var(--bg-input)); }
.sc-case-falta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px dashed var(--status-critical-border); font-size: 0.64rem; font-weight: 700; color: var(--status-critical-text); }
.sc-case-falta > span:not(.sc-why) { font-weight: 500; opacity: 0.8; }
.sc-why { --gc: var(--status-warning-text); color: var(--gc); background: color-mix(in srgb, var(--gc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 35%, transparent); }
.sc-case-falta .sc-why { margin-left: auto; }
.sc-person.crit .sc-why { color: var(--gc); background: color-mix(in srgb, var(--gc) 15%, transparent); }
.sc-off-h small { font-weight: 500; color: var(--text-muted); margin-left: 0.3rem; }
.sc-off-pill.crit { color: #fff; background: #ef4444; border-color: #ef4444; }
.sc-details .ed-stepper input { font-size: 0.8rem; }
.sc-off-pill.surgeon { box-shadow: 0 0 0 2px var(--bg-input), 0 0 0 3.5px #ef4444; }
.sc-dh-row { flex-wrap: wrap; row-gap: 0.25rem; }
.sc-dh-btn { white-space: nowrap; }
.sc-details { grid-template-columns: 1fr 1fr; }
@container (min-width: 1000px) { .sc-details { grid-template-columns: 1.3fr 0.9fr 1fr 1.2fr; } }
@container (max-width: 560px) { .sc-details { grid-template-columns: 1fr; } }
.sc-time { flex-wrap: wrap; }
.sc-time .ed-pick { white-space: nowrap; }
.sc-group { display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.2rem 0.15rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.sc-group svg { color: var(--accent-cyan); }
.sc-cell.qf-locked { flex-direction: row; align-items: center; justify-content: center; gap: 0.3rem; opacity: 0.6; background: var(--mc-surface); border: 1px dashed var(--border-color); }

@container (max-width: 520px) {
  .qf-day { min-height: 40px; padding: 3px; }
  .qf-day .t { display: none; }
  .qf-who { font-size: 0.52rem; }
  .qf-hours-top .ed-seg { width: 100%; }
}

/* «opcional» al lado de una etiqueta, el contrario del asterisco de .req */
.mc-field .opt {
  margin-left: .35rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.qf-outside { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.3rem 0 0; padding-left: 1rem; font-size: 0.74rem; }
.qf-dayedit-empty { font-size: 0.76rem; color: var(--text-muted); }
.qf-room.dragging { opacity: 0.4; }
.qf-room.over { box-shadow: inset 0 2px 0 var(--accent-cyan); }
.qf-room-actions-confirm { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--text-secondary); }
.qf-empty { font-size: 0.78rem; color: var(--text-muted); padding: 0.6rem 0; }
.qf-owner-add { max-width: 240px; }
.qf-cal-head .ed-ibtn { width: 28px; height: 28px; }

/* Censo · «Todos los centros»: píldoras de centro en cada columna (Red y
   centros, decisión 4). Quedarse con uno no toca el resto de columnas. */
.cen-colfil { display: flex; flex-wrap: wrap; gap: 3px; margin: -0.3rem 0 0.55rem; flex-shrink: 0; }
.cen-colfil button {
  font: inherit; font-size: 0.66rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-color); background: transparent; color: var(--text-muted);
}
.cen-colfil button:hover { color: var(--text-primary); }
.cen-colfil button.on { color: var(--cen-c); border-color: color-mix(in srgb, var(--cen-c) 45%, transparent); background: color-mix(in srgb, var(--cen-c) 12%, transparent); }
.cen-hosp.unit-dropzone.drag-over, .cen-hosp.unit-dropzone:hover { border-color: color-mix(in srgb, var(--cen-c) 45%, var(--border-color)); }

/* ==========================================================================
   Parte v2 · fase 2 (docs/plan-parte-v2.md): fila de no disponibles, persona
   resaltada desde «Disponibilidad del personal» y «Mis cirugías».
   ========================================================================== */
/* Fila propia bajo los días: una etiqueta por no disponible (avatar + nombre,
   borde del color del motivo). */
#parte-weekly-container .weekly-table thead tr.pt-unavail-row th { padding: 4px 6px 5px; vertical-align: top; font-weight: 400; border-top: 1px dashed var(--border-color); }
#parte-weekly-container .weekly-table thead tr.pt-unavail-row th.or-header-col { vertical-align: middle; }
.pt-unavail-lbl > span:first-child { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ef4444; }
.pt-ulegend { display: flex; gap: 3px; margin-top: 4px; }
.pt-ulegend i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--gc) 30%, transparent); border: 1px solid var(--gc); }
.pt-utags { display: flex; flex-wrap: wrap; gap: 3px; min-height: 20px; }
.pt-utag { --gc: #94a3b8; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; font: inherit; font-size: 0.64rem; font-weight: 700; color: var(--text-primary); border-radius: 999px; padding: 1px 7px 1px 1px; cursor: pointer; background: color-mix(in srgb, var(--gc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent); }
.pt-utag span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-utag .user-avatar-circle { flex-shrink: 0; font-weight: 800; }
.pt-utag:hover { background: color-mix(in srgb, var(--gc) 22%, transparent); }
.pt-utag.is-focus { box-shadow: 0 0 0 2px var(--pc, var(--accent-cyan)); }

/* Persona elegida: sus días libres con su color, el resto rayado. */
.pt-dstate { display: inline-block; margin-top: 3px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.03em; border-radius: 5px; padding: 1px 6px; }
.pt-dstate.is-free { color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.pt-dstate.is-busy { color: var(--text-secondary); background: color-mix(in srgb, var(--gc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); }
.weekly-table.pt-focus th.pt-free { box-shadow: inset 0 3px 0 var(--pc); background: color-mix(in srgb, var(--pc) 12%, var(--bg-secondary)) !important; }
.weekly-table.pt-focus tr.pt-unavail-row th.pt-free { box-shadow: none; background: color-mix(in srgb, var(--pc) 7%, var(--bg-secondary)) !important; }
.weekly-table.pt-focus td.day-cell.pt-free { background: color-mix(in srgb, var(--pc) 7%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--pc) 35%, transparent), inset -1px 0 0 color-mix(in srgb, var(--pc) 35%, transparent); }
.weekly-table.pt-focus .pt-busy { background-image: repeating-linear-gradient(135deg, rgba(100, 116, 139, 0.16) 0 7px, transparent 7px 14px) !important; }
.weekly-table.pt-focus th.pt-busy .parte-dh { opacity: 0.55; }
.weekly-table.pt-focus td.pt-busy .pqc-card { opacity: 0.38; filter: saturate(0.4); }
.weekly-table .pqc-card.pt-has { border-color: var(--pc) !important; box-shadow: 0 0 0 1px var(--pc); }
.pt-card-av { flex-shrink: 0; display: inline-flex; }
.pt-card-av .user-avatar-circle { font-weight: 800; }

/* Mis cirugías: borde del color de quien entra; el botón apaga el resto. */
.weekly-table .pqc-card.pt-me, .timeline-case-card.pt-me { box-shadow: inset 4px 0 0 var(--me) !important; border-color: color-mix(in srgb, var(--me) 55%, var(--border-color)) !important; }
.weekly-table .pqc-card.pt-me.pt-has { box-shadow: inset 4px 0 0 var(--me), 0 0 0 1px var(--pc) !important; }
.pt-dim { opacity: 0.28; filter: saturate(0.3); }
.pt-dim:hover { opacity: 0.7; }
.pt-mine-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 5px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font: 600 0.74rem var(--font-sans); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.pt-mine-btn b { font-size: 0.66rem; color: var(--me); }
.pt-mine-btn:hover { color: var(--text-primary); }
.pt-mine-btn.on { border-color: var(--me); color: var(--text-primary); background: color-mix(in srgb, var(--me) 18%, var(--bg-input)); }
.pt-mine-btn[hidden] { display: none; }

/* Botón «Disponibilidad del personal» y su menú. */
#btn-parte-seleccion.is-on { background: var(--accent-cyan); color: #06222b; border-color: var(--accent-cyan); }
#btn-parte-seleccion.pt-has-focus { background: color-mix(in srgb, var(--pc) 22%, var(--bg-input)); border-color: var(--pc); padding: 0; }
.pt-focus-chip { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 2px 0 10px; border-radius: 999px; border: 1px solid var(--pc); background: color-mix(in srgb, var(--pc) 14%, var(--bg-input)); font: 700 0.74rem var(--font-sans); color: var(--text-primary); margin-right: 4px; white-space: nowrap; }
.pt-focus-chip[hidden] { display: none; }
.pt-focus-chip button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--text-secondary); cursor: pointer; display: grid; place-items: center; }
.pt-focus-chip button:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.parte-unavail-pop.pt-avail { width: 340px; max-width: calc(100vw - 20px); padding: 0.7rem 0.6rem 0.6rem; }
.pt-av-groups { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border-color); margin: 2px 0 8px; }
.pt-av-groups button { flex: 1; border: 0; background: none; font: 600 0.7rem var(--font-sans); color: var(--text-secondary); padding: 0.28rem 0.4rem; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.pt-av-groups button.on { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.pt-av-head { display: flex; gap: 9px; padding: 0 8px 3px 7px; }
.pt-av-head > span:first-child { width: 26px; flex-shrink: 0; }
.pt-av-namecol { flex: 1; }
.pt-av-list { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; }
.pt-av-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit; color: var(--text-primary); background: none; border: 1px solid transparent; border-radius: 9px; padding: 5px 7px; cursor: pointer; }
.pt-av-row:hover { background: var(--bg-card-hover); }
.pt-av-row.is-focus { background: color-mix(in srgb, var(--pc) 14%, transparent); border-color: color-mix(in srgb, var(--pc) 60%, transparent); }
.pt-av-row .user-avatar-circle { flex-shrink: 0; font-weight: 800; }
.pt-av-row.is-focus .user-avatar-circle { box-shadow: 0 0 0 2px var(--pc); }
.pt-av-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-av-name { font-size: 0.78rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-av-sub { font-size: 0.66rem; color: var(--text-muted); }
.pt-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 16px; gap: 2px; flex: none; }
.pt-strip i { height: 12px; border-radius: 3px; font-style: normal; font-size: 0.52rem; font-weight: 800; line-height: 12px; text-align: center; }
.pt-strip i.is-free { background: color-mix(in srgb, var(--pc) 30%, transparent); color: var(--text-primary); }
.pt-strip i.is-busy { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gc) 55%, transparent) 0 2px, transparent 2px 4px); outline: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); outline-offset: -1px; }
.pt-strip--head i { font-size: 0.56rem; color: var(--text-muted); background: none; height: auto; line-height: 1; }
.pt-av-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.66rem; color: var(--text-secondary); padding: 8px 6px 2px; border-top: 1px solid var(--border-color); margin-top: 6px; }
.pt-av-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pt-av-legend i { width: 14px; height: 10px; border-radius: 3px; }
.pt-av-legend i.is-free { background: color-mix(in srgb, var(--accent-cyan) 30%, transparent); }
.pt-av-legend i.is-busy { background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.55) 0 2px, transparent 2px 4px); outline: 1px solid rgba(148, 163, 184, 0.45); }
.pt-av-legend b { font-size: 0.6rem; background: var(--bg-input); border-radius: 3px; padding: 0 4px; }
.pt-av-clear { width: 100%; margin-top: 6px; border: 1px solid var(--border-color); background: none; color: var(--text-secondary); font: 600 0.72rem var(--font-sans); border-radius: 8px; padding: 6px; cursor: pointer; }
.pt-av-clear:hover { color: var(--text-primary); background: var(--bg-card-hover); }

/* ==========================================================================
   Parte v2 · fase 3: lateral de edición (Personal · Qué se opera · Cuándo y
   dónde). Sustituye al panel «Personal quirúrgico» del modo selección.
   ========================================================================== */
@media (min-width: 1501px) {
  #tab-parte.psel-mode .or-planner-layout { grid-template-columns: minmax(0, 1fr) 360px !important; }
}
@media (min-width: 481px) and (max-width: 1500px) {
  #tab-parte.psel-mode .or-planner-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}
#parte-team-panel .pt-e-who { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border-color); box-shadow: inset 3px 0 0 var(--tone); }
.pt-e-who > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-e-who b { font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-e-who small { font-size: 0.7rem; color: var(--text-secondary); }
.pt-e-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--border-color); }
.pt-e-tabs button { flex: 1; border: 0; background: none; color: var(--text-secondary); font: 700 0.76rem var(--font-sans); padding: 7px 4px 8px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pt-e-tabs button:hover { color: var(--text-primary); }
.pt-e-tabs button.on { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }
#parte-team-panel .pteam-list.pt-e-scroll { display: block; padding: 10px 12px 12px; }
#parte-team-panel.is-empty .pt-e-tabs { opacity: 0.45; pointer-events: none; }
.pt-e-body { display: flex; flex-direction: column; gap: 11px; }
.pt-e-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pt-e-f > span:first-child, .pt-e-f > label:first-child { font-size: 0.66rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: flex; gap: 6px; align-items: baseline; }
.pt-e-mixed { font-style: italic; text-transform: none; letter-spacing: 0; color: #f59e0b; font-weight: 600; }
.pt-e-seg { display: flex; }
.pt-e-seg button { flex: 1; }
.pt-e-seg button.is-urgente.on { color: #f97316; }
.pt-e-seg button.is-emergente.on { color: #ef4444; }
.pt-e-row { display: flex; gap: 10px; align-items: flex-end; }
.pt-e-row > .pt-e-f { flex: 1; }
/* Semana de la que se eligen los días: el calendario ocupa el ancho del
   lateral en vez de colgar del título (se saldría por la derecha). */
.pt-e-week { position: relative; margin-bottom: 6px; }
.pt-e-week .wkn-anchor { position: static; }
.pt-e-week .wkn-pop { left: 0; right: 0; width: auto; transform: none; }
.pt-e-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 4px; }
.pt-e-days button, .pt-e-rooms button { border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); border-radius: 8px; cursor: pointer; font: 700 0.8rem var(--font-sans); }
.pt-e-days button { display: flex; flex-direction: column; align-items: center; padding: 4px 0; }
.pt-e-days small { font-size: 0.58rem; color: var(--text-muted); font-weight: 700; }
.pt-e-days button.today { border-color: var(--border-highlight); }
.pt-e-days button.on, .pt-e-rooms button.on { background: color-mix(in srgb, var(--accent-cyan) 20%, var(--bg-input)); border-color: var(--accent-cyan); }
.pt-e-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pt-e-rooms button { text-align: left; padding: 6px 8px; font-size: 0.74rem; box-shadow: inset 3px 0 0 var(--or-color); display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.pt-e-rooms button small { font-size: 0.6rem; color: #ef4444; font-weight: 700; }
.pt-e-rooms button:disabled { opacity: 0.45; cursor: not-allowed; }
.pt-e-center { display: flex; align-items: center; gap: 5px; font-size: 0.64rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 6px 0 3px; }
.pt-e-center svg { color: var(--accent-cyan); }
.pt-e-end { font-size: 0.74rem; color: var(--text-secondary); }
.pt-e-end b { color: var(--text-primary); }
.pt-e-list { display: flex; flex-direction: column; gap: 4px; }
.pt-e-list > div { display: flex; flex-direction: column; font-size: 0.74rem; padding: 5px 8px; border-radius: 8px; background: var(--bg-input); }
.pt-e-list span { color: var(--text-secondary); font-size: 0.7rem; }
.pt-e-chips:empty { display: none; }
/* El lateral es estrecho: el desplegable del catálogo, a su ancho. */
.pt-e-f .bc-sug { width: 100%; max-width: none; }
.pt-e-f .bc-visible-fila { flex-wrap: wrap; gap: 4px; }
.pt-e-f .bc-visible input { flex-basis: 100%; }
.pt-e-f .bc-chip { max-width: 100%; }
.pt-step { display: flex; align-items: stretch; border: 1px solid var(--pp-border-strong); border-radius: 8px; background: var(--bg-input); overflow: hidden; max-width: 190px; }
.pt-step button { flex: none; width: 32px; border: 0; background: none; color: var(--text-secondary); font: 700 1rem var(--font-sans); cursor: pointer; }
.pt-step button:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.pt-step button:first-child { border-right: 1px solid var(--border-color); }
.pt-step button:last-child { border-left: 1px solid var(--border-color); }
.pt-step input { flex: 1; min-width: 0; border: 0 !important; border-radius: 0 !important; background: none !important; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: none !important; padding-right: 2px !important; -moz-appearance: textfield; }
.pt-step input::-webkit-outer-spin-button, .pt-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pt-step-u { display: flex; align-items: center; padding: 0 6px 0 2px; font-size: 0.72rem; color: var(--text-muted); }
.pt-mat { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 9px; background: color-mix(in srgb, var(--bg-input) 50%, transparent); }
.pt-mat-h { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-secondary); }
.pt-mat-h b { font-size: 0.72rem; color: var(--text-primary); }
.pt-mat-h svg { color: var(--accent-cyan); }
.pt-mat-tag { margin-left: auto; font-size: 0.62rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; color: #f59e0b; background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.4); }
.pt-mat-tag.is-ok { color: #10b981; background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.4); }
.pt-mat-ok { justify-content: center; }
.pt-mat-ok.is-ok { color: #10b981; border-color: rgba(16, 185, 129, 0.45); }
/* Personal: avatar de color y semana en miniatura bajo el nombre. */
.pt-person .user-avatar-circle { flex-shrink: 0; font-weight: 800; }
.pt-person .pt-strip { margin-top: 3px; }
.pt-striphead { display: flex; gap: 9px; padding: 0 15px 2px 16px; }
.pt-striphead > span:first-child { width: 28px; flex-shrink: 0; }
/* Mover en bloque. */
.pt-ghost { position: fixed; z-index: 3000; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--accent-cyan); color: #06222b; font: 800 0.76rem var(--font-sans); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.weekly-table .pqc-card.pt-moving { opacity: 0.45; }
#parte-weekly-body td.pt-drop { background: color-mix(in srgb, var(--accent-cyan) 14%, transparent) !important; box-shadow: inset 0 0 0 2px var(--accent-cyan); }
#parte-weekly-body td.pt-nodrop { box-shadow: inset 0 0 0 2px #ef4444; }
#tab-parte.psel-mode .weekly-table .pqc-card.psel-sel { cursor: grab !important; }
.pt-e-note { font-size: 0.74rem; color: var(--text-secondary); padding: 6px 9px; border-radius: 8px; background: var(--bg-input); }
/* Material automático, de la ficha (fase 4). */
.pt-auto-list { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 8px; background: color-mix(in srgb, var(--accent-cyan) 7%, transparent); border: 1px dashed color-mix(in srgb, var(--accent-cyan) 40%, transparent); }
.pt-auto-lbl { display: flex; align-items: center; gap: 5px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-cyan); }
.pt-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pt-auto .pp-input { flex: 1; min-width: 140px; }
.pt-auto-src { font-size: 0.64rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.pt-auto-txt { flex: 1; min-width: 0; font-size: 0.76rem; font-weight: 600; }
.pt-auto-vendor { font-size: 0.62rem; font-weight: 700; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 999px; padding: 1px 7px; }
.pt-auto-stock { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 0.6rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; color: #f59e0b; background: rgba(245, 158, 11, 0.14); }
.pt-auto-stock.is-available, .pt-auto-stock.is-reserved { color: #10b981; background: rgba(16, 185, 129, 0.14); }
.pt-auto-stock.is-unavailable { color: #ef4444; background: rgba(239, 68, 68, 0.14); }

/* ==========================================================================
   Parte v2 · fase 6: timeline de la semana en filas por día.
   ========================================================================== */
#parte-timeline-view.tlw { justify-self: stretch; align-self: stretch; display: flex; flex-direction: column; min-height: 0; max-width: none; }
#parte-timeline-view.tlw .timeline-scroll { flex: 1; min-height: 0; overflow: auto; }
.tlw .timeline { width: max-content; min-width: 100%; }
.tlw-day { border-bottom: 2px solid var(--border-color); }
.tlw-dayhead { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); box-sizing: border-box; }
.tlw-dayname { display: flex; align-items: baseline; gap: 6px; min-width: 150px; }
.tlw-dayname b { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 800; }
.tlw-dayname small { font-size: 0.7rem; color: var(--text-muted); }
.tlw-hoy { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #06222b; background: var(--accent-cyan); border-radius: 5px; padding: 1px 5px; }
.tlw-dayhead .pt-dstate { margin-top: 0; }
.tlw-dayhead .pt-utags { flex: 1; min-width: 0; }
.tlw-day.is-today .tlw-dayhead { box-shadow: inset 3px 0 0 var(--accent-cyan); }
.tlw-center { position: sticky; left: 0; z-index: 1; border-top: 1px solid var(--border-color); background: color-mix(in srgb, var(--text-primary) 3%, var(--bg-secondary)); box-sizing: border-box; }
.tlw-center .pt-group-btn { padding: 0.28rem 0.75rem; position: static; }
.tlw-center .pt-group-btn b { font-size: 0.74rem; }

.tlw .timeline-case-card { top: 5px; bottom: 5px; height: auto; }
.tlw .room-label { padding: 0.45rem 0.9rem; }
.tlw .room-row:last-child .room-label { border-bottom-left-radius: 0; }
.tl-rel { color: var(--rc); font-weight: 800; }
.tl-rel-none { color: var(--text-muted); font-style: italic; }
/* Persona elegida y selección, como en la semanal. */
.tlw-day.pt-free .tlw-dayhead { background: color-mix(in srgb, var(--pc) 12%, var(--bg-secondary)); box-shadow: inset 0 3px 0 var(--pc); }
.tlw .room-track.pt-free { background-color: color-mix(in srgb, var(--pc) 7%, transparent); }
.tlw .room-track.pt-busy { background-color: rgba(100, 116, 139, 0.08); background-image: repeating-linear-gradient(135deg, rgba(100, 116, 139, 0.16) 0 7px, transparent 7px 14px); }
.tlw .room-track.pt-busy .timeline-case-card { opacity: 0.4; }
.timeline-case-card.pt-has { box-shadow: 0 0 0 2px var(--pc); }
.timeline-case-card.psel-sel { background: color-mix(in srgb, var(--accent-cyan) 18%, var(--bg-card)); border-color: var(--accent-cyan); box-shadow: 0 0 0 1px var(--accent-cyan); }
.timeline-case-card.is-unavail { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.8); }
/* Acciones rápidas del lateral (Operado, Suspender, Quitar). */
.pt-qas { display: flex; gap: 6px; padding: 8px 12px 0; flex-wrap: wrap; }
.pt-qa { flex: 1; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font: 700 0.7rem var(--font-sans); border-radius: 8px; padding: 5px 6px; cursor: pointer; white-space: nowrap; }
.pt-qa:hover { color: var(--text-primary); }
.pt-qa.is-ok { color: #10b981; border-color: rgba(16, 185, 129, 0.45); }
.pt-qa.is-susp { color: #d1544a; border-color: rgba(239, 107, 103, 0.45); }
.pt-qa.is-rm { color: #f87171; }
.tlw .timeline-case-body { padding: 0.18rem 0.45rem; gap: 0; }
.tlw .timeline-case-time-row .turn-badge { transform: scale(0.85); transform-origin: left center; }
.tlw .timeline-case-name { font-size: 0.7rem; line-height: 1.2; }
.tlw .timeline-case-proc { font-size: 0.62rem; line-height: 1.2; }
.tlw .room-track { height: 64px; }
#parte-timeline-view.tlw .timeline-scroll { scrollbar-gutter: stable; }