/* ========================================
   🎨 RIFA STYLE - FINAL v4 - CON BLOQUES Y VARIABLES
   Estilo modular, responsivo y profesional
   ======================================== */

/* ===========================
   🌈 VARIABLES CSS
   =========================== */
:root {
    --color-disponible: #ffffff;
    --color-seleccionado: #3b82f6;
    --color-vendido: #ef4444;
    --color-reservado: #facc15;
    --color-en-carrito: #19d128;
    --color-en-carrito-otro: #707988;
    --color-fondo-body-inicio: #0f172a;
    --color-fondo-body-fin: #1e293b;
    --color-amarillo: #ffe066;
    --color-amarillo-hover: #fffbe7;
    --color-texto-oscuro: #1e293b;
    --color-paginacion-bg: #2d2d2d;
    --color-boton-disabled: #6b7280;
}

/* ===========================
   🌌 FONDO GLOBAL
   =========================== */
body.rifa-page{
  background:linear-gradient(180deg,var(--color-fondo-body-inicio) 0%,var(--color-fondo-body-fin) 100%) !important;
  background-attachment:fixed;
  min-height:100vh;
  color:#fff;
}

/* Títulos por defecto en rifa-page: BLANCOS (sobre el fondo oscuro) */
body.rifa-page :is(h1,.entry-content h1,h2,.entry-content h2,h3,.entry-content h3,h4,.entry-content h4,h5,.entry-content h5,h6,.entry-content h6){
  color:#fff;
}

/* Enlaces generales en rifa-page (sobre fondo oscuro) 
body.rifa-page a{color:#fff}
body.rifa-page a:hover{color:#ff1d1d}*/

/* ===========================
   📦 CONTENEDOR GENERAL RIFA
   =========================== */
.rifa-container{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  margin:1rem auto 2rem; padding:2.5rem 1.5rem; max-width:1200px; width:100%;
  border-radius:18px; position:relative; color:#fff;
}
@media (min-width:769px){
  .rifa-container{
    background:rgba(17,24,39,.6);
    border:1px solid rgba(255,255,255,.05);
    box-shadow:0 10px 40px rgba(0,0,0,.25);
    backdrop-filter:blur(6px);
  }
}
@media (max-width:768px){
  .rifa-container{width:100% !important; padding:1.2rem !important; background:transparent !important; backdrop-filter:blur(6px);}
}

/* Bloques */
.rifa-bloque{
  width:100%; background:rgba(255,255,255,.05);
  padding:24px 24px 20px; border-radius:16px; box-shadow:0 1px 12px rgba(0,0,0,.2);
}
@media (max-width:768px){
  .rifa-bloque{padding:1rem 1rem 1.8rem}
}


/* ===========================
   🖼️ IMAGEN Y ENCABEZAD ORIFA
   =========================== */
.rifa-img-wrap {
    width: 100%;
    max-width: 860px;
    margin: 0 auto 18px auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    background: #eceff7;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rifa-featured-img {
    width: 100%;
    aspect-ratio: 16/10;
    height: auto;
    border-radius: 16px;
    display: block;
    object-fit: cover;
    box-shadow: 0 2px 14px #0002;
}

.rifa-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 2rem;
}

/* ===========================
   📝 TEXTOS Y TITULOS RIFA
   =========================== */

