/* ============================================================
   ADMIN PANEL — Quiniela Oficina
   Este archivo SOLO agrega estilos nuevos para el panel admin.
   No modifica ni sobreescribe main.css — usa las mismas variables
   de color ya definidas ahí (--body-color, --active-color, etc.)
   ============================================================ */

.admin-card {
  padding: 24px;
}

.admin-card__title {
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
}

.admin-subtext {
  color: var(--textcolor);
  font-size: 14px;
  margin-bottom: 24px;
  max-width: 720px;
}

.admin-empty {
  color: var(--textcolor);
  font-size: 14px;
  padding: 16px 0;
}

.admin-label {
  display: block;
  color: var(--textcolor);
  font-size: 13px;
  margin-bottom: 6px;
}

.admin-input {
  width: 100%;
  background: var(--slidebox);
  border: 1px solid var(--signborder);
  border-radius: 6px;
  color: var(--white);
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s ease;
}

.admin-input:focus {
  border-color: var(--active-color);
}

.admin-input--sm {
  max-width: 320px;
}

.admin-btn-secondary {
  background: var(--signbet);
  border: 1px solid var(--signborder);
  color: var(--white);
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .2s ease;
}

.admin-btn-secondary:hover {
  border-color: var(--active-color);
}

.admin-btn-link {
  background: none;
  border: none;
  color: var(--active-color);
  font-size: 13px;
  cursor: pointer;
}

.admin-btn-icon-danger {
  background: none;
  border: none;
  color: var(--button-one);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
}

.admin-pregunta-box {
  background: var(--pointbox);
  border: 1px solid var(--multiborder);
  border-radius: 8px;
  padding: 18px;
}

.admin-pregunta-num {
  color: var(--active-color);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-opcion-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-opcion-row .admin-input {
  flex: 1;
}

.admin-opcion-resolver {
  width: 100%;
  background: var(--slidebox);
  border: 1px solid var(--signborder);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s ease;
}

.admin-opcion-resolver:hover {
  border-color: var(--active-color);
}

.admin-opcion-resolver--activa {
  border-color: var(--active-color);
  background: rgba(9, 255, 141, 0.08);
}

.admin-opcion-monto {
  color: var(--textcolor);
  font-size: 13px;
}

.admin-pill {
  background: var(--signbet);
  border: 1px solid var(--signborder);
  color: var(--active-color);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 5px 14px;
  white-space: nowrap;
}

.admin-pill--muted {
  color: var(--textcolor);
}

.admin-badge {
  background: var(--button-one);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
}

.admin-info-box {
  background: var(--pointbox);
  border: 1px solid var(--multiborder);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--textcolor);
  font-size: 13px;
}

.admin-info-box h6 {
  color: var(--active-color);
  font-size: 16px;
  margin-top: 4px;
}

.admin-alert {
  background: rgba(9, 255, 141, 0.08);
  border: 1px solid var(--active-color);
  color: var(--active-color);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
}

.admin-stat-box {
  padding: 20px;
  text-align: center;
}

.admin-stat-label {
  color: var(--textcolor);
  font-size: 13px;
  display: block;
  margin-bottom: 8px;
}

