/*
Theme Name:   Mega Apuestas
Author:       Juanjo Vera
Author URI:   https://www.juanjovera.com
Version:      1.0
*/

/* =========================================================
   TOKENS / BASE
========================================================= */
:root{
  /* Brand */
  --mega-black: #050505;
  --mega-yellow: #F6EA2A;
  --mega-yellow-2: #FFE95A;

  /* Neutrals */
  --mega-white: #F4F4F4;
  --mega-muted: rgba(244,244,244,.65);

  /* Surfaces */
  --mega-card: rgba(255,255,255,.06);
  --mega-surface: rgba(255,255,255,.03);
  --mega-border: rgba(255,255,255,.10);

  /* Radii */
  --mega-r-14: 14px;
  --mega-r-18: 18px;
  --mega-r-20: 20px;
  --mega-r-22: 22px;

  /* Shadows */
  --mega-shadow-sm: 0 10px 30px rgba(0,0,0,.25);
  --mega-shadow-md: 0 16px 40px rgba(0,0,0,.30);

  /* Layout helpers */
  --mega-pill-bg: rgba(0,0,0,.25);
  --mega-progress-bg: rgba(255,255,255,.10);

  color-scheme: dark;
}

html, body {
  height: 100%;
}

body{
  background: var(--mega-black);
  color: var(--mega-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selección */
::selection{
  background: rgba(246,234,42,.35);
  color: #000;
}

/* Usa token en vez de color hardcodeado para compatibilidad con Bootstrap */
.text-muted{
  color: var(--mega-muted) !important;
}

/* Helpers (no toques Bootstrap global como .fw-bold) */
.mega-text-muted{ color: var(--mega-muted) !important; }
.mega-text-yellow{ color: var(--mega-yellow) !important; }
.mega-bg-surface{ background: var(--mega-surface) !important; }

/* =========================================================
   COMPONENTES BASE
========================================================= */
.mega-card{
  background: var(--mega-card);
  border: 1px solid var(--mega-border);
  border-radius: var(--mega-r-18);
  box-shadow: var(--mega-shadow-sm);
}

.mega-card--landing{
  border-radius: var(--mega-r-20);
  box-shadow: var(--mega-shadow-md);
}

.mega-divider{
  border-top: 1px solid var(--mega-border);
  opacity: 1;
}

.mega-logo{
  width: 54px;
  height: 54px;
  border-radius: var(--mega-r-14);
  background: #000;
  border: 1px solid var(--mega-border);
  object-fit: cover;
}

.mega-title{
  letter-spacing: .45px;
}

/* Pills */
.mega-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border:1px solid var(--mega-border);
  border-radius:999px;
  padding: .35rem .6rem;
  color: var(--mega-white);
  background: var(--mega-pill-bg);
  font-size: .9rem;
}

/* Métrica */
.mega-metric{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.mega-label{
  color: var(--mega-muted);
  font-size: .9rem;
}
.mega-value{
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--mega-white);
}
.mega-unit{
  color: var(--mega-muted);
  font-size: .95rem;
  margin-left: .35rem;
}

/* KPI line */
.mega-kpi{
  border-top: 1px dashed rgba(255,255,255,.12);
  margin-top: .75rem;
  padding-top: .75rem;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  color: var(--mega-muted);
  font-size: .92rem;
  flex-wrap: wrap;
}

/* Progress */
.progress{
  background: var(--mega-progress-bg);
  border-radius: 999px;
  height: 10px;
  overflow: visible;
}
.progress-bar{
  background: var(--mega-yellow);
}

/* Charts wrapper */
.mega-chart-wrap{
  background: var(--mega-surface);
  border: 1px solid var(--mega-border);
  border-radius: var(--mega-r-18);
  padding: 14px;
}

/* Canvas sizing */
.mega-canvas-box{
  height: 220px;
}
.mega-canvas-box canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

/* =========================================================
   NAV / TABS (Años)
========================================================= */
.mega-nav .nav-link{
  color: var(--mega-muted);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .5rem .9rem;
  margin-right: .5rem;
}
.mega-nav .nav-link.active{
  color: #000;
  background: var(--mega-yellow);
  border-color: rgba(0,0,0,.2);
}
.mega-nav .nav-link:hover{
  color: var(--mega-white);
  border-color: var(--mega-border);
}

/* Selector (quick year select) */
.mega-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--mega-white);
  border-radius: 999px;
  padding: .45rem .9rem;
}
.mega-select option{ color:#111; }

/* =========================================================
   ACCORDION (Detalle mensual)
========================================================= */
.accordion-item{
  background: transparent;
  border: 0;
  margin-bottom: .75rem;
}

.accordion-button{
  background: rgba(255,255,255,.04);
  color: var(--mega-white);
  border-radius: var(--mega-r-14) !important;
}

.accordion-button:not(.collapsed){
  background: rgba(246,234,42,.12);
  color: var(--mega-white);
  box-shadow: none;
}

.accordion-body{
  background: var(--mega-surface);
  border: 1px solid var(--mega-border);
  border-top: 0;
  border-radius: 0 0 var(--mega-r-14) var(--mega-r-14);
  color: wheat;
}

/* =========================================================
   TABLE (Vista rápida 12 meses)
========================================================= */
.mega-table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--mega-white);
  --bs-table-border-color: rgba(255,255,255,.10);
  width: 100%;
}
.mega-table thead th{
  color: var(--mega-muted);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* =========================================================
   HERO (Stats)
========================================================= */
.mega-hero{
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(246,234,42,.12), transparent 60%),
    radial-gradient(700px 400px at 90% 20%, rgba(246,234,42,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-bottom: 1px solid var(--mega-border);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* =========================================================
   LAYOUT: DOS CAJITAS (LEFT / RIGHT) - ajustes específicos
   (Estas reglas mejoran la visualización dentro de col-6)
========================================================= */
.mega-hero .card.mega-card {
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 520px; /* garantiza altura mínima para contener gráficos */
  overflow: hidden;
}

/* Contenedor interno scrollable para el contenido pesado (tab panes) */
.mega-hero .tab-content > .tab-pane {
  overflow: auto;
  max-height: calc(100vh - 320px); /* ajusta según header / márgenes */
  padding-right: 8px; /* para evitar que el scrollbar pise el contenido */
}

/* En pantallas pequeñas, apilar y eliminar scroll forzado */
@media (max-width: 991.98px) {
  .mega-hero .card.mega-card { min-height: auto; }
  .mega-hero .tab-content > .tab-pane { max-height: none; overflow: visible; padding-right: 0; }
}

/* Tabs compactos dentro de cada caja */
.mega-hero .nav-tabs {
  border-bottom: 0;
  gap: .5rem;
}
.mega-hero .nav-tabs .nav-link {
  padding: .35rem .6rem;
  font-size: .92rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--mega-muted);
  background: transparent;
}
.mega-hero .nav-tabs .nav-link.active {
  background: var(--mega-yellow);
  color: #000;
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Ajustes para títulos y cabeceras de card */
.mega-hero .card > .d-flex.align-items-center {
  gap: .75rem;
  align-items: center;
}

/* Evitar que tablas y canvas se salgan */
.mega-hero .mega-table,
.mega-hero .mega-table thead th,
.mega-hero .mega-table tbody td {
  word-break: break-word;
  white-space: nowrap;
}
.mega-hero .table-responsive { overflow: auto; }

/* Reducir padding en vistas compactas (para que quepan 12 meses sin scroll extremo) */
.mega-hero .mega-card .table-sm td,
.mega-hero .mega-card .table-sm th {
  padding: .45rem .5rem;
  font-size: .86rem;
}

/* Canvas: asegurar buena relación y evitar pixel-stretching */
.mega-hero .mega-canvas-box{ height: 160px; }
@media (min-width: 992px){
  .mega-hero .mega-canvas-box{ height: 220px; }
}
.mega-hero .mega-canvas-box canvas{ width:100% !important; height:100% !important; }

/* Accordion dentro de la card para detalle mensual */
.mega-hero .accordion .accordion-button {
  padding: .6rem .9rem;
  font-size: .95rem;
  border-radius: 12px;
}
.mega-hero .accordion .accordion-body {
  padding: .8rem;
  font-size: .92rem;
}

/* Badges / KPI / Units compact */
.mega-hero .badge {
  font-weight: 700;
  font-size: .85rem;
  padding: .35rem .6rem;
  border-radius: 999px;
}

/* Scrollbar styling (opcional) */
.mega-hero .tab-content > .tab-pane::-webkit-scrollbar {
  width: 8px;
}
.mega-hero .tab-content > .tab-pane::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
.mega-hero .tab-content > .tab-pane::-webkit-scrollbar-track {
  background: transparent;
}

/* Fine tuning responsive: ocultar elementos no críticos en móvil */
@media (max-width: 576px) {
  .mega-hero .mega-pill { display: none; }
  .mega-hero .mega-nav { overflow-x: auto; padding-bottom: .5rem; }
  .mega-hero .mega-nav .nav-link { margin-right: .35rem; }
  .mega-hero .mega-kpi { font-size: .85rem; gap: 8px; }
}

/* =========================================================
   LANDING
========================================================= */
.mega-landing{
  min-height: calc(100vh - 60px);
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}

.mega-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(246,234,42,.15), transparent 60%),
    radial-gradient(700px 450px at 85% 20%, rgba(246,234,42,.12), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  pointer-events:none;
}

.mega-noise{
  position:absolute;
  inset:-40px;
  opacity:.05;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  pointer-events:none;
}

.mega-subtitle{
  color: var(--mega-muted);
  font-size: 1.05rem;
  max-width: 52ch;
}

/* Buttons */
.btn-mega{
  background: var(--mega-yellow);
  color: #000;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  padding: .85rem 1.15rem;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(246,234,42,.12);
}
.btn-mega:hover{ background: var(--mega-yellow-2); color:#000; }

.btn-ghost{
  border: 1px solid var(--mega-border);
  color: var(--mega-white);
  border-radius: 999px;
  padding: .85rem 1.15rem;
  font-weight: 700;
  background: rgba(255,255,255,.03);
}
.btn-ghost:hover{ border-color: rgba(246,234,42,.45); }

/* KPI grid */
.mega-kpis{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 992px){
  .mega-kpis{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kpi{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.kpi .label{ color: var(--mega-muted); font-size:.9rem; }
.kpi .value{ font-size:1.35rem; font-weight:900; line-height:1.1; }

/* Feature cards */
.mega-feature{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.mega-feature .t{ font-weight:800; }
.mega-feature .d{ color: var(--mega-muted); font-size:.95rem; }

/* Preview panel */
.mega-preview{
  border-radius: var(--mega-r-22);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  overflow:hidden;
}
.mega-preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dots{ display:flex; gap:8px; }
.dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.18); }

.mega-preview-body{ padding: 16px; }

.mini-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  margin-bottom: 10px;
}
.mini-row .l{ color: var(--mega-muted); font-size:.92rem; }
.mini-row .r{ font-weight:900; }
.mini-row .r.yellow{ color: var(--mega-yellow); }

/* Carousel (hero slider) */
#megaHeroCarousel .carousel-inner{
  background:
    radial-gradient(900px 500px at 10% 20%, rgba(246,234,42,.18), transparent 60%),
    radial-gradient(700px 450px at 90% 20%, rgba(246,234,42,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
#megaHeroCarousel .carousel-indicators [data-bs-target]{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.15);
}
#megaHeroCarousel .carousel-indicators .active{
  background: var(--mega-yellow);
  border-color: rgba(0,0,0,.25);
}
#megaHeroCarousel .carousel-control-prev-icon,
#megaHeroCarousel .carousel-control-next-icon{
  filter: invert(1);
  opacity: .9;
}

/* =========================
   HEADER / NAVBAR
========================= */
.mega-header{
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid var(--mega-border);
  z-index: 999;
}

.navbar{
  padding: .75rem 0;
}

.navbar-brand{
  color: var(--mega-white);
}
.navbar-brand:hover{
  color: var(--mega-yellow);
}

.navbar-toggler{
  border: 1px solid var(--mega-border);
}
.navbar-toggler-icon{
  filter: invert(1);
}

.navbar-nav .nav-link{
  color: var(--mega-muted);
  border-radius: 999px;
  padding: .4rem .8rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
  color: var(--mega-white);
  background: rgba(255,255,255,.06);
}

.navbar-nav .current-menu-item > .nav-link{
  color: #000;
  background: var(--mega-yellow);
}

.dropdown-menu{
  background: rgba(0,0,0,.95);
  border: 1px solid var(--mega-border);
  border-radius: 14px;
}
.dropdown-item{
  color: var(--mega-white);
}
.dropdown-item:hover{
  background: rgba(246,234,42,.15);
  color: var(--mega-yellow);
}
/* =========================
   QUITAR SCROLL EN LAS CAJAS (tabs + contenido)
========================= */

/* La caja contenedora */
.mega-hero .mega-card{
  overflow: visible !important;
}

/* El contenedor de tabs y su contenido */
#leftViewTabsContent,
#rightViewTabsContent{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Cada panel (tab-pane) */
#leftViewTabsContent .tab-pane,
#rightViewTabsContent .tab-pane{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Si en algún momento metiste min-height inline (style="min-height:200px;") */
#leftViewTabsContent[style],
#rightViewTabsContent[style]{
  min-height: 0 !important;
}
  /* --- Estilos UX mejorados --- */
  #redes-sociales .card { border-radius:12px; background:rgba(255,255,255,0.02); padding:0; box-shadow: none; }
  .card--social { border:1px solid rgba(255,255,255,0.03); padding: .85rem; align-items:flex-start; }
  .card--admins { border:1px solid rgba(255,255,255,0.03); padding:1rem; border-radius:12px; background:transparent; }
  .brand-badge { width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)); }
  .social-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.38rem .6rem; border-radius:.5rem; transition: transform .12s ease, box-shadow .12s ease; }
  .social-btn:hover, .social-btn:focus { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); outline: none; }
  .admin-avatar { width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,0.04); }
  .btn-ghost { background:transparent; border:1px solid rgba(255,255,255,0.06); padding:.35rem .6rem; border-radius:.45rem; }
  .copy-telegram { min-width:86px; }
  .copy-telegram.copied { color: var(--bs-success); border-color: rgba(40,167,69,0.15); box-shadow: 0 6px 12px rgba(40,167,69,0.08); }
  .visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap; }
  @media (max-width: 767.98px) {
    .brand-badge { width:48px; height:48px; }
    .admin-avatar { width:56px; height:56px; }
  }