.entry-title, .rifa-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff !important;
    margin: 0 0 0.5em 0;
    letter-spacing: -1px;
    text-shadow: 0 4px 18px #1e293b7c, 0 1.5px 1.5px #0002;
    word-break: break-word;
    margin-top: 2rem;
}
.rifa-titulo-llamativo {
    text-align: center;
    font-size: 2.3rem;
    font-weight: 900;
    margin: 45px 0 18px 0;
    word-break: break-word;
    letter-spacing: -1px;
    line-height: 1.15;
    background: linear-gradient(90deg, var(--color-amarillo) 5%, #ffd700 100%, #fffbe7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rifa-desc {
    font-size: 1.13em;
    font-weight: 400;
    color: #fff !important;
    background: #222d;
    padding: 30px 22px;
    border-radius: 11px;
    box-shadow: 0 1px 6px #0003;
    line-height: 2rem;
    white-space: pre-line;
    margin: 0 auto 2em auto;
}

.rifa-texto-minimo,
.rifa-precio,
.rifa-fecha-sorteo {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 20px;
  margin: 10px auto;
  max-width: 100%;
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Íconos con ::before */
.rifa-texto-minimo::before {
  content: "🔒";
  font-size: 1.3rem;
}

.rifa-precio::before {
  content: "💸";
  font-size: 1.3rem;
}

.rifa-fecha-sorteo::before {
  content: "📅";
  font-size: 1.3rem;
}

/* Efecto hover suave */
.rifa-texto-minimo:hover,
.rifa-precio:hover,
.rifa-fecha-sorteo:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  cursor: default;
  transition: all 0.3s ease;
}


/* ===========================
   🔢 NÚMEROS DE RIFA (mejorado)
   =========================== */
.numeros-lista {
    margin-top: 12px;
    padding: 1.5rem 1rem;
    background: rgba(200, 227, 218, 0.1);
    border-radius: 14px;
    box-shadow: 0 1px 8px rgba(16, 185, 129, 0.2);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.numeros-lista-contenedor {
    background: rgba(17, 24, 39, 0.6) !important;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
    margin: 0 auto 1.5rem auto;
    backdrop-filter: blur(6px);
}

.mensaje-comprador {
    font-weight: 700;
    font-size: 1.3rem;
    color: #eceff7;
    margin-bottom: 16px;
}

/* ——— Contenedor de números ——— */
.rifa-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;         /* más “aire” entre botones */
    justify-content: center;
    margin-bottom: 24px;
    width: 100%;
    padding-top: 1.5rem;
}

/* ===========================
   🎟️ ESTADOS DE LOS NÚMEROS
   =========================== */
.rifa-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;            /* tamaño base */
    height: 48px;
    padding: 0 8px;         /* un poco de aire lateral por si son más dígitos */
    margin: 2px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: #fff;
    color: #222;
    font-size: 1.1rem;
    font-weight: 800 !important;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    outline: none;
    line-height: 1;
    white-space: nowrap;                 /* evita salto de línea */
    box-sizing: border-box;              /* cuenta el borde en el tamaño */
    font-variant-numeric: tabular-nums;  /* dígitos más parejos */
    letter-spacing: .02em;
    aspect-ratio: 1.5 / 1;                 /* mantiene forma cuadrada si el ancho cambia */
    transition: all 0.25s ease-in-out;
    user-select: none;
}

/* Badge de selección listado */
.numero-item {
    display: inline-block;
    margin: 4px 6px;
    padding: 6px 12px;
    background: #18202f;
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    font-size: 1.2rem;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}
.numero-item:hover {
    background-color: #ff0000;
    cursor: default;
}

/* Libre / Disponible */
.rifa-number.available {
    background: var(--color-disponible);
    color: #222;
    border-color: #ccc;
}
.rifa-number.available:hover {
    background: #f3f4f6;
    border-color: #3b82f6;
    transform: scale(1.05);
}

/* Seleccionado */
.rifa-number.selected {
    background: var(--color-seleccionado);
    color: #fff;
    border-color: #1d4ed8;
    box-shadow: 0 0 8px #2563eb77;
    transform: scale(1.05);
}

/* Vendido */
.rifa-number.sold {
    background: var(--color-vendido);
    color: #fff;
    border-color: #b91c1c;
    opacity: 0.9;
    cursor: not-allowed;
}

/* Reservado */
.rifa-number.reserved {
    background: var(--color-reservado);
    color: #fff;
    border-color: #b87f03;
}

/* En carrito (propio) */
.rifa-number.in_cart {
    background: var(--color-en-carrito);
    color: #fff;
    border-color: #059669;
    box-shadow: 0 0 8px #10b981aa;
    transform: scale(1.03);
}

/* En carrito (de otro usuario) */
.rifa-number.in_cart_other {
    background: var(--color-en-carrito-otro);
    color: #fff;
    border-color: #4b5563;
    opacity: 0.85;
    cursor: not-allowed;
}

/* Pequeña animación visual para feedback */
.rifa-number:active:not(.sold):not(.in_cart_other):not(.disabled) {
    transform: scale(0.97);
    filter: brightness(0.9);
}

