/* Daily Tracker — panel interno de outreach.
   Paleta OKLCH: blanco puro + azul operativo (hue 240), estrategia contenida. */

:root {
  --bg: oklch(1 0 0);
  --lienzo: oklch(0.972 0.008 240);
  --surface: oklch(0.967 0.005 240);
  --borde: oklch(0.9 0.012 240);
  --borde-fuerte: oklch(0.78 0.02 240);
  --ink: oklch(0.23 0.02 245);
  --muted: oklch(0.44 0.02 245);
  --primary: oklch(0.52 0.13 240);
  --primary-hover: oklch(0.45 0.13 240);
  --primary-tenue: oklch(0.94 0.03 240);
  --navy: oklch(0.3 0.05 245);
  --ok: oklch(0.5 0.13 150);
  --ok-tenue: oklch(0.95 0.035 150);
  --err: oklch(0.5 0.18 25);
  --err-tenue: oklch(0.96 0.02 25);
  /* Aviso: el ámbar de la casa, ascendido a color semántico junto a ok y err.
     Los [data-estado='Borrador'|'Pendiente'] repiten este tono a propósito:
     son el vocabulario de estados, otro sistema, y no deben acoplarse. */
  --aviso: oklch(0.45 0.1 70);
  --aviso-tenue: oklch(0.95 0.055 85);

  /* Identidad de mensajes A / B */
  --msga-bg: oklch(0.955 0.025 240);
  --msga-tx: oklch(0.42 0.11 240);
  --msgb-bg: oklch(0.955 0.028 300);
  --msgb-tx: oklch(0.42 0.1 300);
  --violeta: oklch(0.46 0.14 300);
  --violeta-hover: oklch(0.4 0.14 300);

  /* WhatsApp */
  --wa: oklch(0.5 0.12 155);
  --wa-tenue: oklch(0.95 0.04 152);

  --radio: 10px;
  --radio-s: 7px;
  --transicion: 180ms cubic-bezier(0.22, 1, 0.36, 1);

  --z-dropdown: 5;
  --z-sticky: 10;
  --z-toast: 30;
}

* { box-sizing: border-box; }

/* [hidden] debe ganar a cualquier display de componente (.campo, .btn-copiar...) */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

section { scroll-margin-top: 4.75rem; }

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-feature-settings: 'tnum';
}

h1, h2, h3, h4, p { margin: 0; }

/* ---------- Cabecera ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--borde);
}

.topbar-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar h1 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fecha {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Badge de mensajes (arriba a la derecha, siempre visible) */

/* Pestañas de navegación Panel / Clientes */
.nav-paginas {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.1875rem;
}

.nav-tab {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 0.3125rem 0.875rem;
  border-radius: 999px;
  transition: background var(--transicion), color var(--transicion);
}
.nav-tab:hover { color: var(--ink); }
.nav-tab[aria-current='page'] {
  background: var(--bg);
  color: var(--primary);
  box-shadow: 0 1px 2px oklch(0.3 0.05 245 / 0.08);
}

/* Enlace de salto a Borradores (en el header fijo) */
.btn-borradores {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  min-height: 2rem;
  white-space: nowrap;
  transition: border-color var(--transicion), background var(--transicion);
}
.btn-borradores:hover { border-color: var(--primary); background: var(--primary-tenue); }

.badge-mensajes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--navy);
  color: oklch(1 0 0);
  border-radius: 999px;
  padding: 0.4375rem 0.625rem 0.4375rem 0.875rem;
  transition: background var(--transicion);
}

.badge-mensajes.sin-datos { background: var(--muted); }

.badge-label {
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.badge-num {
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 1.25ch;
  text-align: center;
}

.badge-hace {
  font-size: 0.6875rem;
  opacity: 0.75;
  white-space: nowrap;
}
.badge-hace:empty { display: none; }

.btn-refrescar {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 0;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.16);
  color: inherit;
  cursor: pointer;
  transition: background var(--transicion);
}
.btn-refrescar:hover { background: oklch(1 0 0 / 0.28); }
.btn-refrescar.girando svg { animation: girar 0.8s linear infinite; }

@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Estructura ---------- */

