@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --color-primary: #150542;
  /* Tipografía */
  --font-primary: 'Exo', sans-serif;
  --font-size-base: .875rem;
  --font-size-medium: .775rem;
  --font-size-small: .675rem;
  --font-size-large: 1.2rem;
  --line-height-base: 1.5;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Colores */
  --color-white: #ffffff;
  --color-black: #150542;
  --color-dark: #150542;
  --color-accent: #01efc1; /* turquersa */
  --color-accent-orange: #FF6900;
  --color-accent-alt: #00dd99;
  --color-gray-light: #eee;
  --color-gray: #999;
  --color-gray-dark: #555;
  --color-green-transparent: #01efc1; /* #01efc1a3 */
  --gris-medio: #bbb;

  /* Tamaños (imágenes y espaciados) */
  --size-logo-page-title: 48px;
  --size-logo-header: 72px;
  --size-logo-header-mobile: 52px;
  --size-admin-logo: 40px;
  --size-competicion-logo: 29px;
}

/***** Overlay degradado sobre el texto del pronóstico *****/
/* body div.field_pronostico.razonamiento.prono-clickable,
body div.field_base_razonamiento.razonamiento.prono-clickable{
  color: transparent;
  text-shadow: 0 0 10px #888;
} */
/***** FIN Overlay degradado sobre el texto del pronóstico *****/




/* Ocultamos LVS para Colombia */
body.ctry-co .btn-streaming,
body.ctry-co #ver-partido-directo,
body.ctry-co .registrate-lvs {
    display: none !important;
}

/* Ancho submenu */
body .region-primary-menu .submenu{
  min-width: 330px;
}

/* --- Banner deslizable en una sola línea ------------------------------- */
.telegram-add .icon-telegram{
  background: var(--color-accent);
  z-index: 1;
  width: 50px;
  margin-left: -10px !important;
  box-shadow: 0px -1px 10px var(--color-accent) !important;
}
.telegram-add .icon-telegram:before {
    margin-top: 15px;
    font-size: 42px;
}
.telegram-add {               /* div envoltorio (el verde) */
  display: flex;              /* coloca a hijos en fila */
  align-items: center;        /* centra verticalmente icono + texto */
  overflow: hidden;           /* recorta si se desborda */
  background: var(--color-accent);
  line-height: 24px;          /* alto del banner */
}

/* Icono */
.telegram-add .social-icon {
  margin: 0 .6rem 0 0;        /* espacio a la derecha del icono */
  flex: 0 0 auto;             /* no crecer */
}

/* Texto que se desliza */
.telegram-add p {
  margin: 0;                  /* quita márgenes del <p> */
  white-space: nowrap;        /* 1 sola línea dentro del <p> */
  animation: scroll-banner 20s linear infinite;
}

/* El enlace ocupa todo el ancho disponible dentro del <p> */
.telegram-add a {
  display: inline-block;
  color: #001b4d;
  font-weight: 600;
  text-decoration: none;
}

/* Animación de desplazamiento */
@keyframes scroll-banner {
  from { transform: translateX(48); }
  to   { transform: translateX(-100%); }
}

/* Pausa cuando pasas el ratón (opcional) */
/* .telegram-add:hover p { animation-play-state: paused; }  */
.telegram-add:hover p a {
  color: #888;
}



/* Velocidad ↕: cambia 20s por 12s (más rápido) o 30s (más lento) */
@keyframes scroll-banner {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

body {
    font-size: var(--font-size-base);
    line-height: 1.5;
    font-family: var(--font-primary) !important;
}
body .dark a {
    color: var(--color-white);
}
body .footer-bottom-last {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: inherit;
}
body .footer li::before{
  display: none;
}
body .page-title > img {
    width: var(--size-logo-page-title);
    height: var(--size-logo-page-title);
    object-fit: contain;
    margin-right: 10px;
}
body .body-txt a {
    color: var(--color-accent-orange)!important;
    font-weight: 700;
}
/* menu superior desktop */
div#block-mahi-custom-logo img {
    height: var(--size-logo-header);
    width: auto;
    padding: 6px 0px !important;
}
body .header-main-container {
    padding: 5px 0;
}
body .region-primary-menu .menu a.is-active{
  color: var(--color-accent-alt);
}
body .region-primary-menu .menu a {
    display: block;
    color: var(--color-white);
    padding: 0.6rem 0;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    font-family: "Exo", sans-serif;
}
.region-primary-menu .menu > li.menu-item-active::after{
  width: 100%;
  left: 0;
}
/**/

