/* ════════════════════════════════════════════════════════════════
   TopSEO · Dashboard de métricas (Embudo · Negocio · Visibilidad)
   Canon WOW Variavista: dark OLED, glass, Kanit, mesh sutil, Nucleo.
   Todo va scopeado bajo .vv-dash para no afectar al resto del admin.
   Amarillo #FFE100 SOLO en el botón "Refrescar".
   ════════════════════════════════════════════════════════════════ */

/* Kanit auto-hospedada (RGPD: nunca Google Fonts CDN) */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/kanit-light-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/kanit-regular-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/kanit-medium-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/kanit-semibold-latin.woff2) format('woff2');
}

.vv-dash {
  /* Marca */
  --vv-aubergine: #3C2E42;
  --vv-blue: #38A1DB;
  --vv-pink: #EC74FC;
  --vv-yellow: #FFE100;
  --vv-ink: rgba(255, 255, 255, 0.92);
  --vv-ink-dim: rgba(255, 255, 255, 0.55);
  --vv-ink-mute: rgba(255, 255, 255, 0.32);
  --vv-glass: rgba(255, 255, 255, 0.035);
  --vv-glass-hi: rgba(255, 255, 255, 0.06);
  --vv-stroke: rgba(255, 255, 255, 0.08);
  --vv-pos: #34d399;
  --vv-neg: #fb7185;
  --vv-ease: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  font-family: 'Kanit', 'Inter', -apple-system, sans-serif;
  color: var(--vv-ink);
  isolation: isolate;
  padding-bottom: 2rem;
}

/* ── mesh sutil de fondo (solo transform/opacity) ── */
.vv-mesh {
  position: absolute;
  inset: -10% -5%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.5;
}
.vv-blob {
  position: absolute;
  width: 42vw;
  max-width: 560px;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform;
}
.vv-blob--a { top: -8%; left: -4%; background: radial-gradient(circle, var(--vv-blue), transparent 65%); animation: vvFloatA 22s var(--vv-ease) infinite; }
.vv-blob--b { top: 30%; right: -6%; background: radial-gradient(circle, var(--vv-pink), transparent 65%); animation: vvFloatB 26s var(--vv-ease) infinite; }
.vv-blob--c { bottom: -12%; left: 35%; background: radial-gradient(circle, var(--vv-aubergine), transparent 60%); animation: vvFloatC 30s var(--vv-ease) infinite; opacity: 0.8; }

@keyframes vvFloatA { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(4%,6%,0)} }
@keyframes vvFloatB { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-5%,4%,0)} }
@keyframes vvFloatC { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(3%,-5%,0)} }

/* ── Cabecera ── */
.vv-dash__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.vv-dash__title { display: flex; align-items: center; gap: 0.9rem; }
.vv-dash__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--vv-blue), var(--vv-pink));
  color: #fff;
  box-shadow: 0 8px 24px rgba(56, 161, 219, 0.25);
}
.vv-dash__icon svg { width: 24px; height: 24px; }
.vv-dash__title h2 {
  margin: 0; font-weight: 600; font-size: 1.55rem; letter-spacing: -0.01em;
  line-height: 1.15;
}
.vv-dash__updated { margin: 2px 0 0; font-size: 0.82rem; color: var(--vv-ink-dim); display: flex; align-items: center; gap: 0.5rem; }
.vv-chip {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--vv-glass-hi); color: var(--vv-ink-dim); border: 1px solid var(--vv-stroke);
}

/* Botón Refrescar — único punto con amarillo de marca */
.vv-refresh {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: inherit; font-weight: 600; font-size: 0.9rem;
  color: #1a1a1a;
  background: var(--vv-yellow);
  border: none; border-radius: 12px;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 225, 0, 0.22);
  transition: transform .2s var(--vv-ease), box-shadow .2s var(--vv-ease), filter .2s var(--vv-ease);
}
.vv-refresh:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255, 225, 0, 0.34); filter: brightness(1.04); }
.vv-refresh:active { transform: translateY(0); }
.vv-refresh:disabled { opacity: 0.6; cursor: progress; transform: none; }
.vv-refresh svg { width: 18px; height: 18px; }
.vv-refresh.is-loading svg { animation: vvSpin 0.9s linear infinite; }
@keyframes vvSpin { to { transform: rotate(360deg); } }

