/* ==========================================================================
   Vista nueva · base común
   --------------------------------------------------------------------------
   Va cargada DESPUÉS de style.css y solo cambia la forma de los componentes
   que comparten todas las pantallas: tarjetas, botones, campos, indicadores,
   filtros, tablas, chips y menú. Los colores son los de siempre (fondo
   #0d1117, tarjetas #161b22, turquesa Cúspide); lo que cambia es el aire, los
   radios y que el turquesa lleve letra oscura, que se lee mejor.

   Si algo de aquí no gusta, se saca este archivo y el portal vuelve a verse
   como antes: nada del resto depende de él.
   ========================================================================== */

:root {
  --radius: 14px;
  --radio-chico: 10px;
  --campo-bg: #ffffff;
  --sobre-primario: #062925;      /* letra sobre el turquesa */
  --primario-claro: #33c9bb;      /* hover del turquesa */
  --linea-suave: #e3e6ea;         /* separadores dentro de una tarjeta */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --campo-bg: #0f141a;
    --primario-claro: #3fd8c9;
    --linea-suave: #222a34;
    --sidebar-bg: #0f141a;
    --sidebar-border: #20262f;
    --sidebar-active-bg: #0f2a28;
    --shadow-card: none;
  }
}
:root[data-theme="dark"] {
  --campo-bg: #0f141a;
  --primario-claro: #3fd8c9;
  --linea-suave: #222a34;
  --sidebar-bg: #0f141a;
  --sidebar-border: #20262f;
  --sidebar-active-bg: #0f2a28;
  --shadow-card: none;
}

/* ---------- Títulos ---------- */
.container h1 { font-size: 1.9rem; letter-spacing: -0.015em; }
.subtitle { color: var(--text-muted); }

/* ---------- Tarjetas ---------- */
.card,
.container .card {
  border-radius: 16px;
  padding: 1.2rem 1.35rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}