@media (max-width: 1023px) {
    body .region-primary-menu .menu a {
      display: flex;
      flex-flow: column;
      margin: 0px;
      padding: .5rem 0 0 0;
    }
    body .region-primary-menu .menu a span{
      font-size: var(--font-size-small);
      padding: 0.3rem 0 0 0;
    }
    body .region-primary-menu .menu a .svg-inline--fa {
      font-size: 1.4rem;
    }
    body .mobile-menu-icon,
    body .close-mobile-menu{
      display: none !important;
    }
    body .primary-menu-wrapper {
      padding: .5rem 1rem 1.5rem 1rem;
      width: 100%;
      height: auto;
      overflow-y: auto;
      display: block;
      position: fixed;
      bottom: 0px;
      top: inherit;
      left: 0px;
      max-width: inherit;
      z-index: 99;
      transform: none;
      background: var(--color-dark);
      box-shadow: 0px -1px 10px var(--color-accent) !important;
    }
    body .region-primary-menu .menu {
        color: var(--color-white);
        display: flex;
        flex-flow: nowrap;
        text-align: center;
        flex-direction: row;
        gap: 1rem;
        justify-content: space-around;
    }
    body .region-primary-menu .menu > li {
      border-bottom: none;
    }
    body footer.footer.dark{
      padding-bottom: 135px;
    }
    .footer-container{
      gap: 1rem;
    }
    body .scrolltop {
      bottom: 95px;
      width: 32px;
      height: 32px;
      background: var(--color-accent-alt);
      color: var(--color-dark);
    }
    body .header-main-container {
      justify-content: center;
      align-items: center;
    }
    body div#block-mahi-custom-logo img {
      height: var(--size-logo-header-mobile);
    }
    body .main-wrapper {
      padding: .5rem 0;
    }
    body .views-view-responsive-grid.views-view-responsive-grid--horizontal {
      display: flex;
      flex-flow: column;
    }
}


.ver-competicion.is-collapsed {
  display: none;
}


body img.competi-logo {
    height: var(--size-competicion-logo);
    width: var(--size-competicion-logo);
    object-fit: contain;
}


body .feed-icons{
  display: none;
}
body .admin-toolbar__logo img {
    width: var(--size-admin-logo);
    height: auto;
    border-radius: 50%;
}
body .highlighted {
    background: var(--color-green-transparent);
}
body .region-highlighted .block {
    padding: 0.6rem 0;
}
body .breadcrumb-item a::after {
    content: ">";
    color: var(--color-dark);
    padding: 0 10px;
}
body .breadcrumb-item a,
body ol.breadcrumb-items li {
    position: relative;
    font-size: var(--font-size-small);
}
body .breadcrumb-item a,
body ol.breadcrumb-items li{
  text-transform: capitalize;
}
h1.page-title {
    text-transform: uppercase;
    font-size: var(--font-size-large);
    text-align: justify;
    font-family: "Exo", sans-serif;
}
body .breadcrumb-item a:hover{
    color: var(--color-gray-dark);
    cursor: pointer;
}

body .node-date {
    color: var(--color-dark);
}

body.page-type-article .node-meta{
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin: 0px 5px 5px 0;
  padding: 0rem;
  border-radius: 8px;
  justify-content: end;
  color: var(--color-white);
}
body.page-type-article .block-content h1 {
    padding-bottom: 20px;
}
body.page-type-article .node-content .image-field {
    width: 100%;
    box-shadow: 10px 10px 10px #cacad7 !important;
}
body a {
    color: var(--color-black);
}
.card-image img {
    border-radius: 8px;
    box-shadow: 10px 10px 10px #cacad7 !important;
}
span.blog-category {
    background: var(--color-dark);
    color: var(--color-white) !important;
    border: none;
    border-radius: 8px;
    padding: 10px 10px;
    cursor: pointer;
    align-items: center;
}
span.blog-category a {
    color: var(--color-white);
    font-size: var(--font-size-small);
}
.tags .field-item{
    display: flex;
    gap: 0.4rem;
}
.tags .field-item a {
    background: var(--color-dark);
    color: var(--color-white) !important;
    border: none;
    border-radius: 8px;
    padding: 10px 10px;
    cursor: pointer;
    align-items: center;
    display: inline-block;
}

.node-meta {
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    padding: 10px 5px 3px 5px;
    border-radius: 8px;
}
span.blog-category:hover {
    background: var(--color-accent);
    color: var(--color-dark);
}
a:active, a:hover, a:focus,
.region-primary-menu .menu > li:hover,
.region-primary-menu .menu > li:hover > a {
    color: var(--color-accent);
}

body .social-icon {
    border: 2px solid var(--color-accent);
}
body .social-icon:hover {
    background-color: var(--color-accent);
    color: var(--color-dark);
}
body .social-icon svg {
    height: 18px;
    border: none;
    width: 18px;
    object-fit: contain;
}


