/* ═══════════════════════════════════════════════════════════════
   Kryocare · Panel de control
   Modo oscuro criogénico con la paleta corporativa:
     #000f22  → fondo de pantalla
     #1b3554  → menú lateral, encabezado y tarjetas de panel
     #3f6593 · #5b86b6 → bordes, botones y estado activo
     #80aad3  → bloque del logo y textos atenuados
     #c0e6fd  → tarjetas KPI y viñetas (claras, para que floten)
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* Superficies */
  --surface-page:   #000f22; /* el azul más profundo: fondo de pantalla */
  --surface-card:   #1b3554; /* menú, encabezado y paneles */
  --surface-sunken: #04182f; /* hundido: inputs, registro, días del calendario */
  --surface-raised: #24456b; /* hover sobre superficies oscuras */

  /* Texto sobre fondo oscuro — tonos claros de la misma familia fría */
  --text-primary:   #eaf3fb;
  --text-secondary: #c0e6fd;
  --text-muted:     #80aad3;

  --border:   #3f6593;
  --gridline: rgba(128, 170, 211, 0.18);

  /* Acción: azul medio. El texto que va encima es el azul profundo, que
     contrasta mejor que el blanco sobre este tono (5.0:1 vs 3.8:1). */
  --brand-accent:       #5b86b6;
  --brand-accent-hover: #80aad3;
  --brand-accent-ink:   #000f22;
  --brand-accent-soft:  #3f6593;
  --brand-accent-line:  #5b86b6;

  /* Bloque del logo: el logotipo tiene letras oscuras, así que necesita
     fondo claro para ser legible. */
  --logo-bg: #80aad3;

  /* Tarjetas KPI: claras a propósito, para que floten sobre el fondo oscuro. */
  --kpi-bg:   #c0e6fd;
  --kpi-text: #000f22;

  /* Estado operativo del bot: se mantiene semántico (verde/rojo). Es
     información de seguridad —conectado o caído— y teñirla de azul haría
     perder la lectura inmediata. Tonos claros para fondo oscuro. */
  --status-good:     #5ddba4;
  --status-warning:  #f0c05a;
  --status-serious:  #f0955a;
  --status-critical: #ff8a8a;

  /* Etapas del embudo — el color vive en el punto de la viñeta. Tonos
     oscuros porque las viñetas tienen fondo claro (#c0e6fd). */
  --flag-stage-1:  #1b3554;
  --flag-stage-2:  #b4460f;
  --flag-stage-3:  #a35b00;
  --flag-good:     #0f7b52;
  --flag-critical: #b3261e;
  --flag-none:     #3f6593;

  /* Sucursales (calendario) — categóricas, claras sobre fondo oscuro */
  --branch-1: #7fb3ff;
  --branch-2: #f0955a;
  --branch-3: #5ddba4;
  --branch-4: #c79bff;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Sombras profundas + un resplandor frío tenue para las piezas claras */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.42), 0 16px 40px rgba(0, 0, 0, 0.36);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.6);
  --glow-cold: 0 0 0 1px rgba(192, 230, 253, 0.25), 0 6px 20px rgba(128, 170, 211, 0.28);

  --header-h: 68px;
  --sidebar-w: 246px;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ══════════ Encabezado ══════════
   Ocupa todo el ancho. Su bloque izquierdo mide exactamente lo mismo que el
   menú, así el logo queda en su propia caja clara justo encima del sidebar —
   despejado y sin que nada se le superponga. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

/* Fondo celeste obligatorio: el logotipo es de letras oscuras y sobre el azul
   profundo desaparecía. El borde inferior suaviza el salto al menú oscuro. */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: var(--sidebar-w);
  flex-shrink: 0;
  padding: 0 20px;
  background: var(--logo-bg);
  border-bottom: 1px solid rgba(0, 15, 34, 0.22);
  border-right: 1px solid rgba(0, 15, 34, 0.12);
}
.brand-logo-img { height: 32px; width: auto; display: block; }
.brand-powered {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1b3554;
  border-left: 1px solid rgba(0, 15, 34, 0.3);
  padding-left: 12px;
  white-space: nowrap;
}

