/*
 * Criptómetro — override de estilos del motor de marcas (plugin juegos-banners).
 * Reescribe los componentes .je-brand-* a la paleta editorial del sitio
 * (navy-teal #0B4F6C + crema + ámbar #C98A00, titulares serif). Se encola
 * DESPUÉS de las hojas del plugin, así gana en cascada sin !important salvo
 * en las variantes de color de CTA (orange/red) que el plugin trae embebidas.
 */

/* ---- Tabla comparativa (formato principal: [BLOQUE_TOP_CASINOS]) ---- */
.je-brand-table{
  background:var(--cc-surface);
  border:1px solid var(--cc-border);
  border-radius:var(--cc-r-lg);
  box-shadow:var(--cc-sh-2);
  overflow:hidden;
}
/* una sola tarjeta: el wrapper es la card; la tabla interior va a ras
   (sin su propia sombra/redondeo) → sin «card dentro de card» ni márgenes raros */
.je-brand-table__tbl{box-shadow:none;border-radius:0;background:transparent;width:100%}
.je-brand-table__desktop{border-radius:0;overflow:visible;box-shadow:none}
.je-brand-table__title{
  font-family:var(--cc-font-display);
  font-weight:600;
  color:var(--cc-text);
  font-size:1.35rem;
  letter-spacing:-.01em;
  text-align:center;
  padding:var(--cc-s5) var(--cc-s5);
  margin:0;
}
/* cabecera navy legible (matchea el selector exacto del plugin .je-brand-table__tbl) */
/* anchos de columna (auto-layout): estrechar rank/valoración para dar aire a Bono.
   Sin table-layout:fixed — el reparto automático respeta mejor el contenido. */
.je-brand-table__col-rank{width:46px}
.je-brand-table__col-cta{width:152px}
.je-brand-table__rating,.je-brand-table__stars{white-space:nowrap}
/* Bono: más espacio + texto regular (no bold) */
.je-brand-table__bonus{font-weight:400;font-size:.97rem;line-height:1.42;color:var(--cc-text)}
/* Casino: logo + (nombre + licencia debajo) */
.je-brand-table__casino-inner{display:flex;align-items:center;gap:10px}
.je-brand-table__casino-meta{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.je-brand-table__casino .je-brand-table__name{font-family:var(--cc-font-display);font-weight:600;color:var(--cc-text);font-size:1.08rem;line-height:1.15}
.je-brand-table__casino .je-brand-table__license{margin:0;align-self:flex-start}
/* Valoración + CTA apilados (rating arriba, botón abajo) */
.je-brand-table__cta-cell{text-align:center;vertical-align:middle}
.je-brand-table__cta-cell .je-brand-table__rating{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:9px}
.je-brand-table__cta-cell .je-brand-table__cta{display:flex;width:100%;justify-content:center;padding:9px 12px;font-size:.9rem;line-height:1.25}

.je-brand-table__tbl thead{background:var(--cc-brand)}
.je-brand-table__tbl thead th{
  background:var(--cc-brand);
  color:#fff;
  font-family:var(--cc-font-sans);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:11px 10px;
  border-bottom:1px solid var(--cc-brand-700);
}
.je-brand-table__tbl td{padding:13px 10px;vertical-align:middle;border-bottom:1px solid var(--cc-border)}
.je-brand-table__row:nth-child(even){background:var(--cc-bg)}
/* fila #1: fondo ámbar suave + UNA franja de acento a la izquierda (no entre celdas) */
.je-brand-table__row--top{background:var(--cc-accent-50) !important}
.je-brand-table__row--top td{box-shadow:none}
.je-brand-table__row--top td:first-child{box-shadow:none!important}

.je-brand-table__rank{font-family:var(--cc-font-mono);color:var(--cc-text-muted);font-weight:600}
.je-brand-table__badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--cc-accent);color:#1c1304;
  font-weight:700;font-size:.8rem;
  padding:4px 10px;border-radius:var(--cc-r-pill);
}
.je-brand-table__name{font-family:var(--cc-font-display);font-weight:600;color:var(--cc-text);font-size:1.12rem}
.je-brand-table__license{
  background:var(--cc-brand-50);color:var(--cc-brand);
  border:1px solid #cfe0e7;border-radius:var(--cc-r-sm);
  padding:2px 8px;font-size:.76rem;font-weight:600;white-space:nowrap;
}
.je-brand-table__bonus{color:var(--cc-text);font-size:.95rem;line-height:1.45}
.je-brand-table__stars-num,.je-brand-table__rating{color:var(--cc-text);font-weight:600}
.je-rating-star--full,.je-rating-star--half{color:var(--cc-accent)}
.je-rating-star--empty{color:var(--cc-border)}