.container .card h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.8rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: var(--radio-chico);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-small {
  min-height: 34px;
  padding: 0 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
}
.btn-primary { background: var(--primary); color: var(--sobre-primario); font-weight: 700; }
.btn-primary:hover { background: var(--primario-claro); color: var(--sobre-primario); }
.btn-secondary {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--primary); }
.btn-danger { border: 1px solid color-mix(in srgb, var(--error-text) 35%, transparent); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Campos ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea {
  border-radius: var(--radio-chico);
  background-color: var(--campo-bg);
  border: 1px solid var(--border);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ---------- Indicadores ---------- */
.kpi {
  border-radius: 14px;
  padding: 0.85rem 1rem;
}
.kpi-valor { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 0.74rem; }
/* El indicador que manda: las líneas habilitadas contra la meta. Ocupa dos
   lugares y va en el turquesa oscuro, para que sea lo primero que se lee. */
.kpi-row .kpi[data-kpi="habilitadas"] {
  background: color-mix(in srgb, var(--primary) 14%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ---------- Barra de filtros ---------- */
.dash-filtros {
  gap: 0.45rem;
  padding: 0.55rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.dash-filtros select,
.dash-filtros .dash-buscar,
.dash-filtros input[type="search"],
.dash-filtros input[type="text"] {
  min-height: 38px;
  border-radius: var(--radio-chico);
  font-size: 0.8rem;
  background-color: var(--campo-bg);
}
.dash-filtros .btn { min-height: 38px; }

/* ---------- Tablas ---------- */
th { font-size: 0.7rem; letter-spacing: 0.06em; }
.tabla-excel thead th { background: var(--surface-2); }

/* ---------- Chips y etiquetas ---------- */
.chip { padding: 0.18rem 0.6rem; font-size: 0.7rem; }
.badge { padding: 0.24rem 0.65rem; }

/* ---------- Menú lateral ---------- */
.sidebar { border-right: 1px solid var(--sidebar-border); }
.sidebar nav a { border-radius: var(--radio-chico); }
.sidebar nav a.active {
  background: var(--sidebar-active-bg);
  color: var(--primario-claro);
}
.sidebar nav a.active .nav-icono { color: var(--primario-claro); }

/* ---------- Avisos ---------- */
.notice, .flash { border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---------- Entrada al portal ---------- */
.login-nueva {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: min(1040px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  background: var(--card-bg);
}
.login-panel {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.2rem;
  padding: 2.6rem 2.6rem;
  background: color-mix(in srgb, var(--primary) 16%, var(--card-bg));
  color: var(--text);
}
.login-panel-marca { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.login-panel-texto h2 {
  margin: 0 0 0.9rem;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  border: 0;
}
.login-panel-texto h2::after { display: none; }
.login-panel-texto p { margin: 0; color: var(--text-muted); line-height: 1.6; max-width: 34ch; }
.login-panel-pie { font-size: 0.8rem; color: var(--text-muted); }
.login-nueva .login-card {
  flex: 1 1 340px;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 2.6rem 2.4rem;
  justify-content: center;
  box-shadow: none;
}
.login-nueva .login-card .subtitle { text-align: left; }
.login-nueva .login-brand-row { justify-content: flex-start; }
.login-nueva .login-card input { min-height: 48px; font-size: 1rem; }
.login-nueva .login-card .btn { min-height: 50px; font-size: 1rem; }
@media (max-width: 720px) {
  .login-panel { padding: 1.8rem 1.5rem; }
  .login-panel-texto h2 { font-size: 1.5rem; }
  .login-nueva .login-card { padding: 1.8rem 1.5rem; }
}

/* ---------- Notas (página) ---------- */
.notas-pagina-col { max-width: 780px; margin-left: auto; margin-right: auto; }
.notas-pagina .notas-grande { gap: 0.8rem; }
.notas-grande .notas-cabeza { display: none; }
.notas-grande .notas-nueva { gap: 0.6rem; }
.notas-grande .notas-nueva input {
  min-height: 48px;
  padding: 0 0.9rem;
  border-radius: 12px;
  font-size: 0.95rem;
  background: var(--campo-bg);
}
.notas-grande .notas-agregar {
  min-height: 48px;
  min-width: 110px;
  border-radius: 12px;
  border: 0;
  background: var(--primary);
  color: var(--sobre-primario);
  font-size: 0;
  font-weight: 700;
}
.notas-grande .notas-agregar::after { content: "Agregar"; font-size: 0.9rem; }
.notas-grande .notas-agregar:hover { background: var(--primario-claro); color: var(--sobre-primario); }
.notas-grande .notas-lista { gap: 0; }
.notas-grande .nota {
  padding: 0.75rem 0.25rem;
  border-top: 1px solid var(--linea-suave);
  border-radius: 0;
}
.notas-grande .nota-marca { gap: 0.9rem; align-items: center; }
.notas-grande .nota-check { width: 24px; height: 24px; border-radius: 7px; }
.notas-grande .nota-contenido { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.6rem; flex: 1; }
.notas-grande .nota-texto { font-size: 0.95rem; flex: 1; }
.notas-grande .nota-edad {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 18%, var(--card-bg));
  color: var(--warn);
  font-size: 0.72rem;
  font-weight: 600;
}
.notas-grande .nota.hecha .nota-edad { background: transparent; color: var(--text-muted); }
.notas-grande .notas-separador {
  margin: 0.8rem 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.notas-ayuda { color: var(--text-muted); font-size: 0.85rem; line-height: 1.6; }

/* ---------- Títulos como en el diseño: sin barra ni subrayado ---------- */
h1::before { display: none; }
h2::after { display: none; }
h2 { padding-bottom: 0; border-bottom: 0; }

/* ---------- Comisiones del equipo ---------- */
.ce-totales { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.ce-total {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.1rem 1.25rem; border-radius: 14px;
  background: var(--card-bg); border: 1px solid var(--border);
}
.ce-total span { font-size: 0.8rem; color: var(--text-muted); }
.ce-total b { font-size: 1.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ce-total small { font-size: 0.75rem; color: var(--text-muted); }
.ce-total-destacado {
  background: color-mix(in srgb, var(--primary) 14%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}
.ce-total-destacado span, .ce-total-destacado small { color: var(--primario-claro); }
.ce-verde { color: var(--good); }
.ce-tabla-card { padding: 0.4rem 0.4rem 0.8rem; }
.ce-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ce-tabla th { padding: 0.8rem 0.9rem; text-align: left; border-bottom: 1px solid var(--border); }
.ce-tabla td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--linea-suave); font-size: 0.88rem; }
.ce-tabla .num { text-align: right; }
.ce-tabla small { color: var(--text-muted); }
.ce-nombre { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--text); text-decoration: none; font-weight: 600; }
.ce-nombre:hover { color: var(--primario-claro); }
.ce-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 0.7rem; font-weight: 700; color: #0d1117;
}
.ce-avatar-0 { background: #00b8a9; } .ce-avatar-1 { background: #6aa8ff; } .ce-avatar-2 { background: #e8a23a; }
.ce-avatar-3 { background: #c9b8ff; } .ce-avatar-4 { background: #2fb46e; } .ce-avatar-5 { background: #ff8a73; }
.ce-cumpl { display: flex; align-items: center; gap: 0.6rem; min-width: 160px; }
.ce-barra { flex: 1; display: flex; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ce-barra > span { display: block; height: 100%; border-radius: 999px; }
.ce-ok { background: var(--good); } .ce-casi { background: var(--primary); }
.ce-medio { background: var(--warn); } .ce-bajo { background: var(--danger); }
.ce-cumpl b { width: 44px; text-align: right; }
.ce-pista { margin: 0.6rem 0.9rem 0; font-size: 0.8rem; }
.ce-total b .monto, .ce-tabla .monto { font-size: inherit; font-weight: inherit; }

/* ---------- Mes con flechas ---------- */
.mes-paso {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radio-chico);
  background: var(--campo-bg);
  border: 1px solid var(--border);
}
.mes-paso select,
.dash-filtros .mes-paso select {
  min-height: 32px;
  border: 0;
  background: transparent;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0 0.3rem;
  border-left: 0;
  box-shadow: none;
  animation: none;
}
.mes-paso-flecha {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
}
.mes-paso-flecha:hover { background: var(--surface-2); color: var(--text); }

/* ==========================================================================
   Hunting · bases
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hb-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
.hb-cabecera { margin-bottom: 1.2rem; }
.hb-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hb-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.9rem; margin-bottom: 1.3rem; }
.hb-dato {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.1rem 1.25rem; border-radius: 14px;
  background: var(--card-bg); border: 1px solid var(--border);
}
.hb-dato > span { font-size: 0.8rem; color: var(--text-muted); }
.hb-dato b { font-size: 1.85rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hb-dato b em { font-size: 1rem; font-style: normal; font-weight: 500; color: var(--text-muted); }
.hb-dato small { font-size: 0.75rem; color: var(--text-muted); }
.hb-dato a { font-size: 0.75rem; font-weight: 600; color: var(--primario-claro); text-decoration: none; }
.hb-dato-alerta { background: color-mix(in srgb, var(--danger) 14%, var(--card-bg)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.hb-dato-alerta b, .hb-dato-alerta small, .hb-dato-alerta > span { color: var(--danger); }
.hb-dato-ok { background: color-mix(in srgb, var(--good) 12%, var(--card-bg)); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.hb-dato-ok b, .hb-dato-ok small, .hb-dato-ok > span { color: var(--good); }
.hb-verde { color: var(--good); } .hb-azul { color: #6aa8ff; } .hb-turquesa { color: var(--primario-claro); }
.hb-ambar { color: var(--warn) !important; } .hb-rojo { color: var(--danger); } .hb-tenue { color: var(--text-muted); }

.hb-barra-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.7rem; }
.hb-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border); }
.hb-tab {
  min-height: 38px; padding: 0 0.9rem; border-radius: 8px; border: 0;
  background: transparent; color: var(--text-muted); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.hb-tab span { opacity: 0.7; font-variant-numeric: tabular-nums; }
.hb-tab.activa { background: var(--primary); color: var(--sobre-primario); }
.hb-buscar {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; min-width: 260px;
  padding: 0 0.9rem; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted);
}
.hb-buscar svg { width: 16px; height: 16px; flex-shrink: 0; }
.hb-buscar input { flex: 1; border: 0 !important; outline: 0 !important; background: transparent !important; padding: 0 !important; min-height: 0; }
.hb-leyenda { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 1.1rem; font-size: 0.75rem; color: var(--text-muted); }
.hb-leyenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hb-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.hb-c-conv { background: var(--good); } .hb-c-gest { background: var(--primary); } .hb-c-llamar { background: var(--surface-2); border: 1px solid var(--border); }

.hb-seccion { margin-bottom: 1.4rem; }
.hb-seccion[hidden] { display: none; }
.hb-seccion-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.hb-seccion-titulo h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.hb-ayuda { font-size: 0.82rem; color: var(--text-muted); }
.hb-icono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; }
.hb-icono svg { width: 16px; height: 16px; }
.hb-icono-equipo { background: color-mix(in srgb, var(--primary) 18%, var(--card-bg)); color: var(--primario-claro); }
.hb-icono-asignadas { background: color-mix(in srgb, #6aa8ff 18%, var(--card-bg)); color: #8cbcff; }
.hb-icono-jefatura, .hb-icono-propias { background: color-mix(in srgb, #a98bf0 20%, var(--card-bg)); color: #c9b8ff; }
.hb-icono-agotadas { background: var(--surface-2); color: var(--text-muted); }

.hb-lista { padding: 0 !important; overflow: hidden; }
.hb-lista-scroll { overflow-x: auto; }
.hb-fila {
  display: grid;
  grid-template-columns: 40px minmax(220px, 1fr) 200px 110px 90px 80px 70px 170px;
  align-items: center; gap: 12px;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--linea-suave);
  min-width: 1040px;
}
.hb-fila:last-child { border-bottom: 0; }
.hb-fila[hidden] { display: none; }
.hb-cabeza { padding-top: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.hb-nombre { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.hb-nombre a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-nombre a:hover { color: var(--primario-claro); }
.hb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
.hb-aviso { padding: 0.1rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--warn) 18%, var(--card-bg)); color: var(--warn); font-weight: 600; }
.hb-aviso-propia { background: color-mix(in srgb, #a98bf0 20%, var(--card-bg)); color: #c9b8ff; }
.hb-avance { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hb-barra { display: flex; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hb-barra > span { display: block; height: 100%; }
.hb-barra-conv { background: var(--good); min-width: 0; }
.hb-barra-gest { background: var(--primary); }
.hb-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--text-muted); }
.hb-num-grande { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.hb-num-conv { color: var(--good); font-weight: 600; }
.hb-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 0.35rem; }
.hb-estrella { width: 34px; height: 34px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.hb-estrella svg { width: 18px; height: 18px; fill: none; }
.hb-fila.base-favorita .hb-estrella { color: var(--warn); }
.hb-fila.base-favorita .hb-estrella svg { fill: currentColor; }
.hb-lapiz { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; }
.hb-lapiz:hover { color: var(--text); border-color: var(--primary); }
.hb-vacio { padding: 1.2rem 1.1rem; color: var(--text-muted); font-size: 0.88rem; line-height: 1.55; }
.hb-vacio b { color: var(--text); }

.hb-seg {
  display: grid;
  grid-template-columns: minmax(200px, 1.3fr) 90px 90px minmax(160px, 1fr) 80px 110px 130px 210px;
  align-items: center; gap: 12px; padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--linea-suave); min-width: 1080px; font-size: 0.85rem;
}
.hb-seg-nombre { display: flex; align-items: center; gap: 0.7rem; }
.hb-seg-nombre > span:last-child { display: flex; flex-direction: column; }
.hb-seg-nombre small { color: var(--text-muted); font-size: 0.72rem; }
.hb-seg-avance { display: flex; align-items: center; gap: 0.6rem; }
.hb-seg-avance .hb-barra { flex: 1; }
.hb-seg-avance b { width: 40px; text-align: right; }
.hb-alerta { display: inline-block; min-width: 34px; padding: 0.15rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--danger) 18%, var(--card-bg)); color: var(--danger); font-weight: 700; }
.hb-btn-reasignar { background: color-mix(in srgb, var(--danger) 14%, var(--card-bg)); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }

.hb-destacada {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem;
  padding: 1.5rem 1.7rem; border-radius: 18px;
  background: color-mix(in srgb, #6aa8ff 14%, var(--card-bg));
  border: 1px solid color-mix(in srgb, #6aa8ff 40%, transparent);
}
.hb-destacada-texto { flex: 1 1 360px; display: flex; flex-direction: column; gap: 0.45rem; }
.hb-destacada-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8cbcff; }
.hb-destacada-eyebrow svg { width: 16px; height: 16px; }
.hb-destacada-num { font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hb-destacada-num small { font-size: 1.05rem; font-weight: 500; color: #b9d4ff; }
.hb-destacada-nota { font-size: 0.85rem; color: #b9d4ff; }
.hb-destacada-accion { flex: 0 1 280px; display: flex; flex-direction: column; gap: 0.7rem; }
.hb-destacada-accion .btn { min-height: 48px; font-size: 0.95rem; }

.hb-ritmo { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: stretch; margin-bottom: 1.3rem; }
.hb-ritmo-texto { flex: 0 1 220px; display: flex; flex-direction: column; gap: 0.4rem; }
.hb-ritmo-texto h2 { margin: 0; }
.hb-ritmo-prom { margin-top: auto; font-size: 0.85rem; color: var(--text-muted); }
.hb-ritmo-prom b { font-size: 1.4rem; color: var(--text); }
.hb-ritmo-barras { flex: 1 1 480px; display: flex; align-items: flex-end; gap: 10px; height: 140px; }
.hb-ritmo-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.hb-ritmo-barra { display: block; width: 100%; max-width: 38px; border-radius: 6px 6px 2px 2px; background: var(--primary); }
.hb-ritmo-n { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hb-ritmo-dia { font-size: 0.7rem; color: var(--text-muted); }

/* ==========================================================================
   Ficha del negocio
   ========================================================================== */
.fn-hero {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.4rem 1.6rem; margin-bottom: 1rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px;
}
.fn-hero .card-header-row { margin: 0; align-items: flex-start; }
.fn-hero .card-header-row h1 { font-size: 1.9rem; margin: 0; }
.fn-hero .card-header-row > div { display: flex; flex-wrap: wrap; gap: 0.45rem; }
/* El recorrido pasa a ser una barra de pasos dentro de la cabecera. */
.fn-hero > .card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.fn-hero > .card .grafico-cabecera { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.6rem; }
.fn-hero > .card .grafico-cabecera h2 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.fn-hero > .card .grafico-resumen { font-size: 0.75rem; color: var(--text-muted); margin: 0; }
.fn-hero .recorrido-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(110px, 1fr); gap: 6px;
  overflow-x: auto;
}
.fn-hero .recorrido-paso {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0; border: 0; background: transparent; position: relative;
}
.fn-hero .recorrido-paso::before {
  content: ""; display: block; height: 6px; border-radius: 999px;
  background: var(--primary); margin-bottom: 0.45rem;
}
.fn-hero .recorrido-paso:last-child::before { background: var(--primario-claro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario-claro) 25%, transparent); }
.fn-hero .recorrido-deducido::before { background: var(--border); }
.fn-hero .recorrido-etapa { font-size: 0.78rem; font-weight: 600; }
.fn-hero .recorrido-fecha, .fn-hero .recorrido-lapso, .fn-hero .recorrido-quien { font-size: 0.7rem; color: var(--text-muted); }
.fn-hero .recorrido-aviso { font-size: 0.72rem; color: var(--text-muted); margin: 0.5rem 0 0; }

.fn-cuerpo { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-start; }
.fn-principal { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; }
.fn-lado { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; }
.fn-lado .card h2 { font-size: 0.95rem; }
.fn-principal .recordatorio-card { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.fn-hero .recorrido-lista { border-left: 0; padding: 0; margin: 0; font-size: inherit; }
.fn-hero .recorrido-paso { align-items: stretch; flex-wrap: nowrap; padding: 0; }
.fn-hero .recorrido-paso::before { position: static; left: auto; top: auto; width: auto; border-radius: 999px; }
.fn-titulo { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.fn-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fn-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 28px; padding: 0 0.65rem; border-radius: 8px;
  background: var(--surface-2); color: var(--text); border: 0;
  font: inherit; font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
button.fn-chip { cursor: pointer; }
.fn-chip-rut.copiado { background: color-mix(in srgb, var(--good) 22%, var(--card-bg)); }
.fn-chip-falta { background: transparent; border: 1px dashed var(--border); color: var(--text-muted); }
.fn-chip.fn-chip-estado { min-width: 0; padding: 0 0.7rem; border-radius: 999px; font-weight: 700; background-image: none; cursor: default; }

/* ==========================================================================
   Ficha del prospecto
   ========================================================================== */
.fp-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.fp-volver { color: var(--primario-claro); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.fp-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.4rem 1.6rem; margin-bottom: 1rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px;
}
.fp-hero h1 { margin: 0; font-size: 1.9rem; }
.fp-hero-der { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.fp-lineas { display: flex; flex-direction: column; align-items: flex-end; }
.fp-lineas b { font-size: 2.2rem; line-height: 1; color: var(--primario-claro); font-variant-numeric: tabular-nums; }
.fp-lineas span { font-size: 0.75rem; color: var(--text-muted); }
.fp-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.fp-badge { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.78rem; font-weight: 700; }
.fp-dueno { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-muted); }

.fp-llamar { display: flex; flex-direction: column; gap: 1.1rem; }
.fp-contacto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.fp-contacto-datos { display: flex; flex-direction: column; gap: 0.15rem; }
.fp-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.fp-contacto-datos b { font-size: 1.1rem; }
.fp-contacto-datos > span { font-size: 0.82rem; color: var(--text-muted); }
.fp-llamar-btn { min-height: 52px; padding: 0 1.4rem; font-size: 1rem; border-radius: 12px; }
.fp-form { display: flex; flex-direction: column; gap: 0.9rem; }
.fp-resultados { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.fp-resultados legend { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.6rem; padding: 0; }
.fp-resultado { position: relative; display: block; cursor: pointer; }
.fp-resultado input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fp-resultado span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: 0 0.6rem; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 0.88rem; font-weight: 600;
}
.fp-resultado input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.fp-resultado input:checked + span { color: #0d1117; border-color: transparent; }
.fp-r-0 input:checked + span { background: #6aa8ff; }
.fp-r-1 input:checked + span, .fp-r-2 input:checked + span { background: var(--warn); }
.fp-r-3 input:checked + span { background: var(--good); }
.fp-r-4 input:checked + span, .fp-r-5 input:checked + span { background: #ff8a73; }
.fp-form > label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--text-muted); }
.fp-form > label input, .fp-form > label select { min-height: 44px; max-width: 420px; }
.fp-nota input { max-width: none !important; }
.fp-convertir-aviso { padding: 0.8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--good) 14%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); color: var(--good); font-size: 0.85rem; }
.fp-guardar { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fp-guardar .btn-siguiente { flex: 1 1 260px; min-height: 48px; font-size: 0.95rem; }
.fp-guardar .btn-secondary { min-height: 48px; }

.fp-historial h2 { margin-bottom: 0.4rem; }
.fp-hito { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--linea-suave); }
.fp-hito-icono { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); font-size: 0.68rem; font-weight: 700; color: var(--text-muted); }
.fp-hito-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.fp-hito-texto span { font-size: 0.82rem; color: var(--text-muted); }
.fp-hito-cuando { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }

.fp-datos dl { margin: 0; }
.fp-datos dl > div { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.5rem 0; border-top: 1px solid var(--linea-suave); font-size: 0.85rem; }
.fp-datos dt { color: var(--text-muted); }
.fp-datos dd { margin: 0; text-align: right; font-weight: 500; }
.fp-comentario { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
.fp-otras { display: flex; flex-direction: column; gap: 0.5rem; }
.fp-ancho { width: 100%; justify-content: flex-start; }
.fp-desplegable > summary { list-style: none; }
.fp-desplegable > summary::-webkit-details-marker { display: none; }
.fp-mini-form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.fp-mini-form > * { flex: 1 1 140px; }
.fp-eliminar { background: transparent; color: var(--danger); border: 0; padding-left: 0; }
@media (max-width: 640px) { .fp-resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   «Lo que falta» (documentos de ingreso y editar negocio)
   ========================================================================== */
.falta-panel {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1rem 1.3rem; margin-bottom: 1rem; border-radius: 16px;
  background: color-mix(in srgb, var(--warn) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}
.falta-panel[hidden] { display: none; }
.falta-cabeza h2 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; color: var(--warn); }
.falta-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0; border-top: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
}
.falta-n {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 22%, var(--card-bg)); color: var(--warn); font-size: 0.8rem; font-weight: 700;
}
.falta-txt { display: flex; flex-direction: column; min-width: 0; }
.falta-txt b { font-size: 0.9rem; }
.falta-txt small { font-size: 0.75rem; color: var(--text-muted); }
.falta-ir {
  min-height: 34px; padding: 0 0.9rem; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--warn); color: #2a1b03; font: inherit; font-size: 0.8rem; font-weight: 700;
}
.falta-panel.falta-ok { background: color-mix(in srgb, var(--good) 12%, var(--card-bg)); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.falta-panel.falta-ok .falta-cabeza h2 { color: var(--good); margin: 0; }
/* En «Editar negocio», los datos que faltan van como botones en una línea. */
.falta-chips { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; }
.falta-chips .falta-cabeza h2 { margin: 0 0.4rem 0 0; font-size: 0.92rem; }
.falta-chips .falta-lista { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.falta-chips .falta-item { display: contents; }
.falta-chips .falta-n, .falta-chips .falta-txt small { display: none; }
.falta-chips .falta-txt { display: none; }
.falta-chips .falta-ir { border-radius: 999px; background: color-mix(in srgb, var(--warn) 22%, var(--card-bg)); color: var(--warn); }
/* Los campos vacíos, en ámbar como en el diseño. */
.campo-pendiente input, .campo-pendiente select, .campo-pendiente textarea {
  border-color: var(--warn) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent);
}

/* Ficha del negocio · arriba, lado a lado: datos, contactos y sugerencia. */
.fn-top3 {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 1rem; align-items: start; margin-bottom: 1rem;
}
.fn-top3 > .card, .fn-top-col > .card { margin-bottom: 0; }
.fn-top-col { display: flex; flex-direction: column; gap: 0.8rem; }
.fn-top3 .ficha-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem; font-size: 0.85rem; }
.fn-top3 .ficha-grid strong { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.fn-top3 .ficha-subtitulo { margin: 0.8rem 0 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primario-claro); }
.fn-top3 .ficha-origen { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.2rem; }
.fn-top3 .coaching-card-compacta {
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.fn-top3 .coaching-card-compacta h2 { color: var(--primario-claro); }
.fn-top3 .coaching-card-compacta p { font-size: 0.9rem; line-height: 1.55; }
.fn-top3 .coaching-alerta { background: color-mix(in srgb, var(--warn) 12%, var(--card-bg)); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.fn-top3 .coaching-alerta h2 { color: var(--warn); }
@media (max-width: 1100px) { .fn-top3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 720px) { .fn-top3 { grid-template-columns: minmax(0, 1fr); } .fn-top3 .ficha-grid { grid-template-columns: minmax(0, 1fr); } }
.ce-detalle { margin-bottom: 0.6rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); }
.ce-detalle > summary {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1.1rem; cursor: pointer;
  font-weight: 600; list-style: none;
}
.ce-detalle > summary::-webkit-details-marker { display: none; }
.ce-detalle > summary b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ce-detalle > summary::after { content: "▾"; color: var(--text-muted); }
.ce-detalle[open] > summary::after { content: "▴"; }
.ce-detalle[open] { padding: 0 0.8rem 0.4rem; }

/* Ficha del negocio · la sugerencia de venta como franja, y la fila de arriba:
   datos | contactos | acciones. */
.fn-sugerencia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  padding: 0.85rem 1.2rem !important; margin-bottom: 1rem;
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.fn-sugerencia h2 { margin: 0 !important; font-size: 0.72rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primario-claro); }
.fn-sugerencia p { margin: 0; flex: 1 1 360px; font-size: 0.92rem; line-height: 1.5; }
.fn-sugerencia.coaching-alerta { background: color-mix(in srgb, var(--warn) 12%, var(--card-bg)); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.fn-sugerencia.coaching-alerta h2 { color: var(--warn); }
.fn-top3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.fn-top-acciones .recordatorio-card { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.fn-top-acciones form { flex-wrap: wrap; }
.fn-top-acciones form > * { min-width: 0; }

/* ==========================================================================
   Acciones: los contadores como tarjetas grandes arriba.
   ========================================================================== */
.tareas-indicadores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin-bottom: 1.1rem;
}
.tareas-indicadores .indicador-chip {
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 0.15rem;
  padding: 0.9rem 1rem; border-radius: 14px;
  background: var(--card-bg); border: 1px solid var(--border);
  color: var(--text); font-size: 0.82rem; font-weight: 600; text-decoration: none;
}
.tareas-indicadores .indicador-chip strong { font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tareas-indicadores .indicador-vencida { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--card-bg)); }
.tareas-indicadores .indicador-chip:hover { border-color: var(--primary); }
.tareas-indicadores .indicador-hechas { color: var(--text-muted); }
.tareas-grupo { border-radius: 16px; }

/* ==========================================================================
   Interruptores: las casillas de «activo» (alertas, horarios) se ven como
   interruptores, igual que en el diseño. Siguen siendo casillas por debajo.
   ========================================================================== */
input[type="checkbox"][name^="activo"] {
  appearance: none; -webkit-appearance: none;
  position: relative; width: 44px; height: 24px; flex-shrink: 0;
  border-radius: 999px; border: 0; padding: 0; margin: 0;
  background: var(--border); cursor: pointer; transition: background-color 0.15s ease;
  vertical-align: middle;
}
input[type="checkbox"][name^="activo"]::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #ffffff;
  transition: transform 0.15s ease;
}
input[type="checkbox"][name^="activo"]:checked { background: var(--primary); }
input[type="checkbox"][name^="activo"]:checked::after { transform: translateX(20px); }
input[type="checkbox"][name^="activo"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"][name^="activo"], input[type="checkbox"][name^="activo"]::after { transition: none; }
}

/* ==========================================================================
   Ajustes: menú lateral de secciones
   ========================================================================== */
.aj-capa { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.aj-nav {
  flex: 1 1 220px; max-width: 260px; display: flex; flex-direction: column; gap: 3px;
  padding: 0.6rem; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--border);
  position: sticky; top: 1rem;
}
.aj-nav-grupo { padding: 0.6rem 0.75rem 0.25rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.aj-nav-item {
  display: block; width: 100%; min-height: 42px; padding: 0 0.75rem; border: 0; border-radius: 9px;
  background: transparent; color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600;
  text-align: left; text-decoration: none; line-height: 42px; cursor: pointer;
}
.aj-nav-item:hover { background: var(--surface-2); }
.aj-nav-item.activo { background: color-mix(in srgb, var(--primary) 16%, var(--card-bg)); color: var(--primario-claro); }
.aj-contenido { flex: 999 1 600px; min-width: 0; }
.aj-contenido details.seccion-plegable[hidden] { display: none; }
.aj-contenido details.seccion-plegable > summary { pointer-events: none; }
@media (max-width: 760px) {
  .aj-nav { position: static; max-width: none; flex-direction: row; overflow-x: auto; flex-wrap: nowrap; }
  .aj-nav-grupo { display: none; }
  .aj-nav-item { width: auto; white-space: nowrap; }
}

/* ==========================================================================
   Densidad del diseño: más aire, cifras grandes, sin íconos en los indicadores
   ========================================================================== */
.container { padding-left: 2rem; padding-right: 2rem; }
.subtitle { font-size: 0.86rem; }
.container .card h2, .grafico-cabecera h2 { font-size: 1.05rem; font-weight: 600; }
.grafico-resumen { font-size: 0.8rem; margin-top: 0.25rem; }
.container .card { padding: 1.25rem 1.4rem; }

/* Indicadores: rótulo, cifra grande y nota. Sin ícono, como en el diseño. */
.kpi-row { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.9rem; margin-bottom: 1.2rem; }
.kpi { flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 1.1rem 1.25rem; border-radius: 14px; }
.kpi-icono { display: none; }
.kpi-cuerpo { gap: 0.3rem; width: 100%; }
.kpi-label { font-size: 0.82rem; }
.kpi-valor { font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.kpi-nota { font-size: 0.76rem; }
.kpi-row .kpi[data-kpi="habilitadas"] .kpi-label,
.kpi-row .kpi[data-kpi="habilitadas"] .kpi-nota { color: var(--primario-claro); }
.kpi-meta-barra { display: flex; width: 100%; height: 10px; margin-top: 0.35rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 22%, var(--card-bg)); overflow: hidden; }
.kpi-meta-barra > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* Tablas con aire, salvo las planillas tipo Excel que son densas a propósito. */
table:not(.tabla-excel) th { padding: 0.75rem 0.85rem; font-size: 0.7rem; letter-spacing: 0.06em; }
table:not(.tabla-excel) td { padding: 0.7rem 0.85rem; font-size: 0.88rem; border-bottom-color: var(--linea-suave); }

/* Barras horizontales del diseño (embudo, segmentos, compañías…). */
.barras-h { display: flex; flex-direction: column; gap: 0.55rem; }
.barra-h { display: grid; grid-template-columns: 140px minmax(0, 1fr) 64px; align-items: center; gap: 0.8rem; }
.barra-h-nombre { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-h-pista { display: flex; height: 22px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.barra-h-pista > span { display: block; height: 100%; border-radius: 6px; min-width: 3px; }
.barra-h-valor { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.barra-h-valor small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--text-muted); }

/* ---------- Histórico: barras por mes contra la meta ---------- */
.hi-barras {
  position: relative; display: flex; align-items: flex-end; gap: 0.9rem;
  height: 240px; padding-top: 1.4rem; border-bottom: 1px solid var(--border);
}
.hi-meta { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--warn); pointer-events: none; }
.hi-meta em { position: absolute; right: 0; top: -1.3rem; font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--warn); }
.hi-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.3rem; }
.hi-valor { font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hi-barra { display: block; width: 100%; max-width: 56px; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--primary); }
.hi-barra.hi-en-meta { background: var(--good); }
.hi-barra.hi-en-curso { background: repeating-linear-gradient(45deg, var(--border) 0 6px, var(--surface-2) 6px 12px); }
.hi-meses { display: flex; gap: 0.9rem; margin-top: 0.4rem; }
.hi-meses span { flex: 1; text-align: center; font-size: 0.75rem; color: var(--text-muted); }

/* ==========================================================================
   Actividad
   ========================================================================== */
.mini-kpi-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.mini-kpi {
  display: flex !important; flex-direction: column-reverse; align-items: flex-start; gap: 0.3rem;
  padding: 1rem 1.15rem !important; border-radius: 14px !important;
  background: var(--card-bg) !important; border: 1px solid var(--border) !important;
}
.mini-kpi b { font-size: 1.7rem !important; font-weight: 700 !important; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mini-kpi b i { font-size: 1rem !important; }
.mini-kpi em { font-size: 0.8rem !important; }
.ac-apilada { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin: 0.4rem 0 0.9rem; }
.ac-apilada > span { display: block; height: 100%; }
.ac-lista { display: flex; flex-direction: column; }
.ac-lista-fila { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.45rem 0; border-top: 1px solid var(--linea-suave); font-size: 0.86rem; }
.ac-lista-fila span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ac-lista-fila i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ac-lista-fila b { font-variant-numeric: tabular-nums; }
.ac-ejecutivos { display: flex; flex-direction: column; margin-top: 0.6rem; }
.ac-eje { display: grid; grid-template-columns: 170px minmax(0, 1fr) 56px 60px; align-items: center; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid var(--linea-suave); }
.ac-eje-nombre { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-eje-pista { display: flex; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ac-con { display: block; background: var(--primary); }
.ac-sin { display: block; background: color-mix(in srgb, var(--primary) 35%, var(--card-bg)); }
.ac-eje-total, .ac-eje-pct { text-align: right; font-variant-numeric: tabular-nums; }
.ac-alto { color: var(--good); } .ac-medio { color: var(--primario-claro); } .ac-bajo { color: var(--warn); } .ac-gris { color: var(--text-muted); }
@media (max-width: 640px) { .ac-eje { grid-template-columns: 110px minmax(0, 1fr) 44px 48px; } }

/* ==========================================================================
   Comisiones · simulador: escenario a la izquierda, resultado a la derecha
   ========================================================================== */
.sim-capa {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  grid-auto-flow: row dense;
  gap: 0 1.2rem;
  align-items: start;
}
.sim-capa > .simulador-form { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 1rem; }
.sim-capa > *:not(.simulador-form) { grid-column: 2; min-width: 0; }
.sim-capa .simulador-grid { display: flex; flex-direction: column; gap: 0.8rem; }
.sim-capa .simulador-campo { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: var(--text-muted); }
.sim-capa .simulador-campo input, .sim-capa .simulador-campo select { min-height: 42px; color: var(--text); }
.sim-capa .simulador-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
/* El primer indicador —el variable— es el que manda. */
.sim-capa .kpi-row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sim-capa .kpi-row .kpi:first-child {
  grid-column: span 2;
  background: color-mix(in srgb, var(--primary) 14%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}
.sim-capa .kpi-row .kpi:first-child .kpi-valor { font-size: 2.5rem; }
.sim-capa .kpi-row .kpi:first-child .kpi-label,
.sim-capa .kpi-row .kpi:first-child .kpi-nota { color: var(--primario-claro); }
.sim-capa .fila-fuerte th, .sim-capa .fila-fuerte td { font-weight: 700; color: var(--text); }
@media (max-width: 900px) {
  .sim-capa { grid-template-columns: minmax(0, 1fr); }
  .sim-capa > .simulador-form { grid-row: auto; position: static; }
  .sim-capa > *:not(.simulador-form) { grid-column: 1; }
  .sim-capa .kpi-row .kpi:first-child { grid-column: auto; }
}
.sim-capa .informe-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.sim-capa .table-wrap { overflow-x: auto; }

/* =====================================================================
   Dashboard como en el diseño
   ===================================================================== */
/* La tira densa traía cifras de 1,1rem: aquí se lleva al tamaño del diseño. */
.kpi-row.kpi-row-densa { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.9rem; }
.kpi-row-densa .kpi { padding: 1rem 1.15rem; gap: 0.35rem; border-radius: 14px; }
.kpi-row-densa .kpi-label { font-size: 0.8rem; }
.kpi-row-densa .kpi-valor { font-size: 1.7rem; }
.kpi-row-densa .kpi-nota { font-size: 0.74rem; }
/* El héroe va primero. Su tamaño —y el de cualquier indicador— lo elige la
   persona con el botón de la tarjeta: normal, ancho (dos columnas) o grande
   (dos columnas y dos filas). Sin elección, cada uno ocupa un lugar. */
.kpi-row .kpi[data-kpi="habilitadas"] { order: -1; }
.kpi-row .kpi[data-kpi="habilitadas"] { grid-column: auto; }
.kpi-row-densa .kpi[data-kpi="habilitadas"] .kpi-label { font-weight: 600; }
.kpi-row-densa .kpi.kpi-tam-ancho { grid-column: span 2; }
.kpi-row-densa .kpi.kpi-tam-ancho .kpi-valor { font-size: 2.1rem; line-height: 1.05; }
.kpi-row-densa .kpi.kpi-tam-grande { grid-column: span 2; grid-row: span 2; justify-content: center; padding: 1.3rem 1.5rem; }
.kpi-row-densa .kpi.kpi-tam-grande .kpi-valor { font-size: 2.8rem; line-height: 1; }
.kpi-row-densa .kpi.kpi-tam-grande .kpi-label { font-size: 0.9rem; }
.kpi-row-densa .kpi.kpi-tam-grande .kpi-nota { font-size: 0.84rem; }
.kpi-tamano { display: none; height: 20px; width: 20px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; }
.kpi-tamano svg { width: 13px; height: 13px; }
#tira-kpis .kpi-tamano { display: inline-flex; }
.kpi-tamano:hover, .kpi-tamano:focus-visible { color: var(--primary); background: var(--surface-2); }
/* Los botones de cada indicador asoman al pasar el cursor, para no ensuciar. */
@media (hover: hover) {
  .kpi .kpi-acciones { opacity: 0; transition: opacity 0.15s ease; }
  .kpi:hover .kpi-acciones, .kpi:focus-within .kpi-acciones, .kpi[data-color] .kpi-acciones { opacity: 1; }
}
/* La franja de meta repite la barra del héroe: queda solo la proyección. */
.meta-franja { padding: 0.45rem 0.9rem; }

/* Ranking con avatar de iniciales. */
.ranking-densa { gap: 0.35rem; }
.ranking-densa .ranking-fila,
.ranking-fila { grid-template-columns: 22px 32px minmax(0, 1fr) auto; gap: 0.7rem; padding: 0.45rem 0.4rem; background: transparent; border-radius: 10px; }
.ranking-fila-propia { background: color-mix(in srgb, var(--primary) 10%, transparent) !important; }
.ranking-densa .ranking-puesto, .ranking-puesto { width: 22px; height: 22px; font-size: 0.72rem; background: transparent; color: var(--text-muted); }
.ranking-fila-1 .ranking-puesto, .ranking-fila-2 .ranking-puesto, .ranking-fila-3 .ranking-puesto { font-weight: 800; }
.ranking-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 0.7rem; font-weight: 700; color: #0d1117; }
.av-0 { background: #00b8a9; } .av-1 { background: #6aa8ff; } .av-2 { background: #e8a23a; }
.av-3 { background: #c9b8ff; } .av-4 { background: #2fb46e; } .av-5 { background: #ff8a73; }
.ranking-densa .ranking-nombre { font-size: 0.86rem; font-weight: 600; }
.ranking-densa .ranking-barra { height: 6px; margin-top: 5px; background: var(--surface-2); }
.ranking-densa .ranking-valor { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ranking-densa .ranking-valor small { font-size: 0.72rem; }

/* Reparto en barras en lugar de donas. */
.vista-oculta { display: none !important; }
.barras-dash { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.barras-dash.barras-h .barra-h { grid-template-columns: 96px minmax(0, 1fr) 48px; }
.barras-dash.barras-h .barra-h-pista { height: 14px; border-radius: 4px; }
.barras-dash-total { font-size: 0.82rem; color: var(--text-muted); }
.barras-dash-total b { font-size: 1.6rem; color: var(--text); font-variant-numeric: tabular-nums; margin-right: 0.25rem; }
.barras-dash-apilada { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.barras-dash-apilada > span { display: block; height: 100%; }
.barras-dash-apilada > span + span { border-left: 2px solid var(--card-bg); }
.barras-dash-leyenda { display: flex; flex-direction: column; gap: 0.4rem; }
.barras-dash-ley { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 0.55rem; font-size: 0.84rem; }
.barras-dash-ley i { width: 10px; height: 10px; border-radius: 3px; }
.barras-dash-ley b { font-variant-numeric: tabular-nums; }
.barras-dash-ley small { min-width: 3.5em; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.barras-dash-vacio { margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.85rem; }
/* Embudo: una fila por etapa, valor a la derecha sin segunda línea. */
[data-panel="fn"] .barra-h { grid-template-columns: 180px minmax(0, 1fr) 90px; }
[data-panel="fn"] .barra-h-valor small { display: inline; margin-left: 0.35rem; }

@media (max-width: 720px) {
  .kpi-row.kpi-row-densa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .kpi-row-densa .kpi-valor { font-size: 1.35rem; }
  .kpi-row-densa .kpi.kpi-tam-grande { grid-row: auto; }
  .kpi-row-densa .kpi[class*="kpi-tam-"] .kpi-valor { font-size: 1.8rem; }
  [data-panel="fn"] .barra-h { grid-template-columns: 100px minmax(0, 1fr) 70px; }
}
/* Con el héroe a la vista, la franja de meta solo deja la proyección. */
.kpi-row:has(.kpi[data-kpi="habilitadas"]:not([hidden])) ~ .meta-franja:not(:has(.meta-franja-proy)) { display: none; }
.kpi-row:has(.kpi[data-kpi="habilitadas"]:not([hidden])) ~ .meta-franja .meta-franja-txt,
.kpi-row:has(.kpi[data-kpi="habilitadas"]:not([hidden])) ~ .meta-franja .meta-franja-barra { display: none; }
/* Los huecos que uno deja entre indicadores: apenas un contorno. */
.kpi-row-densa .kpi-hueco { background: transparent; border: 1px dashed var(--linea-suave); min-height: 0; }

/* Histórico: atajos de período, comparativa con insignia y acumulado plegado. */
.seg-atajos { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--campo-bg); border: 1px solid var(--border); }
.seg-atajo { min-height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg-atajo:hover { color: var(--text); }
.seg-atajo.activo { background: var(--primary); color: var(--sobre-primario); }
.kpi[data-kpi="hi-cump"] .kpi-valor { color: var(--stage-50, #f0b552); }
.kpi[data-kpi="hi-total"] .kpi-valor { color: var(--primario-claro); }
details.hi-acumulado > summary { list-style: none; cursor: pointer; }
details.hi-acumulado > summary::-webkit-details-marker { display: none; }
details.hi-acumulado > summary h2::after { content: " ▾"; display: inline !important; font-size: 0.8em; color: var(--text-muted); background: none; position: static; width: auto; height: auto; }
details.hi-acumulado[open] > summary h2::after { content: " ▴"; }
details.hi-acumulado:not([open]) > summary { margin-bottom: 0; }
.chip-rend { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.chip-rend-bien { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.chip-rend-ajustado { background: var(--notice-bg); color: var(--notice-text); }
.chip-rend-bajo { background: var(--error-bg); color: var(--error-text); }
.cump-barra { display: flex; align-items: center; gap: 0.5rem; min-width: 120px; }
.cump-barra > span { flex: 1; display: flex; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cump-barra > span > i { display: block; height: 100%; border-radius: 999px; }
.cump-barra b { min-width: 3em; text-align: right; font-variant-numeric: tabular-nums; }

/* Actividad: paneles escondidos de verdad y constancia en puntos por día. */
.dash-paneles > [data-panel][hidden] { display: none !important; }
.marca-puntos { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; margin-right: 0.5rem; max-width: 260px; }
.marca-puntos i { display: inline-block; width: 8px; height: 16px; border-radius: 3px; background: var(--surface-2); }
.marca-puntos i.on { background: var(--primary); }
.marca-alta { color: var(--primario-claro); font-weight: 700; }
.marca-media { color: var(--stage-50, #f0b552); font-weight: 700; }
.marca-baja { color: var(--danger); font-weight: 700; }
/* Los gráficos de línea piden un poco más de alto para lucirse. */
[data-panel="ge-dia"] .grafico-medio, [data-panel="ge-acc"] .grafico-medio { min-height: 280px; }
/* Un gráfico guardado oculto no ofrece cambiar su forma. */

/* ==========================================================================
   Ficha del negocio · como el diseño
   ========================================================================== */
.fn-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.fn-barra .ficha-volver { display: flex; gap: 1rem; margin: 0; }
.fn-volver-link { font-size: 0.84rem; font-weight: 600; color: var(--primario-claro); text-decoration: none; }
.fn-volver-link:hover { text-decoration: underline; }
.fn-barra-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
.fn-mas { position: relative; }
.fn-mas > summary { list-style: none; width: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.fn-mas > summary::-webkit-details-marker { display: none; }
.fn-mas-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; display: flex; flex-direction: column; padding: 0.35rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.fn-mas-menu button { width: 100%; padding: 0.6rem 0.8rem; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer; }
.fn-mas-menu button:hover { background: var(--surface-2); }
.fn-mas-menu .fn-mas-peligro { color: var(--danger); }

.fn-hero { gap: 1.2rem; padding: 1.6rem 1.75rem; }
.fn-hero-arriba { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fn-nombre { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.fn-nombre h1 { margin: 0; font-size: 1.9rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.fn-estrella { display: inline-flex; padding: 4px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 8px; }
.fn-estrella svg { width: 22px; height: 22px; fill: none; }
.fn-estrella.activa { color: #e8a23a; }
.fn-estrella.activa svg { fill: currentColor; }
.fn-chip svg { width: 13px; height: 13px; }
.fn-hero-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.fn-estado-pill select.estado-select {
  min-height: 38px; padding: 0 2.2rem 0 1rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  border: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062925' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 13px;
}
.fn-estado-pill select.estado-select:not([class*="estado-"]), .fn-estado-pill select.estado-:not(:disabled) { background-color: var(--primary); color: var(--sobre-primario); }
.fn-dueno { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted); }
.fn-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #0d1117; font-size: 0.66rem; font-weight: 700; }

.fn-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.fn-paso { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.fn-paso-barra { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); }
.fn-paso-hecho .fn-paso-barra { background: var(--primary); }
.fn-paso-actual .fn-paso-barra { background: var(--primario-claro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.fn-paso-nombre { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-paso-hecho .fn-paso-nombre, .fn-paso-actual .fn-paso-nombre { color: var(--text); }
.fn-paso-actual .fn-paso-nombre { font-weight: 700; }
.fn-paso-fecha { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fn-perdido { margin: 0; font-size: 0.8rem; color: var(--danger); font-weight: 600; }

.fn-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin-bottom: 1.1rem; }
.fn-cifra { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.15rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; }
.fn-cifra span { font-size: 0.78rem; color: var(--text-muted); }
.fn-cifra b { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fn-cifra small { font-size: 0.74rem; color: var(--text-muted); }
.fn-cifra-turquesa { color: var(--primario-claro); }
.fn-cifra-alerta { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
.fn-cifra-alerta b { color: var(--warn); }

.fn-cuerpo { gap: 1.25rem; }
.fn-principal, .fn-lado { gap: 1.1rem; }
.fn-principal > .card, .fn-lado > .card { margin: 0; }

.fn-sigue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; border-radius: 16px; background: color-mix(in srgb, var(--primary) 13%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); }
.fn-sigue-vencido { background: color-mix(in srgb, var(--danger) 10%, var(--card-bg)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.fn-sigue-cuerpo { display: flex; align-items: center; gap: 0.9rem; min-width: 0; flex: 1 1 360px; }
.fn-sigue-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary); color: var(--sobre-primario); }
.fn-sigue-vencido .fn-sigue-icono { background: var(--danger); color: #fff; }
.fn-sigue-icono svg { width: 22px; height: 22px; }
.fn-sigue-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.fn-sigue-eti { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primario-claro); }
.fn-sigue-vencido .fn-sigue-eti { color: var(--danger); }
.fn-sigue-texto > b { font-size: 1rem; font-weight: 600; }
.fn-sigue-sugerencia { font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; margin-top: 0.2rem; }
.fn-sigue-sugerencia em { font-style: normal; font-weight: 700; color: var(--text); }
.fn-sigue-sugerencia.coaching-alerta em { color: var(--warn); }
.fn-sigue-botones { display: flex; gap: 0.5rem; }
.fn-btn-suave { background: transparent; border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); color: var(--text); }
.fn-pop { position: relative; }
.fn-pop > summary { list-style: none; }
.fn-pop > summary::-webkit-details-marker { display: none; }
.fn-pop-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(300px, 86vw); display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.fn-pop-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: var(--text-muted); }

.fn-agenda > summary { list-style: none; cursor: pointer; }
.fn-agenda > summary::-webkit-details-marker { display: none; }
.fn-agenda > summary h2 { margin: 0; font-size: 0.95rem; }
.fn-cuenta { color: var(--text-muted); font-weight: 500; }
.fn-agenda-lista { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; }
.fn-agenda-lista > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0; border-top: 1px solid var(--linea-suave); }
.fn-agenda-texto { flex: 1 1 200px; display: flex; flex-direction: column; font-size: 0.86rem; min-width: 0; }
.fn-agenda-texto small { color: var(--text-muted); font-size: 0.74rem; }

.fn-registrar h2, .fn-actividad h2 { font-size: 1.05rem; margin: 0 0 0.85rem; }
.fn-registrar form { display: flex; flex-direction: column; gap: 0.85rem; }
.fn-tipos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fn-tipo { min-height: 36px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.fn-tipo:hover { border-color: var(--primary); }
.fn-tipo.activo { background: var(--primary); border-color: var(--primary); color: var(--sobre-primario); }
.fn-tipo-mas select { min-height: 36px; padding: 0 0.9rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.fn-tipo-mas select.activo { border-color: var(--primary); color: var(--primario-claro); }
.fn-resultado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.fn-resultado[hidden] { display: none; }
.fn-resultado-eti { font-size: 0.8rem; color: var(--text-muted); }
.fn-resultado-ops { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fn-resultado-ops[hidden] { display: none; }
.fn-radio { position: relative; }
.fn-radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fn-radio span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.85rem; border-radius: 8px; border: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; }
.fn-radio input:checked + span { background: color-mix(in srgb, var(--primary) 18%, transparent); border-color: var(--primary); color: var(--primario-claro); }
.fn-radio input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.fn-nota { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--text-muted); }
.fn-nota textarea { resize: vertical; min-height: 84px; font-size: 0.92rem; }
.fn-proxima { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.fn-proxima[hidden] { display: none; }
.fn-proxima label { flex: 1 1 200px; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: var(--text-muted); }
.fn-registrar-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem; }
.fn-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; color: var(--text-muted); cursor: pointer; }
.fn-check[hidden] { display: none; }

.fn-linea { list-style: none; margin: 0; padding: 0; }
.fn-linea-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0.8rem; padding: 0.8rem 0; border-top: 1px solid var(--linea-suave); }
.fn-linea-icono { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 0.68rem; font-weight: 700; }
.fn-linea-icono svg { width: 16px; height: 16px; }
.fn-linea-gestion { background: var(--primary); color: var(--sobre-primario); }
.fn-linea-agenda { background: color-mix(in srgb, var(--stage-10, #4bbfd0) 20%, transparent); color: var(--stage-10, #4bbfd0); }
.fn-linea-cuerpo { min-width: 0; }
.fn-linea-cuerpo b { display: block; font-size: 0.88rem; font-weight: 600; }
.fn-linea-cuerpo p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; }
.fn-linea-cuando { display: flex; align-items: flex-start; gap: 0.3rem; font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
.fn-linea-quitar { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0 0.2rem; opacity: 0; }
.fn-linea-item:hover .fn-linea-quitar, .fn-linea-quitar:focus-visible { opacity: 1; }
.fn-linea-vacio { padding: 0.8rem 0; color: var(--text-muted); font-size: 0.88rem; border-top: 1px solid var(--linea-suave); }

.fn-lado .card h2 { margin: 0 0 0.6rem; }
.fn-lado-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.fn-lado-cabeza h2 { margin: 0 !important; }
.fn-tramite { display: flex; flex-direction: column; gap: 0.15rem; }
.fn-tramite-fila { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.5rem 0.35rem; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer; text-align: left; }
.fn-tramite-fila:hover:not(:disabled) { background: var(--surface-2); }
.fn-tramite-fila:disabled { cursor: default; }
.fn-tramite-fila > span { display: inline-flex; align-items: center; gap: 0.55rem; }
.fn-tramite-fila i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); opacity: 0.6; }
.fn-tramite-fila.ok i { background: var(--primary); opacity: 1; }
.fn-tramite-fila b { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.fn-tramite-fila.ok b { color: var(--primario-claro); }
.fn-folio { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--linea-suave); }
.fn-folio > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; }
.fn-folio > summary::-webkit-details-marker { display: none; }
.fn-folio-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.fn-contacto { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0; border-top: 1px solid var(--linea-suave); }
.fn-contacto-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.fn-contacto-cabeza > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.fn-contacto-cabeza b { font-size: 0.9rem; }
.fn-contacto-cabeza small { font-size: 0.76rem; color: var(--text-muted); overflow-wrap: anywhere; }
.fn-rol { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.fn-rol-principal { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.fn-rol-legal { background: color-mix(in srgb, #6aa8ff 18%, transparent); color: #6aa8ff; }
.fn-rol-despacho { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.fn-contacto-botones { display: flex; align-items: center; gap: 0.4rem; }
.fn-icono-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; text-decoration: none; font-size: 0.8rem; }
.fn-icono-btn:hover { border-color: var(--primary); color: var(--primario-claro); }
.fn-icono-btn svg { width: 15px; height: 15px; }
.fn-quitar { width: 30px; height: 30px; background: transparent; border-color: transparent; color: var(--text-muted); }
.fn-quitar:hover { color: var(--danger); border-color: transparent; }
.fn-contacto-origen { margin-left: auto; font-size: 0.7rem; color: var(--text-muted); text-align: right; }
.fn-contacto-quitar { margin-left: auto; }
.fn-contacto-origen + .fn-contacto-quitar { margin-left: 0; }
.fn-aviso { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--warn); }
.fn-contactos .agregar-contacto:not([open]) { display: none; }
.fn-contactos .agregar-contacto-form { margin-top: 0.6rem; }

.fn-datos dl { margin: 0; }
.fn-datos dl > div { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.45rem 0; border-top: 1px solid var(--linea-suave); font-size: 0.84rem; }
.fn-datos dt { color: var(--text-muted); }
.fn-datos dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }

.fn-soltar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 84px; padding: 0.8rem; border-radius: 12px; border: 1px dashed var(--border); text-align: center; cursor: pointer; }
.fn-soltar .zona-soltar-texto { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--text-muted); }
.fn-soltar .zona-soltar-texto b { color: var(--text); font-weight: 600; font-size: 0.85rem; }
.fn-soltar:hover, .fn-soltar:focus-visible { border-color: var(--primary); }
.fn-archivos .archivos-lista { margin-top: 0.5rem; }
.fn-archivos .archivos-lista li { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; }

.fn-etiquetas-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fn-etiquetas-grid[data-solo-activas] .etiqueta-toggle:not(.etiqueta-activa) { display: none; }
.fn-etiquetas-vacio { display: none; font-size: 0.82rem; color: var(--text-muted); }
.fn-etiquetas-grid[data-solo-activas]:not(:has(.etiqueta-activa)) .fn-etiquetas-vacio { display: inline; }

@media (max-width: 720px) {
  .fn-hero { padding: 1.1rem; }
  .fn-nombre h1 { font-size: 1.4rem; }
  .fn-hero-lado { align-items: flex-start; }
  .fn-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0.8rem; }
  .fn-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .fn-cifra b { font-size: 1.35rem; }
  .fn-sigue-botones { width: 100%; }
  .fn-sigue-botones > * { flex: 1; }
  .fn-sigue-botones summary, .fn-sigue-botones .btn { width: 100%; justify-content: center; }
  .fn-pop-form { right: auto; left: 0; }
  .fn-barra-acciones { margin-left: 0; width: 100%; }
  .fn-linea-item { grid-template-columns: 32px minmax(0, 1fr); }
  .fn-linea-cuando { grid-column: 2; }
}
.fn-check { flex-direction: row !important; }
.fn-check input[type="checkbox"] { width: 16px !important; height: 16px; min-height: 0 !important; margin: 0; padding: 0; flex: none; }
.fn-aviso a { color: var(--primario-claro); font-weight: 600; }

/* Hunting: «Convertir a negocio» al lado de guardar, en verde de logro. */
.fp-guardar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; }
.fp-convertir-btn { display: inline-flex; align-items: center; gap: 0.55rem; margin-left: auto; padding: 0.45rem 1rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--good) 55%, transparent); background: color-mix(in srgb, var(--good) 14%, var(--card-bg)); color: var(--good); font-weight: 700; text-align: left; }
.fp-convertir-btn svg { width: 18px; height: 18px; flex: none; }
.fp-convertir-btn span { display: flex; flex-direction: column; line-height: 1.15; }
.fp-convertir-btn small { font-size: 0.7rem; font-weight: 500; opacity: 0.85; }
.fp-convertir-btn:hover { background: var(--good); color: #fff; }
.fp-convertir-destacado { background: var(--good); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 25%, transparent); }
@media (max-width: 720px) { .fp-convertir-btn { margin-left: 0; width: 100%; justify-content: center; } }

/* ==========================================================================
   Avisos por correo
   ========================================================================== */
.av-cabecera-lado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.av-cabecera-lado form { margin: 0; }
.av-conexion { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 36px; padding: 0 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: color-mix(in srgb, var(--good) 14%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); color: var(--good); text-decoration: none; }
.av-conexion i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.av-conexion.av-pausa { background: color-mix(in srgb, var(--warn) 14%, var(--card-bg)); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.av-conexion.av-sin { background: var(--error-bg); border-color: color-mix(in srgb, var(--error-text) 40%, transparent); color: var(--error-text); }
.av-hoy { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem; margin-bottom: 0.5rem; }
.av-tramo { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--border); }
.av-tramo form { margin: 0.2rem 0 0; }
.av-tramo-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.av-tramo-nombre { font-size: 0.95rem; font-weight: 600; }
.av-tramo-hora { font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.av-tramo-estado { font-size: 1.15rem; font-weight: 700; color: var(--text-muted); }
.av-tramo-detalle { font-size: 0.76rem; color: var(--text-muted); }
.av-hecho { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.av-hecho .av-tramo-estado { color: var(--good); }
.av-proximo { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.av-proximo .av-tramo-estado { color: var(--primario-claro); }
.av-apagado { opacity: 0.6; }
.av-reloj { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 1.1rem; }
.av-columnas { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.av-columnas > .card { margin: 0; }
.av-alertas { flex: 2 1 560px; min-width: 0; }
.av-envios { flex: 1 1 320px; min-width: 0; }
.av-columnas h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.av-lista { list-style: none; margin: 0; padding: 0; }
.av-alerta { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; align-items: center; gap: 0.9rem; padding: 0.75rem 0; border-top: 1px solid var(--linea-suave); }
.av-alerta-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.av-alerta-texto b { font-size: 0.9rem; font-weight: 600; }
.av-alerta-texto small { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }
.av-alerta:has(input[type="checkbox"]:not(:checked)) .av-alerta-texto b { color: var(--text-muted); }
.av-alerta-cuando { font-size: 0.76rem; color: var(--text-muted); text-align: right; max-width: 160px; }
.av-umbral { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.74rem; color: var(--text-muted); }
.av-umbral input { width: 70px; min-height: 30px; padding: 0 0.5rem; }
.av-switch { display: flex; justify-content: flex-end; }
.av-guardar { margin-top: 0.9rem; }
.av-envio { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0; border-top: 1px solid var(--linea-suave); }
.av-envio > div { display: flex; flex-direction: column; gap: 0.05rem; }
.av-envio b { font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.av-envio small { font-size: 0.74rem; color: var(--text-muted); }
.av-envio-vacio { padding: 0.6rem 0; border-top: 1px solid var(--linea-suave); font-size: 0.85rem; color: var(--text-muted); }
.av-chip { padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.av-chip-bien { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.av-chip-mal { background: var(--error-bg); color: var(--error-text); }
@media (max-width: 720px) {
  .av-alerta { grid-template-columns: minmax(0, 1fr) 52px; }
  .av-alerta-cuando { grid-column: 1; grid-row: 2; text-align: left; max-width: none; }
  .av-switch { grid-row: 1 / span 2; grid-column: 2; }
}
.kpi-tamano { font-size: 0.85rem; line-height: 1; }
/* Ficha: los datos de identidad (RUT, folio, segmento, compañía, tipo)
   destacan más, sin pasar al nombre de la empresa. */
.fn-hero .fn-chips { gap: 0.5rem; }
.fn-hero .fn-chip { min-height: 36px; padding: 0 0.85rem; border-radius: 9px; font-size: 0.98rem; font-weight: 600; }
.fn-hero .fn-chip svg { width: 15px; height: 15px; }
@media (max-width: 720px) { .fn-hero .fn-chip { font-size: 0.88rem; min-height: 32px; } }

/* ==========================================================================
   Documentos de ingreso · como el diseño
   ========================================================================== */
.in-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.in-barra-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.in-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.5rem 1.75rem; margin-bottom: 1.1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; }
.in-hero-texto { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.in-eyebrow { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
.in-hero h1 { margin: 0; font-size: 1.75rem; overflow-wrap: anywhere; }
.in-hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.in-hero .fn-chip { min-height: 36px; font-size: 0.9rem; font-weight: 600; }
.in-modalidad { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.3rem 0 0.75rem; min-height: 36px; border-radius: 9px; background: var(--surface-2); font-size: 0.8rem; color: var(--text-muted); }
.in-modalidad select { min-height: 30px; max-width: 320px; border: 0; border-radius: 7px; background: var(--card-bg); font-size: 0.84rem; font-weight: 600; padding: 0 0.5rem; }
.in-avance { flex: 0 1 380px; display: flex; flex-direction: column; gap: 0.55rem; min-width: 240px; }
.in-avance-texto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.in-avance-falta { font-size: 0.95rem; font-weight: 600; }
.in-avance-falta b { color: var(--warn); }
.in-avance-falta b.in-ok { color: var(--good); }
.in-avance .checklist-avance { margin: 0; font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.in-avance .checklist-avance b { font-weight: 600; color: var(--text-muted); }
.in-avance-barra { display: flex; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.in-avance-barra > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.3s ease; }

/* Dos columnas: los datos a la izquierda, la lista de documentos a la derecha. */
.ingreso-pantalla { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 1rem; }
.ingreso-pantalla > *, .ingreso-pantalla > form > * { grid-column: 1; }
.ingreso-pantalla #checklist { grid-column: 2; grid-row: 1 / span 50; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.in-docs-titulo { font-size: 1rem; margin: 0 0 0.5rem; }
.in-cotizador > summary { list-style: none; cursor: pointer; }
.in-cotizador > summary::-webkit-details-marker { display: none; }
.in-cotizador > summary h2::after { content: " ▾"; color: var(--text-muted); font-size: 0.8em; }
.in-cotizador[open] > summary h2::after { content: " ▴"; }
.in-cotizador:not([open]) > summary .subtitle:not(.in-cotizador-corto) { display: none; }
.in-cotizador[open] .in-cotizador-corto { display: none; }

.in-sec-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.in-sec-texto { flex: 1 1 260px; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.in-sec-texto h2 { margin: 0; font-size: 1rem; }
.in-resumen, .in-ayuda { font-size: 0.82rem; color: var(--text-muted); overflow-wrap: anywhere; }
.in-sec:not(.in-plegada) .in-resumen { display: none; }
.in-sec.in-plegada .in-ayuda { display: none; }
.in-marca { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.9rem; font-weight: 700; background: var(--surface-2); color: var(--text-muted); }
.in-completa .in-marca { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primario-claro); }
.in-falta { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.in-falta .in-marca { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.in-sec .form-ficha { margin-top: 1rem; }
.in-sec.in-plegada .form-ficha, .in-sec.in-plegada .bloque-plegable { display: none; }
.in-falta [data-pide]:placeholder-shown, .in-falta input[data-pide][value=""] { border-color: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 15%, transparent); }

@media (max-width: 1100px) {
  .ingreso-pantalla { grid-template-columns: minmax(0, 1fr); }
  .ingreso-pantalla > *, .ingreso-pantalla > form > * { grid-column: 1; }
  .ingreso-pantalla #checklist { grid-column: 1; grid-row: auto; position: static; max-height: none; }
}
@media (max-width: 720px) {
  .in-hero { padding: 1.1rem; }
  .in-hero h1 { font-size: 1.35rem; }
  .in-modalidad { width: 100%; }
  .in-modalidad select { flex: 1; max-width: none; }
  .in-avance { flex: 1 1 100%; min-width: 0; }
}

/* Alertas, prensa y meta: una sola fila delgada sobre los indicadores. */
.franjas-arriba { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin-bottom: 0.9rem; }
.franjas-arriba:empty { display: none; }
.franjas-arriba > .alertas-rotativas { flex: 1 1 280px; min-width: 0; margin: 0; padding: 0.3rem 0.65rem; min-height: 36px; }
.franjas-arriba > .franja-df { flex: 1.4 1 320px; }
.franjas-arriba > .meta-franja { flex: 0 1 auto; display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.3rem 0.8rem; min-height: 36px; font-size: 0.78rem; white-space: nowrap; }
.franjas-arriba .meta-franja-txt, .franjas-arriba .meta-franja-barra { display: inline-flex !important; }
.franjas-arriba .meta-franja-barra { width: 90px; flex: none; }
.franjas-arriba .meta-franja-proy { font-size: 0.76rem; }
.franjas-arriba .alertas-puntos { flex-shrink: 0; }
.franja-cerrar { margin: 0; flex-shrink: 0; }
.franja-cerrar button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; }
.franja-cerrar button:hover { background: var(--surface-2); color: var(--text); }
@media (max-width: 720px) {
  .franjas-arriba > .meta-franja { flex: 1 1 100%; white-space: normal; flex-wrap: wrap; }
  .franjas-arriba .alertas-puntos { display: none; }
}
/* La equis de las franjas: chica y tenue, se nota al pasar el cursor. */
.franja-cerrar button { width: 18px; height: 18px; padding: 0; font-size: 0.85rem; line-height: 1; opacity: 0.45; border-radius: 4px; }
.franja-cerrar button:hover, .franja-cerrar button:focus-visible { opacity: 1; }
.alertas-rotativas[hidden] { display: none !important; }
.franjas-arriba .alertas-puntos { display: none; }

/* Prensa en la fila de arriba: manda el titular. Medio y fecha en chico,
   sin etiqueta grande ni motivos; la meta se resume en una cifra. */
.franjas-arriba > .franja-df { flex: 3 1 420px; }
.franjas-arriba > #alertas-rotativas { flex: 1.2 1 240px; }
.franjas-arriba .franja-df .alertas-etiqueta { display: none; }
.franjas-arriba .franja-df-motivo { display: none !important; }
.franjas-arriba .franja-df-item { gap: 0.45rem; }
.franjas-arriba .franja-df-item a { font-size: 0.84rem; font-weight: 600; flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.franja-df-fuente { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.franjas-arriba .franja-df-medio { font-size: 0.6rem; padding: 0 0.3rem; line-height: 1.5; }
.franjas-arriba .franja-df-cuando { font-size: 0.66rem; color: var(--text-muted); }
.franjas-arriba .alertas-etiqueta { font-size: 0.55rem; }
.franjas-arriba .meta-franja-largo { display: none; }
.franjas-arriba .meta-franja-txt em { font-size: 0.72rem; }
.franjas-arriba .meta-franja-barra { width: 60px; }

/* ==========================================================================
   Chat · como el diseño
   ========================================================================== */
.chat { gap: 0; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.chat-lista { border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 0 0 0.6rem; background: transparent; }
.chat-buscar { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem; min-height: 40px; padding: 0 0.75rem; border-radius: 10px; background: var(--campo-bg); border: 1px solid var(--border); color: var(--text-muted); }
.chat-buscar svg { width: 15px; height: 15px; flex: none; }
.chat-buscar input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 0; min-height: 0; font-size: 0.84rem; }
.chat-conversacion { gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0; border-left: 3px solid transparent; }
.chat-conversacion.abierta { background: var(--surface-2); border-left-color: var(--primary); }
.chat-conversacion[hidden], .chat-persona[hidden] { display: none; }
.chat-cara .board-exec-avatar, .chat-cara img { width: 42px !important; height: 42px !important; font-size: 0.75rem !important; }
.chat-cara-equipo { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 15%, transparent); font-size: 1rem; }
.chat-conversacion-texto b { font-size: 0.9rem; }
.chat-ultimo { font-size: 0.78rem; }
.chat-sin-leer { min-width: 20px; height: 20px; line-height: 20px; border-radius: 999px; color: var(--sobre-primario); font-size: 0.7rem; }
.chat-nueva { margin: 0.4rem 0.6rem 0; }
.chat-charla { border: 0; border-radius: 0; background: transparent; }
.chat-charla-cabecera { align-items: center; gap: 0.8rem; padding: 1rem 1.4rem; }
.chat-charla-icono { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--primary); color: #0d1117; font-size: 0.8rem; font-weight: 700; }
.chat-charla-icono.chat-charla-equipo { border-radius: 12px; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primario-claro); }
.chat-charla-titulo { display: flex; flex-direction: column; gap: 0.05rem; }
.chat-charla-titulo b { font-size: 1rem; }
.chat-mensajes { padding: 1.2rem 1.4rem; gap: 0.85rem; }
.chat-fila { display: flex; align-items: flex-start; gap: 0.6rem; max-width: min(80%, 600px); }
.chat-fila.mio { align-self: flex-end; justify-content: flex-end; }
.chat-av { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 50%; font-size: 0.7rem; font-weight: 700; color: #0d1117; }
.chat-fila .chat-mensaje { max-width: 100%; padding: 0.7rem 0.9rem; border-radius: 14px 14px 14px 4px; background: var(--surface-2); gap: 0.25rem; }
.chat-fila .chat-mensaje.mio { border-radius: 14px 14px 4px 14px; background: var(--primary); color: var(--sobre-primario); }
.chat-fila .chat-mensaje.mio .chat-hora { color: color-mix(in srgb, var(--sobre-primario) 70%, transparent); }
.chat-fila .chat-mensaje.mio .mencion { color: var(--sobre-primario); font-weight: 700; text-decoration: underline; }
.chat-autor { font-size: 0.76rem; color: var(--text-muted); }
.chat-texto { font-size: 0.92rem; line-height: 1.5; }
.chat-escribir { gap: 0.6rem; padding: 0.9rem 1.1rem; border-top: 1px solid var(--border); }
.chat-escribir textarea { min-height: 44px; border-radius: 12px; }
.chat-escribir .btn { min-height: 44px; padding: 0 1.2rem; }
@media (max-width: 760px) {
  .chat { grid-template-columns: minmax(0, 1fr); }
  .chat-lista { border-right: 0; border-bottom: 1px solid var(--border); }
  .chat-fila { max-width: 92%; }
}

/* ==========================================================================
   Archivos para la venta · como el diseño
   ========================================================================== */
.ar-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.ar-buscar { flex: 1 1 240px; margin: 0; background: var(--card-bg); }
.ar-columnas { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.ar-columnas > .card { margin: 0; }
.ar-archivos { flex: 999 1 620px; min-width: 0; }
.ar-accesos { flex: 1 1 320px; min-width: 0; }
.ar-archivos .archivos-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.9rem; }
.ar-archivos .archivo { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; column-gap: 0.8rem; row-gap: 0.2rem; align-content: start; padding: 1rem 1.05rem 0.8rem; border-radius: 14px; background: var(--surface-2); }
.ar-archivos .archivo[hidden] { display: none; }
.ar-archivos .archivo-sello { grid-column: 1; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 11px; font-size: 0.66rem; background: color-mix(in srgb, var(--text-muted) 20%, transparent); color: var(--text-muted); }
.ar-archivos .archivo-sello[data-ext^="xls"], .ar-archivos .archivo-sello[data-ext="csv"] { background: color-mix(in srgb, #2fb46e 18%, transparent); color: #4fd08a; }
.ar-archivos .archivo-sello[data-ext="pdf"] { background: color-mix(in srgb, #ff8a73 18%, transparent); color: #ff8a73; }
.ar-archivos .archivo-sello[data-ext^="doc"] { background: color-mix(in srgb, #6aa8ff 18%, transparent); color: #8cbcff; }
.ar-archivos .archivo-sello[data-ext^="ppt"] { background: color-mix(in srgb, #e8a23a 18%, transparent); color: #f0b552; }
.ar-archivos .archivo-nombre { grid-column: 2; font-size: 0.92rem; font-weight: 600; }
.ar-archivos .archivo-nota { grid-column: 2; font-size: 0.76rem; }
.ar-archivos .archivo-version { grid-column: 1 / -1; margin: 0.5rem 0 0; font-size: 0.74rem; }
.ar-archivos .archivo-botones { grid-column: 1 / -1; margin-top: 0.4rem; }
.ar-archivos .archivo-estrella { top: 0.8rem; right: 0.7rem; }
.ar-archivos .archivo-estrella svg { width: 17px; height: 17px; }
.ar-archivos .archivo-bajar { min-height: 32px; padding: 0 0.9rem; font-size: 0.8rem; }
.ar-accesos .accesos-grid { grid-template-columns: minmax(0, 1fr) !important; }
.ar-accesos h2 { font-size: 1rem; }
@media (max-width: 720px) { .ar-herramientas .seg-atajos { overflow-x: auto; max-width: 100%; } }
.chat-buscar { flex-direction: row !important; }

/* Mis ajustes: menú a la izquierda, una sección a la vez. */
.mis-ajustes .aj-contenido { display: flex; flex-direction: column; }
.aj-seccion { display: flex; flex-direction: column; gap: 1rem; }
.aj-seccion[hidden] { display: none; }
.aj-seccion > .card, .aj-seccion .pipeline-grid-mini > .card { margin: 0; }
.aj-seccion .pipeline-grid-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 0; }
.ma-perfil { display: flex; align-items: center; gap: 1rem; }
.ma-perfil-cara { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; background: var(--primary); color: var(--sobre-primario); font-size: 1.35rem; font-weight: 700; }
.ma-perfil-cara img { width: 100%; height: 100%; object-fit: cover; }
.ma-perfil-texto { display: flex; flex-direction: column; gap: 0.1rem; }
.ma-perfil-texto b { font-size: 1.15rem; }
.ma-perfil-texto span { font-size: 0.84rem; color: var(--text-muted); }
.aj-seccion .card h2 { text-transform: none; letter-spacing: 0; font-size: 1rem; }

/* ==========================================================================
   Hunting · tablero y planilla, cabecera como el diseño
   ========================================================================== */
.hl-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.9rem; margin-bottom: 1rem; }
.hl-titulo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.hl-titulo h1 { margin: 0; font-size: 1.75rem; }
.hl-titulo .hunting-resumen { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.hl-titulo .hunting-resumen strong { color: var(--text); }
.hl-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hl-vistas { padding: 3px; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--border); }
.hl-vistas .vista-boton { min-height: 34px; padding: 0 0.9rem; border-radius: 7px; font-weight: 600; }
.hl-vistas .vista-boton.activa { background: var(--surface-2); color: var(--primario-claro); }
.hl-filtros { display: flex; flex-direction: column-reverse; gap: 0.4rem; padding: 0.75rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; }
.hl-filtros .dash-filtros-hunting { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.hl-regla { margin: 0; font-size: 0.72rem; color: var(--text-muted); }
.hl-regla br { display: none; }
@media (max-width: 720px) {
  .hl-titulo h1 { font-size: 1.35rem; }
  .hl-acciones { width: 100%; }
}

/* Modo asignar: las tarjetas de la nube se quedan quietas para pincharlas. */
.modo-asignar .nube-card:not(.entrando) { animation: none !important; }
.barra-asignar-aviso { font-size: 0.8rem; color: var(--primario-claro); }
.barra-asignar-aviso.error { color: var(--warn); font-weight: 600; }
.btn-confirmar { background: var(--good) !important; border-color: var(--good) !important; color: #fff !important; }

/* Bases: quién ve qué, con el mismo color en todas partes.
   Turquesa = el equipo · azul = asignadas a un ejecutivo · ámbar = solo tú. */
.hb-quien { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-left: 0.3rem; }
.hb-quien > span, .hl-quien { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.hb-quien-equipo { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primario-claro); }
.hb-quien-ejec { background: color-mix(in srgb, #6aa8ff 16%, transparent); color: #8cbcff; }
.hb-quien-jefe { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.hl-quien { align-self: flex-start; }
.hb-seccion[data-seccion="equipo"] { border-left: 3px solid var(--primary); }
.hb-seccion[data-seccion="asignadas"] { border-left: 3px solid #6aa8ff; }
.hb-seccion[data-seccion="jefatura"] { border-left: 3px solid var(--warn); }
.hb-seccion[data-seccion="equipo"] .hb-seccion-titulo h2 { color: var(--primario-claro); }
.hb-seccion[data-seccion="asignadas"] .hb-seccion-titulo h2 { color: #8cbcff; }
.hb-seccion[data-seccion="jefatura"] .hb-seccion-titulo h2 { color: var(--warn); }

/* Lista o gráfico: se ve uno a la vez; la lista se pincha para cambiar. */
[data-vista-lista][hidden], [data-forma-grafico][hidden], .barras-dash[hidden] { display: none !important; }
.barras-dash, [data-vista-lista] { cursor: pointer; }
.barras-dash:hover .barra-h-pista > span, [data-vista-lista]:hover .hi-barra { filter: brightness(1.12); }

/* Hunting · el mes que se revisa */
.hb-mes { margin: 0; padding: 0; background: transparent; border: 0; }
.hb-seg { grid-template-columns: minmax(200px, 1.3fr) 90px 90px minmax(150px, 1fr) 70px 70px 100px 100px 100px 80px 130px 200px; min-width: 1400px; }
.hb-col-mes { color: var(--primario-claro); }
.hb-seg.hb-cabeza .hb-col-mes { color: var(--primario-claro); }
.hb-mes-equipo { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.1rem; }
.hb-mes-cabeza h2 { margin: 0; font-size: 1.05rem; }
.hb-mes-cabeza h2 small { font-weight: 500; color: var(--text-muted); font-size: 0.8rem; }
.hb-mes-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.8rem; }
.hb-mes-datos > div { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 1rem; border-radius: 12px; background: var(--surface-2); }
.hb-mes-datos span { font-size: 0.78rem; color: var(--text-muted); }
.hb-mes-datos b { font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hb-mes-datos small { font-size: 0.74rem; color: var(--text-muted); }
.hb-ritmo-mes { flex: none; height: 150px; gap: 6px; }
/* Resultado de Hunting en el buscador de arriba. */
.badge-etapa-hunting { background: color-mix(in srgb, #6aa8ff 18%, transparent); color: #8cbcff; }

/* Funnel: filtros y acciones en UNA sola fila, compacta. Si la pantalla es
   angosta, la fila se desliza de lado en vez de partirse en dos. */
.pipeline-barra { flex-wrap: nowrap; gap: 0.35rem; padding: 0.4rem 0.5rem; margin: 0.2rem 0 0.8rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow-x: auto; scrollbar-width: thin; }
.pipeline-barra .dash-filtros { flex-wrap: nowrap; gap: 0.3rem; padding: 0; background: transparent; border: 0; box-shadow: none; flex: none; }
.pipeline-barra-acciones { flex-wrap: nowrap; gap: 0.3rem; margin-left: auto; flex: none; }
.pipeline-barra .dash-filtros select, .pipeline-barra .dash-filtros input[type="search"] { min-height: 32px; font-size: 0.78rem; padding-top: 0; padding-bottom: 0; }
.pipeline-barra .dash-filtros select { max-width: 130px; }
.pipeline-barra .dash-buscar { width: 150px; }
.pipeline-barra .btn, .pipeline-barra .vista-boton { min-height: 32px; padding: 0 0.6rem; font-size: 0.76rem; white-space: nowrap; }
.pipeline-barra .btn-negocio-nuevo { padding: 0 0.75rem; font-size: 0.8rem; }
.pipeline-barra .mes-paso { flex: none; }
/* Íconos solos: el nombre de cada botón aparece al pasar el cursor. */
.pipeline-barra .pb-txt { display: none; }
.pipeline-barra-acciones .btn:not(.btn-negocio-nuevo) { min-width: 34px; justify-content: center; font-size: 0.9rem; }
.pipeline-barra-acciones .btn b { font-size: 0.74rem; margin-left: 0.15rem; }
.pipeline-barra .btn-filtrar { min-width: 34px; padding: 0 0.5rem; display: inline-flex; align-items: center; justify-content: center; }
/* Tablero / Tabla al centro de la cabecera del pipeline, bien a la vista. */
.pipeline-tablero-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.8rem; }
.pipeline-tablero-cabecera h2 { margin: 0; }
.vista-cambio-centro { justify-self: center; padding: 4px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border); }
.vista-cambio-centro .vista-boton { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 36px; padding: 0 1.1rem; border-radius: 9px; font-size: 0.86rem; font-weight: 700; }
.vista-cambio-centro .vista-boton svg { width: 16px; height: 16px; }
.vista-cambio-centro .vista-boton.activa { background: var(--primary); color: var(--sobre-primario); }
.pipeline-barra .dash-buscar { width: 135px; }
@media (max-width: 720px) {
  .pipeline-tablero-cabecera { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .vista-cambio-centro { justify-self: stretch; display: flex; }
  .vista-cambio-centro .vista-boton { flex: 1; justify-content: center; }
}

/* Diseño de correos: el de diseño propio explica qué lleva. */
.plantilla-fija-lista { margin: 0.4rem 0 1rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.86rem; line-height: 1.45; }
.plantilla-fija-lista b { color: var(--primario-claro); }
/* Hunting · eliminar base (jefatura): confirmación en la misma fila. */
.hb-eliminar { display: inline-flex; margin: 0; }
.hb-borrar:hover { color: var(--danger); }
.hb-borrar.hb-borrar-confirmar { width: auto; padding: 0 0.7rem; border-radius: 8px; background: var(--danger); color: #fff; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
/* Avisos por correo · programación en la vista principal */
.av-programacion { margin-bottom: 1.1rem; }
.av-programacion h2 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.av-subtitulo { margin: 1.4rem 0 0.2rem; font-size: 0.95rem; font-weight: 600; }
.av-programacion .horarios-lista { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 0.6rem; align-items: center; }
.av-programacion .horarios-lista > p { grid-column: 1 / -1; }
.av-programacion .horario-fila { margin: 0; }
.av-programacion .horario-eliminar { margin: 0; }
@media (max-width: 720px) { .av-programacion .horarios-lista { grid-template-columns: minmax(0, 1fr); } }
/* Planilla de Hunting: editar y eliminar en cada fila (jefatura). */
.tabla-excel .col-acciones { white-space: nowrap; text-align: right; }
.pl-accion { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 0.4rem; margin-left: 2px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; font-size: 0.8rem; text-decoration: none; cursor: pointer; }
.pl-accion:hover { border-color: var(--border); color: var(--text); }
.pl-borrar:hover { color: var(--danger); }
.pl-borrar-confirmar { background: var(--danger); color: #fff !important; font-weight: 700; font-size: 0.72rem; }
.reasignar-aviso { font-size: 0.8rem; color: var(--warn); }
/* Hunting: las casillas de la planilla a la vista para la jefatura; marcar
   una abre la barra para asignar, reasignar o eliminar. */
#planilla-prospectos .tabla-excel .marca-prospecto,
#planilla-prospectos .tabla-excel .marca-todas { display: inline-block; width: 15px; height: 15px; margin: 0 0.45rem 0 0; vertical-align: -2px; accent-color: var(--primary); cursor: pointer; }
.asignar-borrar:hover { border-color: var(--danger); color: var(--danger); }

/* El número de empresas nuevas asignadas, junto a Hunting y en su tarjeta. */
.nav-con-cuenta { position: relative; }
.nav-cuenta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto;
  border-radius: 999px; background: var(--danger, #e5484d); color: #fff;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface, #161b22);
}
.nav-cuenta[hidden] { display: none; }
.tabbar .nav-cuenta, nav.tabbar .nav-cuenta { position: absolute; top: 2px; right: 50%; margin: 0 -22px 0 0; }
.hb-nuevas {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1rem 0.55rem; border-radius: 999px;
  background: var(--danger, #e5484d); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: none;
}

/* ==========================================================================
   Cartas especiales
   --------------------------------------------------------------------------
   La jefatura destaca un negocio con una de siete cartas (CARTAS en db.py),
   en cualquier etapa. Las tres primeras dicen el tamaño de la cuenta; las
   cuatro temáticas, qué está pasando con ella. Cada color tiene su sentido:
     Cuenta insignia     blanco y oro      prestigio
     Cuenta estratégica  azul diamante     confianza y escala
     Alto valor          oro               valor
     Potencial de crec.  prisma violeta    lo que todavía puede crecer
     Cliente recuperado  rubí              lo valioso que vuelve
     Cierre caliente     fuego             urgencia
     Portabilidad total  verde esmeralda   luz verde para cambiarse completo
   Rendimiento: el fondo de cada carta es fijo. Lo que se mueve va en su
   propia capa (.carta-fx) y casi todo con transform u opacity, que el
   navegador anima sin volver a pintar la tarjeta. Las tarjetas que salen de
   la vista se pausan (.fx-quieto), y en equipos modestos o con «reducir
   movimiento» las cartas se ven, pero quietas.
   ========================================================================== */
.fn-dorado-form { display: inline-flex; margin: 0; }

/* Lo que comparte cada carta en todo el portal: su acento (bordes y marcas),
   su muestra (el puntito de color) y su velo (el fondo suave de la fila). */
.carta-insignia { --carta-acento: #c9a03a; --carta-muestra: linear-gradient(135deg, #ffffff 0 42%, #e2b445 58%, #b8862a); --carta-velo: rgba(201, 160, 58, 0.13); }
.carta-estrategica { --carta-acento: #3f7fe0; --carta-muestra: linear-gradient(135deg, #9cc6f5, #1f55a8 60%, #0c2a62); --carta-velo: rgba(63, 127, 224, 0.13); }
.carta-alto_valor { --carta-acento: #c9971f; --carta-muestra: linear-gradient(135deg, #fff1bf, #e2b545 50%, #8a6114); --carta-velo: rgba(201, 151, 31, 0.14); }
.carta-crecimiento { --carta-acento: #9061f9; --carta-muestra: linear-gradient(135deg, #efdcff, #9061f9 50%, #38127a); --carta-velo: rgba(144, 97, 249, 0.13); }
.carta-recuperado { --carta-acento: #e0457b; --carta-muestra: linear-gradient(135deg, #ffd1e1, #e0457b 50%, #6a0a2e); --carta-velo: rgba(224, 69, 123, 0.13); }
.carta-cierre_caliente { --carta-acento: #f07a24; --carta-muestra: radial-gradient(circle at 50% 80%, #ffd36b, #ff7a1a 45%, #4a1607); --carta-velo: rgba(240, 122, 36, 0.14); }
.carta-portabilidad { --carta-acento: #1cb98a; --carta-muestra: linear-gradient(135deg, #a8ffe4, #1cb98a 50%, #05513c); --carta-velo: rgba(28, 185, 138, 0.14); }

.carta-punto {
  display: inline-block; width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%;
  vertical-align: -1px;
  background: var(--carta-muestra, transparent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.carta-punto.carta-vacia { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }

/* --- Tarjeta del tablero: lo común ------------------------------------- */
.board-card.board-card-carta,
body.con-fondo .board-card.board-card-carta {
  isolation: isolate;
  border: 1px solid var(--carta-borde);
  border-radius: 12px;
  outline: none;
  color: var(--carta-tinta);
  background-repeat: no-repeat;
  box-shadow: 0 10px 22px -14px var(--carta-sombra);
}
.board-card-carta .empresa,
.board-card.board-card-carta .board-rut,
.board-card-carta .meta-row,
.board-card-carta .estrella,
.board-card-carta .card-menu-punto,
.board-card-carta .foco-cierre,
.board-card-carta .candado-cierre { color: var(--carta-tinta); }
.board-card-carta .empresa,
.board-card.board-card-carta .board-rut { text-shadow: var(--carta-relieve, none); }
.board-card-carta .lineas-desglose,
.board-card-carta .board-card-footer,
.board-card-carta .board-reminder,
.board-card-carta .chip-tarea { color: var(--carta-tinta-suave); }
/* La acción del pie, con el mismo recuadro de los chips de la carta; «sin
   acción» se queda discreto pero legible sobre el color. */
.board-card-carta .chip-tarea:not(.chip-tarea-sin) {
  background: var(--carta-chip); border-color: var(--carta-chip-borde); color: var(--carta-tinta);
}
.board-card-carta .chip-tarea span { color: var(--carta-tinta-suave); }
.board-card-carta .chip-tarea-sin { opacity: 0.85; }
.board-card-carta .chip,
.board-card-carta .chip-lineas,
.board-card-carta .chip-segmento,
.board-card-carta .chip-arpu,
.board-card-carta .chip-falta {
  background: var(--carta-chip);
  border-color: var(--carta-chip-borde);
  color: var(--carta-tinta);
}
.board-card-carta .board-exec-avatar { background: var(--carta-avatar); color: var(--carta-avatar-tinta); }

/* La capa de efectos: bajo el contenido y sobre el fondo. <b> va recortada a
   la tarjeta (reflejo, seda, llamas); los <i> son destellos sueltos. */
.carta-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; }
.carta-fx > b { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.carta-fx > b::before,
.carta-fx > b::after { content: ""; position: absolute; }
.carta-fx > i { position: absolute; opacity: 0; }
/* El reflejo que cruza de vez en cuando: una franja de luz suave, inclinada,
   que baja en diagonal de la esquina de arriba a la de abajo. */
.carta-fx > b::before {
  top: -70%; bottom: -70%; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, var(--carta-reflejo, rgba(255, 255, 255, 0.3)) 50%, transparent);
  opacity: 0.55;
  transform: translate(-170%, -18%) rotate(38deg);
  animation: carta-reflejo 9s ease-in-out infinite;
}
@keyframes carta-reflejo {
  0%, 58% { transform: translate(-170%, -18%) rotate(38deg); }
  100% { transform: translate(420%, 18%) rotate(38deg); }
}

/* --- 1 · Cuenta insignia: mármol blanco, destellos de oro y plata, rayos -- */
/* Corte propio: esquinas cortadas en diagonal y una muesca arriba y abajo,
   al centro. Va en porcentajes para que el dibujo eléctrico del borde
   (.carta-electrico, mismo contorno) calce en tarjetas de cualquier ancho. */
.board-card.board-card-carta.carta-insignia,
body.con-fondo .board-card.board-card-carta.carta-insignia {
  --carta-tinta: #132033;
  --carta-tinta-suave: rgba(19, 32, 51, 0.75);
  --carta-chip: rgba(255, 255, 255, 0.8);
  --carta-chip-borde: rgba(19, 32, 51, 0.22);
  --carta-avatar: #132033;
  --carta-avatar-tinta: #f6dc8a;
  --carta-borde: transparent;
  --carta-relieve: 0 1px 0 rgba(255, 255, 255, 0.85);
  background-color: #f1f0ec;
  background-image:
    radial-gradient(55% 60% at 15% 30%, #ffffff, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #ffffff, #f3f1ec 45%, #dfe4ea);
  box-shadow: none;
  clip-path: polygon(7.5% 0, 38% 0, 42.5% 4%, 57.5% 4%, 62% 0, 100% 0, 100% 89.5%, 92.5% 100%, 62% 100%, 57.5% 96%, 42.5% 96%, 38% 100%, 0 100%, 0 10.5%);
}
.board-card-carta.carta-insignia .chip-lineas { background: linear-gradient(160deg, #f6dc8a, #d9a93a); border-color: transparent; color: #2e2000; }
/* Destellos de oro y plata: cuatro sueltos que titilan y giran, y un grupo
   de cuatro más que titila a otro ritmo. */
.carta-insignia .carta-fx > i {
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background:
    radial-gradient(circle, #ffffff 0 1.6px, transparent 3.2px),
    linear-gradient(90deg, transparent 46%, var(--destello) 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, var(--destello) 50%, transparent 54%);
  filter: drop-shadow(0 0 3px var(--destello));
  animation: carta-brillo 3.2s ease-in-out infinite;
}
.carta-insignia .carta-fx > i:nth-of-type(odd) { --destello: #e9c35a; }
.carta-insignia .carta-fx > i:nth-of-type(even) { --destello: #c9d4e2; }
.carta-insignia .carta-fx > i:nth-of-type(1) { left: 62%; top: 30%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.carta-insignia .carta-fx > i:nth-of-type(2) { left: 80%; top: 54%; animation-delay: 0.8s; }
.carta-insignia .carta-fx > i:nth-of-type(3) { left: 50%; top: 66%; animation-delay: 1.6s; }
.carta-insignia .carta-fx > i:nth-of-type(4) { left: 88%; top: 22%; animation-delay: 2.4s; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
@keyframes carta-brillo {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
.carta-insignia .carta-fx > b::before {
  inset: 0; width: auto; transform: none; opacity: 0;
  background:
    radial-gradient(circle, #ffffff 0 1.5px, transparent 3px) 40% 12% / 16px 16px no-repeat,
    linear-gradient(90deg, transparent 46%, #c9d4e2 50%, transparent 54%) 40% 12% / 16px 16px no-repeat,
    linear-gradient(0deg, transparent 46%, #c9d4e2 50%, transparent 54%) 40% 12% / 16px 16px no-repeat,
    radial-gradient(circle, #ffffff 0 1.5px, transparent 3px) 93% 72% / 22px 22px no-repeat,
    linear-gradient(90deg, transparent 46%, #e9c35a 50%, transparent 54%) 93% 72% / 22px 22px no-repeat,
    linear-gradient(0deg, transparent 46%, #e9c35a 50%, transparent 54%) 93% 72% / 22px 22px no-repeat,
    radial-gradient(circle, #ffffff 0 1.5px, transparent 3px) 30% 88% / 16px 16px no-repeat,
    linear-gradient(90deg, transparent 46%, #c9d4e2 50%, transparent 54%) 30% 88% / 16px 16px no-repeat,
    linear-gradient(0deg, transparent 46%, #c9d4e2 50%, transparent 54%) 30% 88% / 16px 16px no-repeat,
    radial-gradient(circle, #ffffff 0 1.5px, transparent 3px) 72% 84% / 16px 16px no-repeat,
    linear-gradient(90deg, transparent 46%, #e9c35a 50%, transparent 54%) 72% 84% / 16px 16px no-repeat,
    linear-gradient(0deg, transparent 46%, #e9c35a 50%, transparent 54%) 72% 84% / 16px 16px no-repeat;
  animation: carta-titila-grupo 3.6s ease-in-out 1.1s infinite;
}
@keyframes carta-titila-grupo { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* El fogonazo del trueno: ilumina la carta un instante, junto con el rayo. */
.carta-insignia .carta-fx > b::after {
  inset: 0; opacity: 0;
  background: radial-gradient(60% 70% at var(--rayo-x, 84%) 22%, rgba(230, 240, 255, 0.95), rgba(160, 195, 255, 0.35) 45%, transparent 72%);
  animation: ce-trueno 5s linear infinite;
}
/* La electricidad: un aura que vibra sobre el contorno, dos corrientes que
   lo recorren, tres chispazos cortos y el rayo que cae con el fogonazo. */
.carta-fx .carta-electrico { display: none; }
.carta-insignia .carta-fx .carta-electrico {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 2.5px rgba(140, 180, 255, 0.95));
}
.carta-electrico path { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.carta-electrico .ce-aura { stroke: #bcd4ff; stroke-width: 6; stroke-opacity: 0.45; animation: ce-aura 2.2s ease-in-out infinite; }
.carta-electrico .ce-corriente { stroke: #ffffff; stroke-width: 3.5; stroke-dasharray: 34 966; animation: ce-corriente 3.4s linear infinite, ce-parpadeo 0.9s steps(2) infinite; }
.carta-electrico .ce-c2 { stroke-dasharray: 20 980; animation-delay: -1.7s, -0.4s; }
.carta-electrico .ce-arco { stroke: #ffffff; stroke-width: 1.8; opacity: 0; animation: ce-arco 5s linear infinite; }
.carta-electrico .ce-a2 { animation-delay: 1.7s; }
.carta-electrico .ce-a3 { animation-delay: 3.3s; }
.carta-electrico .ce-trueno { opacity: 0; animation: ce-trueno 5s linear infinite; }
.carta-electrico .ce-rayo-halo { stroke: #8fb4ff; stroke-width: 6; stroke-opacity: 0.45; }
.carta-electrico .ce-rayo { stroke: #ffffff; stroke-width: 2; }
@keyframes ce-aura { 50% { stroke-opacity: 0.75; stroke-width: 8; } }
@keyframes ce-corriente { to { stroke-dashoffset: -1000; } }
@keyframes ce-parpadeo { 50% { stroke-opacity: 0.55; } }
@keyframes ce-arco {
  0%, 78%, 100% { opacity: 0; }
  80% { opacity: 1; }
  82% { opacity: 0.2; }
  84% { opacity: 1; }
  89% { opacity: 0; }
}
@keyframes ce-trueno {
  0%, 70%, 100% { opacity: 0; }
  72% { opacity: 1; }
  74% { opacity: 0.2; }
  76% { opacity: 0.9; }
  82% { opacity: 0; }
}
.fx-quieto .carta-electrico * { animation-play-state: paused; }
.equipo-modesto .carta-electrico * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .carta-electrico * { animation: none; }
}

/* --- 2 · Cuenta estratégica: azul diamante líquido, con relámpagos ------- */
.board-card.board-card-carta.carta-estrategica,
body.con-fondo .board-card.board-card-carta.carta-estrategica {
  --carta-tinta: #ffffff;
  --carta-tinta-suave: rgba(226, 236, 255, 0.88);
  --carta-chip: rgba(8, 28, 72, 0.35);
  --carta-chip-borde: rgba(255, 255, 255, 0.4);
  --carta-avatar: #ffffff;
  --carta-avatar-tinta: #12397a;
  --carta-borde: rgba(190, 220, 255, 0.55);
  --carta-sombra: rgba(12, 42, 98, 0.9);
  --carta-relieve: 0 1px 3px rgba(5, 20, 70, 0.7);
  --carta-reflejo: rgba(255, 255, 255, 0.35);
  background-color: #12397a;
  background-image:
    conic-gradient(from 200deg at 35% 135%, #08204c, #1f55a8 18%, #7fb0ea 30%, #143f8a 44%,
      #0a2558 58%, #2f6cc4 72%, #9cc6f5 82%, #17468f 92%, #08204c),
    linear-gradient(160deg, #3d78cf 0%, #1a4796 45%, #0c2a62 100%);
  box-shadow: 0 12px 28px -12px rgba(12, 42, 98, 0.9), 0 0 20px -6px rgba(120, 180, 255, 0.7);
}
.carta-estrategica .board-card-footer * { text-shadow: 0 1px 2px rgba(5, 20, 70, 0.6); }
/* La seda: reflejos blancos que se desplazan despacio. */
.carta-estrategica .carta-fx > b::after {
  inset: -50%;
  background:
    radial-gradient(17% 9% at 39% 36%, rgba(255, 255, 255, 0.6), rgba(200, 225, 255, 0.18) 45%, transparent 70%),
    radial-gradient(13% 20% at 64% 56%, rgba(210, 230, 255, 0.4), transparent 65%),
    radial-gradient(10% 7% at 45% 69%, rgba(255, 255, 255, 0.35), transparent 70%);
  animation: carta-seda 14s ease-in-out infinite alternate;
}
@keyframes carta-seda {
  from { transform: translate(-8%, -6%) rotate(0deg); }
  to { transform: translate(8%, 6%) rotate(8deg); }
}
/* Tres relámpagos en el borde, que destellan por turnos. */
.carta-estrategica .carta-fx > i {
  width: 12px; height: 19px; background: #ffffff;
  clip-path: polygon(62% 0, 18% 56%, 46% 56%, 30% 100%, 84% 40%, 56% 40%, 76% 0);
  animation: carta-relampago 5.2s linear infinite;
}
.carta-estrategica .carta-fx > i:nth-of-type(1) { top: -6px; right: 22%; }
.carta-estrategica .carta-fx > i:nth-of-type(2) { top: 40%; right: -4px; animation-delay: 1.8s; transform: rotate(-90deg) scale(0.85); }
.carta-estrategica .carta-fx > i:nth-of-type(3) { bottom: -6px; left: 30%; animation-delay: 3.5s; transform: rotate(180deg) scale(0.75); }
.carta-estrategica .carta-fx > i:nth-of-type(4) { display: none; }
@keyframes carta-relampago {
  0%, 6%, 9%, 13%, 100% { opacity: 0; }
  7%, 8% { opacity: 1; }
  10%, 12% { opacity: 0.8; }
}

/* --- 3 · Alto valor: oro cepillado, contorno de ticket ------------------- */
.board-card.board-card-carta.carta-alto_valor,
body.con-fondo .board-card.board-card-carta.carta-alto_valor {
  --carta-tinta: #1f1603;
  --carta-tinta-suave: rgba(31, 22, 3, 0.75);
  --carta-chip: rgba(43, 31, 4, 0.10);
  --carta-chip-borde: rgba(43, 31, 4, 0.30);
  --carta-avatar: #2b1f04;
  --carta-avatar-tinta: #f3d67a;
  --carta-borde: #8a6a1c;
  --carta-sombra: rgba(140, 100, 10, 0.95);
  --carta-relieve: 0 1px 0 rgba(255, 240, 190, 0.6);
  --carta-reflejo: rgba(255, 251, 230, 0.55);
  background-color: #e2b545;
  background-image:
    repeating-linear-gradient(45deg, rgba(110, 72, 0, 0.10) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(110, 72, 0, 0.10) 0 1px, transparent 1px 7px),
    radial-gradient(80% 60% at 20% 10%, rgba(255, 250, 220, 0.55), transparent 60%),
    linear-gradient(160deg, #f8de86, #e3b545 45%, #c49026);
  /* las muescas del ticket, una a cada lado */
  -webkit-mask:
    radial-gradient(circle 9px at 0 50%, transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 50%, transparent 96%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 9px at 0 50%, transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 50%, transparent 96%, #000) right / 51% 100% no-repeat;
}
.carta-alto_valor .candado-cierre.activo { color: #7a1d0c; }

/* --- 4 · Potencial de crecimiento: cristales violetas con destellos ------ */
.board-card.board-card-carta.carta-crecimiento,
body.con-fondo .board-card.board-card-carta.carta-crecimiento {
  --carta-tinta: #ffffff;
  --carta-tinta-suave: rgba(240, 230, 255, 0.88);
  --carta-chip: rgba(20, 6, 50, 0.35);
  --carta-chip-borde: rgba(255, 255, 255, 0.35);
  --carta-avatar: #ffffff;
  --carta-avatar-tinta: #3c0f8a;
  --carta-borde: rgba(228, 206, 255, 0.7);
  --carta-sombra: rgba(40, 10, 110, 0.85);
  --carta-relieve: 0 1px 3px rgba(20, 6, 50, 0.6);
  background-color: #3c0f8a;
  background-image:
    conic-gradient(from 10deg at 72% 30%, rgba(255, 255, 255, 0.20) 0 38deg, transparent 38deg 104deg, rgba(176, 132, 255, 0.42) 104deg 150deg, transparent 150deg 228deg, rgba(103, 232, 249, 0.26) 228deg 262deg, transparent 262deg),
    conic-gradient(from 140deg at 28% 78%, rgba(255, 255, 255, 0.12) 0 30deg, transparent 30deg 140deg, rgba(214, 170, 255, 0.30) 140deg 196deg, transparent 196deg),
    conic-gradient(from 300deg at 92% 92%, rgba(103, 232, 249, 0.22) 0 26deg, transparent 26deg),
    linear-gradient(150deg, #7032de, #3c0f8a 50%, #1b0748);
  /* facetas: esquinas cortadas y una muesca a cada lado */
  clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% 40%, calc(100% - 6px) 50%, 100% 60%,
    100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 60%, 6px 50%, 0 40%);
}
.carta-crecimiento .carta-fx > b::before { display: none; }
.carta-crecimiento .carta-fx > i {
  width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #ffffff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: carta-destello 2.8s ease-in-out infinite;
}
.carta-crecimiento .carta-fx > i:nth-of-type(1) { left: 74%; top: 18%; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.carta-crecimiento .carta-fx > i:nth-of-type(2) { left: 88%; top: 56%; animation-delay: 0.7s; }
.carta-crecimiento .carta-fx > i:nth-of-type(3) { left: 60%; top: 40%; width: 8px; height: 8px; margin: -4px 0 0 -4px; animation-delay: 1.4s; }
.carta-crecimiento .carta-fx > i:nth-of-type(4) { left: 44%; top: 80%; width: 14px; height: 14px; margin: -7px 0 0 -7px; animation-delay: 2.1s; }
@keyframes carta-destello {
  0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  45% { opacity: 1; transform: scale(1) rotate(45deg); }
  60% { opacity: 0.9; transform: scale(0.8) rotate(60deg); }
}

/* --- 5 · Cliente recuperado: seda rubí con una cinta turquesa ------------ */
.board-card.board-card-carta.carta-recuperado,
body.con-fondo .board-card.board-card-carta.carta-recuperado {
  --carta-tinta: #ffffff;
  --carta-tinta-suave: rgba(255, 232, 240, 0.9);
  --carta-chip: rgba(60, 4, 24, 0.32);
  --carta-chip-borde: rgba(255, 255, 255, 0.35);
  --carta-avatar: #ffffff;
  --carta-avatar-tinta: #a1104a;
  --carta-borde: rgba(255, 200, 220, 0.6);
  --carta-sombra: rgba(100, 6, 40, 0.85);
  --carta-relieve: 0 1px 3px rgba(60, 4, 24, 0.6);
  background-color: #a1104a;
  background-image:
    radial-gradient(130% 70% at 112% -6%, transparent 47%, rgba(255, 255, 255, 0.55) 51%, rgba(255, 226, 238, 0.35) 56%, transparent 62%),
    radial-gradient(130% 70% at 112% -6%, transparent 62%, rgba(46, 214, 204, 0.8) 64%, rgba(170, 255, 248, 0.55) 65.5%, transparent 68%),
    radial-gradient(90% 50% at -10% 110%, transparent 55%, rgba(255, 170, 200, 0.35) 60%, transparent 66%),
    linear-gradient(160deg, #e94b83, #a1104a 50%, #4c0621);
  border-radius: 22px 6px 22px 6px;
}
.carta-recuperado .carta-fx > i {
  width: 3px; height: 3px; border-radius: 50%; background: #dcfffc;
  box-shadow: 0 0 6px 2px rgba(120, 255, 240, 0.7);
  animation: carta-titila 2.4s ease-in-out infinite;
}
.carta-recuperado .carta-fx > i:nth-of-type(1) { left: 70%; top: 26%; }
.carta-recuperado .carta-fx > i:nth-of-type(2) { left: 80%; top: 36%; animation-delay: 0.6s; }
.carta-recuperado .carta-fx > i:nth-of-type(3) { left: 63%; top: 40%; animation-delay: 1.2s; }
.carta-recuperado .carta-fx > i:nth-of-type(4) { left: 88%; top: 20%; animation-delay: 1.8s; }
@keyframes carta-titila {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 1; }
}

/* --- 6 · Cierre caliente: roca volcánica, lava, llamas y brasas ---------- */
.board-card.board-card-carta.carta-cierre_caliente,
body.con-fondo .board-card.board-card-carta.carta-cierre_caliente {
  --carta-tinta: #ffffff;
  --carta-tinta-suave: rgba(255, 232, 214, 0.92);
  --carta-chip: rgba(30, 8, 2, 0.45);
  --carta-chip-borde: rgba(255, 200, 150, 0.4);
  --carta-avatar: #fff4e0;
  --carta-avatar-tinta: #4d1807;
  --carta-borde: rgba(255, 170, 90, 0.6);
  --carta-sombra: rgba(120, 40, 0, 0.9);
  --carta-relieve: 0 1px 4px rgba(30, 8, 2, 0.85);
  background-color: #2b0e06;
  background-image:
    radial-gradient(70% 40% at 50% 112%, rgba(255, 150, 40, 0.95), rgba(255, 80, 10, 0.45) 45%, transparent 72%),
    radial-gradient(120% 60% at 18% 122%, transparent 60%, rgba(255, 130, 30, 0.6) 61%, rgba(255, 200, 90, 0.35) 61.8%, transparent 63%),
    radial-gradient(90% 55% at 92% 112%, transparent 55%, rgba(255, 170, 60, 0.55) 56%, transparent 57.6%),
    radial-gradient(70% 45% at 44% 150%, transparent 72%, rgba(255, 110, 20, 0.5) 73%, transparent 74.6%),
    linear-gradient(180deg, #140604, #2b0e06 55%, #4d1807);
  /* bordes de roca: un dentado leve arriba y abajo */
  clip-path: polygon(0 4px, 9% 1px, 17% 4px, 27% 0, 38% 3px, 50% 1px, 61% 4px, 72% 0, 83% 3px, 92% 1px, 100% 4px,
    100% calc(100% - 4px), 91% calc(100% - 1px), 80% 100%, 68% calc(100% - 3px), 55% 100%, 44% calc(100% - 3px),
    31% 100%, 20% calc(100% - 3px), 9% 100%, 0 calc(100% - 3px));
}
.carta-cierre_caliente .board-card-footer * { text-shadow: 0 1px 4px rgba(30, 8, 2, 0.9); }
.carta-cierre_caliente .carta-fx > b::before { display: none; }
/* Las llamas: lenguas de fuego que suben y bajan desde el borde de abajo. */
.carta-cierre_caliente .carta-fx > b::after {
  left: -5%; right: -5%; bottom: -8px; height: 58px;
  transform-origin: 50% 100%;
  background:
    radial-gradient(13% 62% at 10% 100%, rgba(255, 214, 96, 0.85), rgba(255, 110, 20, 0.5) 45%, transparent 70%),
    radial-gradient(9% 78% at 28% 100%, rgba(255, 190, 70, 0.8), rgba(255, 90, 10, 0.45) 45%, transparent 70%),
    radial-gradient(15% 58% at 48% 100%, rgba(255, 224, 120, 0.85), rgba(255, 110, 20, 0.5) 45%, transparent 70%),
    radial-gradient(10% 74% at 68% 100%, rgba(255, 190, 70, 0.8), rgba(255, 90, 10, 0.45) 45%, transparent 70%),
    radial-gradient(13% 62% at 88% 100%, rgba(255, 214, 96, 0.85), rgba(255, 110, 20, 0.5) 45%, transparent 70%);
  animation: carta-llama 1.6s ease-in-out infinite alternate;
}
@keyframes carta-llama {
  0% { transform: scaleY(0.85) skewX(-2deg); }
  50% { transform: scaleY(1.08) skewX(2deg); }
  100% { transform: scaleY(0.92) skewX(-1deg); opacity: 0.85; }
}
/* Brasas que suben. */
.carta-cierre_caliente .carta-fx > i {
  bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: #ffcf6b;
  box-shadow: 0 0 6px 2px rgba(255, 140, 30, 0.8);
  animation: carta-brasa 4.2s linear infinite;
}
.carta-cierre_caliente .carta-fx > i:nth-of-type(1) { left: 18%; }
.carta-cierre_caliente .carta-fx > i:nth-of-type(2) { left: 40%; animation-delay: 1.4s; }
.carta-cierre_caliente .carta-fx > i:nth-of-type(3) { left: 62%; animation-delay: 0.6s; }
.carta-cierre_caliente .carta-fx > i:nth-of-type(4) { left: 84%; animation-delay: 2.6s; }
@keyframes carta-brasa {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-160px); }
}

/* --- 7 · Portabilidad total: verde esmeralda, líneas de cancha ----------- */
.board-card.board-card-carta.carta-portabilidad,
body.con-fondo .board-card.board-card-carta.carta-portabilidad {
  --carta-tinta: #ffffff;
  --carta-tinta-suave: rgba(220, 255, 244, 0.9);
  --carta-chip: rgba(2, 40, 30, 0.35);
  --carta-chip-borde: rgba(160, 255, 225, 0.4);
  --carta-avatar: #ffffff;
  --carta-avatar-tinta: #06402f;
  --carta-borde: rgba(120, 240, 200, 0.6);
  --carta-sombra: rgba(2, 60, 44, 0.9);
  --carta-relieve: 0 1px 3px rgba(2, 34, 25, 0.7);
  --carta-reflejo: rgba(160, 255, 225, 0.28);
  background-color: #06402f;
  background-image:
    linear-gradient(118deg, transparent 54%, rgba(110, 255, 210, 0.30) 54% 54.8%, transparent 54.8%),
    linear-gradient(118deg, transparent 64%, rgba(110, 255, 210, 0.18) 64% 64.6%, transparent 64.6%),
    linear-gradient(62deg, transparent 70%, rgba(110, 255, 210, 0.22) 70% 70.7%, transparent 70.7%),
    repeating-linear-gradient(118deg, rgba(120, 255, 210, 0.06) 0 2px, transparent 2px 13px),
    linear-gradient(165deg, #118263, #06402f 55%, #022219);
  /* esquinas cortadas en diagonal */
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

/* --- Pausa y calma ------------------------------------------------------- */
.fx-quieto .carta-fx::before,
.fx-quieto .carta-fx > b::before,
.fx-quieto .carta-fx > b::after,
.fx-quieto .carta-fx > i { animation-play-state: paused; }
.equipo-modesto .carta-fx::before,
.equipo-modesto .carta-fx > b::before,
.equipo-modesto .carta-fx > b::after,
.equipo-modesto .carta-fx > i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .carta-fx::before, .carta-fx > b::before, .carta-fx > b::after, .carta-fx > i { animation: none; }
}

/* --- Fila de la tabla ---------------------------------------------------- */
.tabla-excel tr.fila-carta > td { background-color: var(--carta-velo); }
.tabla-excel tr.fila-carta > td.col-fija {
  background-image: linear-gradient(var(--carta-velo), var(--carta-velo));
  box-shadow: inset 3px 0 0 var(--carta-acento);
}
.tabla-excel tr.fila-carta > td.col-fija a { font-weight: 600; }
.tabla-excel .col-fija .carta-punto { width: 10px; height: 10px; margin-right: 0.35rem; }

/* --- Ficha --------------------------------------------------------------- */
.fn-hero.fn-hero-carta {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--carta-acento) 55%, transparent);
  background:
    radial-gradient(120% 150% at 0% 0%, var(--carta-velo), transparent 60%),
    radial-gradient(90% 120% at 100% 0%, var(--carta-velo), transparent 60%),
    var(--card-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--carta-acento) 30%, transparent),
    0 22px 44px -30px var(--carta-acento);
}
.fn-carta-cinta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.25rem 0.8rem 0.25rem 0.45rem; border-radius: 999px;
  background: var(--carta-velo);
  border: 1px solid color-mix(in srgb, var(--carta-acento) 60%, transparent);
  color: var(--text);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.fn-carta-cinta small { font-size: 0.66rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.fn-carta-cinta .carta-punto { width: 14px; height: 14px; }

/* Menú para elegir la carta, en la ficha */
.fn-cartas { position: relative; }
.fn-cartas > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.fn-cartas > summary::-webkit-details-marker { display: none; }
.fn-cartas-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: min(330px, 88vw);
  display: flex; flex-direction: column; gap: 2px; padding: 0.35rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.fn-cartas-op {
  display: flex; align-items: flex-start; gap: 0.6rem; width: 100%;
  padding: 0.55rem 0.7rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.fn-cartas-op .carta-punto { width: 16px; height: 16px; margin-top: 2px; }
.fn-cartas-op b { display: block; font-size: 0.86rem; }
.fn-cartas-op small { display: block; font-size: 0.72rem; line-height: 1.35; color: var(--text-muted); }
.fn-cartas-op:hover { background: var(--surface-2); }
.fn-cartas-op.activo { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--primary); }
.fn-cartas-op:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.fn-cartas-quitar { justify-content: center; color: var(--danger); font-size: 0.84rem; }

/* Menú «⋯» de la tarjeta: una muestra por carta */
.card-menu-cartas { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 0; }
.card-menu .card-menu-cartas button { display: inline-flex; padding: 5px; border-radius: 6px; }
.card-menu .card-menu-cartas .carta-punto { width: 14px; height: 14px; }
.card-menu .card-menu-cartas button.activo { box-shadow: inset 0 0 0 1.5px var(--primary); }

/* El RUT de cada tarjeta, del mismo color y tono que la razón social: es lo
   que se pide en cada llamada a Claro y tiene que leerse igual de fácil. */
.board-card .board-rut {
  color: inherit;   /* el de la tarjeta, igual que la razón social */
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* Hunting · lo ya asignado se ve más oscuro: al repartir, salta a la vista
   qué sigue libre. El selector y las acciones quedan a plena luz, porque se
   puede reasignar o corregir. Al pasar el cursor vuelve a leerse completo. */
.tabla-excel tr.fila-asignada > td {
  background-color: rgba(0, 0, 0, 0.32);
  color: var(--text-muted);
}
.tabla-excel tr.fila-asignada > td:not(.col-asignar):not(.col-acciones):not(.col-fija) { opacity: 0.6; }
.tabla-excel tr.fila-asignada > td.col-fija a { color: var(--text-muted); font-weight: 500; }
.tabla-excel tr.fila-asignada:hover > td { opacity: 1; }
.tabla-excel tr.fila-asignada .asignar-ejecutivo { opacity: 0.85; }
.board-card.board-card-asignada { filter: brightness(0.62) saturate(0.7); }
.board-card.board-card-asignada:hover { filter: none; }

/* Funnel · tabla: filtro por etapa, sobre la tabla. Se eligen una o varias;
   el color de cada botón es el de su etapa. */
.tabla-etapas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: 0 0 0.75rem;
}
.tabla-etapa {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 32px; padding: 0.25rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.tabla-etapa b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tabla-etapa:hover { border-color: var(--etapa-color, var(--primary)); color: var(--text); }
.tabla-etapa.activa {
  border-color: var(--etapa-color, var(--primary));
  background: color-mix(in srgb, var(--etapa-color, var(--primary)) 18%, transparent);
  color: var(--text);
}
.tabla-etapa:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tabla-etapas-cuenta { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); }
.tabla-excel tbody tr[hidden] { display: none; }
/* La columna fija lleva el mismo color que su fila cuando hay alerta: si no,
   el nombre queda en otro tono que el resto de la fila. */
.tabla-excel tbody tr.fila-alerta > td.col-fija {
  background: linear-gradient(var(--notice-bg), var(--notice-bg)), var(--card-bg);
}

/* En el celular la columna fija del nombre no puede comerse la pantalla: a lo
   más un tercio del ancho, el nombre en dos líneas y la letra un poco menor,
   para que al correr hacia el lado se vean los demás datos. Vale para la
   tabla del Funnel y la planilla de Hunting. */
@media (max-width: 700px) {
  .tabla-excel th, .tabla-excel td { font-size: 0.72rem; padding: 0.4rem 0.5rem; }
  .tabla-excel .col-fija {
    width: 34vw; min-width: 34vw; max-width: 34vw;
    white-space: normal; line-height: 1.25;
  }
  .tabla-excel .col-fija a {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal; overflow-wrap: anywhere;
  }
  .tabla-excel .col-fija .marca-prospecto { margin-right: 0.3rem; }
  .tabla-etapa { min-height: 30px; padding: 0.2rem 0.6rem; font-size: 0.74rem; }
  .tabla-etapas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .tabla-etapas-cuenta { white-space: nowrap; }
}

/* Estados nuevos de 90%. «Todo aprobado» se ve igual que «Aprobado por mesa»
   —lleno, color Cúspide— y pinta la fila; «Pendiente portabilidad» va con los
   trámites con Claro. */
select.estado-todo-aprobado {
  background-color: var(--primary); color: #fff; border-color: var(--primary);
}
select.estado-todo-aprobado option { color: var(--text); background: var(--card-bg); }
.estado-pendiente-portabilidad {
  background-color: var(--accent-soft); color: var(--primary-dark);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

/* Hunting · «Segmento no corresponde»: un gris pizarra, ni alarma ni logro. */
.fp-r-6 input:checked + span { background: #8b95a1; color: #0b0f14; }

/* ==========================================================================
   Hunting · la base por dentro (diseño «Vista de la base»)
   Avance arriba, filtros con chips, planilla legible, lo gestionado en tabla
   y, en el celular, las filas como tarjetas.
   ========================================================================== */
.hl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.15rem; }
.hl-meta-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 999px;
  background: var(--card-bg); border: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted);
}
.hl-meta-chip b { color: var(--text); }

/* Avance */
.hb-avance { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 0.85rem; margin-bottom: 0.9rem; }
.hb-avance-principal {
  display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; padding: 1.1rem 1.25rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px;
}
.hb-avance-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.8rem; }
.hb-avance-pct { font-size: 2.3rem; font-weight: 700; line-height: 1; color: var(--primario-claro); font-variant-numeric: tabular-nums; }
.hb-avance-txt { font-size: 0.85rem; color: var(--text-muted); }
.hb-avance-txt b { color: var(--text); }
.hb-avance-ayuda { margin-left: auto; font-size: 0.72rem; color: var(--text-muted); }
.hb-avance-barra { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--linea-suave); }
.hb-avance-barra span { display: block; min-width: 4px; }
.hb-avance-tramos { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.hb-tramo, .hb-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 34px; padding: 0 0.75rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--campo-bg); color: var(--text);
  font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.hb-tramo b, .hb-chip b { font-variant-numeric: tabular-nums; }
.hb-tramo:hover, .hb-chip:hover { border-color: var(--primary); }
.hb-chip.activa { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, var(--card-bg)); }
.hb-chip-vacio { color: var(--text-muted); }
.hb-tramo:focus-visible, .hb-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hb-punto { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.hb-avance-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.hb-cifra {
  display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; padding: 0.8rem 0.95rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
}
.hb-cifra span { font-size: 0.75rem; color: var(--text-muted); }
.hb-cifra b { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hb-cifra small { font-size: 0.7rem; color: var(--text-muted); }
.hb-cifra-destacada { background: color-mix(in srgb, var(--primary) 12%, var(--card-bg)); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.hb-cifra-destacada b { color: var(--primario-claro); }
.hb-verde { color: var(--good); }

/* Filtros: el formulario arriba y, abajo, lo filtrado como chips */
.hl-filtros { flex-direction: column; gap: 0.6rem; }
.hl-filtros-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.hl-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.hl-activos-titulo { font-size: 0.75rem; color: var(--text-muted); }
.hl-chip-filtro {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 28px; padding: 0 0.65rem; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primario-claro); font-size: 0.75rem; font-weight: 600; text-decoration: none;
}
.hl-chip-filtro:hover { border-color: var(--primary); }
.hl-chip-filtro span { font-size: 0.7rem; opacity: 0.8; }

/* Tablas de la base (planilla y lo gestionado) */
.hb-pestanas { flex-wrap: wrap; }
.planilla-ayuda { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; }
.hb-tabla td { vertical-align: middle; }
.hb-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.hb-tabla .col-fija { max-width: 320px; }
.hb-empresa { font-weight: 700; color: var(--text); text-decoration: none; }
.hb-empresa:hover { color: var(--primario-claro); }
.hb-rut, .hb-nota, .hb-contacto { display: block; }
.hb-rut { margin-top: 2px; font-size: 0.75rem; font-weight: 600; color: var(--text); opacity: 0.85; font-variant-numeric: tabular-nums; }
.hb-contacto { font-weight: 500; }
.hb-nota { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--text-muted); }
.hb-tenue { color: var(--text-muted); font-size: 0.8rem; }
.hb-tel {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 30px; padding: 0 0.6rem; border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primario-claro); font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hb-tel:hover { border-color: var(--primary); }
/* La pastilla del segmento en la tabla de prospectos. Antes se llamaba
   .hb-seg, igual que las filas de «Seguimiento de asignadas», y les quitaba
   la cuadrícula: las filas salían como globos con las columnas amontonadas. */
.hb-segmento {
  display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--surface-2, var(--campo-bg));
  border: 1px solid var(--border); font-size: 0.72rem; font-weight: 600;
}
.hb-estado {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  background: var(--campo-bg); border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.hb-tabla .marca-prospecto, .hb-tabla .marca-todas { width: 15px; height: 15px; margin: 0 0.45rem 0 0; vertical-align: -2px; accent-color: var(--primary); cursor: pointer; }
.hb-tabla .col-fija .marca-prospecto { float: left; margin-top: 3px; }

/* Lo ya gestionado */
.hb-gest { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }
.hb-gest-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.7rem; }
.hb-gest-cabeza h2 { margin: 0; font-size: 1.05rem; }
.hb-gest-cabeza .subtitle { margin: 0.15rem 0 0; font-size: 0.78rem; }
.hb-gest-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hb-gest-tabla { max-height: 70vh; overflow: auto; }
.hb-intento { display: block; font-weight: 500; white-space: nowrap; }
.hb-vuelve { display: block; font-weight: 600; font-size: 0.82rem; }
.hb-vuelve-pronto { color: var(--warn); }
.hb-vuelve-barra { display: block; width: 110px; height: 5px; margin-top: 5px; border-radius: 999px; background: var(--linea-suave); overflow: hidden; }
.hb-vuelve-barra span { display: block; height: 100%; background: var(--primary); }
.hb-vuelve-barra span.pronto { background: var(--warn); }
.hb-llamar { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.hb-gest .col-acciones { white-space: nowrap; }
.hb-gest .col-acciones .hb-tel { margin-right: 0.4rem; }
.hb-gest-pie { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hb-vermas { font-size: 0.8rem; font-weight: 600; }
.hb-tabla tbody tr[hidden] { display: none; }

/* Lo marcado: la barra de asignar flota abajo, centrada en el contenido (sin
   meterse bajo el menú lateral). */
.barra-asignar {
  position: fixed; top: auto; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 60; width: max-content; max-width: calc(100vw - 32px); margin: 0;
  padding: 0.65rem 0.9rem; border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 14%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.65);
}

@media (min-width: 901px) {
  .barra-asignar { left: calc(50% + var(--sidebar-width) / 2); max-width: calc(100vw - var(--sidebar-width) - 32px); }
  .barra-compacta .barra-asignar { left: calc(50% + var(--sidebar-mini) / 2); max-width: calc(100vw - var(--sidebar-mini) - 32px); }
}
@media (max-width: 900px) {
  .hb-avance { grid-template-columns: minmax(0, 1fr); }
  .hb-avance-ayuda { margin-left: 0; width: 100%; }
}

/* En el celular, cada fila es una tarjeta: nombre y RUT arriba, el resto en
   pares «dato: valor», y el teléfono y «Llamar» bien a mano. */
@media (max-width: 700px) {
  .barra-asignar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .hb-avance-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-avance-pct { font-size: 1.9rem; }
  .table-wrap:has(> .hb-tabla), .hb-gest-tabla { max-height: none; overflow: visible; border: 0; }
  .hb-tabla, .hb-tabla tbody { display: block; width: 100% !important; min-width: 0 !important; }
  .hb-tabla thead { display: none; }
  .hb-tabla tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.8rem;
    margin-bottom: 0.65rem; padding: 0.8rem 0.9rem; border-radius: 14px;
    background: var(--card-bg); border: 1px solid var(--border);
  }
  .hb-tabla tbody tr:nth-child(even) td { background: transparent; }
  .hb-tabla td, .hb-tabla .col-fija {
    display: block; position: static; width: auto; min-width: 0; max-width: none;
    padding: 0; border: 0; background: transparent !important; font-size: 0.82rem; white-space: normal;
  }
  .hb-tabla td[data-label]::before {
    content: attr(data-label); display: block; font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  }
  .hb-tabla td.col-fija { grid-column: 1 / -1; }
  .hb-tabla td.col-fija::before { display: none; }
  .hb-tabla .hb-empresa { font-size: 0.95rem; }
  .hb-tabla td.num { text-align: left; }
  .hb-tabla td.col-acciones, .hb-tabla td.col-asignar { grid-column: 1 / -1; }
  .hb-tabla td.col-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
  .hb-gest .col-acciones .hb-tel { flex: 1 1 100%; margin: 0; }
  .hb-tabla .hb-llamar { flex: 1; justify-content: center; min-height: 44px; font-size: 0.9rem; }
  .hb-tabla td[data-label="Teléfono"] { grid-column: 1 / -1; }
  .hb-tabla .hb-tel { display: flex; justify-content: center; width: 100%; min-height: 44px; font-size: 0.9rem; box-sizing: border-box; }
  #planilla-prospectos.card, .hb-gest.card { padding: 0.75rem; }
  .hl-meta-chip #nube-contador { display: none; }
  .hb-tabla .asignar-ejecutivo { width: 100%; min-height: 40px; }
  .hb-tabla .hb-nota { max-width: none; }
  .hb-tabla .hb-intento { white-space: normal; }
  .hb-tabla tr.fila-asignada { opacity: 0.75; }
  .hb-tabla tr.fila-asignada > td { opacity: 1 !important; }
  .planilla-ayuda { margin-left: 0; }
}

/* ==========================================================================
   Cierres 100% bloqueados: el candado
   Un 100% de antes del mes anterior queda bloqueado solo; la jefatura lo pone
   o lo quita a mano. Bloqueado, no se arrastra ni se pasa de mes.
   ========================================================================== */
.candado-cierre {
  position: absolute; top: 2px; right: 26px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--text-muted);
  opacity: 0.55; cursor: pointer;
}
.candado-cierre:hover { opacity: 1; border-color: var(--border); }
.candado-cierre.activo { opacity: 1; color: var(--warn); }
span.candado-cierre { cursor: default; }
.candado-cierre:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; opacity: 1; }
.board-card.board-card-bloqueada { cursor: pointer; }
.board-card.board-card-bloqueada:active { transform: none; }
.candado-mini { display: inline-flex; vertical-align: -1px; margin-right: 0.3rem; color: var(--warn); }
.btn.btn-candado { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); background: transparent; color: var(--text-muted); }
.btn.btn-candado:hover { border-color: var(--warn); color: var(--text); }
.btn.btn-candado.activo { border-color: color-mix(in srgb, var(--warn) 60%, transparent); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.aviso-cierre {
  display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, var(--card-bg));
}
.aviso-cierre-icono { font-size: 1.2rem; line-height: 1.4; }
.aviso-cierre .subtitle { margin: 0.2rem 0 0; }
.board-card:has(> .candado-cierre) > .empresa { padding-right: 30px; }

/* Ficha · Agendar va aparte de «Registrar gestión»: lo que viene no obliga a
   decir qué se hizo. */
.fn-registrar-ayuda { font-size: 0.78rem; color: var(--text-muted); }
.fn-agendar h2 { font-size: 1.05rem; margin: 0 0 0.85rem; display: flex; align-items: baseline; gap: 0.5rem; }
.fn-agendar-sub { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.fn-agendar-form { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(200px, 1fr); gap: 0.7rem 0.9rem; align-items: end; }
.fn-agendar-form > label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: var(--text-muted); }
.fn-agendar-form > label small { font-size: 0.72rem; }
.fn-agendar-atajos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: -0.2rem; }
.fn-agendar-atajos button {
  min-height: 32px; padding: 0 0.75rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--campo-bg); color: var(--text); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.fn-agendar-atajos button:hover { border-color: var(--primary); }
.fn-agendar-atajos button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fn-agendar-nota { grid-column: 1 / 2; }
.fn-agendar-form > .btn { justify-self: end; grid-column: 2 / 3; }
@media (max-width: 640px) {
  .fn-agendar-form { grid-template-columns: minmax(0, 1fr); }
  .fn-agendar-nota, .fn-agendar-form > .btn { grid-column: 1 / -1; }
  .fn-agendar-form > .btn { justify-self: stretch; min-height: 44px; }
}

/* Ficha · ciclo de facturación con la compañía actual */
.fn-factura .fn-folio-form { flex-wrap: wrap; align-items: center; }
.fn-folio-form .fn-factura-dia {
  display: inline-flex; flex-direction: row !important; align-items: center; gap: 0.4rem;
  margin: 0; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap;
}
.fn-folio-form .fn-factura-dia input { width: 4.5rem; min-height: 36px; }
.fn-factura .fn-folio-form .btn { align-self: center; }

/* Íconos en SVG en las filas de las tablas (antes emoji: con miles de filas
   congelaban la página). */
.pl-accion svg { display: block; }
.pl-accion { display: inline-flex; align-items: center; justify-content: center; }
.dias-alerta { vertical-align: -2px; color: var(--warn); }

/* Título de la pantalla en la franja del buscador (bloque «titulo_barra»):
   a la izquierda, alineado al centro de la franja. En el teléfono, donde la
   franja va en filas, queda arriba de todo. */
.topbar-inner:has(.topbar-titulo) { grid-template-columns: minmax(11rem, 1fr) minmax(240px, 420px) minmax(max-content, 1fr); }
.topbar-titulo { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.topbar-titulo .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 820px) {
  .topbar-inner:has(.topbar-titulo) { grid-template-columns: 1fr; }
  .topbar-spacer:has(.topbar-titulo) { display: block; }
}

/* Hunting · el aviso «Todavía no hay empresas gestionadas con este filtro»
   usaba el mismo estilo que el de la nube, que va flotando sobre ella. Fuera
   de la nube quedaba como una capa invisible del alto de la pantalla, encima
   de los filtros, y no dejaba quitarlos ni limpiarlos. Aquí va en su lugar,
   como un texto más. Y ningún aviso vacío ataja clics. */
.hunting-vacio { pointer-events: none; }
.hb-gest > .hunting-vacio { position: static; inset: auto; padding: 1.2rem 0; }

/* Estados nuevos del negocio, con el color de lo que dicen:
   azul = va avanzando, ámbar = ojo / se demora, rojo = se cae o complica,
   verde = logrado y bueno. Las clases salen del nombre del estado en
   minúsculas y con guiones (ó, í, ñ, ú se simplifican; á y é se quedan). */
.estado-por-contactar, .estado-coordinando-reunion, .estado-info-enviada, .estado-llamar-más-tarde,
.estado-evaluando-oferta, .estado-esperando-factura, .estado-contraoferta,
.estado-esperando-decision, .estado-aprobacion-interna, .estado-ajustando-oferta,
.estado-reuniendo-documentos {
  background-color: color-mix(in srgb, #3b82f6 14%, var(--card-bg));
  color: color-mix(in srgb, #3b82f6 75%, var(--text));
  border-color: color-mix(in srgb, #3b82f6 35%, transparent);
}
.estado-no-contesta, .estado-postergado, .estado-venta-lenta, .estado-venta-compleja,
.estado-cliente-exigente, .estado-postventa, .estado-reparos-pendiente-vendedor {
  background-color: color-mix(in srgb, var(--warn) 16%, var(--card-bg));
  color: color-mix(in srgb, var(--warn) 80%, var(--text));
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.estado-sin-respuesta, .estado-eligio-otra-compania, .estado-sin-interés, .estado-no-califica,
.estado-cliente-problemático, .estado-cliente-moroso, .estado-no-contesta-hace-dias {
  background-color: var(--error-bg); color: var(--error-text);
  border-color: color-mix(in srgb, var(--error-text) 35%, transparent);
}
.estado-venta-fluida, .estado-cliente-ágil, .estado-cliente-fiel, .estado-para-crecer,
.estado-activacion-parcial,
.board-card .estado-ok-informal, .estado-select.estado-ok-informal,
.estado-select.estado-reunion-programada, .estado-select.estado-firma-en-curso,
.estado-esperando-firma, .estado-por-ingresar {
  background-color: color-mix(in srgb, var(--good) 18%, var(--card-bg)); color: var(--good);
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
}


/* Rayos que no se repiten. La insignia tiene tres formas de rayo y la Cuenta
   estratégica un rayo violeta que cruza la tarjeta, como un relámpago de
   verdad, con tres formas. Cada tarjeta parte con la suya, a su altura y a
   su ritmo, y el tablero las cambia cada vez que el rayo vuelve a salir (y a
   veces lo deja descansar una vuelta). Solo cambia la opacidad. */
.carta-electrico .ce-trueno g[data-v] { display: none; }
.carta-electrico .ce-trueno[data-variante="0"] g[data-v="0"],
.carta-electrico .ce-trueno[data-variante="1"] g[data-v="1"],
.carta-electrico .ce-trueno[data-variante="2"] g[data-v="2"] { display: inline; }
.ce-trueno.descansa, .carta-rayo.descansa { visibility: hidden; }

.carta-estrategica .carta-fx > i { display: none; }
.carta-fx .carta-rayo { display: none; }
.carta-estrategica .carta-fx .carta-rayo {
  display: block; position: absolute; width: 84px; height: 59px;
  left: var(--rayo-x, 50%); top: var(--rayo-y, 40%); overflow: visible; opacity: 0;
  transform-origin: 50% 28.6%;
  transform: translate(-50%, -28.6%) rotate(var(--rayo-giro, 0deg)) scaleX(var(--rayo-flip, 1));
  filter: drop-shadow(0 0 2px rgba(190, 210, 255, 0.95)) drop-shadow(0 0 6px rgba(120, 150, 255, 0.7));
  animation: carta-rayo-flash 5.2s linear var(--rayo-retraso, 0s) infinite;
}
.carta-rayo g[data-v] { display: none; }
.carta-rayo[data-variante="0"] g[data-v="0"],
.carta-rayo[data-variante="1"] g[data-v="1"],
.carta-rayo[data-variante="2"] g[data-v="2"] { display: inline; }
.carta-rayo path {
  fill: none; stroke-linejoin: round; stroke-linecap: round;
  /* el rayo se dibuja saliendo desde su origen, justo cuando se enciende */
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: carta-rayo-trazo 5.2s linear var(--rayo-retraso, 0s) infinite;
}
@keyframes carta-rayo-trazo {
  0%, 87.4% { stroke-dashoffset: 100; }
  89.4%, 100% { stroke-dashoffset: 0; }
}
.carta-rayo .cr-halo { stroke: #8aa6ff; stroke-width: 2.6; stroke-opacity: 0.4; }
.carta-rayo .cr-finas { stroke: #9fc0ff; stroke-width: 0.45; stroke-opacity: 0.8; }
.carta-rayo .cr-ramas { stroke: #d6e4ff; stroke-width: 0.7; }
.carta-rayo .cr-nucleo { stroke: #ffffff; stroke-width: 1.1; }

/* Cuenta estratégica con llamas: lava volcánica, llamas y brasas, con los
   mismos relámpagos. Solo la que la jefatura elige. */
.carta-estrategica.carta-con-fuego .carta-fx > i { display: block; }
.carta-estrategica.carta-con-fuego .carta-fx > i:nth-of-type(1),
.carta-estrategica.carta-con-fuego .carta-fx > i:nth-of-type(2) {
  left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 70px; opacity: 1;
  transform-origin: 50% 100%; filter: none;
  clip-path: inset(-40px 0 0 0 round 0 0 12px 12px);
  background:
    radial-gradient(12% 62% at 10% 100%, rgba(255, 170, 70, 0.9), rgba(230, 40, 10, 0.55) 45%, transparent 70%),
    radial-gradient(9% 78% at 28% 100%, rgba(255, 140, 50, 0.85), rgba(200, 25, 5, 0.5) 45%, transparent 70%),
    radial-gradient(14% 58% at 48% 100%, rgba(255, 190, 90, 0.9), rgba(230, 40, 10, 0.55) 45%, transparent 70%),
    radial-gradient(10% 74% at 68% 100%, rgba(255, 140, 50, 0.85), rgba(200, 25, 5, 0.5) 45%, transparent 70%),
    radial-gradient(12% 62% at 88% 100%, rgba(255, 170, 70, 0.9), rgba(230, 40, 10, 0.55) 45%, transparent 70%),
    radial-gradient(90% 70% at 50% 115%, rgba(255, 60, 20, 0.75), rgba(160, 10, 0, 0.3) 55%, transparent 75%);
  animation: carta-llama 1.6s ease-in-out infinite alternate;
}
.carta-estrategica.carta-con-fuego .carta-fx > i:nth-of-type(2) {
  height: 52px; opacity: 0.75; background-position: 14px 0;
  animation-duration: 1.1s; animation-delay: 0.3s;
}
.carta-estrategica.carta-con-fuego .carta-fx > i:nth-of-type(3),
.carta-estrategica.carta-con-fuego .carta-fx > i:nth-of-type(4) {
  bottom: 4px; top: auto; right: auto; width: 4px; height: 4px; border-radius: 50%; background: #ffcf6b;
  clip-path: none; filter: none;
  box-shadow: 0 0 6px 2px rgba(255, 140, 30, 0.8);
  animation: carta-brasa 4.2s linear infinite;
}
.carta-estrategica.carta-con-fuego .carta-fx > i:nth-of-type(3) { left: 30%; }
.carta-estrategica.carta-con-fuego .carta-fx > i:nth-of-type(4) { left: 70%; animation-delay: 2s; }
.carta-estrategica.carta-con-fuego .board-card-footer * { text-shadow: 0 1px 4px rgba(30, 8, 2, 0.9); }
.board-card.board-card-carta.carta-estrategica.carta-con-fuego,
body.con-fondo .board-card.board-card-carta.carta-estrategica.carta-con-fuego {
  /* Lava volcánica: roca casi negra con vetas rojas encendidas y la lava que
     brilla abajo. Los relámpagos siguen blancos encima. */
  --carta-chip: rgba(30, 4, 2, 0.5);
  --carta-chip-borde: rgba(255, 150, 110, 0.4);
  --carta-avatar: #ffe8dc;
  --carta-avatar-tinta: #3a0a06;
  --carta-tinta-suave: rgba(255, 226, 214, 0.9);
  --carta-relieve: 0 1px 4px rgba(20, 2, 0, 0.9);
  background-color: #1c0505;
  background-image:
    radial-gradient(70% 40% at 50% 115%, rgba(255, 80, 20, 0.85), rgba(200, 30, 10, 0.45) 45%, transparent 72%),
    radial-gradient(120% 60% at 18% 122%, transparent 60%, rgba(255, 70, 20, 0.65) 61%, rgba(255, 160, 60, 0.35) 61.8%, transparent 63%),
    radial-gradient(90% 55% at 92% 112%, transparent 55%, rgba(255, 90, 30, 0.6) 56%, transparent 57.6%),
    radial-gradient(70% 45% at 44% 150%, transparent 72%, rgba(230, 40, 10, 0.55) 73%, transparent 74.6%),
    radial-gradient(120% 70% at 105% -10%, transparent 64%, rgba(200, 30, 10, 0.4) 65%, transparent 66.5%),
    radial-gradient(60% 40% at 80% 10%, rgba(120, 10, 10, 0.5), transparent 70%),
    linear-gradient(180deg, #0b0303, #1c0505 50%, #3a0a06);
  box-shadow: 0 12px 28px -12px rgba(90, 10, 0, 0.95), 0 0 22px -6px rgba(255, 60, 20, 0.7);
  border-color: rgba(255, 120, 80, 0.55);
}
/* El brillo líquido pasa a reflejos de brasa. */
.carta-estrategica.carta-con-fuego .carta-fx > b::after {
  background:
    radial-gradient(17% 9% at 39% 36%, rgba(255, 120, 60, 0.28), transparent 70%),
    radial-gradient(13% 20% at 64% 56%, rgba(255, 70, 30, 0.22), transparent 65%);
}
/* Como un relámpago: se enciende de golpe, parpadea y se apaga, en menos de
   medio segundo; el resto del tiempo no está. */
@keyframes carta-rayo-flash {
  0%, 87.4%, 100% { opacity: 0; }
  87.5% { opacity: 1; }
  89.6% { opacity: 1; }
  90.2% { opacity: 0.25; }
  90.9% { opacity: 1; }
  91.7% { opacity: 0.5; }
  93.5% { opacity: 0; }
}
}
.fx-quieto .carta-rayo, .fx-quieto .carta-rayo path { animation-play-state: paused; }
.equipo-modesto .carta-rayo, .equipo-modesto .carta-rayo path { animation: none; }
@media (prefers-reduced-motion: reduce) { .carta-rayo, .carta-rayo path { animation: none; } }


/* Alto valor: reflejos de oro chicos que destellan en distintos puntos de la
   tarjeta; cada vez que vuelven a salir, el tablero los cambia de lugar. */
.carta-alto_valor .carta-fx > i {
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  left: var(--b-x, 50%); top: var(--b-y, 50%);
  background:
    radial-gradient(circle, #ffffff 0 2px, rgba(255, 255, 255, 0.75) 3px, transparent 5px),
    linear-gradient(90deg, transparent 45%, #ffffff 50%, transparent 55%),
    linear-gradient(0deg, transparent 45%, #ffffff 50%, transparent 55%),
    radial-gradient(circle, rgba(255, 255, 240, 0.7), transparent 62%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px rgba(255, 220, 120, 0.9));
  animation: carta-brillo 3.4s ease-in-out infinite;
}
.carta-alto_valor .carta-fx > i:nth-of-type(1) { --b-x: 22%; --b-y: 30%; }
.carta-alto_valor .carta-fx > i:nth-of-type(2) { --b-x: 72%; --b-y: 22%; animation-delay: 0.9s; }
.carta-alto_valor .carta-fx > i:nth-of-type(3) { --b-x: 55%; --b-y: 72%; animation-delay: 1.8s; }
.carta-alto_valor .carta-fx > i:nth-of-type(4) { --b-x: 86%; --b-y: 58%; animation-delay: 2.6s; }

/* Cuenta estratégica con llamas: un diamante de lava. Además de la lava y los
   relámpagos, el fondo lleva facetas encendidas que giran despacio, y el
   reflejo que cruza es rojo vivo. Así no se confunde con «Cierre caliente». */
.board-card.board-card-carta.carta-estrategica.carta-con-fuego { --carta-reflejo: rgba(255, 150, 80, 0.4); }
.carta-estrategica.carta-con-fuego .carta-fx > b::after {
  inset: -35%;
  background:
    conic-gradient(from 15deg at 70% 35%, rgba(255, 120, 60, 0.24) 0 30deg, transparent 30deg 95deg, rgba(255, 60, 20, 0.3) 95deg 140deg, transparent 140deg 220deg, rgba(255, 170, 90, 0.2) 220deg 250deg, transparent 250deg),
    conic-gradient(from 160deg at 30% 70%, rgba(255, 80, 30, 0.22) 0 35deg, transparent 35deg 150deg, rgba(255, 140, 70, 0.24) 150deg 200deg, transparent 200deg),
    conic-gradient(from 300deg at 55% 55%, rgba(0, 0, 0, 0.35) 0 40deg, transparent 40deg 120deg, rgba(0, 0, 0, 0.3) 120deg 170deg, transparent 170deg);
  animation: carta-facetas 22s linear infinite;
}
@keyframes carta-facetas { to { transform: rotate(360deg); } }

/* Colores de etapa: 10%, 30% y 50% eran tres turquesas casi iguales. Ahora
   se separan dentro de la gama de Cúspide, de frío a la marca a medida que
   el negocio avanza: 10% gris azulado · 30% azul · 50% turquesa Cúspide ·
   75% ámbar · 90% naranjo · 100% verde (0%, rojo). Se leen bien en tema
   claro y oscuro. */
:root {
  --stage-10: #8aa0b8;
  --stage-30: #4f9dff;
  --stage-50: #00b8a9;
}


/* En 100% todos los estados empiezan con «Activo» («Activo / Cliente ágil»,
   «Activo / Venta lenta»…) y todos van en verde: lo logrado. */
.estado-select[class*="estado-activo"] {
  background-color: color-mix(in srgb, var(--good) 18%, var(--card-bg)); color: var(--good);
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
}


/* Copiar el nombre de la empresa, igual que el RUT: en la tarjeta, un ícono
   chico junto a la estrella; en la ficha, junto al nombre. Al copiar se pone
   verde un instante. */
.board-card .copiar-nombre {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -2px;
  margin-left: 3px; padding: 1px; border: 0; background: transparent; color: inherit;
  opacity: 0.55; cursor: pointer; border-radius: 4px;
}
.board-card .copiar-nombre svg { width: 12px; height: 12px; }
.board-card .copiar-nombre:hover, .board-card .copiar-nombre:focus-visible { opacity: 1; }
.board-card .copiar-nombre.copiado { opacity: 1; color: var(--good); }
.board-card-carta .copiar-nombre { color: var(--carta-tinta); }
.fn-copiar-nombre svg { width: 18px; height: 18px; }
.fn-copiar-nombre.copiado { color: var(--good); }

/* Hunting: «Activos» al lado de «Convert.»: de las convertidas, las que ya
   llegaron a 100%. Verde lleno, un paso más que el verde de convertidos.
   Si hay alguno, el número es un botón que abre la lista. */
.hb-num-activos { color: var(--good); font-weight: 800; }
.hb-activos-btn {
  font: inherit; color: var(--good); font-weight: 800; cursor: pointer;
  min-width: 34px; padding: 0.15rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--good) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 40%, transparent);
  font-variant-numeric: tabular-nums; transition: background 0.15s, border-color 0.15s;
}
.hb-activos-btn:hover, .hb-activos-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--good) 26%, transparent); border-color: var(--good);
}
.hb-activos-btn:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
.hb-activos-panel {
  position: absolute; z-index: 60; max-height: min(60vh, 460px); display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); overflow: hidden;
}
.hb-activos-panel[hidden] { display: none; }
.hb-activos-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem;
  padding: 0.85rem 1rem 0.7rem; border-bottom: 1px solid var(--linea-suave);
}
.hb-activos-cabeza > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.hb-activos-eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--good); }
.hb-activos-cabeza b { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-activos-cerrar {
  flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.hb-activos-cerrar:hover { color: var(--text); border-color: var(--primary); }
.hb-activos-cuerpo { overflow-y: auto; padding: 0.35rem 0 0.5rem; }
.hb-activos-resumen { margin: 0.2rem 1rem 0.4rem; font-size: 0.75rem; color: var(--text-muted); }
.hb-activos-nota { margin: 0.8rem 1rem; font-size: 0.85rem; color: var(--text-muted); }
.hb-activos-lista { list-style: none; margin: 0; padding: 0; }
.hb-activos-lista li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.9rem;
  padding: 0.6rem 1rem; border-top: 1px solid var(--linea-suave);
}
.hb-activos-lista li:first-child { border-top: 0; }
.hb-activos-emp { display: flex; flex-direction: column; min-width: 0; }
.hb-activos-emp b, .hb-activos-emp a { font-size: 0.86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-activos-emp a { color: var(--text); text-decoration: none; }
.hb-activos-emp a:hover { color: var(--primario-claro); text-decoration: underline; text-underline-offset: 3px; }
.hb-activos-emp a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.hb-activos-lista small { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hb-activos-dato { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.hb-activos-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.hb-activos-estado span {
  padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--good) 18%, var(--card-bg)); color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 45%, transparent);
}
@media (max-width: 520px) {
  .hb-activos-lista li { grid-template-columns: minmax(0, 1fr) auto; }
  .hb-activos-estado { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Seguimiento de asignadas: doce columnas piden ~1.400 px. En pantallas más
   angostas cada ejecutivo pasa a dos líneas —arriba nombre, avance y botones;
   abajo las cifras con su nombre encima— en vez de cortarse a la derecha. */
.hb-seg-lista { container-type: inline-size; }
.hb-seg.hb-cabeza > span { white-space: nowrap; }
.hb-seg-ultima { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.hb-seg-acciones { justify-content: flex-end; }
@container (max-width: 1400px) {
  .hb-seg-lista .hb-lista-scroll { overflow-x: visible; }
  .hb-seg-lista .hb-seg.hb-cabeza { display: none; }
  .hb-seg-lista .hb-seg {
    min-width: 0;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    row-gap: 0.75rem; column-gap: 10px; padding: 0.95rem 1.1rem;
  }
  .hb-seg-lista .hb-seg-nombre { grid-column: 1 / span 3; grid-row: 1; }
  .hb-seg-lista .hb-seg-avance { grid-column: 4 / span 5; grid-row: 1; }
  .hb-seg-lista .hb-seg-acciones { grid-column: 9 / span 2; grid-row: 1; flex-wrap: wrap; }
  .hb-seg-lista .hb-dato-seg {
    grid-row: 2; display: flex; flex-direction: column; gap: 0.2rem;
    text-align: left; justify-content: flex-start; align-items: flex-start;
    padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--campo-bg);
    font-size: 0.95rem; font-variant-numeric: tabular-nums;
  }
  .hb-seg-lista .hb-dato-seg::before {
    content: attr(data-label);
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.25;
    color: var(--text-muted); white-space: normal; max-width: 100%;
  }
  .hb-seg-lista .hb-dato-seg { justify-content: space-between; min-height: 3.6rem; }
  .hb-seg-lista .hb-dato-seg .hb-alerta { min-width: 0; padding: 0.05rem 0.5rem; }
  .hb-seg-lista .hb-dato-seg.hb-col-mes::before { color: var(--primario-claro); }
  .hb-seg-lista .hb-seg-ultima { grid-column: span 2; font-size: 0.82rem; }
}
@container (max-width: 640px) {
  .hb-seg-lista .hb-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hb-seg-lista .hb-seg-nombre { grid-column: 1 / -1; }
  .hb-seg-lista .hb-seg-avance { grid-column: 1 / -1; grid-row: 2; }
  .hb-seg-lista .hb-seg-acciones { grid-column: 1 / -1; grid-row: auto; order: 9; justify-content: flex-start; }
  .hb-seg-lista .hb-dato-seg { grid-row: auto; }
}