.topbar-right { display: flex; align-items: center; gap: 14px; padding-right: 26px; }

/* Quién inició sesión + cambiar contraseña / salir */
.user-menu { display: flex; align-items: center; gap: 10px; }
.user-menu-who { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.user-menu-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.user-menu-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.user-menu-btn { text-decoration: none; white-space: nowrap; }

/* Selector "Actuando como": con qué personalidad responde el bot a los
   clientes. Vive junto al estado de conexión porque las dos cosas responden a
   lo mismo — cómo está operando el bot en este momento. */
.agent-picker { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.agent-picker-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
#agent-select { max-width: 170px; }

.sidebar-toggle {
  display: none;
  background: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 16px;
  cursor: pointer;
}

/* ══════════ Estructura ══════════ */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
}

/* ══════════ Sidebar ══════════ */

.sidebar {
  position: sticky;
  top: var(--header-h); /* nunca invade el encabezado */
  height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  background: var(--surface-card);
  border-right: 1px solid var(--border);
  z-index: 20;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Los ítems del menú son <button>, así que hay que neutralizar el brillo y la
   sombra de los botones de acción — acá el resaltado lo da el estado activo. */
.nav-item:hover:not(:disabled) {
  background: var(--surface-raised);
  color: var(--text-primary);
  filter: none;
  box-shadow: none;
}
/* La sección activa se marca con el azul medio, en sólido: es la única pieza
   del menú que se rellena, así no compite con nada más. */
.nav-item.is-active,
.nav-item.is-active:hover:not(:disabled) {
  background: var(--brand-accent);
  border-color: var(--brand-accent-hover);
  color: var(--brand-accent-ink);
  box-shadow: none;
  filter: none;
}
.nav-item.is-active .nav-icon { color: var(--brand-accent-ink); }
.nav-item:focus-visible { outline: 2px solid var(--brand-accent-hover); outline-offset: 2px; box-shadow: none; }

.nav-icon { color: var(--brand-accent-hover); font-size: 13px; width: 16px; text-align: center; }
.nav-label { flex: 1; }

.nav-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--brand-accent-soft);
  border: 1px solid var(--brand-accent-line);
  border-radius: 999px;
  padding: 0 7px;
  min-width: 20px;
  text-align: center;
}
.nav-item.is-active .nav-badge {
  background: var(--brand-accent-ink);
  border-color: var(--brand-accent-ink);
  color: var(--brand-accent-hover);
}
.nav-badge:empty { display: none; }

.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--flag-none); }
.nav-dot.is-on  { background: var(--status-good); box-shadow: 0 0 8px rgba(93, 219, 164, 0.7); }
.nav-dot.is-off { background: var(--status-critical); box-shadow: 0 0 8px rgba(255, 138, 138, 0.7); }

/* ══════════ Contenido ══════════ */

.content {
  min-width: 0;
  padding: 26px 30px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.content-head { min-width: 0; }
.view-title {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.view-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* Solo una vista visible a la vez — el menú es la única navegación. */
.view { display: none; flex-direction: column; gap: 20px; }
.view.is-active { display: flex; }

/* ══════════ Badges ══════════ */

.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge-good { color: var(--status-good); background: rgba(93, 219, 164, 0.14); border-color: rgba(93, 219, 164, 0.4); }
.badge-critical { color: var(--status-critical); background: rgba(255, 138, 138, 0.14); border-color: rgba(255, 138, 138, 0.4); }
.badge-muted { color: var(--text-muted); background: var(--surface-sunken); }

/* ══════════ Tarjetas KPI ══════════
   Claras sobre el fondo oscuro: son el dato que más se consulta, así que
   flotan por contraste invertido, con resplandor frío en el borde. */

.kpis-header { display: flex; justify-content: flex-end; margin-bottom: -6px; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}

.kpi-tile {
  background: var(--kpi-bg);
  border: 1px solid rgba(0, 15, 34, 0.12);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-1), var(--glow-cold);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(192, 230, 253, 0.5), 0 10px 28px rgba(128, 170, 211, 0.4);
}

.kpi-tile .kpi-value {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kpi-text);
  font-variant-numeric: proportional-nums;
}
.kpi-tile .kpi-label { font-size: 12.5px; color: var(--kpi-text); opacity: 0.78; margin-top: 3px; }
.kpi-tile .kpi-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }

/* ══════════ Paneles ══════════ */

.panel {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}
.panel h2 {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0;
  font-weight: 700;
}
.panel-header-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mine-filter { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.metrics-hint { font-size: 11.5px; color: var(--text-muted); }

/* ══════════ Formularios ══════════ */

select, input[type="text"], input[type="number"], input[type="password"], textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 11px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
select:hover, input:hover, textarea:hover { border-color: var(--brand-accent-hover); }
select:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: none;
  border-color: var(--brand-accent-hover);
  box-shadow: 0 0 0 3px rgba(128, 170, 211, 0.3);
}
textarea { width: 100%; resize: vertical; }
::placeholder { color: var(--text-muted); opacity: 0.7; }

button {
  align-self: flex-start;
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
button:hover:not(:disabled) { background: var(--brand-accent-hover); box-shadow: 0 4px 16px rgba(128, 170, 211, 0.35); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 600;
  padding: 7px 14px;
  font-size: 13px;
}
.ghost-btn:hover:not(:disabled) {
  background: var(--surface-raised);
  border-color: var(--brand-accent-hover);
  color: var(--text-primary);
  box-shadow: none;
}

.campaign-form { display: flex; flex-direction: column; gap: 14px; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row label,
.campaign-form > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 200px;
}
.field-hint { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }

/* Utilidad de visibilidad: va con !important a propósito. Los campos del
   formulario de campaña se ocultan con esta clase, pero `.campaign-form > label`
   es más específica y les devolvía `display:flex` — se veían los campos de
   video y galería aun eligiendo "Texto". */
.hidden { display: none !important; }

.recipients-preview {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 13px;
}

.video-add-row { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.video-add-form { display: flex; gap: 8px; width: 100%; }
.video-add-form input { flex: 1; }
.gallery-add-form { flex-direction: column; align-items: stretch; }
.gallery-add-form textarea { font-family: var(--mono); font-size: 12.5px; resize: vertical; }

/* ══════════ Tablas (Registro en vivo) ══════════
   Fondo oscuro con texto claro: el dato se lee sin que el panel compita. */

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--text-primary); }
thead th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td { padding: 11px 8px; border-bottom: 1px solid var(--gridline); vertical-align: middle; color: var(--text-primary); }
tbody tr { transition: background-color 0.1s ease; }
tbody tr:hover { background: rgba(128, 170, 211, 0.12); }
tbody tr:last-child td { border-bottom: none; }
.empty-row { color: var(--text-muted); text-align: center; padding: 30px; }

/* Celda de etapa: el punto de color + el selector, en una sola línea.
   Antes mostraba la etapa DOS veces —una pastilla de solo lectura y debajo el
   selector con el mismo valor—, y la insignia IA se iba a un tercer renglón.
   Eso hacía filas de alturas distintas (88, 108 y hasta 126px según si el texto
   de la etapa partía o no), y como el resto de celdas se centra vertical, toda
   la tabla se veía descuadrada. Ahora la etapa se lee del propio selector, que
   además es el control con el que se cambia — igual que Sucursal, Segmento y
   Asignado a. El color sigue a la vista en el punto. */
/* Los tonos de etapa de arriba son oscuros porque las tarjetas KPI tienen
   fondo claro (#c0e6fd). En la tabla de leads el fondo es oscuro, así que ahí
   el mismo punto desaparecía — "Interesado" quedaba exactamente del color del
   fondo. Se redefinen los mismos tokens en el ámbito de la tabla: el var() de
   FLAG_COLORS resuelve claro acá y oscuro en las KPI, sin tocar el JS y sin
   duplicar la paleta. Se conservan las relaciones de la paleta original
   (etapa 1 fría, 2 naranja, 3 ámbar, conversión verde, descarte rojo). */
#leads-table {
  --flag-stage-1:  #7fb3ff;
  --flag-stage-2:  #f0955a;
  --flag-stage-3:  #f0c05a;
  --flag-good:     #5ddba4;
  --flag-critical: #ff8a8a;
  --flag-none:     #80aad3;
}