/* ── Banners de error/aviso ── */
.vv-banner {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.83rem; line-height: 1.3;
  padding: 0.6rem 0.85rem; border-radius: 10px;
  margin-bottom: 1rem;
}
/* CRÍTICO: .vv-banner pone display:flex, que pisa el atributo [hidden] (display:none de la
   UA). Sin esto, los banners NUNCA se ocultan y salen siempre con su texto por defecto
   aunque los datos carguen bien. Esta regla restaura el comportamiento de [hidden]. */
.vv-banner[hidden] { display: none !important; }

/* ── "Mi negocio / Cuadro de mando" = cockpit GLOBAL de Variavista, NO vista por-cliente.
   En esta página ocultamos el chrome por-cliente (título global + selector de cliente),
   que aquí es un "botón trampa" y duplica la cabecera. La cabecera propia del cockpit
   (Cuadro de mando + Actualizado + Refrescar) queda como única cabecera.
   El botón de menú móvil se conserva para poder abrir el sidebar en móvil. ── */
body.vv-cockpit #pageHeadBlock,
body.vv-cockpit #clientSelector { display: none !important; }
body.vv-cockpit .header { padding: 0; margin: 0; min-height: 0; border: 0; background: transparent; }
@media (max-width: 1024px) {
  /* en móvil dejamos aire para el botón de menú que sí se muestra */
  body.vv-cockpit .header { padding: 0.5rem 0; }
}
.vv-banner svg { width: 17px; height: 17px; flex-shrink: 0; }
.vv-banner--error { background: rgba(251, 113, 133, 0.12); color: #fda4af; border: 1px solid rgba(251, 113, 133, 0.25); }
.vv-banner--warn  { background: rgba(255, 225, 0, 0.08); color: #f5d96b; border: 1px solid rgba(255, 225, 0, 0.18); }
.vv-banner--inset { margin: 0 0 0.75rem; padding: 0.45rem 0.7rem; font-size: 0.78rem; }

/* ── Secciones ── */
.vv-section { margin-bottom: 1.75rem; }
.vv-section__head {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.vv-section__head h3 {
  margin: 0; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.vv-section__head h3 svg { width: 19px; height: 19px; color: var(--vv-blue); }
.vv-section__sub { font-size: 0.8rem; color: var(--vv-ink-dim); }

/* ── Tiles del embudo ── */
.vv-tiles { display: grid; gap: 0.85rem; margin-bottom: 1.1rem; }
.vv-tiles--funnel { grid-template-columns: repeat(6, 1fr); }
.vv-tile {
  position: relative;
  background: var(--vv-glass);
  border: 1px solid var(--vv-stroke);
  border-radius: 16px;
  padding: 1rem 0.9rem 0.85rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform .25s var(--vv-ease), border-color .25s var(--vv-ease);
}
.vv-tile:hover { transform: translateY(-3px); border-color: var(--vv-glass-hi); }
.vv-tile--hero { background: linear-gradient(160deg, rgba(56,161,219,0.10), rgba(236,116,252,0.06)); }
.vv-tile__ic {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--vv-glass-hi); color: var(--vv-ink);
  margin-bottom: 0.6rem;
}
.vv-tile__ic svg { width: 18px; height: 18px; }
.vv-tile__ic.blue { color: var(--vv-blue); background: rgba(56,161,219,0.14); }
.vv-tile__ic.pink { color: var(--vv-pink); background: rgba(236,116,252,0.14); }
.vv-tile__num {
  font-weight: 600; font-size: 1.7rem; line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vv-tile__lbl { margin-top: 0.2rem; font-size: 0.76rem; color: var(--vv-ink-dim); }

/* ── Grids de cards ── */
.vv-grid { display: grid; gap: 1rem; }
.vv-grid--2 { grid-template-columns: 1fr 1fr; }
.vv-grid--3 { grid-template-columns: repeat(3, 1fr); }

.vv-card {
  background: var(--vv-glass);
  border: 1px solid var(--vv-stroke);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.vv-card--center { text-align: center; }
.vv-card__head {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 500; font-size: 0.9rem; color: var(--vv-ink);
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--vv-stroke);
}
.vv-card__head svg { width: 17px; height: 17px; color: var(--vv-blue); }
.vv-card__body { padding: 1rem; flex: 1; min-width: 0; }
.vv-card__body--scroll { padding: 0; overflow-x: auto; max-height: 360px; overflow-y: auto; }
.vv-card__body--center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding: 1.4rem 1rem; }
.vv-card canvas { max-width: 100%; }
/* Chart.js con maintainAspectRatio:false necesita un contenedor de ALTURA FIJA o el
   canvas crece sin límite (se vio en 24.872px). El wrapper acota; el canvas se posiciona
   absoluto para llenar el box sin arrastrar la altura del padre (rompe el bucle). */
.vv-chartbox { position: relative; height: 220px; width: 100%; }
.vv-chartbox canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }

/* KPIs compactos dentro de cards */
.vv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.6rem; }
.vv-kpis--4 { grid-template-columns: repeat(4, 1fr); }
.vv-kpis > div { display: flex; flex-direction: column; gap: 0.15rem; }
.vv-kpi__num { font-weight: 600; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.vv-kpi__lbl { font-size: 0.72rem; color: var(--vv-ink-dim); }
.vv-pos { color: var(--vv-pos); }
.vv-neg { color: var(--vv-neg); }

/* Reseñas */
.vv-rating { font-weight: 600; font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; }
.vv-stars { display: inline-flex; gap: 2px; color: var(--vv-yellow); }
.vv-stars svg { width: 18px; height: 18px; }
.vv-stars .vv-star--empty { color: var(--vv-ink-mute); }
.vv-rating__count { font-size: 0.82rem; color: var(--vv-ink-dim); margin-top: 0.2rem; }

/* Motores AEO */
.vv-engines { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.4rem; }
.vv-engine {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.76rem; padding: 0.3rem 0.6rem; border-radius: 999px;
  background: var(--vv-glass-hi); border: 1px solid var(--vv-stroke); color: var(--vv-ink-dim);
}
.vv-engine b { color: var(--vv-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Tablas ── */
.vv-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.vv-table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 500; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--vv-ink-dim);
  padding: 0.6rem 0.9rem; background: rgba(10,10,12,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--vv-stroke);
}
.vv-table td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--vv-stroke); vertical-align: middle; }
.vv-table tbody tr:last-child td { border-bottom: none; }
.vv-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.vv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.vv-empty { text-align: center; color: var(--vv-ink-mute); padding: 1.5rem; }

