/* leads-chart.css — La evolución de contactos de /account/estadisticas/.

   **Ni un hexadecimal de marca.** Los cuatro colores de las series son variables propias del
   componente que por defecto toman las `--uv-*` del tema, así que un dominio verde sale verde sin
   tocar esta hoja. Misma regla que `seo/arquetipos.css` y que la maquetación Pespas. */

.ctop-graf {
  --ctop-serie-call:    var(--uv-blue,  #2563EB);
  --ctop-serie-wa:      var(--uv-green, #16A34A);
  --ctop-serie-form:    var(--uv-amber, #F59E0B);
  --ctop-serie-reserva: var(--uv-ink,   #0F172A);
  margin: 26px 0 6px;
}

.ctop-graf__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.ctop-graf__t { margin: 0; }

.ctop-graf__rangos { display: flex; gap: 6px; flex-wrap: wrap; }
/* Enlaces con clase + elemento: `.elementor-kit-4 a` es (0,2,0) y pinta de azul cualquier enlace
   suelto — el mismo tropiezo que documenta `follows.css`. */
.ctop-graf__rangos a.ctop-graf__rango {
  padding: 6px 12px; border: 1px solid #E2E8F0; border-radius: 999px;
  font: 600 12.5px/1 Inter, sans-serif; color: #475569; text-decoration: none;
  background: #fff; transition: border-color .15s, color .15s, background .15s;
}
.ctop-graf__rangos a.ctop-graf__rango:hover { border-color: #94A3B8; color: #0F172A; }
.ctop-graf__rangos a.ctop-graf__rango.is-on {
  background: var(--uv-ink, #0F172A); border-color: var(--uv-ink, #0F172A); color: #fff;
}

/* ---- Rango a medida ----
   `reset.css` de hello-elementor trae `input[type=date]{width:100%}` (0,1,1), así que sin
   `width:auto` los dos campos se van a línea completa y el formulario ocupa tres filas. Se gana con
   clase + elemento, que es (0,2,1) — el mismo cuidado que documenta `bookings-setup.css`. */
.ctop-graf__medida {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px;
  margin-top: 12px;
}
.ctop-graf__campo { display: flex; flex-direction: column; gap: 4px; }
.ctop-graf__campo span {
  font: 600 11px/1 Inter, sans-serif; color: #94A3B8;
  text-transform: uppercase; letter-spacing: .05em;
}
.ctop-graf__medida input[type="date"] {
  width: auto; padding: 8px 10px; border: 1px solid #E2E8F0; border-radius: 8px;
  font: 500 13.5px/1.2 Inter, sans-serif; color: #0F172A; background: #fff;
}
.ctop-graf__medida input[type="date"]:focus { border-color: #94A3B8; outline: 0; }
.ctop-graf__medida button.ctop-graf__ver {
  padding: 9px 18px; border: 1px solid var(--uv-ink, #0F172A); border-radius: 8px;
  background: var(--uv-ink, #0F172A); color: #fff; cursor: pointer;
  font: 700 13.5px/1.2 Inter, sans-serif;
}
.ctop-graf__medida button.ctop-graf__ver:hover { background: #fff; color: var(--uv-ink, #0F172A); }
.ctop-graf__medida a.ctop-graf__limpiar {
  font: 500 13px/1.2 Inter, sans-serif; color: #64748B; text-decoration: underline;
  padding-bottom: 10px;
}
.ctop-graf__medida a.ctop-graf__limpiar:hover { color: #0F172A; }

.ctop-graf__aviso {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E;
  font: 600 12.5px/1.5 Inter, sans-serif;
}

.ctop-graf__nota { color: #94A3B8; font-weight: 500; }

.ctop-graf__lienzo {
  margin-top: 12px; padding: 14px 10px 4px;
  border: 1px solid #E9EEF5; border-radius: 14px; background: #fff;
}
/* `height` explícita: un SVG con `preserveAspectRatio="none"` y sin altura colapsa a 150px en unos
   navegadores y a 0 en otros. El viewBox se estira; las proporciones aquí no importan. */
.ctop-graf__svg { display: block; width: 100%; height: 240px; }

.ctop-graf__guia  { stroke: #EEF2F7; stroke-width: 1; }
.ctop-graf__eje   { stroke: #CBD5E1; stroke-width: 1; }
.ctop-graf__escala,
.ctop-graf__fecha { fill: #94A3B8; font: 500 11px Inter, sans-serif; }

.ctop-graf__barra--call    { fill: var(--ctop-serie-call); }
.ctop-graf__barra--wa      { fill: var(--ctop-serie-wa); }
.ctop-graf__barra--form    { fill: var(--ctop-serie-form); }
.ctop-graf__barra--reserva { fill: var(--ctop-serie-reserva); }
/* El `<title>` de cada grupo es el tooltip nativo; el cambio de opacidad es lo que dice que ahí
   hay algo que mirar. Sin JavaScript. */
.ctop-graf__svg g:hover .ctop-graf__barra { opacity: .72; }

.ctop-graf__pie {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-top: 10px;
}
.ctop-graf__leyenda {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.ctop-graf__leyenda li {
  display: flex; align-items: center; gap: 7px;
  font: 500 13px/1.3 Inter, sans-serif; color: #475569;
}
.ctop-graf__leyenda b { color: #0F172A; }
.ctop-graf__punto { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; }
.ctop-graf__punto--call    { background: var(--ctop-serie-call); }
.ctop-graf__punto--wa      { background: var(--ctop-serie-wa); }
.ctop-graf__punto--form    { background: var(--ctop-serie-form); }
.ctop-graf__punto--reserva { background: var(--ctop-serie-reserva); }

.ctop-graf__total { margin: 0; font: 500 13px/1.3 Inter, sans-serif; color: #64748B; }
.ctop-graf__total b { color: #0F172A; font-weight: 700; }
.ctop-graf__vacio { margin-top: 12px; }

@media (max-width: 640px) {
  /* Con 90 barras en 360px cada una sale a 2px. El lienzo se desplaza en horizontal y el SVG
     mantiene un ancho mínimo legible, en vez de comprimirse hasta ser una mancha. */
  .ctop-graf__lienzo { overflow-x: auto; }
  .ctop-graf__svg { min-width: 520px; height: 200px; }
  .ctop-graf__cab { flex-direction: column; align-items: flex-start; }
}