.main-container button, .main-container .button, .main-container .button-primary{
  background-color: var(--color-dark) !important;
  color: var(--color-white) !important;
}
.main-container button:hover, .main-container .button:hover, .main-container .button-primary:hover{
  background-color: var(--color-accent-orange) !important;
}
.main-container button::before,.main-container .button::before, .main-container .button-primary::before, .main-container .button-secondary::before, .main-container .button-dark::before{
  display: none!important;
}
.view-filters {
    background: var(--color-dark);
    border-radius: 8px;
    margin: 0px 5px;
}
.view-filters form.views-exposed-form {
    padding: 1rem 2rem;
}
.header {
    display: flex;
    gap: 0rem;
    padding: 0rem 0;
}
.dark, .sidebar .block {
    background-color: var(--color-dark);
}
body .dark a:hover {
    color: var(--color-accent-alt);
}
.page-header {
    padding: 1rem;
    background: none;
}
.view-filters label {
    color: var(--color-white);
    font-size: 18px;
    padding: 5px 10px 5px 0px;
    font-weight: bold;
}
.region-primary-menu .menu > li::after {
    background-color: var(--color-accent-alt);
}
.view-filters input[type=submit],
.view-filters input[type=button],
.view-filters input[type=reset] {
  position: relative;
  display: inline-block;
  background-color: var(--color-accent-alt);
  font-weight: bold;
  color: #000;
  padding: 6px 20px;
  border: 0;
  border-radius: 8px;
  transition: all 0.4s ease-in-out;
  margin-top: 20px;
}
.view-filters input:hover{
  background: #0f0;
  transition: all 0.4s ease-in-out;
}
select {
    border-radius: 8px;
    padding: 6px 12px;
    border: 0px solid;
}

.views-col {
    padding:.5rem;
}

.view-filters form.views-exposed-form {
    display: flex;
    gap: 2rem;
    justify-content: space-around;
    align-items: center;
}