.contenedor {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.seccion-cabecera { margin-bottom: 1rem; }

/* Al llegar por el enlace del header, el título parpadea una vez para
   localizar la sección (la página no siempre puede hacer scroll hasta arriba) */
section:target .seccion-cabecera h2 {
  animation: destacar 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes destacar {
  0%, 35% { background: var(--primary-tenue); box-shadow: 0 0 0 8px var(--primary-tenue); border-radius: 4px; }
  100% { background: transparent; box-shadow: 0 0 0 8px transparent; }
}

h2 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.cuenta {
  color: var(--muted);
  font-weight: 500;
}

.nota {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
/* Cifras del día y acción de tanda, en la misma línea bajo la cabecera */
.leads-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: -0.375rem 0 0.875rem;
}
.cifras-tanda { margin: 0; }
.cifras-tanda:empty { display: none; }
.btn-lote:disabled { opacity: 0.6; cursor: progress; }

/* ---------- Tarjetas de leads ---------- */

.seccion-cuerpo { display: flex; flex-direction: column; gap: 0.875rem; }

.lead-card {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.lead-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.lead-titulo { min-width: 0; }

.lead-nombre {
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lead-dedica {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.125rem;
}
.lead-dedica:empty { display: none; }

.lead-telefono {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
}

.tel-num {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  user-select: all; /* un clic sobre el número lo selecciona entero */
}

.lead-resenas {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.lead-resenas:empty { display: none; }
.lead-resenas strong { color: var(--ink); font-weight: 600; }

.lead-controles {
  display: flex;
  align-items: end;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Campos con etiqueta */

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.campo-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

select {
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  padding: 0.375rem 0.5rem;
  min-height: 2.25rem;
  cursor: pointer;
  transition: border-color var(--transicion);
}
select:hover { border-color: var(--primary); }
select:disabled { opacity: 0.6; cursor: progress; }

/* Segmentado A/B */

.segmento {
  display: inline-flex;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  overflow: hidden;
}

.seg-btn {
  position: relative;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 1rem;
  min-height: 2.125rem;
  border: 0;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

/* Punto indicador del modelo recomendado (distinto del estado activo relleno) */
.seg-btn.recomendado::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
}
.seg-btn.recomendado[data-modelo='B']::after { background: var(--violeta); }
.seg-btn.activo.recomendado::after { background: oklch(1 0 0); }
.seg-btn + .seg-btn { border-left: 1px solid var(--borde-fuerte); }
.seg-btn:hover { background: var(--surface); color: var(--ink); }
.seg-btn.activo { background: var(--primary); color: oklch(1 0 0); }
.seg-btn.activo:hover { background: var(--primary-hover); }
.seg-btn[data-modelo='B'].activo { background: var(--violeta); }
.seg-btn[data-modelo='B'].activo:hover { background: var(--violeta-hover); }
.seg-btn:disabled { cursor: progress; }

/* Botones de cambio rápido de estado (heredan --st-* de su data-estado) */

.campo-rapido { margin-left: auto; }

.acciones-rapidas { display: flex; gap: 0.375rem; flex-wrap: wrap; }

.btn-rapido {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  min-height: 2.125rem;
  border: 1px solid var(--st-bd, var(--borde-fuerte));
  border-radius: 999px;
  background: var(--bg);
  color: var(--st-tx, var(--ink));
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion);
}
.btn-rapido:hover { background: var(--st-bg, var(--surface)); }

/* Indicador de guardado */

.save-ind {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  min-width: 5.5rem; /* reserva el hueco: sin saltos de layout al guardar */
  text-align: right;
}
.save-ind.guardando { color: var(--muted); }
.save-ind.guardado { color: var(--ok); }
.save-ind.con-error { color: var(--err); }

/* Mensajes A / B */

.mensajes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.msg {
  background: var(--surface);
  border-radius: var(--radio-s);
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.msg[data-letra='A'] { background: var(--msga-bg); }
.msg[data-letra='B'] { background: var(--msgb-bg); }
.msg[data-letra='A'] .msg-label { color: var(--msga-tx); }
.msg[data-letra='B'] .msg-label { color: var(--msgb-tx); }

.msg-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.msg-ident {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.msg-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.msg-recomendado {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--bg);
  white-space: nowrap;
}
.msg-recomendado[hidden] { display: none; }
.msg[data-letra='A'] .msg-recomendado { color: var(--msga-tx); }
.msg[data-letra='B'] .msg-recomendado { color: var(--msgb-tx); }

.msg-acciones { display: flex; gap: 0.375rem; }

.btn-copiar,
.btn-wa,
.btn-correo {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.btn-copiar:hover { border-color: var(--primary); color: var(--primary); }

.btn-wa {
  border-color: oklch(0.82 0.07 152);
  color: var(--wa);
  font-weight: 600;
}
.btn-wa:hover { border-color: var(--wa); background: var(--wa-tenue); color: var(--wa); }
.btn-copiar.copiado { border-color: var(--ok); color: var(--ok); background: var(--ok-tenue); }
.btn-copiar:disabled { opacity: 0.45; cursor: default; }
.btn-copiar:disabled:hover { border-color: var(--borde-fuerte); color: var(--ink); }

.btn-wa.deshabilitado {
  opacity: 0.45;
  pointer-events: none;
}

/* Escribir un correo: mismo tamaño que WhatsApp, en el azul de la casa */
.btn-correo {
  border-color: oklch(0.85 0.06 240);
  color: var(--primary);
  font-weight: 600;
}
.btn-correo:hover {
  border-color: var(--primary);
  background: var(--primary-tenue);
  color: var(--primary);
}

.msg-texto {
  font-size: 0.875rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.msg-texto.recortado {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.msg-texto.sin-mensaje { color: var(--muted); font-style: italic; }

.btn-vermas[hidden] { display: none; }

.btn-vermas {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary);
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
}
.btn-vermas:hover { text-decoration: underline; }

.lead-aviso {
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------- Borradores ---------- */

.borrador-fila {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.borrador-info { flex: 1; min-width: 0; }
/* El contacto va fuera de .borrador-info: en móvil esa caja reserva 5.5rem a la
   derecha para el indicador de guardado, y el campo se quedaría en nada. */
.borrador-contacto {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  flex: 0 1 15rem;
}
.campo-contacto-panel { flex: 1 1 auto; min-width: 0; }
.contacto-acciones { display: flex; gap: 0.375rem; padding-bottom: 0.125rem; }

.borrador-nombre {
  font-size: 0.9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.borrador-dedica {
  font-size: 0.8125rem;
  color: var(--muted);
}
.borrador-dedica:empty { display: none; }

/* ---------- Secciones desplegables (Leads y Acciones pendientes) ---------- */

.seccion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.875rem 1.25rem;
  transition: border-color var(--transicion);
}
.seccion-summary::-webkit-details-marker { display: none; }
.seccion-summary:hover { border-color: var(--borde-fuerte); }

.chevron {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform var(--transicion);
}
details[open] > .seccion-summary .chevron { transform: rotate(180deg); }
details[open] > .seccion-summary { margin-bottom: 1rem; }

.grupo-accion {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.grupo-accion + .grupo-accion { margin-top: 0.5rem; }

.grupo-titulo {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- Resumen ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.chip {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  background: var(--st-bg, var(--bg));
  border: 1px solid var(--st-bd, var(--borde));
  border-radius: 999px;
  padding: 0.5rem 1rem;
}

.chip-num {
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--st-tx, var(--primary));
}

.chip-label { font-size: 0.8125rem; color: var(--st-tx, var(--muted)); }

/* ---------- Vocabulario de color por estado ----------
   Cada estado define sus tres variables; las consumen los selects
   de estado y los chips del resumen. */

[data-estado='Lead'] {
  --st-bg: oklch(0.94 0.04 240);
  --st-bd: oklch(0.85 0.06 240);
  --st-tx: oklch(0.4 0.12 240);
}
[data-estado='Borrador'] {
  --st-bg: oklch(0.95 0.055 85);
  --st-bd: oklch(0.86 0.08 85);
  --st-tx: oklch(0.45 0.1 70);
  --st-fill: oklch(0.63 0.12 80); /* paleta del gráfico validada (CVD) */
}
[data-estado='Cliente'] {
  --st-bg: oklch(0.95 0.045 150);
  --st-bd: oklch(0.86 0.07 150);
  --st-tx: oklch(0.4 0.11 150);
  --st-fill: oklch(0.5 0.12 150);
}
[data-estado='Stand By'],
[data-estado='Stand By tras Borrador'] {
  --st-bg: oklch(0.95 0.035 300);
  --st-bd: oklch(0.87 0.055 300);
  --st-tx: oklch(0.42 0.11 300);
  --st-fill: oklch(0.48 0.14 300);
}
[data-estado='Descartado'],
[data-estado='Descartado tras Borrador'],
[data-estado='Duplicado'] {
  --st-bg: oklch(0.955 0.025 25);
  --st-bd: oklch(0.87 0.05 25);
  --st-tx: oklch(0.44 0.13 25);
  --st-fill: oklch(0.45 0.16 20);
}
[data-estado='No respondido'],
[data-estado='Con web'] {
  --st-bg: oklch(0.955 0.004 240);
  --st-bd: var(--borde);
  --st-tx: var(--muted);
}

/* Estados de pago de clientes (reutilizan los mismos valores del vocabulario) */
[data-estado='Al día'] {
  --st-bg: oklch(0.95 0.045 150);
  --st-bd: oklch(0.86 0.07 150);
  --st-tx: oklch(0.4 0.11 150);
  --st-fill: oklch(0.5 0.12 150);
}
[data-estado='Pendiente'] {
  --st-bg: oklch(0.95 0.055 85);
  --st-bd: oklch(0.86 0.08 85);
  --st-tx: oklch(0.45 0.1 70);
  --st-fill: oklch(0.63 0.12 80);
}
[data-estado='Impagado'] {
  --st-bg: oklch(0.955 0.025 25);
  --st-bd: oklch(0.87 0.05 25);
  --st-tx: oklch(0.44 0.13 25);
  --st-fill: oklch(0.45 0.16 20);
}
[data-estado='Baja'] {
  --st-bg: oklch(0.955 0.004 240);
  --st-bd: var(--borde);
  --st-tx: var(--muted);
  --st-fill: oklch(0.55 0.01 240);
}

.badge-estado {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--st-bg, var(--surface));
  border: 1px solid var(--st-bd, var(--borde));
  color: var(--st-tx, var(--muted));
  white-space: nowrap;
}

select.sel-estado[data-estado] {
  background: var(--st-bg, var(--bg));
  border-color: var(--st-bd, var(--borde-fuerte));
  color: var(--st-tx, var(--ink));
  font-weight: 500;
}
select.sel-estado[data-estado]:hover { border-color: var(--st-tx); }

/* ---------- Gráfico: del borrador al cliente ---------- */

.grafico-pipeline {
  margin-top: 1.75rem;
  max-width: 38rem;
}

.gp-titulo {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.875rem;
}

.gp-fila {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: 0.75rem;
}
.gp-fila + .gp-fila { margin-top: 0.75rem; }

.gp-etiqueta {
  font-size: 0.8125rem;
  color: var(--muted);
}

.gp-pista {
  display: flex;
  gap: 2px; /* hueco de superficie entre segmentos: separa sin bordes */
  min-width: 0;
}

.gp-seg {
  height: 16px;
  background: var(--st-fill, var(--primary));
}
.gp-seg:last-child { border-radius: 0 4px 4px 0; }

.gp-valor {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gp-pct { color: var(--muted); font-weight: 500; }

.gp-vacio { font-size: 0.8125rem; color: var(--muted); }

.gp-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin-top: 0.875rem;
}

.gp-clave {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.gp-clave i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--st-fill, var(--primary));
}

/* ---------- Línea de tiempo (kanban) ---------- */

/* Columna del tablero → color (tripletes del vocabulario de estados) */
[data-columna='Pendiente'] {
  --st-bg: oklch(0.95 0.055 85);
  --st-bd: oklch(0.86 0.08 85);
  --st-tx: oklch(0.45 0.1 70);
}
[data-columna='Editando'] {
  --st-bg: oklch(0.94 0.04 240);
  --st-bd: oklch(0.85 0.06 240);
  --st-tx: oklch(0.4 0.12 240);
}
[data-columna='Editado'] {
  --st-bg: oklch(0.95 0.035 300);
  --st-bd: oklch(0.87 0.055 300);
  --st-tx: oklch(0.42 0.11 300);
}
[data-columna='Enviado'] {
  --st-bg: oklch(0.95 0.045 150);
  --st-bd: oklch(0.86 0.07 150);
  --st-tx: oklch(0.4 0.11 150);
}

.tablero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625rem;
}

.tablero-col {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  transition: background var(--transicion), border-color var(--transicion);
}

.col-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--st-tx, var(--muted));
}

.col-cuenta {
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--st-bg, var(--bg));
  border: 1px solid var(--st-bd, var(--borde));
  border-radius: 999px;
  padding: 0 0.5rem;
}

.col-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 3.5rem; /* zona de suelta aunque la columna esté vacía */
  border-radius: var(--radio-s);
}
.col-cuerpo:empty { border: 1px dashed var(--st-bd, var(--borde)); }

.tarea {
  background: var(--bg);
  border: 1px solid var(--st-bd, var(--borde));
  border-radius: var(--radio-s);
  padding: 0.5rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  cursor: grab;
}
.tarea:active { cursor: grabbing; }
.tarea.arrastrando { opacity: 0.4; }
.tarea.guardando { opacity: 0.6; }

.tablero-col.drag-over { background: var(--st-bg); border-color: var(--st-bd); }
.tablero-col.drag-over .col-cuerpo { outline: 2px dashed var(--st-bd); outline-offset: 2px; }

.tarea-cabecera { display: flex; align-items: flex-start; gap: 0.375rem; }
.tarea-nombre {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.tarea-cliente { font-size: 0.75rem; flex-shrink: 0; }
.tarea-cliente[hidden] { display: none; }
.tarea-acciones { display: flex; gap: 0.125rem; flex-shrink: 0; }

.btn-tarea {
  font: inherit;
  font-size: 0.6875rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radio-s);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.btn-tarea:hover { background: var(--surface); color: var(--ink); }
.btn-borrar:hover { color: var(--err); }

.tarea-desc {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.tarea-desc:empty { display: none; }

.skeleton-tablero { height: 14rem; }

/* Mini-dialog de tarea */

#dialogo-tarea {
  border: 0;
  border-radius: var(--radio);
  width: min(26rem, calc(100vw - 2rem));
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}
#dialogo-tarea::backdrop { background: oklch(0.23 0.02 245 / 0.45); }

.dt-inner {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
#dialogo-tarea h2 { font-size: 1.0625rem; }
.dt-negocio {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: -0.5rem;
}
.dt-negocio:empty { display: none; }
#dt-columna { width: 100%; }

#dialogo-tarea textarea {
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  padding: 0.375rem 0.5rem;
  width: 100%;
  resize: vertical;
}
.dt-acciones { display: flex; justify-content: flex-end; gap: 0.5rem; }
.btn-dt-secundario, .btn-dt-primario {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4375rem 1rem;
  border-radius: var(--radio-s);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.btn-dt-secundario { border: 1px solid var(--borde-fuerte); background: var(--bg); color: var(--ink); }
.btn-dt-secundario:hover { border-color: var(--primary); }
.btn-dt-primario { border: 1px solid var(--primary); background: var(--primary); color: oklch(1 0 0); }
.btn-dt-primario:hover { background: var(--primary-hover); }
.btn-dt-primario:disabled { opacity: 0.6; cursor: progress; }

/* Botón + Tarea (el z-index lo saca del overlay del botón estirado de la ficha) */
.btn-anadir-tarea {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  min-height: 1.75rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--bg);
  color: var(--primary);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.btn-anadir-tarea:hover { border-color: var(--primary); background: var(--primary-tenue); }

/* Buscador general (sección propia del panel) */

.buscador-general { margin-bottom: 0.875rem; }

#buscar-general {
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  padding: 0.4375rem 0.75rem;
  min-height: 2.25rem;
  width: 100%;
  transition: border-color var(--transicion);
}
#buscar-general:hover { border-color: var(--primary); }

.borrador-tel {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 0.125rem;
}

/* Buscador de negocios del tablero */

.tablero-buscador {
  position: relative;
  margin-bottom: 0.875rem;
}

#buscar-negocio {
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  padding: 0.4375rem 0.75rem;
  min-height: 2.25rem;
  width: 100%;
  transition: border-color var(--transicion);
}
#buscar-negocio:hover { border-color: var(--primary); }

.buscador-resultados {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  box-shadow: 0 6px 20px oklch(0.3 0.05 245 / 0.12);
  max-height: 20rem;
  overflow-y: auto;
}
.buscador-resultados[hidden] { display: none; }

.buscador-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--radio-s);
  cursor: pointer;
}
.buscador-item.activo { background: var(--primary-tenue); }
.buscador-item.ya-esta { opacity: 0.55; cursor: default; }
.buscador-item.ya-esta.activo { background: var(--surface); }

.buscador-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.buscador-nombre {
  font-size: 0.875rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.buscador-dedica {
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.buscador-dedica:empty { display: none; }

.buscador-msg {
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Casilla del diálogo de tarea */
.dt-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
  min-height: 1.5rem;
}
.dt-check[hidden] { display: none; }
.dt-check input { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--primary); }

/* ---------- Clientes: tarjetas ---------- */

.grid-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.875rem;
}

.cliente-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  transition: border-color var(--transicion);
}
.cliente-card:hover { border-color: var(--borde-fuerte); }
.cliente-card.atenuado { opacity: 0.55; }

.cliente-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.cliente-nombre { font-size: 1rem; font-weight: 600; min-width: 0; }

/* Botón estirado: toda la tarjeta abre la ficha con un solo tab-stop */
.btn-ficha {
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.btn-ficha::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radio);
}
.btn-ficha:focus-visible { outline: none; }
.cliente-card:has(.btn-ficha:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.cliente-card .badge-estado { position: relative; z-index: 1; }

.cliente-dedica {
  font-size: 0.8125rem;
  color: var(--muted);
}
.cliente-dedica:empty { display: none; }

.cliente-datos {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
}
.cliente-datos dt {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted);
}
.cliente-datos dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- Clientes: ficha (dialog) ---------- */