.flag-cell { display: flex; align-items: center; gap: 7px; }
.flag-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pill-color, var(--flag-none));
  flex-shrink: 0;
}

.ia-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--brand-accent-soft);
  border: 1px solid var(--brand-accent-line);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 2px;
  vertical-align: middle;
  cursor: help;
  flex-shrink: 0;
}

.opt-badge { font-size: 12px; font-weight: 600; }
.opt-yes { color: var(--status-good); }
.opt-no { color: var(--text-muted); }

/* Id interno de WhatsApp cuando el cliente no dio su teléfono — atenuado
   para distinguirlo de un número real con el que sí se puede llamar. */
.contact-id { color: var(--text-muted); font-family: var(--mono); font-size: 12px; }

.lead-name-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-primary);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
}
.lead-name-btn:hover {
  color: var(--brand-accent-hover);
  text-decoration-color: var(--brand-accent-hover);
  background: none;
  box-shadow: none;
}

/* La tabla de leads tiene nueve columnas y se salía del panel: en pantallas de
   hasta ~1440px, "Asignado a" quedaba fuera del área visible y había que
   desplazar de lado para llegar, así que parecía que no estaba. Se acotan los
   selects más anchos —los textos largos se recortan con "…" y el valor completo
   sigue en el title— y la columna se movió junto al contacto. */
.assigned-select { max-width: 118px; }
.branch-select { max-width: 132px; }
.flag-select { max-width: 108px; }
.segment-select { max-width: 88px; }
.package-assign-select { font-size: 12.5px; max-width: 128px; }
.package-cell { display: flex; align-items: center; gap: 8px; }
.package-count { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--text-primary); }
.package-count.package-depleted { color: var(--status-critical); }
.package-use-btn { padding: 3px 9px; font-size: 11.5px; }

/* ══════════ Calendario ══════════ */

/* ══════════ Hoja de calendario ══════════
   El calendario se presenta como una hoja blanca —igual que Google Calendar—
   dentro del panel oscuro. Redefine sus propios tokens en vez de sobrescribir
   componente por componente: todo lo que viva adentro hereda el juego claro y
   sigue resolviendo bien sin depender del tema del resto. */

.panel-sheet {
  --surface-card:   #ffffff;
  --surface-sunken: #f1f3f4;
  --surface-raised: #f8f9fa;
  --text-primary:   #202124;
  --text-secondary: #3c4043;
  --text-muted:     #5f6368;
  --border:         #dadce0;
  --gridline:       #e8eaed;

  background: #ffffff;
  border-color: #dadce0;
  color: var(--text-primary);
  box-shadow: var(--shadow-2);
}
/* El encabezado del panel queda fuera del juego claro: es el rótulo de la
   sección, no parte de la hoja. */
