/* =====================================================================
   PREMIERBET — Estilos tomados del rediseño Fortuna 2026
   Se carga DESPUÉS de style.min.css para sobrescribir por cascada.
   Para desactivarlo: quitar el <link> de este archivo en theme/index.php
   ===================================================================== */

:root {
  --ft-g900: #06231a; /* fondo más oscuro */
  --ft-g850: #0a2e22;
  --ft-g800: #0d3a2a;
  --ft-g700: #124a33;
  --ft-g600: #1e9b5b; /* verde principal */
  --ft-line: #1e6444;
  --ft-gold3: #ffe23d;
  --ft-gold4: #f5c842;
  --ft-gold5: #e0a81b;
  --ft-cyan: #25e0c0;
  --ft-txt: #eafbf2;
  --ft-mut: #8fc4ac;
  --ft-ink: #06231a;
  --ft-goldg: linear-gradient(135deg, #ffe23d 0%, #f0b92c 48%, #d89a16 100%);
  --ft-radius: 16px;
  --ft-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.75);
}

/* ---------- Fondo del home: verde oscuro en TODA el área (fix gris) ---------- */
html,
body {
  background: var(--ft-g900) !important;
}
.container-fluid.fh-home {
  background: radial-gradient(1100px 560px at 84% 2%, rgba(30, 155, 91, 0.4), transparent 60%),
    radial-gradient(820px 480px at 2% 8%, rgba(255, 226, 61, 0.09), transparent 55%),
    radial-gradient(1000px 780px at 50% 122%, rgba(37, 224, 192, 0.11), transparent 62%), var(--ft-g900) !important;
}

/* =====================================================================
   HEADER  (se conservan clases y bindings de Angular; solo estilo)
   ===================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
}
.headerDesktop {
  background: linear-gradient(180deg, #0a2e22, #082820) !important;
  height: 70px !important;
  padding: 0 clamp(16px, 4vw, 48px) !important;
  border-bottom: 1px solid var(--ft-line);
  box-shadow: 0 10px 30px -20px #000;
}
.headerDesktop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--ft-goldg);
  box-shadow: 0 0 16px rgba(255, 200, 60, 0.55);
}
.headerDesktop .logo img {
  width: auto !important;
  height: 46px !important;
  max-width: 100%;
  object-fit: contain;
}

/* Botones Ingresa / Regístrate */
.boton.botonHeader {
  font-weight: 800;
  border-radius: 11px;
  padding: 9px 18px;
  transition: 0.18s;
  border: 1px solid transparent;
}
.boton.botonHeader.ingreso,
.boton.botonHeader.registro {
  background: transparent !important;
  border-color: rgba(245, 200, 66, 0.55);
  color: var(--ft-gold3) !important;
}
.boton.botonHeader.ingreso:hover,
.boton.botonHeader.registro:hover {
  background: rgba(245, 200, 66, 0.12) !important;
}
.boton.botonHeader.registrar,
a.boton.botonHeader:not(.ingreso):not(.registro) {
  background: var(--ft-goldg) !important;
  color: var(--ft-ink) !important;
  box-shadow: 0 8px 20px -8px rgba(240, 185, 44, 0.85);
}
.boton.botonHeader.registrar:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.bntSesion {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Barra inferior (reloj) */

/* Sesión de usuario / menús: acentos dorados, se conserva estructura */
.menuUserDesktop .boton.botonMenuUserDesktop {
  background: var(--ft-goldg);
  color: var(--ft-ink);
  font-weight: 800;
  border-radius: 10px;
}

/* =====================================================================
   HOME
   ===================================================================== */

/* Hero carrusel — full width, auto-rotativo, solo CSS (4 banners) */
/* height:auto = se ve la imagen COMPLETA sin recorte (los banners son panorámicos ~3.59:1) */
.fh-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: #06231a;
}

