/**
 * UKUBOM Styles - frontend.css
 *
 * Correcciones de contraste scoped, resultado de la auditoría del
 * 2026-09-01. Astra funciona en modo oscuro (astra-dark-mode-enable) y
 * pone los headings en blanco globalmente, pero varias barras de título
 * de WooCommerce siguen trayendo un fondo claro fijo (#fbfbfb / rgba
 * blanco) pensado para tema claro. Cada bloque corrige un componente
 * concreto, en el contexto donde se confirmó el problema.
 */

/* WooCommerce — Order received: título "Detalles del pedido".
   El selector de fondo necesita 5 clases reales (checkout, woocommerce,
   order, order-details, order-details__title) para superar la
   especificidad (0,0,4,1) de la regla original de woocommerce-grid.min.css
   sin recurrir a !important — comprobado con getComputedStyle(). */
.woocommerce-checkout .woocommerce-order-details__title {
	color: var(--ast-global-color-8);
}

.woocommerce-checkout .woocommerce .woocommerce-order .woocommerce-order-details .woocommerce-order-details__title {
	background-color: #e8eaed;
}

/* WooCommerce — Cabeceras de dirección ("Dirección de facturación" /
   "Dirección de envío"): mismo componente WooCommerce reutilizado en
   order-received, Mi Cuenta > Direcciones y Mi Cuenta > Ver pedido.
   El color ya gana con el selector simple (compite solo con el h2 global,
   muy poco específico); el fondo compite con reglas de WooCommerce más
   específicas y necesita apoyarse en los contenedores reales
   (.woocommerce-order en checkout, .woocommerce-customer-details +
   .woocommerce-columns--addresses en ambos) para ganar sin !important. */
.woocommerce-checkout .woocommerce-column__title,
.woocommerce-account .woocommerce-column__title {
	color: var(--ast-global-color-8);
}

.woocommerce-checkout .woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column__title,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column__title {
	background-color: #e8eaed;
}

/* Mi Cuenta > Direcciones: en .woocommerce-Address-title el fondo
   #fbfbfb vive en el <header>, no en el h2 sin clase que contiene —
   por eso el color y el fondo van en selectores distintos. El fondo se
   apoya en .woocommerce-Addresses.addresses (contenedor real de la
   pantalla de listado de direcciones) para superar la especificidad de
   la regla original sin !important. */
.woocommerce-account .woocommerce-Address-title h2 {
	color: var(--ast-global-color-8);
}

.woocommerce-account .woocommerce-Addresses.addresses .woocommerce-Address-title {
	background-color: #e8eaed;
}

/* WooCommerce — View order: número, fecha y estado del pedido
   ("El pedido #... se realizó ... y está actualmente ..."). El <mark>
   de Astra pierde su fondo amarillo pero conserva color:#000, quedando
   negro sobre el fondo oscuro del sitio. */
.woocommerce-view-order .order-number,
.woocommerce-view-order .order-date,
.woocommerce-view-order .order-status {
	color: var(--ast-global-color-2);
}

/* WooCommerce — Shop category cards (/tienda/) */
.woocommerce-shop .woocommerce-loop-category__title {
	color: var(--ast-global-color-8);
}

/* WooCommerce — Checkout payment card. La pasarela "Tarjeta" es
   WooCommerce Payments (Stripe): los campos "Número de tarjeta",
   "Fecha de caducidad" y "Código de seguridad" se renderizan dentro de
   un <iframe> de origen cruzado (js.stripe.com) — no se pueden tocar
   con CSS, ni desde este plugin ni desde ningún otro (requeriría la
   Appearance API de Stripe, configurada en el JS del propio plugin
   WooCommerce Payments, no en una hoja de estilos). En vez de forzar el
   único label externo ("Guardar la información...") a oscuro, se
   integra todo el payment_box en el diseño oscuro: el iframe de Stripe
   tiene fondo transparente, así que al oscurecer el panel que hay
   detrás, el texto claro que Stripe ya renderiza internamente (y el
   label "Guardar..." heredado de .astra-dark-mode-enable label) quedan
   legibles sin tocar nada dentro del iframe. Color reutilizado:
   var(--ast-global-color-6) (#4F5B62), ya existente en la paleta de
   Astra/UKUBOM y prácticamente idéntico al #50575e probado en vivo —
   se prefiere la variable a duplicar un hex nuevo. El selector necesita
   4 clases reales (checkout, page, payment_box, payment_method_...)
   para superar la especificidad (0,1,3,1) de la regla original de
   woocommerce-grid.min.css (que incluye #payment) sin !important.
   Scoped únicamente a esta pasarela — no toca payment_box de otros
   métodos de pago ni labels/inputs/fieldsets globales. */
.woocommerce-checkout.woocommerce-page #payment div.payment_box.payment_method_woocommerce_payments {
	background-color: var(--ast-global-color-6);
}

/* Misma pasarela: la flecha que apunta a "Tarjeta" es un ::before con
   border-bottom-color fijo al mismo claro original — sin este ajuste
   queda un triángulo claro sobre la caja ya oscurecida. */
.woocommerce-checkout.woocommerce-page #payment div.payment_box.payment_method_woocommerce_payments::before {
	border-bottom-color: var(--ast-global-color-6);
}

/* Ukademy — Product price table. Tabla generada por PPOM (Product Price
   Based on Options), plugin de opciones de precio: .ppom-wrapper trae
   su propio bootstrap.css con ".ppom-wrapper .table { color: #212529 }",
   pensado para fondo claro. Sobre el fondo oscuro de UKUBOM el texto
   queda casi invisible. Mismo componente en cualquier producto que use
   PPOM (la regla no depende del ID de producto), así que el fix cubre
   todas sus instancias sin tocar tablas WooCommerce genéricas. */
.single-product .ppom-wrapper .table {
	color: var(--ast-global-color-3);
}

/* Ukademy — cierre del borde izquierdo de la tabla. La tabla y sus
   celdas ya traen borde arriba/derecha/abajo (1px solid rgb(221,221,221),
   valor real comprobado con getComputedStyle) pero ningún borde
   izquierdo — la tabla queda visualmente "abierta". Se añade en la
   primera columna real (.ppom-label-item) reutilizando exactamente ese
   mismo color/grosor/estilo, igual que el resto de bordes ya
   existentes. Scoped a PPOM en producto, no toca tablas WooCommerce. */
.single-product .ppom-wrapper .table th.ppom-label-item {
	border-left: 1px solid rgb(221, 221, 221);
}