/* =====================================================================
   Tiempos de Atención de Leads — estilos del dashboard.
   Todo vive bajo .tal-dashboard-root con valores explícitos (no heredados)
   para no depender de — ni perder contra — el CSS del tema del sitio.
   ===================================================================== */

.tal-dashboard-root{
  /* Paleta */
  --tal-ink:#12131c;
  --tal-ink-soft:#20222f;
  --tal-surface:#ffffff;
  --tal-surface-alt:#f5f6fa;
  --tal-border:#e5e6ee;
  --tal-text:#8a8a8a;
  --tal-text-muted:#6c6e80;
  --tal-text-on-dark:#f4f5fa;
  --tal-text-on-dark-muted:#a7a9c0;
  --tal-accent:#0e6f66;
  --tal-accent-dark:#0a5951;
  --tal-accent-soft:#e2f2f0;
  --tal-amber:#c9822c;
  --tal-amber-soft:#faf0e1;
  --tal-good:#1f9d55;
  --tal-good-soft:#e6f6ec;
  --tal-bad:#d64545;
  --tal-bad-soft:#fbe9e9;
  --tal-radius-sm:6px;
  --tal-radius-md:12px;
  --tal-radius-lg:16px;
  --tal-shadow:0 1px 2px rgba(18,19,28,.05), 0 6px 20px rgba(18,19,28,.06);
  --tal-gap:18px;
  --tal-font-body:"Inter","Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --tal-font-display:"Sora","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Reset defensivo: pisa cualquier regla del tema ---------- */
.tal-dashboard-root,
.tal-dashboard-root *{
  box-sizing:border-box !important;
}
.tal-dashboard-root{
  all:initial !important;
  display:block !important;
  font-family:var(--tal-font-body) !important;
  color:var(--tal-text) !important;
  font-size:14px !important;
  line-height:1.55 !important;
  font-weight:400 !important;
  text-align:left !important;
  max-width:1360px;
  margin:0 auto !important;
  padding:0 !important;
}
.tal-dashboard-root h1,
.tal-dashboard-root h2,
.tal-dashboard-root h3,
.tal-dashboard-root h4,
.tal-dashboard-root p,
.tal-dashboard-root span,
.tal-dashboard-root label,
.tal-dashboard-root ul,
.tal-dashboard-root li,
.tal-dashboard-root table,
.tal-dashboard-root th,
.tal-dashboard-root td,
.tal-dashboard-root a,
.tal-dashboard-root button,
.tal-dashboard-root input,
.tal-dashboard-root select,
.tal-dashboard-root form{
  box-sizing:border-box !important;
  font-family:var(--tal-font-body) !important;
  color:var(--tal-text) !important;
  margin:0 !important;
  padding:0 !important;
  text-decoration:none !important;
  list-style:none !important;
  border:0 !important;
  background:none !important;
  text-align:left !important;
  line-height:1.5 !important;
}
.tal-dashboard-root h2,
.tal-dashboard-root h3,
.tal-dashboard-root h4{
  font-family:var(--tal-font-display) !important;
  font-weight:650 !important;
  color:var(--tal-text) !important;
  letter-spacing:-0.01em;
}
.tal-dashboard-root a{ cursor:pointer; }
.tal-dashboard-root button{ cursor:pointer; font-family:var(--tal-font-body) !important; }

/* ---------- Encabezado ---------- */
.tal-header{
  background:var(--tal-ink) !important;
  color:var(--tal-text-on-dark) !important;
  padding:24px 28px !important;
  border-radius:var(--tal-radius-lg) !important;
  margin-bottom:var(--tal-gap) !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-end !important;
  flex-wrap:wrap !important;
  gap:16px !important;
  box-shadow:var(--tal-shadow);
}
.tal-header h2{
  font-size:19px !important;
  font-weight:650 !important;
  color:var(--tal-text-on-dark) !important;
  margin:0 !important;
  display:flex; align-items:center; gap:8px;
}
.tal-header p{
  font-size:12.5px !important;
  color:var(--tal-text-on-dark-muted) !important;
  margin:5px 0 0 !important;
}
.tal-filters{ display:flex !important; gap:14px !important; align-items:flex-end !important; flex-wrap:wrap !important; }
.tal-filter-group{ display:flex !important; flex-direction:column !important; gap:5px !important; }
.tal-filter-group label{
  font-size:10.5px !important; font-weight:600 !important;
  color:var(--tal-text-on-dark-muted) !important;
  text-transform:uppercase !important; letter-spacing:.5px !important;
}
.tal-filter-group select,
.tal-filter-group input{
  padding:8px 11px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:var(--tal-radius-sm) !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  font-size:13px !important;
  font-family:var(--tal-font-body) !important;
  min-height:36px;
}
.tal-filter-group select option{ background:var(--tal-ink) !important; color:#fff !important; }
.tal-filter-group input::-webkit-calendar-picker-indicator{ filter:invert(1); }
.tal-dashboard-root .tal-btn-reset{
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:var(--tal-text-on-dark) !important;
  border-radius:var(--tal-radius-sm) !important;
  padding:8px 14px !important;
  font-size:12.5px !important;
  font-weight:500 !important;
}
.tal-dashboard-root .tal-btn-reset:hover{ background:rgba(255,255,255,.18) !important; }

/* ---------- Estados de carga ---------- */
.tal-dashboard-root .tal-loading, .tal-dashboard-root .tal-error{
  padding:28px !important; text-align:center !important;
  color:var(--tal-text-muted) !important; font-size:13px !important;
}
.tal-dashboard-root .tal-error{ color:var(--tal-bad) !important; font-weight:600 !important; }

/* ---------- KPIs ---------- */
.tal-kpi-row{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;
  gap:var(--tal-gap) !important;
  margin-bottom:var(--tal-gap) !important;
}
.tal-kpi-card{
  background:var(--tal-surface) !important;
  border:1px solid var(--tal-border) !important;
  border-radius:var(--tal-radius-md) !important;
  padding:16px 18px !important;
  box-shadow:var(--tal-shadow);
  border-top:3px solid var(--tal-accent) !important;
}
.tal-kpi-label{
  font-size:11px !important; font-weight:600 !important;
  color:var(--tal-text-muted) !important;
  text-transform:uppercase !important; letter-spacing:.5px !important;
  margin-bottom:8px !important;
}
.tal-kpi-value{
  font-family:var(--tal-font-display) !important;
  font-size:27px !important; font-weight:700 !important;
  color:var(--tal-text) !important;
}
.tal-kpi-value.good{ color:var(--tal-good) !important; }
.tal-kpi-value.warn{ color:var(--tal-amber) !important; }
.tal-kpi-value.bad{ color:var(--tal-bad) !important; }

/* ---------- Menú de pestañas / anclas a secciones ----------
   position:sticky: nace en su lugar natural (debajo del encabezado
   "Tiempos de Atención de Leads", nunca lo tapa) y al scrollear se
   queda pegada arriba de la pantalla, siempre clickeable. */
.tal-tabs{
  display:flex !important; gap:6px !important; flex-wrap:nowrap !important;
  overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
  padding:6px !important; margin-bottom:var(--tal-gap) !important;
  background:var(--tal-surface) !important;
  border:1px solid var(--tal-border) !important; border-radius:999px !important;
  box-shadow:var(--tal-shadow);
  position:sticky !important; top:8px !important; z-index:10 !important;
}
/* La barra de admin de WordPress es fixed y ocupa el borde superior; si
   está presente, el punto de "pegado" necesita bajar para no quedar
   tapado detrás de ella. */
body.admin-bar .tal-dashboard-root .tal-tabs{ top:40px !important; }
@media(max-width:782px){ body.admin-bar .tal-dashboard-root .tal-tabs{ top:54px !important; } }
.tal-dashboard-root .tal-tab-link{
  padding:8px 16px !important; border-radius:999px !important;
  font-size:12.5px !important; font-weight:600 !important;
  color:var(--tal-text-muted) !important; white-space:nowrap !important;
  flex-shrink:0 !important;
}
.tal-dashboard-root .tal-tab-link:hover{ color:var(--tal-accent) !important; }
.tal-dashboard-root .tal-tab-link.active{ background:var(--tal-ink) !important; color:#fff !important; }

/* Respaldo si el JS no llega a cargar: que el ancla nativa del navegador
   no deje la sección tapada bajo el menú de pestañas. */
#tal-kpi-row, #tal-chart-row, #tal-sec-ranking, #tal-sec-desempeno, #tal-sec-matriz{
  scroll-margin-top:70px !important;
}

/* ---------- Layout de gráficos y tarjetas ---------- */
.tal-chart-row{
  display:grid !important; grid-template-columns:1.3fr 1fr !important;
  gap:var(--tal-gap) !important; margin-bottom:var(--tal-gap) !important;
}
@media(max-width:900px){ .tal-chart-row{ grid-template-columns:1fr !important; } }

.tal-card{
  background:var(--tal-surface) !important;
  border:1px solid var(--tal-border) !important;
  border-radius:var(--tal-radius-md) !important;
  padding:20px 22px !important;
  box-shadow:var(--tal-shadow);
  margin-bottom:var(--tal-gap) !important;
}
.tal-card h3{
  font-size:14px !important; font-weight:650 !important;
  color:var(--tal-text) !important;
  margin:0 0 16px !important;
}
.tal-card canvas{ max-height:280px !important; }

/* ---------- Tablas ---------- */
.tal-table-wrap{ overflow-x:auto !important; border-radius:var(--tal-radius-sm); }
table.tal-data-table{
  width:100% !important; border-collapse:collapse !important; font-size:12.8px !important;
}
table.tal-data-table thead th{
  background:var(--tal-surface-alt) !important;
  text-align:left !important;
  padding:10px 12px !important;
  border-bottom:2px solid var(--tal-border) !important;
  font-size:11px !important; font-weight:650 !important;
  text-transform:uppercase !important; letter-spacing:.4px !important;
  color:var(--tal-text-muted) !important;
  white-space:nowrap !important; cursor:pointer !important; user-select:none !important;
}
table.tal-data-table thead th:hover{ color:var(--tal-accent) !important; }
table.tal-data-table tbody td{
  padding:9px 12px !important;
  border-bottom:1px solid var(--tal-border) !important;
  color:var(--tal-text) !important;
  white-space:nowrap !important;
}
table.tal-data-table tbody tr:nth-child(even){ background:var(--tal-surface-alt) !important; }
table.tal-data-table tbody tr:hover{ background:var(--tal-accent-soft) !important; }

/* ---------- Toggle Mediana/Volumen ---------- */
.tal-toggle-row{ display:inline-flex !important; gap:2px !important; margin-bottom:14px !important;
  background:var(--tal-surface-alt) !important; padding:3px !important; border-radius:999px !important; }
.tal-dashboard-root .tal-toggle-btn{
  border:0 !important; background:transparent !important;
  padding:7px 15px !important; border-radius:999px !important;
  font-size:12.5px !important; font-weight:600 !important;
  color:var(--tal-text-muted) !important;
}
.tal-dashboard-root .tal-toggle-btn.active{ background:var(--tal-ink) !important; color:#fff !important; }
.tal-dashboard-root .tal-matrix-cell{ text-align:center !important; font-weight:650 !important; border-radius:5px !important; }

/* ---------- Desempeño de vendedores ---------- */
.tal-perf-legend{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-bottom:14px !important; }
.tal-dashboard-root .tal-perf-badge{
  display:inline-flex !important; align-items:center !important;
  padding:5px 12px !important; border-radius:999px !important;
  font-size:12px !important; font-weight:650 !important; white-space:nowrap !important;
}

/* ---------- Login ---------- */
.tal-login-box{ max-width:380px !important; margin:40px auto !important; }
.tal-login-box .tal-card{ text-align:center !important; }
.tal-login-box h3{ margin-bottom:6px !important; font-size:18px !important; }
.tal-login-form{ display:flex !important; flex-direction:column !important; gap:14px !important; margin-top:16px !important; }
.tal-login-form label{
  display:flex !important; flex-direction:column !important; gap:6px !important;
  font-size:11.5px !important; font-weight:600 !important;
  color:var(--tal-text-muted) !important; text-align:left !important;
  text-transform:uppercase !important; letter-spacing:.4px !important;
}
.tal-login-form input[type=text],
.tal-login-form input[type=password]{
  padding:10px 12px !important; border:1px solid var(--tal-border) !important;
  border-radius:var(--tal-radius-sm) !important; font-size:14px !important;
  color:var(--tal-text) !important; background:var(--tal-surface) !important;
  width:100% !important;
}
.tal-login-form input:focus{ outline:2px solid var(--tal-accent) !important; outline-offset:1px !important; }

/* ---------- Botones ---------- */
.tal-dashboard-root .tal-btn-primary{
  background:var(--tal-accent) !important; color:#fff !important;
  border:0 !important; border-radius:var(--tal-radius-sm) !important;
  padding:10px 18px !important; font-size:13.5px !important; font-weight:600 !important;
}
.tal-dashboard-root .tal-btn-primary:hover{ background:var(--tal-accent-dark) !important; }

/* ---------- Carga de archivo ---------- */
.tal-upload-box{ max-width:560px !important; margin:0 auto var(--tal-gap) auto !important; }
.tal-dashboard-root .tal-upload-status{ font-size:13px !important; color:var(--tal-text-muted) !important; margin:0 0 14px !important; }
.tal-dashboard-root .tal-upload-ok{
  background:var(--tal-good-soft) !important; color:var(--tal-good) !important;
  padding:10px 14px !important; border-radius:var(--tal-radius-sm) !important;
  font-size:13px !important; font-weight:600 !important; margin-bottom:12px !important;
}
.tal-upload-form{ display:flex !important; gap:10px !important; align-items:center !important; flex-wrap:wrap !important; margin-bottom:10px !important; }
.tal-upload-form input[type=file]{
  font-size:13px !important; color:var(--tal-text) !important;
  border:1px dashed var(--tal-border) !important; border-radius:var(--tal-radius-sm) !important;
  padding:8px 10px !important; background:var(--tal-surface-alt) !important;
}
.tal-dashboard-root .tal-upload-hint{ font-size:12px !important; color:var(--tal-text-muted) !important; margin:0 !important; }
.tal-delete-form{ margin-top:10px !important; }
.tal-dashboard-root .tal-link-danger{
  background:none !important; border:0 !important; padding:0 !important;
  font-size:12px !important; font-weight:500 !important;
  color:var(--tal-text-muted) !important; text-decoration:underline !important;
}
.tal-dashboard-root .tal-link-danger:hover{ color:var(--tal-bad) !important; }

/* ---------- Barra de cerrar sesión ---------- */
.tal-logout-bar{ max-width:1360px !important; text-align:right !important; margin-bottom:8px !important; font-size:12.5px !important; }
.tal-dashboard-root .tal-logout-bar a{ color:var(--tal-text-muted) !important; text-decoration:none !important; }
.tal-dashboard-root .tal-logout-bar a:hover{ color:var(--tal-accent) !important; text-decoration:underline !important; }

/* ---------- Tooltips de ayuda ----------
   Se posicionan con JS (position:fixed, coordenadas de viewport) en vez de
   depender de :hover/CSS puro, porque dentro de .tal-table-wrap (que necesita
   overflow-x:auto para el scroll horizontal de las tablas) cualquier tooltip
   posicionado con "absolute" queda recortado por ese mismo overflow, se abra
   para el lado que se abra. "fixed" no se recorta por overflow de ningún
   ancestro, así que queda siempre visible completo. Ver mostrarTooltip() en
   tal-dashboard.js. */
.tal-dashboard-root .tal-tip{ position:relative !important; display:inline-flex !important; align-items:center !important; gap:5px !important; }
.tal-dashboard-root .tal-tip-icon{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:15px !important; height:15px !important; border-radius:50% !important;
  background:var(--tal-text-muted) !important; color:#fff !important;
  font-size:10px !important; font-weight:700 !important; font-style:normal !important;
  line-height:1 !important; cursor:help !important; flex-shrink:0 !important;
}
.tal-dashboard-root .tal-tip-icon:hover, .tal-dashboard-root .tal-tip-icon:focus{ background:var(--tal-accent) !important; outline:none !important; }
.tal-dashboard-root .tal-tip-bubble{
  position:fixed !important; left:0 !important; top:0 !important;
  transform:translate(-50%,-100%) translateY(-8px) !important;
  background:var(--tal-ink) !important; color:var(--tal-text-on-dark) !important;
  font-size:11.5px !important; font-weight:400 !important; line-height:1.45 !important;
  text-transform:none !important; letter-spacing:normal !important;
  /* white-space se hereda: dentro de un <th> (que fuerza nowrap para no
     partir el texto de la columna) la burbuja heredaba ese nowrap y el
     texto quedaba forzado a una sola línea larguísima en vez de ajustarse
     al max-width, viéndose cortado. Hay que pisarlo acá explícitamente. */
  white-space:normal !important;
  padding:9px 11px !important; border-radius:var(--tal-radius-sm) !important;
  width:max-content !important; max-width:230px !important;
  box-shadow:0 6px 20px rgba(0,0,0,.18) !important;
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transition:opacity .12s ease !important;
  z-index:99999 !important; text-align:left !important;
}
.tal-dashboard-root .tal-tip-bubble::after{
  content:"" !important; position:absolute !important; top:100% !important;
  left:var(--tal-arrow-x, 50%) !important;
  transform:translateX(-50%) !important; border:5px solid transparent !important;
  border-top-color:var(--tal-ink) !important;
}
.tal-dashboard-root .tal-tip-bubble.tal-tip-open-below{
  transform:translate(-50%,0) translateY(8px) !important;
}
.tal-dashboard-root .tal-tip-bubble.tal-tip-open-below::after{
  top:auto !important; bottom:100% !important;
  border-top-color:transparent !important;
  border-bottom-color:var(--tal-ink) !important;
}
.tal-dashboard-root .tal-tip-bubble.tal-tip-show{
  opacity:1 !important; visibility:visible !important;
}
.tal-dashboard-root th .tal-tip{ text-transform:none !important; }