.pronostico-card {
  background: var(--color-gray-light);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 10px 10px 10px #cacad7 !important;
  font-family: system-ui, sans-serif;
  margin: .5rem .5rem;
}
.pronostico-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0px;
}
.tags-principales {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tag-principal {
  font-size: 14px;
  background: var(--color-white);
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tag-principal a {
  color: var(--color-gray);
}
.equipos {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  font-size: 16px;
  width: 100%;
  justify-content: space-around;
}
.equipo-logo {
  width: auto;
  height: 38px;
  object-fit: contain;
  background: transparent;
  text-align: center;
  padding: 2px;
}
.vs {
  margin: 0 4px;
  color: var(--color-gray);
  display: flex;
  flex-flow: column;
  text-align: center;
}
.fecha-evento {
  text-align: center;
  width: 100%;
  margin: 2px;
  font-weight: 700;
  color: var(--color-gray);
  margin-bottom: 5px;
  font-size: .775rem;
}
.pronostico-cuerpo {
  margin-bottom: 5px;
  padding: 0px 10px;
  border-radius: 12px;
  font-size: var(--font-size-base);
}
.estado{
  text-transform: uppercase;
}
.estado-acertado {
  background-color: #90f4b6a3 !important;; /* Verde claro */
  box-shadow: 1px 2px 20px 2px #90f4b6a3 !important;
}
.estado-fallido {
  background-color: #ff00001f !important;; /* Rojo claro */
  box-shadow: 1px 2px 20px 2px #ff00001f !important;
}
.estado-nulo {
  background-color: #f3f3f3 !important;; /* Gris claro */
  box-shadow: 1px 2px 20px 2px #f3f3f3 !important;
}
.descripcion {
  font-size: 14px;
  color: #444;
  margin-bottom: 6px;
}
.titulo-pronostico {
  font-size: 15px;
  font-weight: bold;
  color: #000;
}
.pronostico-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
  border-top: 1px solid var(--color-gray-light);
  padding-top: 12px;
}
.casa-apuestas {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: space-around;
}
.casa-logo {
  width: 92px;
  height: auto;
  object-fit: contain;
}
.cuota {
  background: var(--color-white);
  border-radius: 51px;
  padding: 2px 0px;
  height: 41px;
  width: 90px;
  text-align: center;
  border: 4px solid var(--color-accent-alt);
  box-shadow: 10px 10px 10px #cacad7 !important;
}
.cuota .label {
  font-size: 12px;
  color: #777;
}
.cuota .valor {
  font-size: 16px;
  font-weight: bold;
  color: #111;
}
body .item-pronostico:hover{
  cursor: pointer !important;
}
.btn-visitar {
  background: #ff6900;
  color: #fff !important;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 18px;
  min-width: 120px;
  text-align: center;
  font-weight: bold;
  transition: all 0.4s ease-in-out;
}
.btn-visitar:hover {
  background: #0f0;
  color: #150542 !important;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.etiquetas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.tag {
  font-size: 14px;
  background: var(--color-white);
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.icono-mini {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

@media screen and (max-width: 759px) {
  .mobile-menu-icon {
    width: 50px;
    height: 40px;
    margin-right: 1rem;
  }
  body .mobile-menu-icon span{
    background-color: var(--color-accent-alt)!important;
  }
  body .pronostico-card{
    margin: .5rem 0rem;
  }
  body .cuota {
    padding: 5px 0px;
  }
  body .views-view-grid .views-col{
    width: 100% !important;
  }
  body .view-filters form.views-exposed-form {
    display: flex;
    gap: 2rem;
    justify-content: flex-start;
    align-items: center;
    flex-flow: wrap;
  }
}

/* partidos */
.partido-detalle {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background: var(--color-white);
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.cabecera-competicion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #333;
  font-size: 1.1em;
}

.cabecera-competicion .icono-mini {
  width: 24px;
  height: 24px;
}

.cabecera-evento {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  border-top: 1px solid var(--color-gray-light);
  border-bottom: 1px solid var(--color-gray-light);
  padding: 20px 0;
}

.equipo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
}

.equipo .logo-equipo {
  width: 60px;
  height: auto;
  margin-bottom: 5px;
  background: #f9f9f9;
  object-fit: contain;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0px 0px 20px var(--color-dark) !important;
}

.nombre-equipo {
  font-weight: 600;
  font-size: 1.1em;
  color: #222;
}

.vs-central {
  width: 40%;
  text-align: center;
  font-size: 1em;
  color: #666;
}
.resultado-evento {
  border-radius: 4px;
  font-size: 2rem;
  letter-spacing: 10px;
  font-weight: bold;
  display: inline-block;
  margin-top: 5px;
  text-align: center;
}
.resultado_parcial {
  font-weight: var(--font-weight-regular);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  line-height: var(--font-size-base);
  text-align: center;
  margin-top: -5px;
  margin-bottom: 15px;
  color: #2e2e48;
  letter-spacing: 5px;
}

.pronosticos-partido {
  background: #f8f8f8;
  border-left: 4px solid #049ec5;
  padding: 20px;
  border-radius: 6px;
}

.pronosticos-partido h2 {
  font-size: 1.4em;
  margin-bottom: 15px;
}




/* Estilo de partidos y pronosticos */
.estado-radio {
  display: none;
}
.lbl-estado {
  padding: 0.4rem 0.75rem;
  border-radius: 20px;
  background: var(--color-gray-light);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.estado-radio:checked + .lbl-estado,
.lbl-estado.is-active {
  background: #222;
  color: var(--color-white);
  font-weight: 600;
}
.estado-pronostico {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  text-transform: uppercase;
  margin-top: 4px;
}

.estado-pronostico.pendiente {
  background-color: #f0f0f0;
  color: var(--color-gray-dark);
}

.estado-pronostico.acertado {
  background-color: #c8f7c5;
  color: #2e7d32;
}

.estado-pronostico.fallido {
  background-color: #ffcdd2;
  color: #c62828;
}

.estado-pronostico.nulo {
  background-color: #ffe082;
  color: #ff6f00;
}


.content-evento {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  opacity: 1;
}
.content-evento.is-collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  display: none;
}
.toggle-icon {
  transition: transform 0.3s ease;
}
.toggle-icon.rotated {
  transform: rotate(180deg);
}
.competicion-header{
  position: relative;
}
.competicion-header svg.toggle-icon{
  position: absolute;
  right: 15px;
  top: 23px;
}


/* ============================
   1. BARRA SUPERIOR
   ============================ */
.pb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-green-transparent);
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1;
}
.toolbar-row {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  overflow-x: auto;
}
.tb-sep {
  width: 1px;
  height: 32px;
  background: #dfe5f5;
}

.comp-in{
  background: var(--color-green-transparent) !important;
  width: 100%;
  font-weight: var(--font-weight-regular);
}

/* -- Deportes: radio + label con imagen o icono FA -- */
.sport-radio {
  position: absolute;
  left: -9999px;
}
.lbl-sport {
  color: var(--color-white);
  width: var(--size-logo-page-title);
  height: var(--size-logo-page-title);
  border-radius: 4px;
  background-color: var(--color-dark);
  background-position: center;
  background-size: 26px;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 0.15s, background-color 0.15s;
}
/* si el radio está marcado, lo ponemos en verde */
.sport-radio:checked + .lbl-sport {
  background-color: var(--color-accent-orange) !important;
  filter: none;
  color: var(--color-white);
  font-weight: 700;
}
.lbl-sport i {
  font-size: 22px;
  color: #6c7a95;
}
.sport-radio:checked + .lbl-sport i {
  color: var(--color-white);
}