/* Sección */
.fh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fh-head h3 {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fh-head h3 b {
  color: var(--ft-gold3);
}
.fh-link {
  color: var(--ft-gold3);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Deportes (íconos 3D databet) */
.fh-sport {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: var(--ft-radius);
  cursor: pointer;
  transition: 0.22s;
}
.fh-sport img {
  object-fit: contain;
  transition: 0.22s;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}
.fh-sport span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ft-txt);
}
.fh-sport:hover {
  background: linear-gradient(180deg, #114e37, var(--ft-g850));
}
.fh-sport:hover img {
  transform: scale(1.12);
}

/* Partidos destacados */

/* Accesos rápidos */

/* Promo */

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  background: linear-gradient(180deg, #0a2e22, #051d16) !important;
  color: var(--ft-txt) !important;
  margin-top: 44px !important;
  padding: 0 !important;
}
.ff-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 32px;
  padding: 42px 0 26px;
}
.ff-social {
  display: flex;
  gap: 10px;
}
.ff-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--ft-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ft-gold4) !important;
  transition: 0.18s;
}
.ff-social a:hover {
  background: var(--ft-goldg);
  color: var(--ft-ink) !important;
  border-color: transparent;
  transform: translateY(-2px);
}
.ff-social i {
  font-size: 1.05rem;
}
.ff-col h6 {
  margin: 0 0 14px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ft-gold3);
}
.ff-col a {
  display: block;
  color: var(--ft-mut) !important;
  font-size: 0.88rem;
  padding: 6px 0;
  transition: 0.15s;
}
.ff-col a:hover {
  color: var(--ft-gold3) !important;
  padding-left: 4px;
}
.ff-legal {
  border-top: 1px solid var(--ft-line);
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.ff-legal p {
  margin: 0;
  color: var(--ft-mut);
  font-size: 0.78rem;
  max-width: 70ch;
  line-height: 1.5;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 960px) {
  .ff-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
@media (max-width: 560px) {
  .headerDesktop {
    height: 60px !important;
  }
  .headerDesktop .logo img {
    height: 36px;
  }
  .ff-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* El carrusel (.fh-track) se mantiene animado a propósito: es una función principal del home */
}

/* =====================================================================
   PREMIUM UPGRADES (secciones + logos + modal login + widget Altenar)
   ===================================================================== */
.fh-section {
  padding: 46px 0 0;
}
.fh-head {
  margin-bottom: 22px;
}

/* --- Deportes: tarjetas más premium --- */
.fh-sport {
  position: relative;
  padding: 22px 8px;
  background: linear-gradient(180deg, #0e4531, #0a2b20);
  border: 1px solid rgba(255, 226, 61, 0.14);
  overflow: hidden;
}
.fh-sport::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--ft-goldg);
  border-radius: 0 0 4px 4px;
  transition: 0.25s;
}
.fh-sport::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130px 90px at 50% 0, rgba(255, 226, 61, 0.14), transparent 70%);
  opacity: 0;
  transition: 0.25s;
  pointer-events: none;
}
.fh-sport:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 226, 61, 0.5);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.85);
}
.fh-sport:hover::before {
  width: 62%;
}
.fh-sport:hover::after {
  opacity: 1;
}
.fh-sport img {
  width: 66px;
  height: 66px;
  position: relative;
  z-index: 1;
}

/* --- Partidos destacados: logos reales + premium --- */

/* --- Accesos rápidos: overlay premium --- */

