/* =========================================================
   REPARACIÓN DEFINITIVA DE CONTENEDORES Y DESPLEGABLES (SELECT2)
   ========================================================= */

/* 1. Abrir espacio en la fila contenedora para evitar recortes */
#page .woocommerce-checkout .form-row,
#page .woocommerce-checkout .form-row-wide,
#page .woocommerce-checkout #billing_country_field,
#page .woocommerce-checkout #billing_state_field,
#page .woocommerce-checkout #shipping_country_field,
#page .woocommerce-checkout #shipping_state_field {
  overflow: visible !important;
  height: auto !important;
  min-height: 75px !important;
  margin-bottom: 15px !important;
  position: relative !important;
  clear: both !important;
}

/* 2. Forzar que el nombre de la casilla (Label) quede siempre arriba */
#page .woocommerce-checkout .form-row label {
  display: block !important;
  position: relative !important;
  float: none !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  height: auto !important;
  line-height: 1.2 !important;
}

/* 3. Reestructurar la caja del desplegable (Select2) */
#page .woocommerce-checkout .select2-container {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  z-index: 20 !important;
}

#page .woocommerce-checkout .select2-container .select2-selection--single {
  height: 48px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* 4. Alinear el texto seleccionado internamente sin solapamiento */
#page .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 46px !important;
  padding-left: 14px !important;
  padding-right: 38px !important; /* Espacio para que la flecha no tape el texto */
  color: #0f172a !important;
  font-size: 14px !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* 5. Posicionar la flecha del desplegable */
#page .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
  position: absolute !important;
  right: 12px !important;
  top: 0 !important;
  width: 20px !important;
}

/* 6. Elevar la lista desplegada por encima de cualquier otro elemento */
body .select2-container--open {
  z-index: 999999 !important;
}

body .select2-container--open .select2-dropdown {
  border: 1px solid #00b4d8 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  z-index: 999999 !important;
}

/* =========================================================
   BOTÓN FUTURISTA DE FINALIZAR COMPRA (CHECKOUT)
   ========================================================= */
/* Aplica al botón principal del carrito y de la caja de pago */
#page .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
#page .woocommerce-checkout #place_order,
#page .wc-block-cart__submit-button,
#page .wc-block-checkout__is-place-order-button {
  display: block !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 15px auto !important;
  padding: 14px 28px !important;
  
  /* Estilo visual y tipografía */
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #ffffff !important;
  
  /* Formas y gradiente neón futurista */
  border-radius: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: linear-gradient(135deg, #00b4d8, #0077b6, #03045e) !important;
  background-size: 200% auto !important;
  
  /* Sombra de brillo neón */
  box-shadow: 0 4px 20px rgba(0, 180, 216, 0.45) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  cursor: pointer !important;
}

/* Efecto al pasar el cursor (Hover) */
#page .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
#page .woocommerce-checkout #place_order:hover,
#page .wc-block-cart__submit-button:hover,
#page .wc-block-checkout__is-place-order-button:hover {
  background-position: right center !important; /* Desplaza el gradiente */
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(0, 180, 216, 0.7) !important; /* Resplandor más intenso */
}

/* Efecto al hacer clic (Active) */
#page .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active,
#page .woocommerce-checkout #place_order:active {
  transform: translateY(-1px) scale(0.99) !important;
  box-shadow: 0 2px 10px rgba(0, 180, 216, 0.3) !important;
}

/* Oculta metadatos de fecha en productos y resultados */
.product .posted_on,
.product .entry-meta .published,
.product-date {
    display: none !important;
}

/* Reducir márgenes e interlineado general en formularios del tema */
.widget .wpforms-container,
.entry-content .wpforms-form,
.entry-content form {
    margin-bottom: 0 !important;
}

/* Espaciado compacto entre campos */
.entry-content .form-group,
.entry-content .wpforms-field,
.entry-content p:has(input) {
    margin-bottom: 10px !important;
}