.rifa-number:hover:not(.sold):not(.reserved):not(.in_cart):not(.in_cart_other) {
    background: #e0e7ff;
    border-color: var(--color-en-carrito);
    color: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.rifa-numeros-bloque .rifa-pagination { margin-top: 50px; }

/* ——— Ajuste por cantidad de dígitos (Escritorio) ———
   Crece el botón en ancho (y el alto lo acompaña por aspect-ratio) */
@media (min-width: 481px){
  .rifa-container[data-digitos="2"] .rifa-number,
  .rifa-container[data-digitos="3"] .rifa-number{ width: 54px; height: auto; font-size: 1.18rem; }

  .rifa-container[data-digitos="4"] .rifa-number{ width: 66px; height: auto; font-size: 1.06rem; }
  .rifa-container[data-digitos="5"] .rifa-number{ width: 78px; height: auto; font-size: 1.0rem; }
  .rifa-container[data-digitos="6"] .rifa-number{ width: 90px; height: auto; font-size: .95rem; }
}

/* ——— Distribución uniforme en smartphone (Grid auto-fit) ———
   - Columnas iguales que llenan el ancho
   - Botones cuadrados gracias a aspect-ratio
   - Se usa una variable para el tamaño mínimo según dígitos
*/
@media (max-width: 480px){
  /* tamaño mínimo por dígitos (puedes ajustar si quieres más/menos columnas) */
  .rifa-container[data-digitos="2"]{ --rifa-item-min: 56px; }
  .rifa-container[data-digitos="3"]{ --rifa-item-min: 60px; }
  .rifa-container[data-digitos="4"]{ --rifa-item-min: 68px; }
  .rifa-container[data-digitos="5"]{ --rifa-item-min: 76px; }
  .rifa-container[data-digitos="6"]{ --rifa-item-min: 84px; }

  .rifa-numbers{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rifa-item-min, 56px), 1fr));
    gap: 10px;                 /* aire uniforme entre celdas */
    
  }

  .rifa-number{
    width: 100%;               /* la celda define el ancho */
    height: auto;
    margin: 0 !important;      /* deja que “gap” controle la separación */
    border-radius: 10px;
  }

  /* tipografía por dígitos en móvil para que no se desborde */
  .rifa-container[data-digitos="2"] .rifa-number{ font-size: 1.10rem; }
  .rifa-container[data-digitos="3"] .rifa-number{ font-size: 1.04rem; }
  .rifa-container[data-digitos="4"] .rifa-number{ font-size: .98rem; }
  .rifa-container[data-digitos="5"] .rifa-number{ font-size: .94rem; }
  .rifa-container[data-digitos="6"] .rifa-number{ font-size: .90rem; }
}

/* ===========================
   🧭 LEYENDA DE ESTADOS
   =========================== */
.rifa-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
}
.leyenda-box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 6px;
    border: 2px solid #ddd;
}
.leyenda-box.available     { background: var(--color-disponible); border-color: var(--color-disponible); }
.leyenda-box.selected      { background: var(--color-seleccionado); border-color: var(--color-seleccionado); }
.leyenda-box.sold          { background: var(--color-vendido); border-color: var(--color-vendido); }
.leyenda-box.reserved      { background: var(--color-reservado); border-color: var(--color-reservado); }
.leyenda-box.in_cart       { background: var(--color-en-carrito); border-color: var(--color-en-carrito); }
.leyenda-box.in_cart_other { background: var(--color-en-carrito-otro); border-color: var(--color-en-carrito-otro); }

/* ===========================
   🧾 PAGINACIÓN
   =========================== */
.rifa-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 24px 0;
    flex-wrap: wrap;
}
.pag-btn {
    min-width: 38px;
    min-height: 38px;
    border-radius: 8px;
    border: 2px solid #eee;
    background: var(--color-paginacion-bg);
    color: #eee;
    font-weight: 700;
    font-size: 1.08rem;
    padding: 0 7px;
    cursor: pointer;
    transition: background 0.18s, border 0.18s, color 0.18s;
    outline: none;
}
.pag-btn.active,
.pag-btn:focus {
    background: #ff0000;
    color: #eee;
    border-color: #eee;
    box-shadow: 0 0 0 2px #c7c7c688;
}
.pag-btn:hover:not(.active) {
    background: var(--color-amarillo-hover);
    color: #1a202c;
    border-color: #ff0000;
}
.pag-ellipsis {
    padding: 0 5px;
    color: #eee;
    font-weight: bold;
    font-size: 1.1rem;
    user-select: none;
}

/* ===========================
   🛒 BOTÓN AGREGAR AL CARRITO
   =========================== */
.rifa-add-to-cart {
    display: block;
    margin: 30px auto 10px auto;
    padding: 12px 28px;
    font-size: 1.17rem;
    font-weight: bold;
    border-radius: 9px;
    background: #ff0000;
    color: #eee;
    border: 2px solid #eee;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: 0 2px 12px #facc1530;
    text-align: center;
}
.rifa-add-to-cart:disabled {
    background: var(--color-boton-disabled);
    border: 2px solid #eee;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.7;
}
.rifa-add-to-cart:hover:not(:disabled) {
    background: var(--color-amarillo-hover);
    border: 2px solid #ff0000;
    color: #1a202c;
}

/* ==========================
   🔍 FORMULARIO CONSULTA RIFA
   ========================== */
/* 🎯 Reforzar estilos del formulario con !important */