/* --- Widget Altenar (cuotas reales) --- */
.fh-altenar {
  position: relative;
  min-height: 150px;
  border-radius: var(--ft-radius);
  overflow: hidden;
  border: 1px solid var(--ft-line);
  background: radial-gradient(600px 200px at 50% 0, rgba(30, 155, 91, 0.25), transparent 70%),
    linear-gradient(180deg, #0d3a2a, #0a2e22);
}
.fh-altenar::before {
  content: "\26BD  Inicia sesión para ver los eventos y las cuotas en vivo";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--ft-mut);
  font-size: 0.92rem;
  z-index: 0;
}
.fh-altenar > * {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   MODAL DE LOGIN (Ingresa) — estilo PremierBet
   ===================================================================== */
.header .loginDesktop > md-content {
  background: linear-gradient(180deg, #0e4130, #082820) !important;
  color: var(--ft-txt);
  border: 1px solid var(--ft-line);
  border-radius: 14px;
  box-shadow: 0 24px 55px -18px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
.header .loginDesktop > md-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ft-goldg);
}
.header .loginDesktop label {
  color: var(--ft-mut) !important;
}
.header .loginDesktop input {
  color: #fff !important;
}
.header .loginDesktop md-input-container .md-input {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.header .loginDesktop md-input-container.md-input-focused .md-input {
  border-color: var(--ft-gold3) !important;
}
.header .loginDesktop md-input-container.md-input-focused label {
  color: var(--ft-gold3) !important;
}
.header .loginDesktop .fa-eye,
.header .loginDesktop .fa-eye-slash {
  color: var(--ft-gold3) !important;
}
.header .loginDesktop .md-button.md-primary {
  background: var(--ft-goldg) !important;
  color: var(--ft-ink) !important;
  font-weight: 800;
  border-radius: 10px;
}
.header .loginDesktop .md-button:not(.md-primary) {
  color: var(--ft-txt) !important;
  border: 1px solid var(--ft-line);
  border-radius: 10px;
}
.header .loginDesktop a {
  color: var(--ft-gold3) !important;
}

/* Menú de usuario (cuando está logueado) a juego */
.header .menuUserDesktop {
  background: linear-gradient(180deg, #0e4130, #082820) !important;
  border: 1px solid var(--ft-line);
  border-radius: 0 0 14px 14px;
}
.header .menuUserDesktop h4 {
  color: var(--ft-gold3);
}

/* =====================================================================
   REGISTRO (registro2.html) — estilo PremierBet
   ===================================================================== */
.register-container {
  padding: 34px 16px 64px;
  background: radial-gradient(800px 420px at 85% -5%, rgba(30, 155, 91, 0.4), transparent 60%),
    radial-gradient(600px 400px at 5% 8%, rgba(255, 226, 61, 0.1), transparent 55%), var(--ft-g900);
  font-family:
    "Montserrat",
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}
.register-container .form-cont {
  max-width: 780px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--ft-line);
  box-shadow: var(--ft-shadow);
}
.register-container md-toolbar,
.register-container .md-toolbar-tools {
  background: linear-gradient(180deg, #0e4130, #0a2e22) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 22px 20px !important;
  position: relative;
}
.register-container md-toolbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ft-goldg);
}
/* Fondo del formulario (sobreescribe el gris inline #3c3c3c) */
#frmRegistro2 {
  background: linear-gradient(180deg, #0c3728, #082820) !important;
  padding: 28px !important;
}
.register-container md-content {
  background: transparent !important;
  padding: 0 !important;
}

/* Inputs / labels */
.register-container input,
.register-container .md-input {
  color: #fff !important;
}
.register-container md-input-container label,
.register-container .date-birth-label {
  color: var(--ft-mut) !important;
}
.register-container md-input-container .md-input {
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.register-container md-input-container.md-input-focused label {
  color: var(--ft-gold3) !important;
}
.register-container md-input-container.md-input-focused .md-input {
  border-color: var(--ft-gold3) !important;
}
.register-container md-input-container.md-input-focused .md-input {
  box-shadow: inset 0 -1px 0 0 var(--ft-gold3);
}
.register-container md-input-container.md-input-invalid .md-input {
  border-color: #ff6b6b !important;
}
.register-container md-input-container.md-input-invalid label {
  color: #ff8a8a !important;
}

/* Íconos (ojo, check, etc.) */
.register-container md-icon.fa,
.register-container .fa-eye,
.register-container .fa-eye-slash {
  color: var(--ft-gold3) !important;
}
.register-container .fa-check {
  color: #3ad07f !important;
}

/* Select y datepicker */
.register-container md-select .md-select-value {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.register-container md-select .md-select-value.md-select-placeholder {
  color: var(--ft-mut) !important;
}
.register-container .md-datepicker-input-container {
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.register-container .md-datepicker-button md-icon {
  color: var(--ft-gold3) !important;
}

/* Texto legal + enlaces (sobreescribe el cian inline) */
.register-container .legal-text {
  color: var(--ft-mut) !important;
  font-size: 0.86rem;
}
.register-container .legal-text a {
  color: var(--ft-gold3) !important;
  font-weight: 700;
}
.register-container .md-checkbox-checked .md-icon {
  background: var(--ft-gold5) !important;
}

/* Mensajes de validación */
.register-container [role="alert"] div {
  color: #ff8a8a !important;
  font-size: 0.76rem;
}

/* Botón finalizar */
.register-container .container-button {
  align-items: center;
}
.register-container .button-registro {
  background: var(--ft-goldg) !important;
  color: var(--ft-ink) !important;
  font-weight: 900;
  border-radius: 12px;
  height: 48px;
  min-width: 220px;
  font-size: 1rem;
  text-transform: none;
  box-shadow: 0 12px 26px -10px rgba(240, 185, 44, 0.9);
  transition: 0.18s;
}
.register-container .button-registro:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Datepicker (Fecha de nacimiento) */
.register-container md-datepicker {
  background: transparent !important;
  padding: 0 !important;
  display: block;
  width: 100%;
}
.register-container .md-datepicker-input-container {
  margin-left: 0 !important;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.register-container md-datepicker.md-datepicker-focused .md-datepicker-input-container {
  border-bottom-color: var(--ft-gold3) !important;
}
.register-container .md-datepicker-input {
  color: #fff !important;
  background: transparent !important;
  font-size: 14px;
  width: 100%;
}
.register-container .md-datepicker-input::-webkit-input-placeholder {
  color: var(--ft-mut) !important;
}
.register-container .md-datepicker-input::placeholder {
  color: var(--ft-mut) !important;
}
.register-container .md-datepicker-button {
  margin: 0 -6px 0 0;
}
.register-container .md-datepicker-calendar-icon {
  fill: var(--ft-gold3) !important;
}
.register-container .md-datepicker-triangle-button .md-datepicker-expand-triangle {
  border-top-color: var(--ft-gold3) !important;
}

/* Fecha de nacimiento con 3 selects (día/mes/año) */

/* Popup países excluidos */
.register-container .containerExclusion {
  background: rgba(6, 35, 26, 0.92) !important;
}
.register-container .exclusionPaises {
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--ft-gold5);
}

@media (max-width: 560px) {
  .register-container {
    padding: 20px 10px 44px;
  }
  #frmRegistro2 {
    padding: 18px !important;
  }
  .register-container .form-cont {
    border-radius: 14px;
  }
}

/* --- Responsive premium --- */
@media (max-width: 560px) {
  .fh-sport img {
    width: 52px;
    height: 52px;
  }
}

/* =====================================================================
   REFUERZO PREMIUM HOME (más llamativo sobre fondo verde oscuro)
   ===================================================================== */
.fh-home .fh-head h3 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Deportes: tarjeta con glow tras el ícono + borde dorado sutil permanente */
.fh-home .fh-sport {
  background: linear-gradient(180deg, #0f4d36, #0a2b20);
  border: 1px solid rgba(255, 226, 61, 0.2);
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.7);
}
.fh-home .fh-sport img {
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}
.fh-home .fh-sport:hover {
  border-color: var(--ft-gold3);
  box-shadow:
    0 20px 38px -16px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 226, 61, 0.25);
}

/* Partidos: sombra y realce premium */

/* Accesos rápidos: realce */

/* =====================================================================
   CASINO LOBBY — estilo PremierBet (fondo trébol + grid premium)
   ===================================================================== */
.container-fluid.new-casino {
  background:
    linear-gradient(
      180deg,
      rgba(6, 35, 26, 0.35) 0%,
      rgba(6, 35, 26, 0.62) 32%,
      rgba(6, 35, 26, 0.94) 62%,
      var(--ft-g900) 82%
    ),
    url("../assets/fondocasino.jpg") center top/100% auto no-repeat,
    var(--ft-g900) !important;
  min-height: 100vh;
  padding: 0 0 46px !important;
  color: var(--ft-txt);
  font-family:
    "Montserrat",
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}
/* Banner */
.new-casino .casino-banner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 16px 8px;
}
.new-casino .casino-banner img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: var(--ft-shadow);
  border: 1px solid var(--ft-line);
}