/* Compactar altura y relleno de los campos de texto en Apostrophe 2 */
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content select {
    padding: 6px 12px !important;
    height: 38px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

/* Reducir el tamaño del área de mensaje */
.entry-content textarea {
    padding: 8px 12px !important;
    height: 75px !important;
    font-size: 13px !important;
}

/* Opcional: Ocultar etiquetas superiores para ganar espacio vertical */
/* (Asegúrate de configurar "Placeholders" en el plugin del formulario) */
.entry-content label {
    margin-bottom: 3px !important;
    font-size: 12px !important;
}

/* =========================================================
   1. PAPELERA EN EL CARRITO (CLÁSICO + BLOQUES GUTEBERG)
   ========================================================= */
/* Carrito Clásico y Carrito en Bloques */
#page .woocommerce table.cart td.product-remove,
#page .wc-block-cart-items__row .wc-block-cart-item__remove-link {
  vertical-align: middle !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#page .woocommerce table.cart a.remove,
#page .wc-block-cart-item__remove-link {
  font-size: 0 !important;
  line-height: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #fef2f2 !important;
  border: 1px solid #fee2e2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#page .woocommerce table.cart a.remove::before,
#page .wc-block-cart-item__remove-link::before {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  background-color: #ef4444 !important;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"/></svg>') no-repeat center / contain !important;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"/></svg>') no-repeat center / contain !important;
}

/* =========================================================
   2. BOTONES FUTURISTAS Y TARJETAS EN RECOMENDADOS / BLOQUES
   ========================================================= */
/* Target universal para cualquier rejilla de productos o bloques */
#page .related,
#page .upsells,
#page .cross-sells,
#page .wp-block-woocommerce-related-products,
#page .wc-block-grid {
  margin-top: 30px !important;
}

/* Tarjetas */
#page .related li.product,
#page .cross-sells li.product,
#page .wc-block-grid__product {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 15px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Botones suaves en recomendados */
#page .related .button,
#page .cross-sells .button,
#page .wc-block-grid__product-add-to-cart,
#page .wc-block-components-product-button {
  padding: 0.4 px 1px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 180, 216, 0.4) !important;
  background: var(--futuristic-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px var(--futuristic-accent-glow) !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
}
/* =========================================================
   1. COLOR FUTURISTA GENERAL Y PALETA NEÓN
   ========================================================= */