.panel-sheet > .panel-header h2 { color: #5f6368; }
.panel-sheet > .panel-header .metrics-hint { color: #5f6368; }

.panel-sheet .cal-day {
  background: #ffffff;
  border-color: #dadce0;
}
.panel-sheet .cal-day-head {
  background: #f8f9fa;
  border-bottom-color: #dadce0;
  color: #3c4043;
}
.panel-sheet .cal-empty { color: #80868b; }
.panel-sheet .cal-notice { color: #5f6368; }
.panel-sheet .cal-legend-item { color: #3c4043; }
.panel-sheet .cal-legend-n { color: #80868b; }

/* Cita: fondo teñido con su propio color y barra a la izquierda, como en
   Google Calendar. El texto va en tinta oscura para leerse sobre el tinte. */
/* Relleno sólido con el color real del evento, como lo pinta Google Calendar:
   así una cita turquesa (paciente nuevo) se reconoce igual que en el calendario.
   --chip-ink lo calcula app.js para que el texto se lea sobre cualquier color. */
.panel-sheet .cal-chip {
  --chip-ink: #1d1d1d;
  background: var(--chip-color);
  border: 1px solid color-mix(in srgb, var(--chip-color) 80%, #000000);
  border-left: 1px solid color-mix(in srgb, var(--chip-color) 80%, #000000);
  box-shadow: none;
}
.panel-sheet .cal-chip-time { color: var(--chip-ink); }
.panel-sheet .cal-chip-name { color: var(--chip-ink); }
.panel-sheet .cal-chip-branch { color: var(--chip-ink); opacity: 0.85; font-weight: 600; }
/* Insignias NUEVO y BOT. El color del chip ya está ocupado identificando el
   tratamiento, así que estas dos cosas —paciente nuevo y cita agendada por el
   asistente— se marcan con etiquetas en tinta sobre el propio color, que se
   leen sin romper el código de colores que la sede usa en Google Calendar. */
.panel-sheet .cal-chip-tag {
  color: var(--chip-color);
  background: var(--chip-ink);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 2px;
  white-space: nowrap;
}
/* NUEVO va en hueco (borde, sin relleno) para que las dos insignias juntas se
   distingan de un vistazo en vez de leerse como un solo bloque. */
.panel-sheet .cal-chip-tag.is-nuevo {
  color: var(--chip-ink);
  background: transparent;
  box-shadow: inset 0 0 0 1.2px var(--chip-ink);
}
/* Paciente nuevo: además, un borde más marcado en todo el chip para que salte
   a la vista al mirar la semana completa. */
.panel-sheet .cal-chip.is-primera { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--chip-color) 55%, #000000); }
.panel-sheet .cal-legend-bot-tag { --chip-color: #ffffff; --chip-ink: #3c4043; margin: 0 6px 0 0; }

/* Pestañas de sede: cada una abre la agenda de su propio calendario. */
.sede-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.sede-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sede-tab:hover:not(:disabled) {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: none;
  filter: none;
}
.sede-tab.is-active,
.sede-tab.is-active:hover:not(:disabled) {
  background: var(--brand-accent);
  border-color: var(--brand-accent-hover);
  color: var(--brand-accent-ink);
  box-shadow: none;
  filter: none;
}
/* Sede sin calendario propio: se lista igual —para que se vea que existe—
   pero atenuada, porque su agenda todavía no se puede mostrar. */
.sede-tab.is-off { opacity: .6; }
.sede-tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sede-tab-count {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--brand-accent-soft);
  color: var(--text-primary);
}
.sede-tab.is-active .sede-tab-count { background: var(--brand-accent-ink); color: var(--brand-accent-hover); }
.sede-tab-off {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Pestañas dentro de la hoja blanca: la activa se rellena con el color del
   propio calendario de esa sede, así la pestaña y sus citas se leen como una
   sola cosa. */
.panel-sheet .sede-tab {
  border-color: #dadce0;
  color: #3c4043;
  background: #ffffff;
}
.panel-sheet .sede-tab:hover:not(:disabled) { background: #f1f3f4; color: #202124; }
.panel-sheet .sede-tab.is-active,
.panel-sheet .sede-tab.is-active:hover:not(:disabled) {
  background: #e8eaed;
  border-color: #9aa0a6;
  color: #202124;
}
.panel-sheet .sede-tab-count { background: #e8eaed; color: #3c4043; }
.panel-sheet .sede-tab.is-active .sede-tab-count { background: #ffffff; color: #202124; }
.panel-sheet .sede-tab-off { color: #80868b; }

/* Aviso a ancho completo dentro de la rejilla del calendario. */
.cal-notice {
  grid-column: 1 / -1;
  max-width: 62ch;
  line-height: 1.55;
}

/* Marca de "la agendó el asistente" dentro del chip. */
.cal-chip-bot { color: var(--brand-accent-hover); font-size: 9px; margin-left: 6px; vertical-align: 1px; }
.cal-legend-dot.cal-legend-bot {
  background: transparent;
  border: 1.5px solid var(--brand-accent-hover);
}
/* Cuántas citas hay de cada color en la sede abierta. */
.cal-legend-n {
  font-family: var(--mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  margin-left: 2px;
}

/* Navegación de semana */
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 4px 11px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.week-btn:hover:not(:disabled) {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: none;
  filter: none;
}
.week-today { font-size: 12.5px; padding: 5px 12px; }
.panel-sheet .week-btn { border-color: #dadce0; color: #3c4043; background: #ffffff; }
.panel-sheet .week-btn:hover:not(:disabled) { background: #f1f3f4; color: #202124; }

/* La semana entra completa en el ancho: siete columnas iguales, sin
   desplazamiento lateral — desplazar era lo que hacía confundir los días. */
.calendar-week-wrap { overflow-x: auto; }
.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  min-width: 720px; /* por debajo de esto sí se desplaza, para no aplastar */
}

/* Cabecera de día: nombre arriba, número grande debajo, como Google Calendar. */
.cal-day-head { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cal-day-name {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}
.cal-day-num { font-size: 17px; font-weight: 700; line-height: 1.1; }
/* Total del día: permite cotejar de un vistazo contra Google Calendar. */
.cal-day-count {
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  margin-top: 1px;
}
.panel-sheet .cal-day-count { color: #5f6368; }
.panel-sheet .cal-day.is-today .cal-day-count { color: #1a73e8; }

/* El día de hoy se marca con el acento, igual que en Google Calendar. */
.cal-day.is-today { border-color: var(--brand-accent-hover); }
.panel-sheet .cal-day.is-today { border-color: #1a73e8; }
.panel-sheet .cal-day.is-today .cal-day-head { background: #e8f0fe; color: #1a73e8; }
.panel-sheet .cal-day.is-today .cal-day-num { color: #1a73e8; }
/* La columna crece con sus citas. Antes tenía alto tope con desplazamiento
   interno: en un día con 7 citas solo se veían 3 y las demás quedaban ocultas
   tras una barra que nadie notaba — parecía que el sistema no las leía. */
.cal-day {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.cal-day-head {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--text-secondary);
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-card);
}
/* Sin overflow: todas las citas del día quedan a la vista y es la página la
   que se desplaza, no cada columna por dentro. */
.cal-day-body { padding: 11px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.cal-chip {
  --chip-color: var(--brand-accent-hover);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--chip-color);
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 12.5px;
  line-height: 1.35;
  box-shadow: var(--shadow-1);
}
/* La hora y las insignias comparten la primera línea del chip; si no entran,
   las insignias bajan enteras en vez de partir la hora en dos renglones. */
.cal-chip-time {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
}
.cal-chip-time > .cal-chip-hora { white-space: nowrap; }
.cal-chip-name { color: var(--text-secondary); display: block; margin-top: 2px; }
/* Nombres de tratamiento largos ("Fotobiomodulación",
   "Hidroterapia de Colon") tienen que partirse dentro del chip: en flex se
   salían por el costado de la columna del día. */
.cal-chip-branch {
  color: var(--text-muted);
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.cal-chip-branch::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-color);
  margin-right: 5px;
  vertical-align: 1px;
}
.cal-empty { font-size: 13px; color: var(--text-muted); padding: 6px 2px; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 2px 14px; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.cal-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ══════════ Registro de envíos ══════════ */

.log {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  max-height: 260px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.log:empty::after { content: "Sin actividad todavía."; color: var(--text-muted); }
.log-line { padding: 2px 0; }
.log-line.ok { color: var(--status-good); }
.log-line.err { color: var(--status-critical); }

/* ══════════ Chat por lead ══════════ */

.chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 15, 34, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.chat-overlay.hidden { display: none !important; }

.chat-panel {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-3);
}

.chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.chat-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.chat-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.chat-sequence-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.chat-sequence-btn {
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-weight: 600;
}
.chat-sequence-btn:hover:not(:disabled) {
  background: var(--surface-raised);
  border-color: var(--brand-accent-hover);
  box-shadow: none;
}
.chat-sequence-btn.danger { color: var(--status-critical); }
.sequence-status { font-family: var(--mono); font-size: 11px; color: var(--brand-accent-hover); font-weight: 700; }
.chat-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}
.chat-close:hover { color: var(--text-primary); background: none; box-shadow: none; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-page);
}

/* Entrante: tarjeta oscura con borde frío. Saliente: celeste claro con texto
   profundo — el mismo par de colores que las KPI, para que "lo de Kryocare"
   se lea siempre igual. */
.chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.chat-bubble.in {
  align-self: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.chat-bubble.out {
  align-self: flex-end;
  background: var(--kpi-bg);
  color: var(--kpi-text);
  font-weight: 500;
}
.chat-meta { font-size: 11px; margin-top: 5px; display: flex; gap: 6px; align-items: center; }
.chat-bubble.in .chat-meta { color: var(--text-muted); }
.chat-bubble.out .chat-meta { color: var(--kpi-text); opacity: 0.7; }

.chat-reply-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-card);
}
.chat-reply-form textarea { flex: 1; resize: none; }
.chat-reply-form button { align-self: flex-end; }

/* ══════════ Responsive ══════════ */

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-2); }
  .sidebar-toggle { display: block; }
  .user-menu-who, a.user-menu-btn { display: none; }
  .topbar-brand { width: auto; min-width: 180px; }
  .content { padding: 20px 18px 60px; }
  .agent-picker-label { display: none; }
  .topbar-right { padding-right: 16px; }
}

/* ══════════ Usuarios del panel ══════════ */

.user-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.user-inactive td { opacity: 0.55; }

/* Contraseña temporal recién generada: se muestra una sola vez. */
.temp-password {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--status-warning);
  border-radius: 10px;
  background: rgba(240, 192, 90, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
}
.temp-password > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.temp-password-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.temp-password code {
  font-family: var(--mono);
  font-size: 15px;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  user-select: all;
}

/* ══════════ Login ══════════ */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.login-brand { background: var(--logo-bg); padding: 22px; display: flex; justify-content: center; }
.login-logo { height: 40px; width: auto; display: block; }
.login-form { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px 28px; }
.login-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-secondary); }
.login-form button { align-self: stretch; }
.login-title { font-size: 19px; margin: 0; }
.login-sub { margin: -8px 0 4px; font-size: 13.5px; color: var(--text-muted); }
.login-error {
  font-size: 13px;
  color: var(--status-critical);
  background: rgba(255, 138, 138, 0.12);
  border: 1px solid rgba(255, 138, 138, 0.4);
  border-radius: 9px;
  padding: 8px 11px;
}
.login-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.login-link { font-size: 13px; color: var(--text-muted); }

/* Estado de la actualización automática de la agenda */
.panel-sheet .agenda-updated { color: #5f6368; }
.panel-sheet .agenda-updated.is-error { color: #c5221f; }
.panel-sheet .week-refresh { font-size: 12.5px; }

/* ══════════ Subir video arrastrando ══════════ */

.video-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 132px;
  padding: 20px 16px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.video-drop:hover,
.video-drop:focus-visible { border-color: var(--brand-accent-hover); outline: none; }
.video-drop.is-over { border-color: var(--brand-accent-hover); background: var(--surface-raised); }
.video-drop.is-uploading { cursor: progress; border-style: solid; }
.video-drop.is-ok { border-color: var(--status-good); border-style: solid; }
.video-drop.is-error { border-color: var(--status-critical); }
.video-drop-icon { font-size: 22px; line-height: 1; color: var(--brand-accent-hover); }
.video-drop-title { font-size: 14.5px; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.video-drop-hint { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.video-drop.is-ok .video-drop-hint { color: var(--status-good); }
.video-drop.is-error .video-drop-hint { color: var(--status-critical); }
.video-drop-progress {
  width: min(320px, 100%);
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--surface-card);
  overflow: hidden;
}
.video-drop-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-accent-hover);
  transition: width 0.15s ease;
}

/* ══════════ Galería armada arrastrando fotos ══════════ */

.gallery-tray { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.gallery-thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.gallery-thumb {
  position: relative;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gallery-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; max-width: 100%; }
.gallery-thumb-n {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.gallery-thumb-actions { display: flex; justify-content: space-between; gap: 4px; padding: 6px; }
.gallery-thumb-actions .ghost-btn { padding: 3px 9px; font-size: 13px; align-self: auto; }
.gallery-tray-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gallery-tray-actions input { flex: 1; min-width: 220px; }
.gallery-tray-actions button { align-self: auto; }