/* -- Rangos de fecha: radio + label -- */
.rango-radio {
  position: absolute;
  left: -9999px;
}
.lbl-rango, .lbl-estado {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 75px;
  height: 48px;
  padding: 0 10px;
  margin: 0 0.15rem;
  border-radius: 6px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 0.8rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.lbl-rango small {
  font-size: 0.65rem;
  color: #aaa;
  line-height: 1.2;
}
.rango-radio:checked + .lbl-rango,
.estado-radio:checked + .lbl-estado, .lbl-estado.is-active {
  background: var(--color-accent-orange);
  color: var(--color-white);
  font-weight: 700;
}
.rango-radio:checked + .lbl-rango small {
  color: var(--color-white);
}

/* -- Botón filtros -- */
#btn-filtros {
  background: var(--color-dark);
  color: var(--color-white);
  border: none;
  border-radius: 4px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 48px;
  font-size: 0.85rem;
}
#btn-filtros i {
  font-size: 1rem;
}

/* ============================
   2. PANEL LATERAL DE FILTROS
   ============================ */
#panel-filtros {
  width: 100%;
  height: 100%;
  background: var(--color-green-transparent);
  border-radius: 8px;
  box-shadow: -3px 0 15px rgba(0, 0, 0, 0.15);
  padding: 1rem 1.2rem;
  z-index: 9999;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s;
  margin: .5rem 0rem -1rem 0rem;
  position: relative;
}
#filtros-radios{
  display: flex;
  justify-content: space-around;
  gap: 2rem;
}
#panel-filtros:not([hidden]) {
  transform: translateX(0);
}
#panel-filtros header {
  position: absolute;
  right: 10px;
  top: 10px;
}
#close-filtros {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1.4rem;
  padding: 0.2rem .5rem;
  border-radius: 50%;
}
#panel-filtros h4 {
  font-size: 0.85rem;
  margin: 0.6rem 0 0.4rem;
}
#panel-filtros label {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  font-size: var(--font-size-medium);
  cursor: pointer;
  font-weight: var(--font-weight-regular);
  background-image: none!important;
}
.comp-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
/* #panel-filtros label + label {
  margin-top: 0.3rem;
} */
.radios-options {
    display: flex;
    gap: 1rem;
}
.lbl-comp {
  position: relative;
}
.lbl-comp::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: inherit;
}
#panel-filtros footer {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}
.btn-reset,
.btn-aplicar {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 0.55rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-reset {
  background: #f0f0f0;
  color: #444;
}
.btn-aplicar {
  background: var(--color-dark);
  color: var(--color-white);
}
.ver-competicion{
  text-align: center;
  padding: .5rem;
}
a.competicion-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 75px;
    height: 48px;
    padding: 0 10px;
    margin: 0 0.15rem;
    border-radius: 6px;
    background: var(--color-dark);
    color: var(--color-white);
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
a.competicion-link:hover{
  background: var(--color-accent);
  color: var(--color-dark);
  font-weight: 700;
}
/* ============================
   3. ESTILOS GENERALES DE PRONÓSTICOS / PARTIDOS
   ============================ */
.cuota {
  color: #000;
  font-size: 18px;
  font-weight: bold;
}
.competicion-header {
  background: var(--color-black);
  padding: 1rem 0.5rem;
  margin-bottom: 0rem;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
}
.competicion-header strong {
  color: #ccc;
  font-size: 0.9rem;
}
.cabecera-partido {
  color: var(--color-white);
  padding: 0 0 0rem 0;
  border-radius: 8px;
  border: 2px solid var(--color-black);
  margin: 1.5rem 0;
}
.evento {
  display: flex;
  border-radius: 8px 8px 0 0;
  align-items: center;
  justify-content: space-between;
  background: var(--color-accent);
  padding: 1rem 0.5rem;
  text-decoration: none;
  color: inherit;
}
a.evento:hover,
a.evento:hover span {
    color: var(--color-white) !important;
    background: var(--color-black);
}
.evento .equipo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 5px;
  color: #2e2e48;
}
.evento .equipo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: #2e2e48;
    flex-flow: column;
}
.evento .equipo a:hover{
  font-weight: bold;
}
.equipo span {
    min-height: 45px;
    font-weight: 600;
}
.no-pronosticos {
    text-align: center;
    font-size: 1rem;
    padding: 1rem 0;
    font-weight: 600;
    border: 1px solid var(--color-dark);
    background: var(--color-accent);
    border-radius: 8px 8px 0 0;
    margin: 1rem 0rem !important;
}