#redes-sociales h3{ color: var(--mega-yellow);}
#redes-sociales .fw-semibold{color : var(--mega-yellow);}

 .social-logo-wrap{
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    flex: 0 0 56px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .social-logo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
  }

.card--social{
  border-radius:14px;
}

.social-logo-wrap{
  width:52px;
  height:52px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.social-logo{
  width:30px;
  height:30px;
  object-fit:contain;
}

.admin-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}

.social-logo-wrap{
  width:52px;
  height:52px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.social-logo{
  width:100%;
  height:100%;
  object-fit:cover; /* si no quieres recorte: contain */
  display:block;
}

.min-w-0{ min-width:0; }
.social-btn{ white-space:nowrap; }
/* LOGO MÁS GRANDE Y SIN HUECOS */
.social-logo-wrap{
  width:100%;          /* ⬅️ MÁS GRANDE */
  height:100%;
  border-radius:16px;
  background:#000;
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.social-logo{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* BOTONES EN UNA LÍNEA EN PC */
.social-links{
  flex-wrap:nowrap;
}

/* EN MÓVIL SÍ PERMITIMOS SALTO */
@media (max-width: 575px){
  .social-links{
    flex-wrap:wrap;
  }
}

/* BOTONES COMPACTOS */
.social-btn{
  white-space:nowrap;
  padding:.35rem .65rem;
}

/* =========================
   MEJORAS MOBILE (solo CSS)
   ========================= */
@media (max-width: 576px) {

  /* 1) Header: título + tabs (que no se aplasten) */
  .mega-card .d-flex.align-items-center.justify-content-between.mb-3 {
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-start !important;
  }

  .mega-card .d-flex.align-items-center.justify-content-between.mb-3 h4,
  .mega-card .d-flex.align-items-center.justify-content-between.mb-3 h2,
  .mega-card .d-flex.align-items-center.justify-content-between.mb-3 h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    width: 100%;
    line-height: 1.15;
  }

  /* Logos en títulos */
  .mega-card h4 img,
  .mega-card h3 img {
    height: 34px !important;
    width: auto !important;
  }

  /* 2) Tabs: permitir scroll horizontal y que no salten de línea */
  .nav.nav-tabs,
  .nav.mega-nav {
    width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    gap: .5rem;
  }
  .nav.nav-tabs::-webkit-scrollbar,
  .nav.mega-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .nav.nav-tabs .nav-link,
  .nav.mega-nav .nav-link {
    white-space: nowrap;
    padding: .45rem .75rem;
    font-size: .9rem;
  }

  /* Select "Ir a:" que no quede raro */
  .mega-select {
    width: 100%;
    max-width: 100%;
  }

  /* 3) KPIs: hacerlos en columna y con aire */
  .mega-kpi {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
    margin-top: .75rem;
  }

  /* Badges en cabecera (Unidades) */
  .badge.rounded-pill {
    max-width: 100%;
    white-space: nowrap;
  }

  /* 4) Tablas: tipografía + padding más compactos */
  .mega-table th,
  .mega-table td,
  .table.table-sm th,
  .table.table-sm td {
    padding: .45rem .5rem !important;
    font-size: .9rem;
  }

  /* Evitar que números largos rompan */
  .mega-table td,
  .mega-table th {
    white-space: nowrap;
  }

  /* 5) Accordion: que el botón sea más compacto y no se corte */
  .accordion-button {
    padding: .75rem .85rem;
    line-height: 1.15;
  }

  .accordion-button .w-100 {
    gap: .5rem;
  }

  /* Badge dentro del accordion (U: xx) */
  .accordion-button .badge {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* 6) “Vistazo rápido” panel: que los canvas no se desborden */
  .mega-canvas-box,
  .mega-chart-wrap {
    width: 100%;
  }

  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 7) Botón CTA full width en móvil */
  .btn.btn-mega {
    width: 100%;
  }

  /* 8) Párrafo “Haz click…” que no empuje raro */
  #pagos {
    margin: .75rem 0 .25rem;
  }
}