/* KPIs container a 4 columnas en desktop */
.spl-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Algunos bloques usan una segunda fila de KPIs */
.spl-kpis-row2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* ✅ En móvil forzar 2/2 */
@media (max-width: 768px) {
  .spl-kpis,
  .spl-kpis-row2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Si algún KPI tiene width fijo o flex-basis heredado, neutralízalo */
.spl-kpis .spl-kpi,
.spl-kpis-row2 .spl-kpi {
  width: auto;
}





/* Monthly Growth Goal styles */
.spl-goal .spl-card-header { margin-bottom: 10px; }
.spl-h2-tight { margin: 0; font-size: 18px; font-weight: 700; }
.spl-goal-window { display:flex; gap:8px; align-items:center; }
.spl-goal-chip { background:#111827; color:#d1d5db; border:1px solid #374151; border-radius:999px; padding:4px 10px; font-size:12px; }
.spl-goal-chip.spl-dim { opacity:.8; }

.spl-goal-ribbon {
  background: linear-gradient(90deg, #16a34a, #22c55e);
  color:#052e16;
  border:1px solid rgba(0,0,0,.2);
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0 12px;
  font-weight:600;
}

.spl-goal-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 880px){
  .spl-goal-grid { grid-template-columns: 1fr 1.1fr; align-items: center; }
}

.spl-goal-kpis { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width: 640px){
  .spl-goal-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.spl-goal-kpi { background:#0f172a; border:1px solid #1f2937; border-radius:12px; padding:10px 12px; }
.spl-goal-kpi-label { color:#9ca3af; font-size:12px; }
.spl-goal-kpi-value { color:#e5e7eb; font-weight:700; font-size:16px; margin-top:2px; }

.spl-progress-wrap { }
.spl-progress-track { background:#111827; border:1px solid #374151; border-radius:999px; height:14px; overflow:hidden; }
.spl-progress-bar { height:100%; background: linear-gradient(90deg, #60a5fa, #a78bfa); width:0; transition: width .6s ease; }
.spl-progress-meta { display:flex; justify-content:space-between; color:#9ca3af; font-size:12px; margin-top:6px; }
.spl-progress-note { color:#9ca3af; font-size:12px; margin-top:2px; }













/* ===== SocialPilotLab child - My Account layout ===== */

/* Top Content: responsive + scroll-snap on mobile */
.spl-top-scroller {
  overflow: hidden;
}
.spl-top-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Card base (remove inline styles if you want tighter control) */
.spl-top-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #111827;
  border: 1px solid #1f2937;
  overflow: hidden;
  text-decoration: none;
}

/* Mobile: turn into horizontal scroller with snap */
@media (max-width: 640px) {
  .spl-top-scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px; /* breathing room for scrollbar */
  }
  .spl-top-grid {
    display: inline-flex;        /* row of cards */
    gap: 12px;
    min-width: 100%;
  }
  .spl-top-card {
    scroll-snap-align: start;
    min-width: 72%;
    max-width: 72%;              /* ~2 cards to swipe through */
    flex: 0 0 auto;
  }
}
/* Small tablets: 2 per row */
@media (min-width: 641px) and (max-width: 900px) {
  .spl-top-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Tablets: 3 per row */
@media (min-width: 901px) and (max-width: 1199px) {
  .spl-top-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Desktop: 5 per row (default above) */

/* Image box keeps square shape */
.spl-top-card .media {
  aspect-ratio: 1 / 1;
  background: #0b1220;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.spl-top-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Badges wrap nicely on narrow widths */
.spl-top-card .badges {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.spl-top-card .badge {
  font-size: 11px;
  background: #0f172a;
  border: 1px solid #1f2937;
  color: #cbd5e1;
  padding: 3px 8px;
  border-radius: 999px;
}

/* Trim header sizes a bit on mobile for balance */
@media (max-width: 640px) {
  .spl-card-header h2 { font-size: 16px; }
}


.spl-analytics-wrap {
  --bg: #0f172a;
  --card: #111827;
  --card-2: #0b1220;
  --muted: #9ca3af;
  --text: #e5e7eb;
  --accent1: #7dd3fc;
  --accent2: #c084fc;
  --border: #1f2937;
  background: var(--bg);
  color: var(--text);
  padding: 12px;
  border-radius: 12px;
}

.spl-analytics-grid { display:grid; grid-template-columns:2fr 1fr; gap:18px; }
.spl-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.spl-card-header h2 { margin:0 0 10px 0; font-weight:700; }

/* Overview */
.spl-overview .spl-card-header h2 { color: var(--accent1); }
.spl-overview-profile { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.spl-avatar { width:64px; height:64px; border-radius:9999px; overflow:hidden; background:var(--card-2); display:grid; place-items:center; border:1px solid var(--border); }
.spl-avatar img { width:100%; height:100%; object-fit:cover; }
.spl-avatar-placeholder { color:var(--muted); font-weight:700; }
.spl-overview-meta .spl-name { font-size:18px; font-weight:700; }
.spl-overview-meta .spl-username { font-size:14px; color:var(--muted); }

.spl-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.spl-kpis-row2 { grid-template-columns:1fr; }
.spl-kpi { background:var(--card-2); border:1px solid var(--border); padding:12px; border-radius:12px; }
.spl-kpi-label { color:var(--muted); font-size:12px; margin-bottom:6px; }
.spl-kpi-value { font-size:20px; font-weight:800; display:flex; align-items:center; gap:8px; }
.spl-kpi-delta { font-size:12px; color:#86efac; } /* verde */

.spl-chart-block { background:var(--card-2); border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:14px; }
.spl-chart-header h3 { margin:0 0 10px 0; color: var(--accent2); }

/* Aside */
.spl-aside .spl-card + .spl-card { margin-top:18px; }

/* Targeting */
.spl-targeting .spl-card-header h2 { color:#fcd34d; }
.spl-field { margin-bottom:12px; }
.spl-field label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.spl-pill { display:inline-block; background:var(--card-2); border:1px solid var(--border); padding:8px 10px; border-radius:999px; }

/* Top Post */
.spl-top-post .spl-card-header h2 { color:#34d399; }
.spl-top-post-preview { display:flex; gap:12px; align-items:center; }
.spl-thumb-placeholder {
  width:84px; height:84px; border-radius:12px;
  background:linear-gradient(135deg, #0b1220, #1e293b);
  border:1px solid var(--border); color:var(--muted);
  display:grid; place-items:center; font-size:12px;
}
.spl-top-post-meta a { color:#93c5fd; text-decoration:none; font-weight:600; }
.spl-top-mini { color:var(--muted); font-size:12px; margin-top:4px; }

@media (max-width: 980px) { .spl-analytics-grid { grid-template-columns:1fr; } }


/* Contenedor general */
.spl-analytics-wrap {
  --bg: #0f172a;           /* slate-900 */
  --card: #111827;         /* gray-900 */
  --card-2: #0b1220;       /* un poco más oscuro */
  --muted: #9ca3af;        /* gray-400 */
  --text: #e5e7eb;         /* gray-200 */
  --accent1: #7dd3fc;      /* sky-300 */
  --accent2: #c084fc;      /* violet-400 */
  --border: #1f2937;       /* gray-800 */

  background: var(--bg);
  color: var(--text);
  padding: 12px;
  border-radius: 12px;
}

/* Grid: 2 columnas (2:1) */
.spl-analytics-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}

/* Card base */
.spl-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Cabeceras de card */
.spl-card-header h2, .spl-card-header h3 {
  margin: 0 0 10px 0;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 1rem;
    line-height: 1.4;
}

/* OVERVIEW */
.spl-overview .spl-card-header h2 { color: var(--accent1); }

.spl-overview-profile {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  font-size: 1rem;
    line-height: 1.4;
}

.spl-avatar {
  width: 64px; height: 64px; border-radius: 9999px;
  overflow: hidden; background: var(--card-2);
  display: grid; place-items: center;
  border: 1px solid var(--border);
}
.spl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spl-avatar-placeholder { color: var(--muted); font-weight: 700; }

.spl-overview-meta .spl-name { font-size: 18px; font-weight: 700; }
.spl-overview-meta .spl-username { font-size: 14px; color: var(--muted); }

.spl-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.spl-kpi {
  background: var(--card-2);
  border: 1px solid var(--border);
  padding: 12px; border-radius: 12px;
}
.spl-kpi-label { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.spl-kpi-value { font-size: 20px; font-weight: 800; }

/* Chart blocks */
.spl-chart-block { background: var(--card-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.spl-chart-header h3 { margin: 0 0 10px 0; color: var(--accent2); }

/* ASIDE */
.spl-aside .spl-card + .spl-card { margin-top: 18px; }

/* Targeting */
.spl-targeting .spl-card-header h2 { color: #fcd34d; } /* amber-300 */
.spl-field { margin-bottom: 12px; }
.spl-field label { display:block; font-size:12px; color: var(--muted); margin-bottom: 6px; }
.spl-field select,
.spl-field input[type="text"],
.spl-field input[type="number"] {
  width: 100%;
  background: #0b1220; color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.spl-help { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* Hashtag generator */
.spl-hashtags .spl-card-header h2 { color: #34d399; } /* emerald-400 */
.spl-btn {
  width: 100%;
  border: 1px solid var(--border);
  background: linear-gradient(90deg, #1e293b, #0b1220);
  color: var(--text);
  padding: 10px 12px; border-radius: 10px; cursor: not-allowed; opacity: .6;
  margin-top: 4px;
}
.spl-hashtag-output {
  margin-top: 10px;
  background: var(--card-2);
  border: 1px solid var(--border);
  padding: 10px; border-radius: 10px;
  color: var(--text);
  display: block;
  overflow-x: auto;
}

/* Responsive */
@media (max-width: 980px) {
  .spl-analytics-grid { grid-template-columns: 1fr; }
}


/* === Layout base: menú arriba === */
.woocommerce-account .woocommerce {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Menú arriba */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 100%;
  order: 1;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e7eb; /* gris suave */
  padding-bottom: 8px;
  margin-bottom: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  background: #f3f4f6; /* fondo gris claro */
  color: #374151; /* gris oscuro */
  font-weight: 500;
  transition: all 0.2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: #e5e7eb;
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  background: #111827; /* tu color principal oscuro */
  color: #fff;
}

/* Contenido debajo */
.woocommerce-account .woocommerce-MyAccount-content {
  order: 2;
  flex: 1;
}

/* === Cards estilo mock === */
.ig-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
  padding: 20px;
  margin-bottom: 20px;
}
.ig-card h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 600;
}
.ig-card p {
  margin: 0;
  color: #6b7280;
}

/* === Grid de métricas === */
.ig-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.ig-metric-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  padding: 16px;
  text-align: center;
}
.ig-metric-card h4 {
  font-size: 1.4rem;
  margin: 0;
  font-weight: 700;
}
.ig-metric-card span {
  color: #6b7280;
  font-size: 0.9rem;
}

/* === Ajuste móvil === */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
    gap: 8px;
  }
}


/* === Woo My Account: top pills horizontal === */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none !important;
  width: 100% !important;
  margin: 0 0 20px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  background: #0f172a;            /* dark pill */
  color: #e5e7eb;
  border: 1px solid #1f2937;
  transition: background .2s, color .2s, border-color .2s;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: #2563eb;            /* brand-blue */
  border-color: #2563eb;
  color: #fff;
}

/* === Force single-column content === */
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
  clear: both;
}

/* Algunos temas envuelven en columnas; neutraliza */
.woocommerce-account .u-columns,
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
  width: 100% !important;
  float: none !important;
  display: block !important;
}

/* Por si el tema padre usa grid/flex para 2 columnas */
.woocommerce-account .woocommerce {
  display: block !important;
}

/* Quita sidebar o columnas residuales del tema */
body.woocommerce-account .site-content .content-area,
body.woocommerce-account .site-main {
  width: 100% !important;
  max-width: 100% !important;
}

/* Opcional: separador inferior del nav */
.woocommerce-account .woocommerce-MyAccount-navigation {
  border-bottom: 1px solid #1f2937;
  padding-bottom: 12px;
}


body.woocommerce-account {
  --spl-bg: #0b1020;
  --spl-card: #12192b;
  --spl-muted: #8ea0bd;
  --spl-text: #eaf1ff;
  --spl-accent: #5b8cff;
  --spl-accent-2: #33d6a6;
  --spl-border: rgba(255,255,255,0.08);
  background: var(--spl-bg);
}

/* Container width */
body.woocommerce-account .site,
body.woocommerce-account .site-content,
body.woocommerce-account .container,
body.woocommerce-account .content-area,
body.woocommerce-account .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  float: none;
}

/* My Account nav -> pills on top */
.woocommerce-account .woocommerce-MyAccount-navigation {
  display: block;
  margin: 24px 0 16px;
  background: transparent;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--spl-border);
  border-radius: 10px;
  color: var(--spl-text);
  background: var(--spl-card);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  border-color: var(--spl-accent);
  transform: translateY(-1px);
}

/* Single column content */
.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
}

/* Hide any theme sidebars in account */
body.woocommerce-account .widget-area,
body.woocommerce-account .sidebar,
body.woocommerce-account .right-sidebar,
body.woocommerce-account .secondary {
  display: none !important;
}

/* ===== Cards / sections ===== */
.spl-section {
  background: var(--spl-card);
  border: 1px solid var(--spl-border);
  border-radius: 16px;
  padding: 18px;
  color: var(--spl-text);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.spl-section h2, .spl-section h3 {
  margin: 0 0 12px;
  color: var(--spl-text);
}
.spl-muted { color: var(--spl-muted); }

/* Grid helpers */
.spl-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 992px) {
  .spl-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .spl-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* KPIs */
.kpi { padding: 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--spl-border); border-radius: 14px; }
.kpi .label { color: var(--spl-muted); font-size: 12px; }
.kpi .value { font-size: 22px; margin-top: 6px; }

/* Chips */
.spl-chips { display:flex; gap:10px; flex-wrap:wrap; }
.spl-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--spl-border);
  color: var(--spl-text);
  padding: 8px 12px;
  border-radius: 999px; font-size: 12px;
}

/* Buttons */
.spl-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; text-decoration:none; cursor:pointer; border:1px solid transparent; }
.spl-btn.primary { background: var(--spl-accent); color:#fff; }
.spl-btn.ghost { background: transparent; border-color: var(--spl-border); color: var(--spl-text); }
.spl-btn.primary:hover { filter: brightness(1.08); }
.spl-btn.ghost:hover { border-color: var(--spl-accent); }

/* Charts */
.spl-canvas { width: 100%; height: 260px; }

/* Toggle (optional) */
.spl-toggle { position:relative; width:52px; height:28px; border-radius:999px; background:#333; border:1px solid var(--spl-border); }
.spl-toggle .dot { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:left .2s ease; }
.spl-toggle.active { background: var(--spl-accent); }
.spl-toggle.active .dot { left:27px; }

/* Ensure text color inside Woo content */
.woocommerce-account .woocommerce { color: var(--spl-text); }
.woocommerce-account .woocommerce a { color: var(--spl-accent); }