.formulario-consulta-rifa {
    width: 100% !important;
    margin: 25px auto !important;
    background: #eceff7 !important;
    padding: 40px 80px !important;
    border-radius: 13px !important;
    border: 2px solid #111 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

.form-label-rifa {
  display: block !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  color: #ff0000 !important; /* rojo vibrante */
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-bottom: 12px !important;
  
}


.form-input-rifa {
    width: 100% !important;
    padding: 11px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    margin-bottom: 12px !important;
    font-size: 1rem !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    height: 3.5rem !important;
}

.form-input-rifa:focus {
    border-color: var(--color-amarillo, #ffe066) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 224, 102, 0.4) !important;
}

.rifa-btn-consultar {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    background: #202838 !important;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    height: 3.5rem;
}

.rifa-btn-consultar:hover {
    background: #ff0303 !important;
    color: #fff;
}

/* ===========================
    SWAL2
   =========================== */
.swal2-toast-custom {
  width: auto !important;
  min-width: unset !important;
  max-width: 240px !important;
  border-radius: 6px;
  font-size: 13px;
}


/* ===========================
   🎯 BARRA INFORMATIVA NUEVA
   =========================== */
/* 🎯 Contenedor general de la barra informativa */
#rifa-barra-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #eceff7;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
  color: #222;
  font-weight: 700;
  font-size: 2rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  font-family: "Segoe UI", sans-serif;
}

/* 📌 Mensaje de mínimo requerido */
#rifa-barra-info .rifa-msg-minimo {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 0.7rem;
  font-weight: 600;
  text-align: center;
}

/* 🔢 Título de “Números seleccionados” */
#rifa-barra-info .rifa-contador-label {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.3rem;
}

/* 🔢 Número seleccionado grande */
#rifa-barra-info .actual {
  font-size: 4rem;
  font-weight: 800;
  color: #ff0303;
  line-height: 1.2;
  background: #e6f3ff;
  display: inline-block;
    padding: 6px 16px;
    border-radius: 8px;
    background: #e6f3ff;
    min-width: 60px;
}

/* 💰 Total a pagar */
#rifa-barra-info .rifa-total {
  margin-top: 0.6rem;
  font-size: 1rem;
  color: #333 !important;
  font-weight: 700;
  font-size: 1.3rem;
}

/* 🛒 Enlace al carrito */
.rifa-en-carrito {
  text-align: center;
}

.rifa-link-carrito {
  display: inline-block;
  background-color: #e6f3ff; /* azul claro */
  color: #333 !important;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color 0.3s ease;
}

.rifa-link-carrito:hover {
  background-color: #d6e8f9;
  color: #000 !important;
}

.rifa-link-carrito .contador-carrito {
  display: inline-block;
  background-color: #fff !important;
  color: #333 !important;
  font-weight: bold;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 13px;
  margin-left: 6px;
}
body.rifa-page span.monto {
    color: #333 !important;
}
/* ==========================
   BOTÓN "ELEGIR AL AZAR" ANIMADO
   ========================== */
.btn-elegir-azar {
  background-color: #ff0303; /* Naranja fuerte */
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0.9rem 1.8rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: inline-block;
  margin: 0.8rem 0 1.2rem 0;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  animation: pulseAzar 2.2s infinite;
}

/* Hover */
.btn-elegir-azar:hover {
  background-color: #e70101;
}

/* Animación suave tipo pulso */
@keyframes pulseAzar {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 87, 34, 0.7); }
  50% { transform: scale(1.03); box-shadow: 0 0 20px rgba(255, 87, 34, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 87, 34, 0.7); }
}


/* ==========================
   SELECTOR DE CANTIDAD [- 03 +]
   ========================== */
.rifa-selector-cantidad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  font-family: inherit;
}

/* ==========================
   BOTONES CIRCULARES + Y -
   ========================== */
.rifa-selector-cantidad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  font-family: inherit;
}

/* Botones de + y - */
.rifa-selector-cantidad button {
  background-color: #fff;
  color: #ff0000; /* Naranja fuerte */
  border: 3px solid #ff0000;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rifa-selector-cantidad button:hover {
  background-color: #fde6e6;
}

/* Número de cantidad centrado */
.rifa-selector-cantidad .cantidad-numero {
  font-size: 2.4rem;
  font-weight: bold;
  min-width: 50px;
  text-align: center;
  color: #333;
}


/* ==========================
   BOTONES SWEETALERT PERSONALIZADOS
   ========================== */
.swal2-confirm {
  background-color: #ff0000 !important;
  color: white !important;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 8px !important;
  padding: 0.7rem 1.5rem !important;
  box-shadow: none !important;
}

.swal2-cancel {
  background-color: #757575 !important;
  color: white !important;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 8px !important;
  padding: 0.7rem 1.5rem !important;
  margin-left: 0.5rem !important;
}


/* 🎯 Estilos solo para el popup del carrito */
.swal2-popup.rifa-carrito-popup .swal2-confirm {
  background-color: #f44336 !important; /* rojo fuerte / naranja intenso */
  color: #fff !important;
  font-weight: bold;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
}