.hora {
  color: #2e2e48;
  text-align: center;
}
.evento img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 5px;
  background: #f9f9f9;
  object-fit: contain;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0px 0px 20px var(--color-dark) !important;
}
.content-evento {
  background: var(--color-white);
  padding: 0.5rem;
}
.lista-pronosticos {
  padding: 0;
  background: var(--color-gray-light);
  margin-bottom: 0.5rem;
  border: 2px solid var(--color-accent);
  border-top: 0px;
  border-radius: 0 0 8px 8px;
}
.item-pronostico {
  display: flex;
  padding: 6px 3px;
  align-items: center;
  font-size: 14px;
  background: #f9f9f9;
  justify-content: space-around;
}
.item-pronostico .contenido {
  color: #000;
}
.item-pronostico .contenido small {
  width: 100%;
  display: flex;
  gap: 0.5rem;
}
.item-pronostico .casa {
    text-align: center;
}
.item-pronostico .casa img {
  width: 105px;
}
.tag-principal-green {
  color: #2e2e48;
  font-size: var(--font-size-small);
  background: var(--color-accent);
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-block;
  align-items: center;
  margin: 0.3rem 0 0 0;
  gap: 6px;
}
.toolbar-row.fechas {
  min-height: 60px;
}
/*
.razonamiento.pastillas{
  color: #888;
  font-size: .75rem;
  padding: 15px 15px 15px 15px;
  text-align: justify;
  background: #f9f9f9;
  border-radius: 0px 0px 8px 8px;
}
.razonamiento{
  color: transparent !important;
  text-shadow: 0 0 10px #888 !important;
  font-size: .75rem;
  padding: 15px 15px 15px 15px;
  text-align: justify;
  background: #f9f9f9;
  border-radius: 0px 0px 8px 8px;
}
.field_pronostico.razonamiento{
  position: relative;
  display: flex;
  justify-content: center;
}
.field_pronostico.razonamiento.prono-clickable:after {
    content: "Mostrar";
    position: absolute;
    text-align: center;
    padding: 5px 30px;
    border-radius: 10px;
    background: #150542;
    color: #fff !important;
    font-weight: 400;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
    bottom: -34px;
}
.field_pronostico.razonamiento.prono-clickable:hover:after{
  background: #ff6900;
}
*/

/* ---------- Prono overlay & blur style ---------- */

/* estado difuminado (por defecto) */
.razonamiento {
  color: transparent !important;
  text-shadow: 0 0 10px #888 !important;
  user-select: none !important;    /* evita seleccionar el texto */
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  font-size: .75rem;
  padding: 15px;
  text-align: justify;
  background: #f9f9f9;
  border-radius: 0 0 8px 8px;
  position: relative;
}

/* si quieres mantener las pastillas legibles */
.razonamiento.pastillas {
  color: #888;
  text-shadow: none !important;
  user-select: text !important;
}

/* overlay botón central "Mostrar" (se añade con JS) */
.prono-overlay {
  position: absolute;
  inset: 0;                 /* cubrir el área del contenedor */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;     /* por defecto, para que solo el label reciba click */
  z-index: 1;
}
.prono-overlay .prono-overlay-label {
  position: absolute;
  top: 6vh;
  pointer-events: auto;
  background: #150542;
  color: #fff;
  padding: 8px 28px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.12);
  transition: transform .12s ease, background .12s ease, opacity .18s ease;
}
.prono-overlay .prono-overlay-label:focus {
  outline: 3px solid rgba(17,112,255,.18);
  outline-offset: 3px;
}

/* hover state */
.field_pronostico.razonamiento.prono-clickable:hover .prono-overlay-label,
.field_base_razonamiento.razonamiento.prono-clickable:hover .prono-overlay-label {
  background: #ff6900;
}

/* al revelar: quitar blur / permitir selección */
.prono-revealed {
  color: inherit !important;
  text-shadow: none !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}
.field_pronostico.razonamiento.prono-revealed{
  color:#000 !important;
}
.field_base_razonamiento.razonamiento.prono-revealed{
  color:#888 !important;
}

/* transiciones suaves para el overlay */
.prono-overlay.prono-hide {
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transition: opacity .26s ease, transform .26s ease;
}

/* oculta selección visual (por si el usuario selecciona sin que se revele) */
.prono-locked ::selection {
  color: transparent;
  background: transparent;
}
.prono-hide { opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; }
.prono-revealed .prono-overlay { display: none !important; }
.prono-locked .razonamiento { user-select: none; -webkit-user-select: none; -moz-user-select: none; }


/****************/



.box-pronosticos {
  display: flex;
  flex-wrap: wrap;
}
.box-pronosticos .content-evento{
  width: 50%;
}
body .solo-top-picks.box-pronosticos .content-evento .evento{
  border-radius: 0px;
}
body .solo-top-picks.box-pronosticos .competicion-header-term,
.box-pronosticos .content-evento .evento,
.box-pronosticos .content-evento .lista-pronosticos{
  box-shadow: 10px 10px 10px #cacad7 !important;
}
.field_pronostico.razonamiento {
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 30px 5px 15px 5px;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    border-radius: 8px 8px 0px 0px;
}
.field_pronostico.razonamiento.pastillas{
    padding: 5px 15px 5px 15px;
}
body.page-type-partido .box-pronosticos .content-evento{
  width: 100%
}
.datos-evento {
    display: flex;
    justify-content: center;
    flex-flow: column;
}