/* Botones de outcome (asistencia/resultado) */
.vv-seg { display: inline-flex; gap: 3px; background: var(--vv-glass); border: 1px solid var(--vv-stroke); border-radius: 9px; padding: 2px; }
.vv-seg button {
  font-family: inherit; font-size: 0.74rem; font-weight: 500;
  color: var(--vv-ink-dim); background: transparent; border: none;
  padding: 0.28rem 0.55rem; border-radius: 7px; cursor: pointer;
  transition: background .15s var(--vv-ease), color .15s var(--vv-ease);
  white-space: nowrap;
}
.vv-seg button:hover { color: var(--vv-ink); }
.vv-seg button.is-on { color: #fff; }
.vv-seg button.is-on[data-val="si"], .vv-seg button.is-on[data-val="won"] { background: rgba(52,211,153,0.22); color: var(--vv-pos); }
.vv-seg button.is-on[data-val="no"], .vv-seg button.is-on[data-val="lost"] { background: rgba(251,113,133,0.20); color: var(--vv-neg); }
.vv-seg button.is-on[data-val="pend"], .vv-seg button.is-on[data-val="pending"] { background: rgba(56,161,219,0.20); color: var(--vv-blue); }
.vv-deal { font-variant-numeric: tabular-nums; color: var(--vv-ink-dim); white-space: nowrap; }
.vv-deal.has-val { color: var(--vv-ink); font-weight: 500; }

/* Cancelada */
.vv-tag-cancel { font-size: 0.7rem; color: var(--vv-neg); border: 1px solid rgba(251,113,133,0.3); border-radius: 6px; padding: 1px 6px; }

/* Skeleton de carga */
.vv-skel { color: transparent !important; position: relative; border-radius: 6px; overflow: hidden; }
.vv-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transform: translateX(-100%); animation: vvShimmer 1.3s infinite;
}
@keyframes vvShimmer { to { transform: translateX(100%); } }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .vv-tiles--funnel { grid-template-columns: repeat(3, 1fr); }
  .vv-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vv-tiles--funnel { grid-template-columns: repeat(2, 1fr); }
  .vv-grid--2 { grid-template-columns: 1fr; }
  .vv-dash__title h2 { font-size: 1.3rem; }
  .vv-kpis--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  .vv-blob, .vv-refresh.is-loading svg, .vv-skel::after { animation: none !important; }
  .vv-tile, .vv-refresh { transition: none !important; }
}