/* CTA — navy con hover, reemplaza el naranja del plugin */
.je-brand-table__cta,
.je-brand-card__cta,.je-brand-card__cta--orange,.je-brand-card__cta--red,.je-brand-card__cta--green,.je-brand-card__cta--blue,
.je-hero-card__cta,.je-hero-card__cta--red,
.je-end-cta__cta,
.je-sticky-mobile__cta,
.je-popup__cta{
  background:var(--cc-brand);
  border:1px solid var(--cc-brand);
  color:#fff;
  font-family:var(--cc-font-sans);
  font-weight:600;
  border-radius:var(--cc-r);
  box-shadow:none;
}
.je-brand-table__cta:hover,
.je-brand-card__cta:hover,.je-brand-card__cta--orange:hover,.je-brand-card__cta--red:hover,
.je-hero-card__cta:hover,.je-end-cta__cta:hover,.je-sticky-mobile__cta:hover,.je-popup__cta:hover{
  background:var(--cc-brand-700);
  border-color:var(--cc-brand-700);
  color:#fff;
}
.je-brand-card__disclaimer,.je-hero-card__disclaimer,.je-end-cta__disclaimer{
  color:var(--cc-text-muted);font-size:.78rem;padding:var(--cc-s4) var(--cc-s5);
}
/* disclaimer de la tabla: compacto, sin ocupar tanto espacio */
.je-brand-table__disclaimer{
  color:var(--cc-text-muted);font-size:.76rem;
  margin:0;padding:8px 16px 4px;
}