body.page-type-partido .box-pronosticos .content-evento .lista-pronosticos {
    background: var(--color-white);
    box-shadow: none !important;
    border:none;
}
body.page-type-partido .pronos{
  border: 2px solid var(--color-accent);
  margin: 1rem 0;
  box-shadow: 10px 10px 10px #cacad7 !important;
  border-radius: 8px;
}
body.page-type-partido .evento{
  padding: 1rem;
  margin: 0px 0px 1.5rem 0px;
  border-radius: 0px 0px 8px 8px !important;
}
body.page-type-partido .evento img {
    width: 108px;
    height: 108px;
    background: #f9f9f9;
    object-fit: contain;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0px 0px 20px var(--color-dark) !important;
}
body.page-type-partido .competicion-header-term {
    box-shadow: 10px 10px 10px #cacad7 !important;
}
body.path-taxonomy .evento{
    border-radius: 0px;
}
.competicion-header a {
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
}
.competicion-header a:hover {
    color: var(--color-accent);
}
.competicion-header-term {
    background: var(--color-accent);
    color: blue;
    padding: 8px 15px;
    border-radius: 8px 8px 0px 0px;
}
.tag-principal-grey{
    color: #2e2e48;
    font-size: var(--font-size-small);
    background: var(--color-gray-light);
    padding: 4px 8px;
    border-radius: 8px;
    display: inline-block;
    align-items: center;
    margin: 0.3rem 0 0 0;
    gap: 6px;
}
.tag-principal-grey:hover{
  background: #2e2e48;
  color: var(--color-white);
}
a.btn-visitar,
div.btn-visitar {
  padding: 1rem 2rem;
}

.question {
    cursor: pointer;
    padding: 24px;
    border-top: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    position: relative;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    transition: .3s ease-in-out;
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    color: var(--bold-color);
}
.question::before {
    content: "\f059";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 12px;
    color: var(--bold-color);
    font-size: 16px;
}
.question::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 16px;
    color: var(--bold-color);
    transition: transform .3s ease;
}
.question.open {
    background-color: var(--color-white);
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--bold-color);
    font-weight: 600;
}
.question.open::after {
    transform: rotate(180deg);
}

.response {
    display: none;
    padding: 16px 16px 16px 40px;
    border-top: 0;
    margin-bottom: 12px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bold-color);
}

body .juego-seguro {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--color-accent);
  padding: 1rem 0rem;
  margin-bottom: 2rem;
  border-top: 1px solid var(--color-accent);
}
body .juego-seguro img{
    width: auto !important;
    height: 38px !important;
    object-fit: contain;
    margin: 0.2rem 1rem;
}


@media screen and (min-width: 760px) {
  /* submenu desktop */
  .menu-item-has-children:hover > .submenu {
    visibility: visible;
    animation: slideUp 0.5s forwards;
    border: 2px solid var(--color-accent);
    border-radius: 8px;
    margin-top: -6px;
    background: var(--color-accent);
    z-index: 99;
    box-shadow: 0px -1px 10px var(--color-accent) !important;
  }
  .menu-item-has-children:hover > .submenu a{
    color: var(--color-dark);
  }
  .menu-item-has-children:hover > .submenu a.is-active,
  .menu-item-has-children:hover > .submenu a:hover{
    color: var(--color-accent-orange);
  }
}


@media screen and (max-width: 759px) {
  body .juego-seguro {
    flex-flow: column;
  }
  body .juego-seguro img{
    margin: 0.5rem 0.5rem;
  }
  body.page-type-partido .evento img {
      width: var(--size-logo-header);
      height: var(--size-logo-header);
  }
  #filtros-radios{
    flex-flow: column;
    gap: 0.1rem;
  }
  a.btn-visitar {
    padding: .5rem 1rem;
  }
  .box-pronosticos {
    display: flex;
    flex-flow: column;
  }
  .box-pronosticos .content-evento{
    width: 100%;
  }
  .tb-sep{
    display: none;
  }
  .item-pronostico .contenido {
    width: 100%;
    margin: .5rem;
  }
  .item-pronostico .contenido-2 {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 1rem 0;
  }

  /* Submenu */
  .region-primary-menu .submenu {
    display: none;
    font-size: .675rem;
    padding: 0rem 1rem .3rem 1rem;
    position: fixed;
    bottom: 80px;
    left: 0px;
    background: var(--color-dark);
    width: 100%;
    gap: 1rem;
    box-shadow: 0px -1px 10px var(--color-accent) !important;
  }
  body.path-pronosticos .region-primary-menu .submenu {
    display: flex;
  }
  .region-primary-menu .submenu li {
    border-bottom: none;
  }
  .region-primary-menu .submenu li:first-child {
    border-top: none;
  }
  .region-primary-menu .submenu a {
    font-size: .675rem;
    padding: 0px;
  }


  /* Contenedor UL */
  body.path-pronosticos .region-primary-menu .submenu {
    display: flex;                 /* coloca los <li> en fila          */
    gap: .5rem;                    /* hueco entre opciones (opcional)  */
    overflow-x: auto;              /* 🔑  scroll horizontal            */
    overflow-y: hidden;
    white-space: nowrap;           /* evita saltos de línea            */
    padding-inline: .75rem;        /* deja márgenes laterales          */

    /* suaviza desplazamiento en iOS */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;       /* desplazamiento suave (opcional)  */
  }

  /* Quitar viñetas y centrar verticalmente cada opción */
  body.path-pronosticos .region-primary-menu .submenu > li {
    list-style: none;
    flex: 0 0 auto;                /* que no se compriman              */
    display: flex;
    align-items: center;
  }

  /* (Opcional) Ocultar la barra de scroll nativa */
  body.path-pronosticos .region-primary-menu .submenu {
    scrollbar-width: none;         /* Firefox */
  }
  body.path-pronosticos .region-primary-menu .submenu::-webkit-scrollbar {
    display: none;                 /* WebKit  */
  }

}