.admin-stat-value {
  color: var(--active-color);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

/* Estados de fila reusando los colores ya definidos en main.css
   (.cancel, .pending, .complate) para mantener consistencia visual */
.admin-estado-abierta {
  color: var(--active-color);
  font-weight: 600;
}

.admin-estado-cerrada {
  color: var(--button-two);
  font-weight: 600;
}

.admin-estado-resuelta {
  color: var(--theme-one);
  font-weight: 600;
}


/* Sidebar agrupado por secciones (Casa / Usuarios / Marketing) */
.admin-sidebar-group-label {
  color: var(--textcolor);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 16px 6px;
  opacity: 0.6;
}

.admin-sidebar-menu li:first-child {
  margin-top: 0;
}


/* Botones de selección de categoría (Football, Basketball, etc.) */
.admin-categoria-btn {
  width: 100%;
  background: var(--slidebox);
  border: 1px solid var(--signborder);
  border-radius: 8px;
  padding: 14px 12px;
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  transition: all .2s ease;
}

.admin-categoria-btn:hover:not(:disabled) {
  border-color: var(--active-color);
}

.admin-categoria-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.admin-categoria-btn--activa {
  border-color: var(--active-color);
  background: rgba(9, 255, 141, 0.08);
  color: var(--active-color);
}


/* Override de .point__box para mostrar opciones de texto largo
   (ej. "Gana Peru") en vez de numeros cortos de cuota (ej. "8.55") */
.point__box--opcion {
  width: auto !important;
  height: auto !important;
  min-width: 90px;
  padding: 8px 14px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* ============================================================
   TARJETA ESTILO POLYMARKET — partidos en index.html
   ============================================================ */
.pm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.pm-card {
  background: var(--slidebox);
  border: 1px solid var(--signborder);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  transition: border-color .2s ease;
}

.pm-card:hover {
  border-color: var(--active-color);
}

.pm-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--header);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.pm-card__title {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.pm-card__principal {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pm-card__pct {
  color: var(--active-color);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.pm-card__pct-label {
  color: var(--textcolor);
  font-size: 12px;
}

.pm-card__opciones {
  display: flex;
  gap: 8px;
}

.pm-card__opcion-btn {
  flex: 1;
  background: var(--header);
  border: 1px solid var(--signborder);
  border-radius: 6px;
  padding: 8px 6px;
  text-align: center;
  font-size: 12px;
  color: var(--white);
}

.pm-card__opcion-pct {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
}

.pm-card__footer {
  display: flex;
  justify-content: space-between;
  color: var(--textcolor);
  font-size: 11px;
}

/* ============================================================
   MI CUENTA — Dropdown mobile vs sidebar desktop
   ============================================================ */
.mc-mobile-dropdown {
  display: none;
}

.mc-mobile-dropdown__btn {
  width: 100%;
  background: var(--slidebox);
  border: 1px solid var(--signborder);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.mc-mobile-dropdown__btn i.fa-chevron-down {
  font-size: 12px;
  color: var(--textcolor);
  transition: transform .2s ease;
}

.mc-rotate {
  transform: rotate(180deg);
}

.mc-mobile-dropdown__menu {
  margin-top: 8px;
  background: var(--slidebox);
  border: 1px solid var(--signborder);
  border-radius: 10px;
  overflow: hidden;
}

.mc-mobile-dropdown__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: var(--textcolor);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--signborder);
}

.mc-mobile-dropdown__menu a:last-child {
  border-bottom: none;
}

.mc-mobile-dropdown__menu a.mc-activa {
  color: var(--active-color);
  background: rgba(22, 82, 240, 0.08);
}

@media (max-width: 991px) {
  .mc-mobile-dropdown {
    display: block;
    margin-bottom: 20px;
  }
  .mc-desktop-sidebar {
    display: none;
  }
}

/* ============================================================
   MI CUENTA — Header: balance siempre visible + dropdown Alpine
   ============================================================ */
.mc-header-wrap {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.mc-balance-pill {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12px;
}

.mc-balance-pill .small {
  font-size: 11px;
}

.mc-balance-pill h6 {
  font-size: 13px;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .mc-balance-pill .small {
    display: none;
  }
  .mc-balance-pill h6 {
    font-size: 12px;
  }
}

.mc-user-dropdown {
  position: relative;
}

.mc-user-dropdown__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--header);
  border: 1px solid var(--signborder);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mc-user-dropdown__menu {
  position: absolute;
  top: 44px;
  right: 0;
  background: var(--pointbox);
  border: 1px solid var(--signborder);
  border-radius: 8px;
  padding: 8px;
  min-width: 170px;
  z-index: 50;
}

.mc-user-dropdown__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: var(--white);
  text-decoration: none;
  font-size: 13px;
  border-radius: 6px;
}

.mc-user-dropdown__menu a:hover {
  background: var(--header);
}

[x-cloak] {
  display: none !important;
}

/* Forzar que el sidebar de mi-cuenta.html se apile vertical en mobile,
   sin importar el comportamiento por defecto del grid/flex original */
@media (max-width: 991px) {
  .dashboard__side__bar .account__menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .dashboard__side__bar .account__menu li {
    width: 100% !important;
  }
  .dashboard__side__bar .account__menu li a {
    width: 100% !important;
  }
}

/* Opcion seleccionada en tarjeta de categoria */
.pm-card__opcion-btn--activa {
  border-color: var(--active-color) !important;
  background: rgba(22, 82, 240, 0.15) !important;
  color: var(--active-color) !important;
}

/* Menu principal con muchas categorias - wrap en vez de overflow oculto */
.main-menu {
  flex-wrap: wrap !important;
}

/* Menu con muchas categorias - reducir espaciado para que quepan todas */
.header-wrapper .main-menu li:not(:last-child) {
  margin-right: 10px !important;
}
.header-wrapper .main-menu li a {
  font-size: 13px !important;
}
.header-wrapper .main-menu li a span {
  font-size: 13px !important;
}

/* Forzar que el contenedor del menu no corte los items */
.menu__left__wrap {
  overflow: visible !important;
  flex: 1 !important;
}
.header-wrapper .main-menu {
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.header-wrapper .main-menu li:not(:last-child) {
  margin-right: 4px !important;
}

/* Ocultar barra gris residual del menu viejo */
.main__tab__slide {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ocultar completamente el main__tab__slide en todas las resoluciones */
.main__tab__slide {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Bajar el menu de filtros en mobile para que no lo tape el cuadro gris */
@media (max-width: 991px) {
  .casa-sports-bar {
    margin-top: 16px !important;
  }
}