/* Botones de categoría (pills doradas) */
.new-casino .headerCasino {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 16px 4px !important;
  background: transparent !important;
  border: 0 !important;
}
.new-casino .casino_secciones {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}
.new-casino .casino_secciones-boton {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ft-line);
  color: var(--ft-txt) !important;
  font-weight: 700;
  font-size: 0.85rem;
  width: auto !important;
  height: auto !important;
  transition: 0.18s;
}
.new-casino .casino_secciones-boton svg {
  width: 20px;
  height: 20px;
  stroke: var(--ft-gold3);
  margin: 0 !important;
}
.new-casino .casino_secciones-boton:hover {
  background: var(--ft-goldg);
  color: var(--ft-ink) !important;
  border-color: transparent;
  transform: translateY(-2px);
}
.new-casino .casino_secciones-boton:hover svg {
  stroke: var(--ft-ink);
}

/* Buscador */
.new-casino .buscadorCasino {
  max-width: 1240px;
  margin: 8px auto 0;
  padding: 0 16px;
  display: flex;
  justify-content: center;
}
.new-casino .buscador {
  display: flex !important;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ft-line);
  border-radius: 999px;
  padding: 4px 6px 4px 18px;
  max-width: 440px;
  width: 100%;
}
.new-casino .buscador input {
  background: transparent !important;
  border: 0 !important;
  outline: none;
  color: #fff !important;
  flex: 1;
  font-size: 0.9rem;
}
.new-casino .buscador input::placeholder {
  color: var(--ft-mut);
}
.new-casino .buscador span {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--ft-goldg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ft-ink);
}
.new-casino .buscador span em {
  color: var(--ft-ink);
}

/* Ocultar íconos decorativos laterales */
.new-casino .columnIcons {
  display: none !important;
}
.new-casino .bodyCasino {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 16px 0 !important;
  display: block !important;
}

/* Grid de juegos (imágenes cuadradas 200x200) */
.new-casino .juegosCont {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}
.new-casino .juego {
  position: relative;
  border-radius: 14px !important;
  overflow: hidden;
  cursor: pointer;
  background: #0a2e22 !important;
  border: 1px solid var(--ft-line);
  transition: 0.2s;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.7);
  width: auto !important;
  margin: 0 !important;
}
.new-casino .juego img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  transition: 0.3s;
}
.new-casino .juego > div {
  padding: 9px 10px !important;
  background: linear-gradient(0deg, #082820, #0d3a2a);
  margin: 0 !important;
}
.new-casino .juego > div span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ft-txt);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.new-casino .juego::after {
  content: "\25B6";
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ft-goldg);
  color: var(--ft-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  opacity: 0;
  transition: 0.22s;
  z-index: 2;
  padding-left: 3px;
  box-sizing: border-box;
}
.new-casino .juego:hover {
  transform: translateY(-5px);
  border-color: var(--ft-gold3);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.9);
}
.new-casino .juego:hover img {
  transform: scale(1.08);
  filter: brightness(0.62);
}
.new-casino .juego:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Botón cargar más */

