/* =========================================================
   GANASTE — MERCADOS ADICIONALES / DISEÑO COMPACTO UI2
   Basado en la referencia visual suministrada por el usuario.
   Solo presentación: no cambia datos, MySQL ni validaciones.
   ========================================================= */

/* Panel continuo: sin tarjetas separadas ni espacios entre módulos */
.mercados-extra--catalogo{
  grid-template-columns:1fr !important;
  gap:0 !important;
  padding:0 !important;
  border-top:1px solid #080b27 !important;
  background:#11164f !important;
}

/* Cada mercado es una franja horizontal como en la referencia */
.mercados-extra--catalogo .mercado-expandido{
  display:grid !important;
  grid-template-columns:minmax(300px,43%) minmax(0,57%) !important;
  align-items:start !important;
  gap:16px !important;
  margin:0 !important;
  padding:6px 28px 6px 18px !important;
  border:0 !important;
  border-bottom:1px solid #07091f !important;
  border-radius:0 !important;
  background:#11164f !important;
  box-shadow:none !important;
}

.mercados-extra--catalogo .mercado-expandido:last-child{
  border-bottom:0 !important;
}

/* Nombre del mercado: blanco y alineado con la primera línea de cuotas */
.mercados-extra--catalogo .mercado-expandido__titulo{
  margin:0 !important;
  min-height:43px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 2px !important;
  color:#f7f7fb !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
}

/* Rejillas de cuotas */
.mercado-opciones{
  display:grid !important;
  gap:8px 18px !important;
  min-width:0 !important;
}