/* Player ver partido en directo */
a#ver-partido-directo img {
  transition: transform 0.35s ease-in-out;
}
a#ver-partido-directo img:hover {
  transform: scale(1.03);
  box-shadow: 0 1px 9px #ddd;
  border-radius: 12px;
}


/* Ver tenis en directo */
.ver-pronosticos .tag-principal-grey {
    font-size: .875rem;
    margin: 0rem 0 1rem 0;
    border: 1px solid #ccc;
}
.tag-principal-grey:hover,
.tag-principal-grey:focus,
.tag-principal-grey:active{
  background: #2e2e48;
  color: var(--color-white);
}
.btn-streaming{
  float: right;
  padding-right: 32px;
  position: relative;
  border: 1px solid #ccc;
}
.btn-streaming:after {
    position: absolute;
    right: 7px;
    top: 6px;
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 7.5px;
    background: #ff6900;
    box-shadow: 0 0 #ff6900;
    animation: pulse-red 2s infinite
}

@keyframes pulse-red {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 #ff5252b3
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px #ff525200
    }

    to {
        transform: scale(.95);
        box-shadow: 0 0 #ff525200
    }
}

.btn-streaming.live-now:after {
  background: #ccc;
  box-shadow: 0 0 #ccc;
  animation: pulse-grey 2s infinite
}

@keyframes pulse-grey {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 #ccc
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px #cccccc00
    }

    to {
        transform: scale(.95);
        box-shadow: 0 0 #cccccc00
    }
}


/* terminos */
/* Preview / "ver más" style - mantiene el contenido en DOM (indexable) */
.term-description-wrapper { margin-top: 1.2rem; }
.term-description { position: relative; }
.term-desc-inner {
  max-height: 220px;               /* altura preview */
  overflow: hidden;
  transition: max-height .35s ease;
  position: relative;
  padding-bottom: 0.6rem;
  will-change: max-height;
}

/* degradado en la zona inferior para indicar "más contenido" */
.term-desc-inner::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(transparent, var(--page-bg, #ffffff));
  display: block;
}

/* estado expandido (muestra todo) */
.term-description.expanded .term-desc-inner {
  max-height: 9999px; /* muestra todo */
}
.term-description.expanded .term-desc-inner::after { display: none; }

/* botón */
.btn-toggle-desc {
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background: transparent;
  border: 1px solid #ddd;
  padding: .45rem .9rem;
  border-radius: .35rem;
  cursor: pointer;
  font-weight: 600;
  color: inherit;
  min-width: 180px;
}
.btn-toggle-desc:focus { outline: 3px solid #cce; outline-offset: 2px; }

/* Mobile tweak: reduce preview height */
@media (max-width: 640px) {
  .term-desc-inner { max-height: 160px; }
  .term-desc-inner::after { height: 56px; }
}

/* Optional: ensure paragraphs look ok */
.term-description p { margin: .6rem 0; line-height: 1.55; color: #222; }


/* Fallback simple */
.response { display: none; margin: .6rem 0; }
.response.open { display: block; }

.question { cursor: pointer; padding: .8rem 0; }
.question.open { /* marca visual si quieres */ }

.term-description { margin-top: 1.2rem; }
.term-desc-inner { max-height: 220px; overflow: hidden; transition: max-height .35s ease; position: relative; }
.term-desc-inner::after { content: ""; position: absolute; left:0; right:0; bottom:0; height:72px; background: linear-gradient(transparent, #fff); pointer-events:none; }
.term-description.expanded .term-desc-inner { max-height: 9999px; }
.btn-toggle-desc { display:inline-block; margin-top: .8rem; padding: .45rem .9rem; border:1px solid #ddd; background:transparent; cursor:pointer; }