#dialogo-cliente {
  border: 0;
  border-radius: var(--radio);
  width: min(44rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem);
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}
#dialogo-cliente::backdrop { background: oklch(0.23 0.02 245 / 0.45); }

.ficha-inner { padding: 1.5rem 1.75rem; }

.ficha-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.ficha-titulo { flex: 1; min-width: 0; }
.ficha-cabecera h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.ficha-dedica { font-size: 0.8125rem; color: var(--muted); }

.btn-cerrar {
  font: inherit;
  font-size: 0.875rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transicion), color var(--transicion);
}
.btn-cerrar:hover { border-color: var(--err); color: var(--err); }

.ficha-grupo + .ficha-grupo { margin-top: 1.25rem; }
.ficha-grupo h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--borde);
  padding-bottom: 0.375rem;
  margin-bottom: 0.75rem;
}

.ficha-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
}
.ficha-dato { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.ficha-ancho { grid-column: 1 / -1; }

.ficha-etq {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.ficha-etq .save-ind { min-width: 0; }

.ficha-valor {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.ficha-valor.sin-valor { color: var(--muted); }
a.ficha-valor[href] { color: var(--primary); }

.ficha-tel-linea { display: flex; align-items: center; gap: 0.5rem; }

#dialogo-cliente textarea,
#dialogo-cliente input[type='number'] {
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  padding: 0.375rem 0.5rem;
  width: 100%;
  transition: border-color var(--transicion);
}
#dialogo-cliente textarea { resize: vertical; }
#dialogo-cliente textarea:hover,
#dialogo-cliente input[type='number']:hover { border-color: var(--primary); }
#dialogo-cliente textarea:disabled,
#dialogo-cliente input:disabled { opacity: 0.6; cursor: progress; }

.ficha-meta {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------- Calendario de cobros ---------- */

.cal-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cal-total {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.cal-mes { font-size: 0.9375rem; font-weight: 600; min-width: 10rem; text-align: center; }

.btn-mes {
  font: inherit;
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion);
}
.btn-mes:hover { border-color: var(--primary); color: var(--primary); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-cab {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  padding: 0.25rem 0;
}

.cal-vacio { min-height: 5.25rem; }

.cal-dia {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  min-height: 5.25rem;
  padding: 0.25rem 0.3125rem 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.cal-dia.hoy { border-color: var(--primary); }

.cal-num {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cal-dia.hoy .cal-num {
  align-self: flex-start;
  background: var(--primary);
  color: oklch(1 0 0);
  border-radius: 999px;
  padding: 0 0.375rem;
  font-weight: 600;
}

.cal-chip {
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  text-align: left;
  background: var(--st-bg, var(--surface));
  border: 1px solid var(--st-bd, var(--borde));
  color: var(--st-tx, var(--ink));
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: border-color var(--transicion);
}
.cal-chip:hover { border-color: var(--st-tx, var(--primary)); }
.cal-chip-ajustado { border-style: dashed; }

/* ---------- Estados transversales ---------- */

.saliendo { opacity: 0; transform: translateX(0.5rem); }

.vacio {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

.banner-error {
  background: var(--err-tenue);
  border: 1px solid oklch(0.85 0.06 25);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.banner-error p { color: var(--err); font-size: 0.875rem; }

.btn-reintentar {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--err);
  border-radius: var(--radio-s);
  background: var(--bg);
  color: var(--err);
  cursor: pointer;
  transition: background var(--transicion);
}
.btn-reintentar:hover { background: oklch(0.98 0.01 25); }

/* Skeletons */

.skeleton {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: linear-gradient(100deg, var(--bg) 40%, oklch(0.985 0.006 240) 50%, var(--bg) 60%);
  background-size: 200% 100%;
  animation: brillo 1.4s ease-in-out infinite;
}
.skeleton-card { height: 13rem; }
.skeleton-fila { height: 4.5rem; }
.skeleton-chips { height: 2.5rem; border-radius: 999px; max-width: 32rem; }

@keyframes brillo { to { background-position: -200% 0; } }

/* Toasts */

#toasts {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 2.5rem));
}

.toast {
  background: var(--navy);
  color: oklch(1 0 0);
  border-radius: var(--radio-s);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  box-shadow: 0 4px 16px oklch(0.3 0.05 245 / 0.25);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.toast.visible { opacity: 1; transform: none; }

/* Foco visible */

select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- Móvil ---------- */

@media (max-width: 719px) {
  .topbar-inner { padding: 0.75rem 1rem; gap: 0.5rem; flex-wrap: wrap; row-gap: 0.5rem; }
  .topbar h1 { font-size: 1.0625rem; }
  .topbar-titulo { flex: 1; }
  .nav-paginas { order: 3; }
  .btn-borradores { order: 4; padding: 0.25rem 0.625rem; font-size: 0.75rem; }
  .badge-hace { display: none; }
  .fecha { display: none; }
  /* Etiqueta solo-lectores (sigue en el árbol de accesibilidad) */
  .badge-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .badge-mensajes::before {
    content: '💬' / '';
    font-size: 0.875rem;
  }

  .contenedor { padding: 1.5rem 1rem 3rem; gap: 2.25rem; }

  .mensajes { grid-template-columns: 1fr; }

  .gp-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .gp-etiqueta { grid-column: 1 / -1; margin-bottom: -0.25rem; }

  .tablero {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -1rem; /* sangra hasta el borde de la pantalla */
    padding: 0 1rem 0.375rem;
    -webkit-overflow-scrolling: touch;
  }
  .tablero-col {
    flex: 0 0 min(20rem, 86%); /* asoma la columna siguiente: invita a deslizar */
    scroll-snap-align: start;
    scroll-margin-inline: 1rem;
  }

  .grid-clientes { grid-template-columns: 1fr; }
  .ficha-datos { grid-template-columns: 1fr; }
  .ficha-inner { padding: 1.125rem 1rem; }
  .cal-dia, .cal-vacio { min-height: 3.5rem; }
  .cal-dia { padding: 0.1875rem 0.25rem; }
  .cal-chip { padding: 0.125rem 0.3125rem; }
  .cal-mes { min-width: 8rem; }

  .borrador-fila {
    position: relative;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .borrador-info {
    flex-basis: 100%;
    padding-right: 5.5rem; /* hueco del indicador de guardado */
  }
  .borrador-fila .campo { flex: 1; }
  .borrador-fila .borrador-contacto { flex-basis: 100%; }
  .borrador-fila select { width: 100%; }
  /* El indicador no compite por el ancho de los selects */
  .borrador-fila .save-ind {
    position: absolute;
    top: 0.875rem;
    right: 1.25rem;
    min-width: 0;
  }
}

/* ---------- Movimiento reducido ---------- */

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

/* ==========================================================================
   Cuentas, roles y páginas nuevas (login, llamadas, oferta, acceso)
   ========================================================================== */

/* Lo que solo ve el administrador. Mientras no se sabe el rol, no se enseña. */
body:not([data-rol='admin']) [data-solo-admin] { display: none !important; }

/* ---------- Aviso de sesión (sin conexión, acceso, etc.) ---------- */

.aviso-sesion {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.625rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--primary-tenue);
  border-bottom: 1px solid var(--borde);
  font-size: 0.8125rem;
  color: var(--ink);
}
.aviso-sesion p { margin: 0; }

/* ---------- Aviso de horario (los negocios pueden estar cerrados) ----------
   Mismas medidas que .aviso-sesion: si se apilan, parecen intencionados. */

.aviso-horario {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.625rem 1.25rem;
  background: var(--aviso-tenue);
  border-bottom: 1px solid var(--borde);
  color: var(--aviso);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ---------- Menú de usuario ---------- */

.menu-usuario {
  position: relative;
  margin-left: 0.25rem;
}
.mu-boton {
  list-style: none;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-tenue);
  border: 1px solid var(--borde-fuerte);
  cursor: pointer;
  user-select: none;
}
.mu-boton::-webkit-details-marker { display: none; }
.mu-boton:hover { border-color: var(--primary); }
.menu-usuario[open] .mu-boton { border-color: var(--primary); }

.mu-panel {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 13rem;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 8px 24px oklch(0.3 0.05 245 / 0.14);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.mu-email {
  margin: 0;
  padding: 0.25rem 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.mu-rol {
  margin: 0;
  padding: 0 0.5rem 0.375rem;
  font-size: 0.75rem;
  color: var(--muted);
  border-bottom: 1px solid var(--borde);
  margin-bottom: 0.25rem;
}
.mu-item {
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  padding: 0.5rem;
  min-height: 2.25rem;
  border: 0;
  border-radius: var(--radio-s);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.mu-item:hover { background: var(--surface); }
.mu-salir { color: var(--err); }
.mu-item:disabled { opacity: 0.5; cursor: progress; }

/* ---------- Toast con acción ---------- */

.toast.con-accion {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.toast-btn {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radio-s);
  border: 1px solid oklch(1 0 0 / 0.35);
  background: none;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.toast-btn:hover { background: oklch(1 0 0 / 0.15); }
.toast-cerrar {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  padding: 0 0.25rem;
}

/* ---------- Campos de texto (login, acceso, notas) ---------- */

.campo input[type='text'],
.campo input[type='email'],
.campo input[type='password'],
.campo textarea {
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  padding: 0.5rem 0.625rem;
  min-height: 2.25rem;
  width: 100%;
  transition: border-color var(--transicion);
}
.campo textarea { resize: vertical; line-height: 1.5; }
.campo input:hover:not([type='checkbox']),
.campo textarea:hover { border-color: var(--primary); }
.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.aviso-error {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--err);
  background: var(--err-tenue);
  border-radius: var(--radio-s);
  padding: 0.5rem 0.625rem;
}
.aviso-ok {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ok);
  background: var(--ok-tenue);
  border-radius: var(--radio-s);
  padding: 0.5rem 0.625rem;
}

/* ---------- Página de entrada ---------- */

.login-centro {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem 1rem;
}
.login-caja {
  width: min(23rem, 100%);
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 10px 30px oklch(0.3 0.05 245 / 0.08);
  padding: 1.75rem 1.5rem 1.25rem;
}
.login-marca {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}
.login-icono { font-size: 1.5rem; }
.login-caja h1 { font-size: 1.25rem; font-weight: 700; }
.login-caja form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.login-aviso {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  background: var(--primary-tenue);
  color: var(--ink);
  border-radius: var(--radio-s);
  padding: 0.625rem 0.75rem;
}
.btn-login {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 2.75rem;
  border: 0;
  border-radius: var(--radio-s);
  background: var(--primary);
  color: oklch(1 0 0);
  cursor: pointer;
  transition: background var(--transicion);
}
.btn-login:hover { background: var(--primary-hover); }
.btn-login:disabled { opacity: 0.6; cursor: progress; }

.login-enlaces {
  display: flex;
  justify-content: center;
  margin-top: 0.875rem;
}
.enlace-boton {
  font: inherit;
  font-size: 0.8125rem;
  border: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0.375rem;
  min-height: 2rem;
}
.enlace-boton:hover { text-decoration: underline; }
.login-pie {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------- Resultados de llamada: vocabulario de color ---------- */

[data-resultado='Cliente'] {
  --st-bg: oklch(0.95 0.045 150);
  --st-bd: oklch(0.86 0.07 150);
  --st-tx: oklch(0.4 0.11 150);
}
[data-resultado='Borrador'] {
  --st-bg: oklch(0.95 0.055 85);
  --st-bd: oklch(0.86 0.08 85);
  --st-tx: oklch(0.45 0.1 70);
}
[data-resultado='Stand by'] {
  --st-bg: oklch(0.95 0.035 300);
  --st-bd: oklch(0.87 0.055 300);
  --st-tx: oklch(0.42 0.11 300);
}
[data-resultado='Rechazado'] {
  --st-bg: oklch(0.955 0.025 25);
  --st-bd: oklch(0.87 0.05 25);
  --st-tx: oklch(0.44 0.13 25);
}
[data-resultado='No contesta'] {
  --st-bg: oklch(0.955 0.004 240);
  --st-bd: var(--borde);
  --st-tx: var(--muted);
}

/* ---------- Sector del negocio (categoría 1 / 2) ---------- */

[data-categoria='1'] {
  --st-bg: oklch(0.94 0.04 240);
  --st-bd: oklch(0.85 0.06 240);
  --st-tx: oklch(0.4 0.12 240);
}
[data-categoria='2'] {
  --st-bg: oklch(0.955 0.004 240);
  --st-bd: var(--borde);
  --st-tx: var(--muted);
}

/* Los de "otro sector" van al final, detrás de esta separación */
.separador-cola {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.separador-cola::before,
.separador-cola::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borde);
}

/* La tarjeta de otro sector se presenta con menos peso, sin esconderla */
.llamada-card[data-categoria='2'] { border-style: dashed; }

/* ---------- Tarjeta de llamada ---------- */

.llamada-card {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  transition: opacity 250ms var(--transicion), transform 250ms var(--transicion);
}
.llamada-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.llamada-nombre { font-size: 1.0625rem; font-weight: 600; }
.llamada-dedica { font-size: 0.8125rem; color: var(--muted); }
.llamada-dedica:empty { display: none; }

.llamada-tel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.tel-grande {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--primary);
  text-decoration: none;
  user-select: all;
}
.tel-grande[href]:hover { text-decoration: underline; }
.tel-grande.sin-valor { color: var(--muted); font-size: 1rem; font-weight: 500; }

.llamada-datos {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 0.375rem 1rem;
  font-size: 0.8125rem;
}
.llamada-datos:empty { display: none; }
.llamada-datos dt { color: var(--muted); }
.llamada-datos dd { margin: 0; }
.llamada-datos a { color: var(--primary); overflow-wrap: anywhere; }

.bloque-guion {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.875rem 1rem;
}
.guion-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.guion { display: flex; flex-direction: column; gap: 0.5rem; }
.guion-linea { margin: 0; }
.guion-pausa {
  margin: 0;
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: var(--primary-tenue);
  color: var(--primary);
}

.llamada-plegable > .seccion-summary.sub {
  padding: 0.5rem 0.75rem;
  background: var(--surface);
}
.seccion-summary.sub h4 { font-size: 0.8125rem; font-weight: 600; }
.llamada-plegable[open] > .seccion-summary.sub { margin-bottom: 0.625rem; }

.historial-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.historial-cuando { font-size: 0.75rem; color: var(--muted); }
.historial-nota {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink);
}

.resultado-campos {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--borde);
}
.campo-contacto { display: flex; flex-direction: column; gap: 0.25rem; }
.contacto-pista {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
}
.contacto-pista[data-tipo='wa'] { color: var(--wa); }
.contacto-pista[data-tipo='email'] { color: var(--primary); }
.contacto-pista[data-tipo='tel'] { color: var(--aviso); }
.resultados {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.btn-resultado {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 0.875rem;
  min-height: 2.5rem;
  flex: 1 1 auto;
  border-radius: var(--radio-s);
  background: var(--bg);
  border: 1px solid var(--st-bd, var(--borde-fuerte));
  color: var(--st-tx, var(--ink));
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.btn-resultado:hover { background: var(--st-bg); }
.btn-resultado:disabled { opacity: 0.5; cursor: progress; }

/* ---------- Registro de llamadas ---------- */

.registro-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.75rem 1rem;
}
.registro-info h3 { font-size: 0.9375rem; font-weight: 600; }
.registro-meta { font-size: 0.75rem; color: var(--muted); }
.registro-nota { margin: 0.25rem 0 0; font-size: 0.8125rem; }

/* ---------- Nota de llamada dentro del panel ---------- */

.borrador-llamada {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.llamada-etq {
  font-weight: 600;
  color: var(--st-tx, var(--muted));
}
.llamada-nota-texto { color: var(--ink); }

/* ---------- Oferta ---------- */

.cabecera-oferta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.oferta-acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.oferta-texto {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem 1.5rem;
}
.oferta-texto h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 1.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--borde);
}
.oferta-texto > h3:first-child { margin-top: 0; }
.oferta-texto p { margin: 0.5rem 0; }
.oferta-texto strong { font-weight: 700; color: var(--ink); }
.oferta-texto ul { margin: 0.5rem 0; padding-left: 1.25rem; }
.oferta-texto li { margin: 0.25rem 0; }

.editor-oferta {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem 1.5rem;
}
.editor-oferta textarea {
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
}
.editor-barra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.375rem;
}
.btn-negrita { font-weight: 700; }
.editor-ayuda {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}
.editor-ayuda b {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Acceso (gestión de cuentas) ---------- */

.acceso-ayuda {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.6;
}
.acceso-ayuda summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
  list-style: none;
}
.acceso-ayuda summary::-webkit-details-marker { display: none; }
.acceso-ayuda summary::before { content: '▸  '; font-weight: 700; }
.acceso-ayuda[open] summary::before { content: '▾  '; }
.acceso-ayuda ol { margin: 0.625rem 0 0; padding-left: 1.25rem; }
.acceso-ayuda li { margin: 0.375rem 0; }
.acceso-ayuda p { margin: 0.625rem 0 0; }
.acceso-ayuda b { color: var(--ink); font-weight: 600; }

.acceso-alta {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.875rem 1.25rem;
  margin-bottom: 1rem;
}
.acceso-alta .campo { flex: 1 1 11rem; }
.acceso-alta button { min-height: 2.25rem; }

.perfil-fila {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.875rem 1.25rem;
}
.perfil-fila.atenuado { opacity: 0.55; }
.perfil-info { flex: 1 1 12rem; min-width: 0; }
.perfil-nombre { font-size: 0.9375rem; font-weight: 600; }
.perfil-email { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.perfil-vinculo { font-size: 0.75rem; color: var(--ok); }
.perfil-vinculo.sin-vincular { color: var(--muted); font-style: italic; }

.chk-activo {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  cursor: pointer;
}
.chk-activo input { accent-color: var(--primary); width: 1rem; height: 1rem; }
.btn-clave { white-space: nowrap; }

/* Los dos avisos que se construyen desde JS (cambiar clave y clave nueva)
   comparten la misma caja que el mini-dialog de tarea. */
#dialogo-clave-nueva,
#dialogo-clave {
  border: 0;
  border-radius: var(--radio);
  width: min(27rem, calc(100vw - 2rem));
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}
#dialogo-clave-nueva::backdrop,
#dialogo-clave::backdrop { background: oklch(0.23 0.02 245 / 0.45); }
#dialogo-clave-nueva h2,
#dialogo-clave h2 { font-size: 1.0625rem; }
#dialogo-clave-nueva .nota { margin: 0; }
.clave-caja {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.75rem 1rem;
}
#dcn-clave {
  flex: 1 1 12rem;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink);
  user-select: all;
  overflow-wrap: anywhere;
}

.acceso-pendientes {
  background: var(--primary-tenue);
  border-radius: var(--radio);
  padding: 0.875rem 1.25rem;
  font-size: 0.8125rem;
}
.acceso-pendientes > p:first-child { font-weight: 600; margin-bottom: 0.5rem; }
.acceso-pendiente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.375rem;
}

/* ---------- Móvil ---------- */

@media (max-width: 719px) {
  /* Con cuatro pestañas la fila propia evita que la cabecera desborde */
  .nav-paginas { flex: 1 1 100%; display: flex; }
  .nav-tab { flex: 1; text-align: center; padding-inline: 0.375rem; }
  .btn-borradores { order: 5; }
  /* Mínimo táctil: .btn-rapido se queda en 2.125rem */
  .btn-lote { min-height: 2.5rem; }

  .llamada-card { padding: 1rem; }
  .llamada-datos { grid-template-columns: 1fr; gap: 0.125rem; }
  .llamada-datos dt { font-size: 0.75rem; }
  .llamada-datos dd { margin-bottom: 0.375rem; }

  /* Los botones de resultado siempre a mano, sin buscarlos al final del guion.
     Solo se queda pegado el grupo de botones: los campos suben con la tarjeta,
     que si no, con el teclado abierto no queda pantalla para leer la ficha. */
  .resultados {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    margin: 0 -1rem -1rem;
    padding: 0.625rem 1rem 0.75rem;
    box-shadow: 0 -6px 16px oklch(1 0 0 / 0.9);
  }
  .btn-resultado { flex: 1 1 7rem; }

  .registro-fila { flex-direction: column; gap: 0.5rem; }
  .perfil-fila { gap: 0.75rem; }
  .perfil-info { flex: 1 1 100%; }
  .oferta-texto, .editor-oferta { padding: 1rem; }
}