.swal2-popup.rifa-carrito-popup .swal2-deny {
  background-color: #444 !important; /* gris oscuro */
  color: #fff !important;
  font-weight: bold;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
}

.swal2-popup.rifa-carrito-popup .swal2-cancel {
  background-color: #56b10e !important; /* verde */
  color: #fff !important;
  font-weight: bold;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
}
.swal2-title{color:#111 !important;}

/* ==========================
   BOTONES Y OTROS WOOCOMMERCE PERSONALIZADOS
   ========================== */
   
   /* Aplica estilo personalizado a botones WooCommerce principales */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.rifa-btn-consultar {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 1rem;
    background: #202838 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    height: 3.5rem;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.rifa-btn-consultar:hover {
    background: #ff0303 !important;
    color: #fff !important;
}
.return-to-shop,
.woocommerce-cart-empty .return-to-shop,
a.return-to-shop {
    display: none !important;
}

.woocommerce-cart .cart-collaterals .cart_totals>h2, .woocommerce-cart .cart-collaterals .cross-sells>h2 {
    
    background-color: unset !important;
    
}

.woocommerce-js table.shop_table thead, .woocommerce-page table.shop_table thead {
    background-color: #1e293b !important;
}

.woocommerce #content table.cart td.actions, .woocommerce table.cart td.actions, .woocommerce-page #content table.cart td.actions, .woocommerce-page table.cart td.actions {
    
    background: #fff;
}
.woocommerce-page.woocommerce-checkout #payment div.payment_box, .woocommerce.woocommerce-checkout #payment div.payment_box {
    background-color: #1e293b !important;
    
}
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .rifa-btn-consultar {
    
    padding: 12px 20px !important;
    border: 1px solid #fff !important;
}

.woocommerce-page.woocommerce-checkout form #order_review td, .woocommerce-page.woocommerce-checkout form #order_review th, .woocommerce.woocommerce-checkout form #order_review td, .woocommerce.woocommerce-checkout form #order_review th {
    
    padding-left: 1rem !important;
    
}
body.rifa-page.woocommerce-checkout h2.woocommerce-column__title,.woocommerce-order-details__title {
  color: #333 !important;
}
.woocommerce-js a.remove, a.remove:before {
    color:#fff !important;
    border: 1px solid #fff !important;
}
.woocommerce-js form .form-row label {
    color: #fff;
}
body.woocommerce-account.woocommerce-edit-address header.woocommerce-Address-title.title{background: #1e293b !important;}
/* ==========================
   CHECKOUT
   ========================== */


/* Etiquetas y leyendas */
body.rifa-page.woocommerce-checkout label {
  color: #fff;
  font-weight: 600;
}
body.rifa-page.woocommerce-checkout #payment div.payment_box {color: #ccc;}

/* ===========================
   ⏱️ Contador – estilo vidrio
   =========================== */
/* ===== Countdown PRO ===== */
.rifa-countdown.rc { max-width: 980px; margin: 12px auto; }
.rifa-countdown.rc.rc-center { text-align: center; }
.rifa-countdown.rc.rc-fullwidth { width: 100%; }

.rifa-countdown .rc-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 16px;
  align-items: stretch;
  justify-items:center;
  margin-top: 30px;
}