@media (min-width: 1100px) {
  .new-casino .juegosCont {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}
@media (max-width: 560px) {
  .new-casino .juegosCont {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .new-casino .casino_secciones-boton {
    padding: 8px 12px !important;
    font-size: 0.78rem;
  }
  .new-casino .casino-banner {
    padding: 12px 12px 6px;
  }
}

/* =====================================================================
   FIXES: ojo contraseña, botones login, header logueado, md-dialogs
   ===================================================================== */

/* Ojo de la contraseña (registro) — botón clickeable a la derecha */

/* Alineación / aire del registro */
.register-container form [layout="row"] {
  gap: 22px;
}
.register-container md-input-container.md-block {
  margin-bottom: 12px;
}

/* Botones del modal de login (Ingresar / Cerrar) */
.header .loginDesktop md-button.md-button.md-primary {
  background: var(--ft-goldg) !important;
  color: var(--ft-ink) !important;
  font-weight: 800;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px -8px rgba(240, 185, 44, 0.9) !important;
}
.header .loginDesktop md-button.md-button:not(.md-primary) {
  background: transparent !important;
  color: var(--ft-gold3) !important;
  border: 1px solid rgba(245, 200, 66, 0.5) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  font-weight: 700;
}
.header .loginDesktop md-button.md-button:not(.md-primary):hover {
  background: rgba(245, 200, 66, 0.12) !important;
}

/* Header cuando el usuario está logueado */
.headerDesktop .sesionUser {
  display: flex;
  align-items: center;
}
.headerDesktop .botonInfoUser {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 14px;
  border: 1px solid var(--ft-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.headerDesktop .botonInfoUser > div {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: right;
  gap: 2px;
}
.headerDesktop .botonInfoUser > div > span {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.headerDesktop .botonInfoUser .fontColor {
  color: var(--ft-txt) !important;
  font-weight: 700;
  font-size: 0.86rem;
}
.headerDesktop .botonInfoUser .idUser {
  color: var(--ft-gold3) !important;
  font-weight: 800;
  font-size: 0.8rem;
}
.headerDesktop .botonInfoUser > span.icon-people {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ft-goldg);
  color: var(--ft-ink) !important;
  cursor: pointer;
  flex-shrink: 0;
}
.headerDesktop .botonInfoUser > span.icon-people i {
  color: var(--ft-ink) !important;
}
/* Fix: la hamburguesa (fa-bars) salía encima del glifo de persona -> ocultarla, dejar el icono de usuario limpio */
.headerDesktop .botonInfoUser > span.icon-people.icon-w-bars i,
.botonInfoUser .icon-w-bars i {
  display: none !important;
}

/* ===== md-dialog (alertas / popups) con estilo PremierBet + logo ===== */
md-dialog {
  background: linear-gradient(180deg, #0e4130, #082820) !important;
  border: 1px solid var(--ft-line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  color: var(--ft-txt) !important;
  box-shadow: 0 26px 64px -22px rgba(0, 0, 0, 0.9) !important;
}
md-dialog::before {
  content: "";
  display: block;
  height: 58px;
  flex-shrink: 0;
  background: #071f17
    url("https://objectstorage.sa-bogota-1.oraclecloud.com/n/axwjzswungq4/b/Databet_/o/User%2Fhome%2Flogos%2Flogo.png")
    center/auto 30px no-repeat;
  border-bottom: 2px solid transparent;
  border-image: var(--ft-goldg) 1;
}
md-dialog .md-title,
md-dialog h2.md-title {
  color: var(--ft-gold3) !important;
  font-weight: 800;
}
md-dialog .md-dialog-content {
  color: var(--ft-txt) !important;
  padding-top: 14px !important;
}
md-dialog .md-dialog-content-body,
md-dialog .md-dialog-content p,
md-dialog .md-dialog-content span {
  color: var(--ft-txt) !important;
}
md-dialog md-dialog-actions .md-button {
  color: var(--ft-gold3) !important;
  font-weight: 700;
  border-radius: 10px;
}
md-dialog md-dialog-actions .md-button.md-primary,
md-dialog md-dialog-actions .md-button:last-child {
  background: var(--ft-goldg) !important;
  color: var(--ft-ink) !important;
}
.md-dialog-container .md-dialog-backdrop,
md-backdrop.md-dialog-backdrop {
  background: rgba(4, 20, 15, 0.7) !important;
}

/* =====================================================================
   SISTEMA DE FORMULARIOS FORTUNA (.ft-form-page) — perfil, retiro,
   movimientos, preguntas de seguridad
   ===================================================================== */
.ft-form-page {
  padding: 34px 16px 60px !important;
  color: var(--ft-txt);
  font-family:
    "Montserrat",
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  background: radial-gradient(800px 420px at 85% -5%, rgba(30, 155, 91, 0.32), transparent 60%),
    radial-gradient(600px 400px at 5% 8%, rgba(255, 226, 61, 0.08), transparent 55%), var(--ft-g900) !important;
  min-height: 100vh;
}
.ft-form-page [layout="row"] {
  gap: 22px;
}

/* Inputs / labels / selects Material dentro de .ft-form-page */
.ft-form-page md-input-container {
  margin: 6px 0 14px !important;
}
.ft-form-page md-input-container label,
.ft-form-page label {
  color: var(--ft-mut) !important;
}
.ft-form-page input,
.ft-form-page .md-input,
.ft-form-page md-select .md-select-value {
  color: #fff !important;
}
.ft-form-page input,
.ft-form-page .retiro-input {
  background: transparent !important;
}
.ft-form-page md-input-container .md-input {
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.ft-form-page md-input-container.md-input-focused .md-input {
  border-color: var(--ft-gold3) !important;
}
.ft-form-page md-input-container.md-input-focused label {
  color: var(--ft-gold3) !important;
}
.ft-form-page md-select .md-select-value {
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.ft-form-page md-select .md-select-value.md-select-placeholder {
  color: var(--ft-mut) !important;
}
.ft-form-page md-select .md-select-icon {
  color: var(--ft-gold3) !important;
}
.ft-form-page input::placeholder {
  color: var(--ft-mut) !important;
}
.ft-form-page [role="alert"] div {
  color: #ff8a8a !important;
  font-size: 0.76rem;
}

/* Ojo de respuestas (preguntas de seguridad) */
.ft-form-page .input-group-addon.contra-flex {
  position: absolute;
  right: 2px;
  bottom: 6px;
  background: transparent;
  border: 0;
}
.ft-form-page .input-group-addon.contra-flex a i {
  color: var(--ft-gold3) !important;
}

/* Botones dorados */
.ft-form-page .md-button.md-primary,
.ft-form-page .retiro-button {
  background: var(--ft-goldg) !important;
  color: var(--ft-ink) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 0 28px;
  height: 46px;
  text-transform: none;
  box-shadow: 0 12px 26px -10px rgba(240, 185, 44, 0.9) !important;
}
.ft-form-page .retiro-button:hover {
  background: linear-gradient(135deg, #ffe23d, #e9b62c) !important;
  filter: brightness(1.05);
}

/* Encabezados / toolbars viejos dentro del form */
.ft-form-page md-toolbar,
.ft-form-page .md-toolbar-tools,
.ft-form-page .retiro-titulo {
  background: transparent !important;
  color: var(--ft-gold3) !important;
  height: auto !important;
  min-height: 0 !important;
}
.ft-form-page .retiro-titulo {
  font-weight: 900;
  font-size: 1.5rem;
  padding: 0;
}

/* Tablas (mis-movimientos) */
.ft-form-page table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ft-txt);
  background: #0a2e22;
  border-radius: 12px;
  overflow: hidden;
}
.ft-form-page table thead th,
.ft-form-page table th {
  background: #0e4130 !important;
  color: var(--ft-gold3) !important;
  padding: 12px 10px;
  font-size: 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--ft-line);
}
.ft-form-page table td {
  padding: 11px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
}
.ft-form-page table tr:hover td,
.ft-form-page table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 600px) {
  .ft-form-page {
    padding: 20px 10px 44px !important;
  }
  .ft-form-page [layout="row"] {
    gap: 0;
  }
}

/* =====================================================================
   DASHBOARD (mis-movimientos, mi-perfil) — theming oscuro PremierBet
   ===================================================================== */
.ft-dash-page {
  color: var(--ft-txt);
}
.ft-dash-page .titulo-perfil,
.ft-dash-page > md-toolbar,
.ft-dash-page md-toolbar {
  background: linear-gradient(180deg, #0e4130, #0a2e22) !important;
  border-bottom: 2px solid transparent;
  border-image: var(--ft-goldg) 1;
}
.ft-dash-page .md-toolbar-tools,
.ft-dash-page .titulo-perfil h3 {
  color: var(--ft-gold3) !important;
  font-weight: 800;
}
.ft-dash-page md-content,
.ft-dash-page .perfil-content {
  background: transparent !important;
}
.ft-dash-page strong,
.ft-dash-page label {
  color: var(--ft-txt) !important;
}
.ft-dash-page input,
.ft-dash-page .perfil-input,
.ft-dash-page md-select .md-select-value {
  color: #fff !important;
}
.ft-dash-page md-select .md-select-icon {
  color: var(--ft-gold3) !important;
}
.ft-dash-page md-input-container .md-input {
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.ft-dash-page md-input-container.md-input-focused .md-input {
  border-color: var(--ft-gold3) !important;
}

/* Tabs (md-nav-bar) */
.ft-dash-page md-nav-bar {
  background: #0a2e22 !important;
  border: 1px solid var(--ft-line);
  border-radius: 12px;
  padding: 2px;
}
.ft-dash-page md-nav-item .md-button._md-nav-button {
  color: var(--ft-mut) !important;
  font-weight: 700;
}
.ft-dash-page md-nav-item .md-button._md-nav-button.md-active,
.ft-dash-page md-nav-item .md-button.md-primary {
  background: var(--ft-goldg) !important;
  color: var(--ft-ink) !important;
  border-radius: 8px;
}
.ft-dash-page .md-nav-bar ._md-nav-bar-list {
  border: 0;
}

/* Botones */
.ft-dash-page .perfil-button-ad,
.ft-dash-page .md-button.md-raised.md-primary {
  background: var(--ft-goldg) !important;
  color: var(--ft-ink) !important;
  font-weight: 800;
  border-radius: 10px;
}

/* ui-grid (tablas de datos) en oscuro */
.ft-dash-page .ui-grid,
.ft-dash-page .grid {
  background: #0a2e22 !important;
  border: 1px solid var(--ft-line) !important;
  border-radius: 12px;
  color: var(--ft-txt) !important;
  overflow: hidden;
}
.ft-dash-page .ui-grid-header,
.ft-dash-page .ui-grid-header-viewport,
.ft-dash-page .ui-grid-header-canvas {
  background: #0e4130 !important;
}
.ft-dash-page .ui-grid-header-cell {
  background: #0e4130 !important;
  border-color: var(--ft-line) !important;
}
.ft-dash-page .ui-grid-header-cell .ui-grid-cell-contents,
.ft-dash-page .ui-grid-header-cell-row,
.ft-dash-page .ui-grid-header-cell-label {
  color: var(--ft-gold3) !important;
  font-weight: 700;
}
.ft-dash-page .ui-grid-viewport,
.ft-dash-page .ui-grid-canvas,
.ft-dash-page .ui-grid-render-container {
  background: #0a2e22 !important;
}
.ft-dash-page .ui-grid-row .ui-grid-cell {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
.ft-dash-page .ui-grid-row:nth-child(even) .ui-grid-cell {
  background: rgba(255, 255, 255, 0.025) !important;
}
.ft-dash-page .ui-grid-cell-contents {
  color: var(--ft-txt) !important;
}
.ft-dash-page .ui-grid-pager-panel,
.ft-dash-page .ui-grid-footer-panel,
.ft-dash-page .ui-grid-footer {
  background: #0e4130 !important;
  color: var(--ft-txt) !important;
  border-color: var(--ft-line) !important;
}
.ft-dash-page .ui-grid-pager-control button,
.ft-dash-page .ui-grid-pager-row-count-picker {
  color: var(--ft-txt) !important;
}

/* mi-perfil: overrides de estilos inline que dejaban texto oscuro */
.ft-dash-page .md-label,
.ft-dash-page md-card-title-text,
.ft-dash-page md-input-container > span {
  color: var(--ft-txt) !important;
}
.ft-dash-page md-card {
  background: #0a2e22 !important;
  color: var(--ft-txt) !important;
  border: 1px solid var(--ft-line);
}
.ft-dash-page md-card md-card-title-text .md-headline {
  color: var(--ft-gold3) !important;
}
.ft-dash-page input,
.ft-dash-page textarea {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px;
}

/* =====================================================================
   DASHBOARD ROBUSTO — ataca clases base compartidas
   (cuenta-de-juego, mi-perfil, mis-movimientos) sin depender de ft-dash-page
   ===================================================================== */
.content.container-fluid,
.container-fluid.content {
  background: var(--ft-g900) !important;
  color: var(--ft-txt) !important;
}
.perfil-content,
md-content.perfil-content,
.perfil-content.md-padding {
  background: transparent !important;
  color: var(--ft-txt) !important;
}

/* Barra de título verde brillante -> verde oscuro PremierBet */
md-toolbar.titulo-perfil,
.titulo-perfil,
.titulo-perfil .md-toolbar-tools {
  background: linear-gradient(180deg, #0e4130, #0a2e22) !important;
  color: var(--ft-gold3) !important;
}
.titulo-perfil h3,
.titulo-perfil .md-toolbar-tools {
  color: var(--ft-gold3) !important;
  font-weight: 800;
}
.titulo-perfil {
  border-bottom: 3px solid transparent;
  border-image: var(--ft-goldg) 1;
}

/* Tabs (md-nav-bar) -> pills doradas */
md-nav-bar {
  background: transparent !important;
}
md-nav-bar ._md-nav-bar-list,
md-nav-bar nav ul {
  background: #0a2e22 !important;
  border: 1px solid var(--ft-line) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  list-style: none;
}
md-nav-bar .md-button._md-nav-button {
  color: var(--ft-mut) !important;
  background: transparent !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  margin: 0 2px !important;
  min-width: auto;
}
md-nav-bar .md-button._md-nav-button.md-active,
md-nav-bar .md-button._md-nav-button.md-primary,
md-nav-bar .md-button._md-nav-button.md-accent {
  background: var(--ft-goldg) !important;
  color: var(--ft-ink) !important;
}
md-nav-bar md-nav-ink-bar {
  display: none !important;
}

/* Labels y textos legibles */
.perfil-content strong,
.perfil-content label,
.perfil-content span,
.perfil-content .md-label {
  color: var(--ft-txt) !important;
}

/* Inputs / selects */
.perfil-input,
.perfil-content input,
.content input[type="text"],
.content input[type="password"] {
  background: rgba(0, 0, 0, 0.3) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 9px !important;
  padding: 10px 12px !important;
}
.perfil-content input::placeholder {
  color: var(--ft-mut) !important;
}
.perfil-content md-select .md-select-value {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.perfil-content md-select .md-select-icon {
  color: var(--ft-gold3) !important;
}

/* Botones (mata el azul/blanco base) */
.perfil-button-ad,
.perfil-content .md-button.md-primary,
.perfil-content .md-button.md-raised.md-primary,
.perfil-content button.md-raised.md-button.md-ink-ripple {
  background: var(--ft-goldg) !important;
  color: var(--ft-ink) !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
}

/* ===== ui-grid (tablas) en oscuro PremierBet ===== */
.ui-grid,
.grid {
  background: #0a2e22 !important;
  border: 1px solid var(--ft-line) !important;
  border-radius: 12px !important;
  color: var(--ft-txt) !important;
  overflow: hidden;
}
.ui-grid-top-panel,
.ui-grid-header,
.ui-grid-header-viewport,
.ui-grid-header-canvas {
  background: #0e4130 !important;
}
.ui-grid-header-cell,
.ui-grid-header-cell-wrapper {
  background: #0e4130 !important;
  border-color: var(--ft-line) !important;
}
.ui-grid-header-cell .ui-grid-cell-contents,
.ui-grid-header-cell-label,
.ui-grid-header-cell-row {
  color: var(--ft-gold3) !important;
  font-weight: 700;
}
.ui-grid-render-container,
.ui-grid-viewport,
.ui-grid-canvas,
.ui-grid-render-container-body {
  background: #0a2e22 !important;
}
.ui-grid-row .ui-grid-cell {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
  background: rgba(255, 255, 255, 0.025) !important;
}
.ui-grid-cell-contents {
  color: var(--ft-txt) !important;
}
.ui-grid-pager-panel,
.ui-grid-footer-panel,
.ui-grid-footer,
.ui-grid-pager-row-count-picker {
  background: #0e4130 !important;
  color: var(--ft-txt) !important;
  border-color: var(--ft-line) !important;
}
.ui-grid-pager-control input,
.ui-grid-pager-count,
.ui-grid-pager-row-count-label,
.ui-grid-pager-max-pages-number {
  color: var(--ft-txt) !important;
}
.ui-grid-filter-container input {
  background: rgba(0, 0, 0, 0.32) !important;
  color: #fff !important;
  border: 1px solid var(--ft-line) !important;
  border-radius: 6px;
}
.ui-grid-icon-angle-down:before,
.ui-grid-column-menu-button,
.ui-grid-menu-button {
  color: var(--ft-gold3) !important;
}
.ui-grid-column-menu .ui-grid-menu-inner {
  background: #0e4130 !important;
  color: var(--ft-txt) !important;
}

/* =====================================================================
   RECARGA PASARELA
   ===================================================================== */
.rrCont {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 16px 60px;
  color: var(--ft-txt);
  font-family:
    "Montserrat",
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}
.rrRecargas .cont {
  background: linear-gradient(180deg, #0c3728, #082820);
  border: 1px solid var(--ft-line);
  border-radius: 18px;
  padding: 32px 26px;
  box-shadow: var(--ft-shadow);
}
.rrTitle {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.rrTetx {
  text-align: center;
}
.rrTetx p {
  display: none;
}
.rrTetx h3 {
  margin: 0;
  color: var(--ft-gold3);
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 1.5rem;
}

/* Refuerzo: barra de título y contenido azul (#141746) de las tabs */
.content.container-fluid > md-toolbar.titulo-perfil,
.content > md-toolbar.titulo-perfil,
body md-toolbar.titulo-perfil {
  background: linear-gradient(180deg, #0e4130, #0a2e22) !important;
}
.perfil-content [style*="141746"],
[style*="background-color: #141746"],
[style*="background-color:#141746"] {
  background-color: #0a2e22 !important;
  background: linear-gradient(180deg, #0d3a2a, #0a2e22) !important;
  border-radius: 12px;
  color: var(--ft-txt) !important;
}

/* =====================================================================
   FIX FINAL: gris base (.container-fluid #e4e4e4) + toolbars verdes (Material)
   ===================================================================== */
.container-fluid {
  background: var(--ft-g900) !important;
}
.container-fluid md-toolbar,
.container-fluid > md-toolbar,
.container-fluid md-toolbar._md,
.container-fluid md-toolbar.md-default-theme {
  background: linear-gradient(180deg, #0e4130, #0a2e22) !important;
  background-color: #0e4130 !important;
}
.container-fluid md-toolbar .md-toolbar-tools,
.container-fluid md-toolbar h3 {
  color: var(--ft-gold3) !important;
}

/* =====================================================================
   AJUSTES PREMIERBET
   La estructura de las vistas de premierbet es distinta a la de fortuna;
   aquí se adapta la paleta y se protege el layout propio.
   ===================================================================== */

/* Paleta base de premierbet (--databet-*) -> paleta Fortuna, para que los
   componentes propios (aside, menú móvil, tarjetas, casino) queden a juego */
:root {
  --databet-bg: var(--ft-g900);
  --databet-surface: var(--ft-g800);
  --databet-surface-dark: var(--ft-g850);
  --databet-surface-light: var(--ft-g700);
  --databet-blue: var(--ft-g600);
  --databet-light-blue: var(--ft-gold3);
  --databet-stroke: var(--ft-line);
}

/* Header: se conserva el layout de premierbet (anchos del menú y botones) */
.encabezado {
  background: var(--ft-g850);
}
.header .botones-cont.bntSesion {
  width: 30%;
  justify-content: flex-end;
}
.header .botones-cont .boton.botonHeader {
  width: 120px;
  height: 40px;
  margin: 0;
  padding: 0 14px;
  font-size: 14px;
}
.header .recharge-btn .recargar {
  background: var(--ft-goldg);
  color: var(--ft-ink);
  font-weight: 800;
  border: 0;
  border-radius: 10px;
}
@media (max-width: 599px) {
  .headerDesktop.menu {
    height: auto !important;
  }
  .header .botones-cont .boton.botonHeader {
    width: 88px;
  }
}

/* Footer de premierbet con los colores del footer Fortuna */
.footer-contain {
  background: linear-gradient(180deg, #0a2e22, #051d16) !important;
  color: var(--ft-txt);
  border-top: 3px solid transparent;
  border-image: var(--ft-goldg) 1;
}
.footer-contain h5 {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ft-gold3);
}

/* Margen izquierdo del contenido según el aside (ng-class "content-expanded").
   La base de Fortuna trae .container-fluid{padding:0 !important}, que anulaba
   .content / .content-expanded en home, casino, mi-perfil y retiro. */
.content.container-fluid {
  padding-left: 17.5% !important;
  transition: padding-left ease-in-out 0.3s;
}
.content.container-fluid.content-expanded {
  padding-left: 6% !important;
}
@media (max-width: 599px) {
  .content.container-fluid,
  .content.container-fluid.content-expanded {
    padding-left: 0 !important;
  }
}