:root {
  --futuristic-bg: #0b0f19;
  --futuristic-card: #111827;
  --futuristic-accent: #00b4d8; /* Azul Neón / Cian */
  --futuristic-accent-glow: rgba(0, 180, 216, 0.35);
  --futuristic-gradient: linear-gradient(135deg, #00b4d8, #0077b6);
  --futuristic-gradient-hover: linear-gradient(135deg, #90e0ef, #00b4d8);
}

/* =========================================================
   2. REFUERZO E ICONO DEL CARRITO DE COMPRAS EN EL MENÚ
   ========================================================= */
/* Inserción directa de vector SVG de carrito futurista */
.main-navigation ul li a[href*="carrito"]::before,
.main-navigation ul li a[href*="cart"]::before,
.site-header a[href*="carrito"]::before,
.site-header a[href*="cart"]::before,
.menu-item-cart a::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  background-color: var(--futuristic-accent) !important;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c13.3 0 24.5 9.3 27 22.3L104.9 64H552c15.4 0 26.6 14.6 22.8 29.5l-51.4 205.6c-3.1 12.3-14.2 20.9-26.9 20.9H148.3l-12.7 51.2H496c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24.5-9.3-27-22.3L38.2 32H24C10.7 32 0 21.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm288 0a48 48 0 1 1 96 0 48 48 0 1 1 -96 0z"/></svg>') no-repeat center / contain !important;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c13.3 0 24.5 9.3 27 22.3L104.9 64H552c15.4 0 26.6 14.6 22.8 29.5l-51.4 205.6c-3.1 12.3-14.2 20.9-26.9 20.9H148.3l-12.7 51.2H496c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24.5-9.3-27-22.3L38.2 32H24C10.7 32 0 21.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm288 0a48 48 0 1 1 96 0 48 48 0 1 1 -96 0z"/></svg>') no-repeat center / contain !important;
  filter: drop-shadow(0 0 4px var(--futuristic-accent-glow)) !important;
}

/* =========================================================
   3. BOTONES SUAVES Y FUTURISTAS (TODAS LAS SECCIONES)
   ========================================================= */
.site-content .button,
.site-content button,
.site-content input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.related.products a.button,
.cross-sells a.button {
  padding: 8px 18px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 180, 216, 0.4) !important;
  background: var(--futuristic-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px var(--futuristic-accent-glow) !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.related.products a.button:hover,
.cross-sells a.button:hover {
  background: var(--futuristic-gradient-hover) !important;
  color: #0b0f19 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 180, 216, 0.6) !important;
}

/* =========================================================
   4. TARJETAS DE PRODUCTO UNIFORMES Y ESTILO CRISTAL/NEÓN
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--futuristic-accent) !important;
  box-shadow: 0 8px 24px var(--futuristic-accent-glow) !important;
  transform: translateY(-3px) !important;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  height: 180px !important;
  max-height: 180px !important;
  width: 100% !important;
  object-fit: contain !important;
  margin-bottom: 12px !important;
}

/* =========================================================
   5. MANTENER PAPELERA LIMPIA Y FUNCIONAL
   ========================================================= */
.woocommerce table.cart a.remove,
.woocommerce-mini-cart-item a.remove {
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #fef2f2 !important;
  border: 1px solid #fee2e2 !important;
}

.woocommerce table.cart a.remove::before,
.woocommerce-mini-cart-item a.remove::before {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
  background-color: #ef4444 !important;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"/></svg>') no-repeat center / contain !important;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"/></svg>') no-repeat center / contain !important;
}

/* =========================================================
   CORRECCIÓN DE CAMPOS ENCIMADOS EN FINALIZAR COMPRA
   ========================================================= */

/* 1. Forzar que la etiqueta (Label) se ubique SIEMPRE arriba del campo */
#page .woocommerce-checkout .form-row label,
#page .wc-block-checkout .wc-block-components-text-input label,
#page .woocommerce-checkout .form-row .woocommerce-input-wrapper {
  display: block !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  float: none !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important; /* Texto oscuro y legible */
  pointer-events: auto !important;
}

/* 2. Formato estandarizado de la casilla de entrada (Input) */
#page .woocommerce-checkout input.input-text,
#page .woocommerce-checkout textarea,
#page .woocommerce-checkout select,
#page .wc-block-components-text-input input {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #0f172a !important; /* Texto claro cuando el cliente escribe */
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* 3. Estilo al enfocar la casilla (Focus) con tono futurista */
#page .woocommerce-checkout input.input-text:focus,
#page .woocommerce-checkout textarea:focus,
#page .woocommerce-checkout select:focus {
  border-color: #00b4d8 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.2) !important;
}

/* 4. Ocultar placeholder interno si la casilla no es flotante para evitar doble texto */
#page .woocommerce-checkout input::placeholder,
#page .woocommerce-checkout textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 0.7 !important;
}

/* 5. Corrección específica para menús desplegables (Select2 / Departamentos) */
#page .woocommerce-checkout .select2-container .select2-selection--single {
  height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
}
.clase-de-tu-quiz {
  /* Ancho responsivo: máximo 600px en PC, 100% en pantallas pequeñas */
  max-width: 600px !important; 
  width: 90% !important;

  /* Altura dinámica: se ajusta al contenido para no cortar texto */
  min-height: 480px !important; 
  height: auto !important;

  /* Centrado en la página */
  margin-left: auto !important;
  margin-right: auto !important;
}