.rifa-countdown .rc-box{
  width:100%;
  border-radius: 16px;
  padding: 14px 10px;
  background: linear-gradient(180deg, #0b1222 0%, #1d2a40 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  color:#fff;
}

.rifa-countdown .rc-label{
  font-weight:800;
  letter-spacing:.06em;
  font-size:.90rem;
  opacity:.92;
  margin-bottom:6px;
  text-transform: uppercase;
}

.rifa-countdown .rc-num{
  font-weight:900;
  line-height:1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.rifa-countdown.rc-xl .rc-num{ font-size: 3.2rem; }
.rifa-countdown.rc-lg .rc-num{ font-size: 2.6rem; }
.rifa-countdown.rc-md .rc-num{ font-size: 2.1rem; }

/* Responsive */
@media (max-width: 780px){
  .rifa-countdown .rc-grid{ grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .rifa-countdown .rc-box{ border-radius: 14px; padding: 12px 8px; }
  .rifa-countdown.rc-xl .rc-num{ font-size: 2.6rem; }
}

@media (max-width: 480px){
  .rifa-countdown .rc-grid{ grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .rifa-countdown .rc-box{ padding: 10px 6px; }
  .rifa-countdown.rc-xl .rc-num{ font-size: 2.15rem; }
  .rifa-countdown .rc-label{ font-size: .78rem; }
}

/* ===========================
   FILTRO BOTON DISPONIBLES
   =========================== */
/* 🔲 Contenedor para alinear a la derecha */
.rifa-filtro-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* 🔘 Botón de filtro */
.btn-filtro-disponibles {
    background-color: #38435987 !important;
    color: #fff;
    font-size: 1rem;
    padding: 1rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}
.btn-filtro-disponibles:hover{
    background-color: #ff0000 !important;
}
/* =============================
   🎨 ESTILOS CATÁLOGO DE RIFAS v5
   ============================= */

/* Contenedor principal */
.rifa-catalogo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f9fafb;
}

/* Título principal */
.catalogo-titulo {
    font-size: 2em;
    text-align: center;
    margin-bottom: 1em;
    color: #1e293b;
    font-weight: bold;
}

/* Filtros de búsqueda */
.catalogo-filtros {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-bottom: 2em;
    flex-wrap: wrap;
}

.catalogo-filtros input[type="text"] {
    padding: 0.5em 1em;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    width: 250px;
    background-color: #ffffff;
}

.catalogo-filtros button {
    background-color: #ff0000;
    color: white;
    border: none;
    padding: 0.6em 1.2em;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

.catalogo-filtros button:hover {
    background-color: #cc0000;
}

/* Grid de rifas */
.catalogo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2em;
}

/* Tarjeta individual */
.catalogo-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 1em;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    
}

/* Hover */
.catalogo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Imagen */
.catalogo-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Título */
.catalogo-item h3 {
    font-size: 1.3em;
    margin: 0.8em 0 0.4em;
    color: #111827 !important;
    font-weight: 600;
    min-height: 3.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Descripción */
.catalogo-descripcion {
    font-size: 0.95em;
    color: #4b5563 !important;
    margin: 0 auto 0.8em;
    line-height: 1.4;
    min-height: 4.2em;
    max-width: 96%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Precio */
.catalogo-item .precio {
    display: block;
    background-color: #1e293b !important;
    padding: 0.6em 1.6em;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.2em;
    margin: 0 auto 0.8em;
    width: fit-content;
}

.rifa-catalogo .catalogo-item a {
    text-decoration: none !important;
    color: inherit !important;
}

/* Botón Ver Rifa */
.catalogo-boton {
    display: inline-block;
    background-color: #ff0000;
    color: white;
    padding: 0.5em 1.2em;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95em;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.catalogo-boton:hover {
    background-color: #cc0000;
    transform: scale(1.05);
}

/* Etiqueta Activo */
.catalogo-etiqueta {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff0000;
    color: white;
    padding: 0.3em 0.6em;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Paginación */
.catalogo-paginacion {
    text-align: center;
    margin-top: 2em;
}

.catalogo-paginacion a,
.catalogo-paginacion span {
    display: inline-block;
    padding: 0.4em 0.8em;
    margin: 0 0.2em;
    background-color: #e5e7eb;
    color: #111827;
    border-radius: 6px;
    text-decoration: none;
}

.catalogo-paginacion .current {
    background-color: #ff0000;
    color: white;
    font-weight: bold;
}

/* ===========================
   🔢 CAJA SOPORTE
   =========================== */
   
.rifa-bloque-soporte{
    background: #eceff7;
    border-radius: 13px;
    padding: 1.3em 1.2em 1.1em 1.2em;
    max-width: 100% !important;
    margin: 25px auto 20px auto;
    box-shadow: 0 1px 12px #2563eb13;
    border: 2.5px solid #2563eb;
    margin-bottom: 2rem !important;
}

.rifa-soporte-titulo{
    color: #333;
    font-size: 1.2rem;
    font-weight: 700;
    
}

/* ==========================================================
   FIX – CATÁLOGO DE RIFAS (restaurar diseño en rifa-page)
   ========================================================== */

/* Contenedor principal del catálogo (no oscurecerlo más) */
body.rifa-page .entry-content .rifa-catalogo{
  background: transparent !important;
  padding: 1rem 0 2rem !important;
}

/* Título del catálogo: legible sobre fondo oscuro de la página */
body.rifa-page .entry-content .rifa-catalogo .catalogo-titulo{
  color:#fff !important;
  text-align:center;
  font-weight:900;
  margin: .5rem 0 1rem;
}

/* Barra de filtros: caja semitransparente con inputs blancos */
body.rifa-page .entry-content .rifa-catalogo .catalogo-filtros{
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; align-items:end;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:.85rem;
}
body.rifa-page .entry-content .rifa-catalogo .catalogo-filtros :is(input[type="text"], select){
  padding:.55rem .9rem;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111;
  min-width: 220px;
}
body.rifa-page .entry-content .rifa-catalogo .catalogo-filtros button{
  background:#ff0000; color:#fff; border:none; border-radius:10px;
  padding:.6rem 1.1rem; font-weight:700; cursor:pointer; transition:.2s;
}
body.rifa-page .entry-content .rifa-catalogo .catalogo-filtros button:hover{ background:#cc0000 }

/* Grid de tarjetas */
body.rifa-page .entry-content .rifa-catalogo .catalogo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
  margin-top:16px;
}

/* Tarjeta clara (como los resultados) + tipografía oscura dentro */
body.rifa-page .entry-content .rifa-catalogo .catalogo-item{
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:12px !important;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  color:#111 !important;  /* valor por defecto dentro de la tarjeta */
}

/* Forzar títulos/ textos oscuros dentro de la tarjeta (evita blancos globales) */

/* Imagen */
body.rifa-page .entry-content .rifa-catalogo .catalogo-item img{
  width:100%; height:200px; object-fit:cover; display:block;
}

/* Título de la rifa */
body.rifa-page .entry-content .rifa-catalogo .catalogo-item h3{
  font-size:1.15rem; font-weight:700; line-height:1.3; color:#111 !important;
  min-height: 2.6em; display:flex; align-items:center; justify-content:center; text-align:center;
}

/* Descripción breve */
body.rifa-page .entry-content .rifa-catalogo .catalogo-descripcion{
  font-size:.95rem; color:#4b5563 !important; text-align:center;
  min-height: 3.2em; display:flex; align-items:center; justify-content:center;
}

/* Precio (pastilla) */
body.rifa-page .entry-content .rifa-catalogo .precio{
  display:block; width:fit-content; margin:0 auto .8rem;
  background:#1e293b; color:#fff !important;
  padding:.5rem 1rem; border-radius:8px; font-weight:800; letter-spacing:.2px;
}

/* Estado/etiqueta arriba a la derecha */
body.rifa-page .entry-content .rifa-catalogo .catalogo-etiqueta{
  position:absolute; top:10px; right:10px;
  background:#ff0000; color:#fff !important; padding:.3rem .6rem;
  border-radius:6px; font-size:.75rem; font-weight:800; z-index:2; box-shadow:0 2px 5px rgba(0,0,0,.1);
}

/* Botón primario */
body.rifa-page .entry-content .rifa-catalogo .catalogo-boton{
  display:inline-block; margin:.4rem auto 1rem; width:fit-content;
  background:#ff0000; color:#fff !important; padding:.55rem 1.2rem;
  border-radius:8px; font-weight:800; text-decoration:none !important; transition:.2s; box-shadow:0 4px 10px rgba(0,0,0,.15);
}
body.rifa-page .entry-content .rifa-catalogo .catalogo-boton:hover{ background:#cc0000; transform:translateY(-1px) }

/* Enlaces internos de la tarjeta en color oscuro (título, etc.) */
body.rifa-page .entry-content .rifa-catalogo .catalogo-item a{
  color:#111 !important; text-decoration:none;
}

/* Responsivo */
@media (max-width: 768px){
  /* filtros apilados */
  body.rifa-page .entry-content .rifa-catalogo .catalogo-filtros{
    justify-content:stretch; align-items:stretch;
  }
  body.rifa-page .entry-content .rifa-catalogo .catalogo-filtros :is(input[type="text"], select){
    min-width: unset; width:100%;
  }
  body.rifa-page .entry-content .rifa-catalogo .catalogo-filtros button{
    width:100%;
  }
  /* grid 1 columna cuando el espacio es muy estrecho */
  body.rifa-page .entry-content .rifa-catalogo .catalogo-grid{
    grid-template-columns: 1fr;
  }
}
.catalogo-grid .catalogo-item .catalogo-descripcion{
  -webkit-columns:auto !important;
  columns:auto !important;
  -webkit-column-count:1 !important;
  column-count:1 !important;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial,
               "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
               "Segoe UI Symbol", sans-serif;
}




/*SORTEO EN LINEA PARA EL ADMIN*/

/* contenedor: apila labels arriba y botones abajo */
.rv-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* filas ya existentes */
.rv-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:6px}

/* labels en una fila */
.rv-labels{gap:12px}

/* estilo de cada label */
.rv-label{display:flex;gap:6px;align-items:center;color:#fff}

/* fila de botones debajo */
.rv-buttons{gap:10px}

/* botones (si ya tienes estas reglas, puedes omitirlas) */
.rv-row button{
  padding:10px 14px;border-radius:10px;border:1px solid #fff3;
  background:#ffffff14;color:#fff;cursor:pointer;font-weight:700
}
.rv-row button:hover{background:#ffffff24}

/* link de descarga */
#rv-download{color:#fff;text-decoration:underline}


/*SORTEO EN LINEA */

/* --- COUNTDOWN --- */
.rv-countdown{
  margin:10px auto 0 auto; max-width:520px;
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  font-weight:800; color:#fff;
}
.rv-chip{
  background:#0b1220; border:1px solid #243244; border-radius:10px;
  padding:8px 12px; min-width:64px; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.rv-chip .num{ display:block; font-size:1.25rem; line-height:1; }
.rv-chip .lbl{ display:block; font-size:.7rem; opacity:.85; margin-top:4px; letter-spacing:.02em; }
.rv-live{ color:#22c55e; font-weight:900; }
.rv-done{ color:#fbbf24; font-weight:900; }


/* ===========================
   📱 RESPONSIVE
   =========================== */
 
@media (max-width: 768px) {
  .rifa-container {
    width: 100% !important;
   /* padding: 1.5rem !important;
    margin: 0 auto;
    background: rgba(17, 24, 39, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05); 
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); */
    backdrop-filter: blur(6px);
  }

  .rifa-bloque {
    width: 100%;
    padding: 1rem;
    padding-bottom: 1.8rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.2rem;
  }

  .rifa-img-wrap {
    max-width: 100%;
    margin: 0 auto 1.2rem auto;
    border-radius: 14px;
    overflow: hidden;
    background: #eceff7;
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    
  }

  .rifa-featured-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 14px;
  }

  .rifa-titulo-llamativo {
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 1rem 0;
    text-align: center;
  }

  .rifa-desc {
    font-size: 1.2rem !important;;
    line-height: 1.7 !important;;
    padding: 16px !important;
    width: 100%;
  }

  .rifa-legend {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 12px;
    }
    .rifa-legend span {
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 1.4;
    }

  
  .rifa-add-to-cart {
    font-size: 1rem;
    padding: 10px 22px;
    margin: 1.4rem auto 0 auto;
    display: block;
  }
  
  .formulario-consulta-rifa {
    padding: 40px !important;
  }
  .btn-elegir-azar {
      font-size: 1rem;
  }
  .numeros-lista {
    padding: 1rem 0.3rem;
    border-radius: 2px;
    gap: 8px;
}

  /* Si Elementor o el tema mete padding por fuera */
  .entry-content,
  .elementor-container,
  .elementor-widget-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    
  }
  
  
  #rifa-barra-info {
  align-items: center;
  font-size: 1.4rem;
}
}

/* Ver más / Ver menos DENTRO del contenedor, estilo solo texto */
@media (max-width: 768px) {
  .rifa-desc {
    position: relative;
  }
  /* Estado plegado (por defecto en móvil) */
  .rifa-desc.is-collapsed .rifa-desc__content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Estado expandido */
  .rifa-desc.is-expanded .rifa-desc__content {
    display: block;
    overflow: visible;
  }
  /* Toggle como texto (sin fondo) dentro del mismo contenedor */
  .rifa-desc__toggle {
    display: inline;                  /* puro texto */
    margin-left: .35em;               /* un pequeño espacio del texto */
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    color: #ff0000;                   /* rojo de marca */
    background: none;
    border: 0;
    padding: 0;
  }
  /* Si prefieres que salga en una línea aparte, cambia a inline-block: */
  /* .rifa-desc__toggle { display:inline-block; margin-top:8px; margin-left:0; } */
}
/* 🔒 Fuerza visual sólo cuando hay .selected */
.rifa-container .rifa-number.selected{
  background: var(--color-seleccionado) !important;
  color: #fff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 4px #2563eb77 !important;
}

/* Hover no debe “aplanar” estados no disponibles ni el seleccionado */
.rifa-container .rifa-number.selected:hover,
.rifa-container .rifa-number.sold:hover,
.rifa-container .rifa-number.reserved:hover,
.rifa-container .rifa-number.in_cart:hover,
.rifa-container .rifa-number.in_cart_other:hover {
  background: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Hover solo para disponibles NO seleccionados */
.rifa-container .rifa-number.available:not(.selected):hover {
  background: #e0e7ff;
  border-color: var(--color-en-carrito);
  color: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.rifa-number {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Fuerza que el contenedor del botón azar respete el flujo dentro del panel */
.rifa-panel-resumen .rifa-azar-wrap,
.rifa-summary .rifa-azar-wrap,
.resumen-rifa .rifa-azar-wrap {
  display: block;
  margin-top: 12px;
  width: 100%;
}

/* Botón ancho dentro del panel */
.rifa-panel-resumen .rifa-azar-wrap .rifa-azar-btn,
.rifa-summary .rifa-azar-wrap .rifa-azar-btn,
.resumen-rifa .rifa-azar-wrap .rifa-azar-btn {
  width: 100%;
}