.mercado-opciones--2{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.mercado-opciones--3{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

/* Cuota compacta: etiqueta + valor en bloque separado */
.mercados-extra--catalogo .cuota{
  min-width:0 !important;
  min-height:43px !important;
  height:43px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:stretch !important;
  gap:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  border:1px solid #2944d8 !important;
  border-radius:6px !important;
  background:#1b245f !important;
  box-shadow:none !important;
}

.mercados-extra--catalogo .cuota span{
  min-width:0 !important;
  margin:0 !important;
  padding:0 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:right !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:#ffd02e !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
}

.mercados-extra--catalogo .cuota strong{
  min-width:54px !important;
  height:100% !important;
  padding:0 7px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:stretch !important;
  background:#2638d6 !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

.mercados-extra--catalogo .cuota:hover:not(:disabled){
  filter:brightness(1.09) !important;
}

/* Selección activa estilo Tinbet:
   SOLO el bloque numérico de la cuota cambia de color.
   La etiqueta del mercado conserva el fondo normal. */
.mercados-extra--catalogo .cuota.activa{
  border-color:#2944d8 !important;
  background:#1b245f !important;
  box-shadow:none !important;
}

.mercados-extra--catalogo .cuota.activa span{
  background:#1b245f !important;
  color:#ffd02e !important;
}

.mercados-extra--catalogo .cuota.activa strong{
  background:#ffa100 !important;
  color:#fff !important;
}

/* Mercado aún no conectado: mismo layout, pero apagado */
.mercados-extra--catalogo .cuota-pendiente,
.mercados-extra--catalogo .cuota-pendiente:hover{
  cursor:not-allowed !important;
  opacity:1 !important;
  filter:none !important;
  border-color:#3342a8 !important;
  background:#1a2258 !important;
  box-shadow:none !important;
}

.mercados-extra--catalogo .cuota-pendiente span{
  color:#e9bd25 !important;
}

.mercados-extra--catalogo .cuota-pendiente strong{
  background:#1e2b83 !important;
  color:#8994c7 !important;
  font-size:18px !important;
}

/* Cuotas bloqueadas reales */
.mercados-extra--catalogo .cuota-bloqueada,
.mercados-extra--catalogo .cuota-bloqueada:hover{
  cursor:not-allowed !important;
  filter:none !important;
  border-color:#343d70 !important;
  background:#181f4e !important;
}

.mercados-extra--catalogo .cuota-bloqueada strong{
  background:#202759 !important;
}

/* Ajuste gradual para pantallas intermedias */
@media (max-width:1180px){
  .mercados-extra--catalogo .mercado-expandido{
    grid-template-columns:minmax(250px,39%) minmax(0,61%) !important;
    gap:12px !important;
    padding-left:14px !important;
    padding-right:16px !important;
  }

  .mercado-opciones{
    gap:7px 10px !important;
  }

  .mercados-extra--catalogo .cuota span{
    padding:0 7px !important;
    font-size:12px !important;
  }

  .mercados-extra--catalogo .cuota strong{
    min-width:50px !important;
    font-size:16px !important;
  }
}

/* Móvil: el nombre va arriba y las cuotas debajo */
@media (max-width:760px){
  .mercados-extra--catalogo .mercado-expandido{
    grid-template-columns:1fr !important;
    gap:4px !important;
    padding:7px 9px 9px !important;
  }

  .mercados-extra--catalogo .mercado-expandido__titulo{
    min-height:28px !important;
    padding:0 2px !important;
  }

  .mercado-opciones{
    gap:7px !important;
  }

  .mercado-opciones--3{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:520px){
  .mercado-opciones--3{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .mercados-extra--catalogo .cuota{
    min-height:41px !important;
    height:41px !important;
  }

  .mercados-extra--catalogo .cuota strong{
    min-width:45px !important;
    font-size:15px !important;
  }
}


/* =========================================================
   UI4 — SELECCIÓN + HOVER ESTILO TINBET
   1) Mercado principal 1X2: elimina selección verde.
      Solo el valor numérico de la cuota activa usa naranja.
   2) Hover: el bloque de opción cambia de fondo al pasar mouse.
   ========================================================= */

/* Mercado principal 1X2 — selección completa estilo Tinbet.
   SOLO el mercado principal pinta todo el botón naranja. */
.evento-principal > .cuota.activa,
.evento-principal .resultado > .cuota.activa{
  border-color:#ffb000 !important;
  background:#ffa100 !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 1px 2px rgba(0,0,0,.28) !important;
}

.evento-principal > .cuota.activa span,
.evento-principal .resultado > .cuota.activa span{
  color:#fff !important;
  background:transparent !important;
}

.evento-principal > .cuota.activa strong,
.evento-principal .resultado > .cuota.activa strong{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:44px !important;
  padding:4px 8px !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
}

/* Hover del mercado principal no seleccionado */
.evento-principal > .cuota:hover:not(:disabled):not(.activa),
.evento-principal .resultado > .cuota:hover:not(:disabled):not(.activa){
  filter:none !important;
  border-color:#6d79ff !important;
  background:linear-gradient(180deg,#5053ef 0%,#2b3bc7 100%) !important;
}

/* Hover del seleccionado: continúa naranja, ligeramente más vivo */
.evento-principal > .cuota.activa:hover:not(:disabled),
.evento-principal .resultado > .cuota.activa:hover:not(:disabled){
  filter:none !important;
  border-color:#ffc044 !important;
  background:#ffad14 !important;
}

.evento-principal > .cuota.activa:hover:not(:disabled) span,
.evento-principal .resultado > .cuota.activa:hover:not(:disabled) span,
.evento-principal > .cuota.activa:hover:not(:disabled) strong,
.evento-principal .resultado > .cuota.activa:hover:not(:disabled) strong{
  background:transparent !important;
  color:#fff !important;
}

/* Mercados del panel + : hover estilo Tinbet sobre toda la opción */
.mercados-extra--catalogo .cuota:hover:not(:disabled){
  filter:none !important;
  border-color:#4968ff !important;
  background:#263178 !important;
}

.mercados-extra--catalogo .cuota:hover:not(:disabled) span{
  background:#263178 !important;
  color:#ffd02e !important;
}

.mercados-extra--catalogo .cuota:hover:not(:disabled) strong{
  background:#3047ee !important;
  color:#fff !important;
}

/* Si está activa, el hover cambia el bloque pero la cuota sigue naranja */
.mercados-extra--catalogo .cuota.activa:hover:not(:disabled){
  border-color:#4968ff !important;
  background:#263178 !important;
}

.mercados-extra--catalogo .cuota.activa:hover:not(:disabled) span{
  background:#263178 !important;
}

.mercados-extra--catalogo .cuota.activa:hover:not(:disabled) strong{
  background:#ffa100 !important;
  color:#fff !important;
}

/* =========================================================
   UI6 — HOVER DE TODA LA FRANJA DEL MERCADO, ESTILO TINBET
   Al entrar el mouse en cualquier parte del mercado se
   oscurece el fondo completo de la fila, no solo una cuota.
   ========================================================= */
.mercados-extra--catalogo .mercado-expandido{
  transition:background-color .14s ease, box-shadow .14s ease !important;
}

.mercados-extra--catalogo .mercado-expandido:hover{
  background:#0b103f !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015),
             inset 0 -1px 0 rgba(0,0,0,.18) !important;
}

/* Mantener transparente el área del título para que tome
   el color de toda la franja durante el hover. */
.mercados-extra--catalogo .mercado-expandido__titulo{
  background:transparent !important;
}

/* =========================================================
   UI7 — SELECCIÓN SIN ALTERAR EL FONDO DE LA FRANJA
   La selección de una cuota NO deja el mercado resaltado.
   Solo el hover temporal puede oscurecer la franja completa.
   ========================================================= */

/* Neutraliza cualquier estado persistente derivado de foco/selección. */
.mercados-extra--catalogo .mercado-expandido:focus,
.mercados-extra--catalogo .mercado-expandido:focus-within,
.mercados-extra--catalogo .mercado-expandido:has(.cuota.activa){
  background:#11164f !important;
  box-shadow:none !important;
}

/* El hover sigue siendo el único estado que cambia toda la franja. */
.mercados-extra--catalogo .mercado-expandido:hover,
.mercados-extra--catalogo .mercado-expandido:focus-within:hover,
.mercados-extra--catalogo .mercado-expandido:has(.cuota.activa):hover{
  background:#0b103f !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015),
             inset 0 -1px 0 rgba(0,0,0,.18) !important;
}

/* El botón seleccionado conserva únicamente la cuota naranja. */
.mercados-extra--catalogo .cuota.activa{
  outline:none !important;
}