/* ---- Mobile cards de la tabla ---- */
.je-brand-table__mcard{
  background:var(--cc-surface);
  border:1px solid var(--cc-border);
  border-radius:var(--cc-r-lg);
  box-shadow:var(--cc-sh-1);
}
.je-brand-table__mcard--top{border-color:var(--cc-accent);box-shadow:0 0 0 1px var(--cc-accent)}
.je-brand-table__mcard-rank{background:var(--cc-accent);color:#1c1304;font-weight:700}
.je-brand-table__mcard-name{font-family:var(--cc-font-display);font-weight:600;color:var(--cc-text)}
.je-brand-table__mcard-license{background:var(--cc-brand-50);color:var(--cc-brand);border-radius:var(--cc-r-sm)}
.je-brand-table__mcard-offer{color:var(--cc-text)}

/* ---- In-content card ---- */
.je-brand-card{
  background:var(--cc-surface);
  border:1px solid var(--cc-border);
  border-radius:var(--cc-r-lg);
  box-shadow:var(--cc-sh-1);
}
.je-brand-card__name{font-family:var(--cc-font-display);color:var(--cc-text)}
.je-brand-card__badge{background:var(--cc-accent);color:#1c1304}
.je-brand-card__license{background:var(--cc-brand-50);color:var(--cc-brand)}

/* ---- Hero card ---- */
.je-hero-card{
  background:linear-gradient(135deg,var(--cc-brand-50),var(--cc-surface));
  border:1px solid var(--cc-border);border-radius:var(--cc-r-lg);
}
.je-hero-card__name{font-family:var(--cc-font-display);color:var(--cc-text)}
.je-hero-card__badge{background:var(--cc-accent);color:#1c1304}

/* ---- End-CTA grid ---- */
.je-end-cta{background:var(--cc-brand-50);border:1px solid #cfe0e7;border-radius:var(--cc-r-lg)}
.je-end-cta__title{font-family:var(--cc-font-display);color:var(--cc-text)}
.je-end-cta__card{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:var(--cc-r)}
.je-end-cta__rank-badge{background:var(--cc-accent);color:#1c1304}

/* ---- Móvil: el bloque (wrapper) ocupa todo el ancho del contenido ----
   El plugin mete padding:0 1rem en el slot en móvil → el bloque queda más
   estrecho que el texto. Lo quitamos; las cards internas conservan su espaciado. */
@media(max-width:768px){
  .je-brand-slot--listing_table{padding:0}
  /* en móvil quitamos el «card» del wrapper para no anidar card-en-card;
     quedan las mcards (cada una ya es una tarjeta) a todo el ancho del contenido */
  .je-brand-table{border:0;box-shadow:none;background:transparent;border-radius:0;overflow:visible}
  .je-brand-table__title{padding:0 0 var(--cc-s4)}
  .je-brand-table__disclaimer{padding:8px 2px 0}
}

/* ---- Sticky mobile bar ---- */
.je-sticky-mobile{background:var(--cc-surface);border-top:1px solid var(--cc-border);box-shadow:var(--cc-sh-3)}
.je-sticky-mobile__text strong{font-family:var(--cc-font-display);color:var(--cc-text)}
.je-sticky-mobile__text span{color:var(--cc-text-muted)}
.je-sticky-mobile__close{color:var(--cc-text-muted)}

/* Criptómetro 2.0 — premium advertising surfaces.
   Keep all plugin selectors and hydration contracts unchanged. */
.je-brand-slot{margin-block:clamp(28px,5vw,46px)}
.je-brand-slot--sticky_mobile{margin:0}
.je-brand-table{
  border:0;
  border-radius:20px;
  box-shadow:0 18px 50px rgba(8,19,33,.11);
}
.je-brand-table__title{
  background:#0A1A2D;
  color:#fff;
  font-family:var(--cc-font-sans);
  font-size:1.15rem;
  font-weight:750;
  text-align:center;
  padding:18px 22px;
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
.cc-prose .je-brand-table__title{max-width:none}
.je-brand-table__tbl thead,.je-brand-table__tbl thead th{
  background:#10243A;
  border-color:rgba(255,255,255,.08);
}
.je-brand-table__tbl thead th{padding:13px 11px;color:#BFCBDA}
.je-brand-table__tbl td{padding:16px 11px}
.je-brand-table__row{transition:background .18s ease}
.je-brand-table__row:hover{background:#F4FAFA}
.je-brand-table__row--top{background:#FFF8E7!important}
.je-brand-table__name,.je-brand-table__casino .je-brand-table__name{font-family:var(--cc-font-sans);font-weight:750}
.je-brand-table__badge{background:#F2A91F;color:#101A28}
.je-brand-table__cta,
.je-brand-card__cta,.je-brand-card__cta--orange,.je-brand-card__cta--red,.je-brand-card__cta--green,.je-brand-card__cta--blue,
.je-hero-card__cta,.je-hero-card__cta--red,
.je-end-cta__cta,.je-sticky-mobile__cta,.je-popup__cta{
  background:#F2A91F;
  border-color:#F2A91F;
  color:#101A28!important;
  font-weight:750;
  border-radius:11px;
  box-shadow:0 7px 20px rgba(242,169,31,.20);
}
.je-brand-table__cta:hover,
.je-brand-card__cta:hover,.je-brand-card__cta--orange:hover,.je-brand-card__cta--red:hover,
.je-hero-card__cta:hover,.je-end-cta__cta:hover,.je-sticky-mobile__cta:hover,.je-popup__cta:hover{
  background:#FFC14D;border-color:#FFC14D;color:#101A28!important;transform:translateY(-1px)
}
.je-brand-card{
  border:0;border-radius:18px;box-shadow:0 14px 38px rgba(8,19,33,.09);overflow:hidden;
}
.je-brand-card__name,.je-hero-card__name,.je-end-cta__title{font-family:var(--cc-font-sans);font-weight:750}
.je-end-cta{background:linear-gradient(135deg,#E8F8F7,#F7FBFB);border-color:#BDE8E5;border-radius:20px}
.je-end-cta__card{border:0;box-shadow:0 8px 24px rgba(8,19,33,.06)}

@media(max-width:768px){
  .je-brand-table__title{background:transparent;color:var(--cc-text);padding:0 0 14px;font-size:1.2rem}
  .je-brand-table__mcard{border:0;border-radius:17px;box-shadow:0 10px 30px rgba(8,19,33,.09)}
  .je-brand-table__mcard--top{box-shadow:0 0 0 2px #F2A91F,0 12px 34px rgba(8,19,33,.11)}
}