/**
 * Estilos WooCommerce para el tema oscuro DSS.
 * Cubre: mi cuenta, login/registro, formularios (incluye "Ser Revendedor"),
 * carrito, checkout, tablas, notices y botones. Usa las variables de global.css.
 */

/* ---------- Contenedor general ---------- */
.woocommerce,
.woocommerce-page {
	color: var(--dss-text-primary);
}
/* Acotado a .site-main: `body` lleva la clase `woocommerce`, asi que
   `.woocommerce .container` tambien pegaba en el header, la nav de categorias
   y el footer, que usan `.container` para su ancho maximo. */
.woocommerce .site-main > .container,
.woocommerce-account .content-area {
	padding-top: 40px;
	padding-bottom: 60px;
}

/* ---------- Notices / mensajes ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-store-notice {
	background: var(--dss-bg-card);
	border-left: 4px solid var(--dss-accent);
	color: var(--dss-text-primary);
	border-radius: var(--dss-radius-sm);
	padding: 14px 18px;
	list-style: none;
	margin-bottom: 20px;
}
.woocommerce-error { border-left-color: #ef4444; }
.woocommerce-message { border-left-color: #22c55e; }
.woocommerce-message a,
.woocommerce-info a { color: var(--dss-accent-hover); }

/* ---------- Formularios / inputs ---------- */
.woocommerce form .form-row label,
.woocommerce-account label,
.dss-reseller-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--dss-text-secondary);
}
.woocommerce form .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.select2-container .select2-selection {
	width: 100%;
	max-width: 480px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--dss-border);
	border-radius: var(--dss-radius-sm);
	color: var(--dss-text-primary);
	padding: 12px 14px;
	font-family: var(--dss-font-main);
	font-size: 0.95rem;
	transition: var(--dss-transition);
	box-sizing: border-box;
}
.woocommerce form .input-text:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	outline: none;
	border-color: var(--dss-accent);
	box-shadow: 0 0 0 3px var(--dss-accent-glow);
	background: rgba(255, 255, 255, 0.05);
}
.woocommerce form .input-text::placeholder,
.woocommerce textarea::placeholder { color: var(--dss-text-muted); }

/* ---------- Botones ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--dss-accent), #C77DFF);
	color: #fff;
	padding: 12px 26px;
	border: none;
	border-radius: 30px;
	font-weight: 600;
	font-family: var(--dss-font-main);
	cursor: pointer;
	transition: var(--dss-transition);
	box-shadow: 0 4px 15px var(--dss-accent-glow);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 25px var(--dss-accent-glow);
}
.woocommerce .button.alt,
.woocommerce #place_order { width: auto; }

/* ---------- Mi Cuenta: navegación ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-bottom: 1px solid var(--dss-border);
	padding-bottom: 16px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 16px;
	border-radius: var(--dss-radius-sm);
	background: var(--dss-bg-card);
	color: var(--dss-text-secondary);
	font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--dss-accent);
	color: #fff;
}

/* ---------- Tablas (carrito, pedidos, descargas) ---------- */
.woocommerce table.shop_table {
	background: var(--dss-bg-card);
	border: 1px solid var(--dss-border);
	border-radius: var(--dss-radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	color: var(--dss-text-primary);
}
.woocommerce table.shop_table th {
	background: rgba(255, 255, 255, 0.03);
	color: var(--dss-text-secondary);
	padding: 14px 16px;
	text-align: left;
}
.woocommerce table.shop_table td {
	padding: 14px 16px;
	border-top: 1px solid var(--dss-border);
}
.woocommerce table.shop_table a { color: var(--dss-text-primary); }
.woocommerce table.shop_table a:hover { color: var(--dss-accent-hover); }

/* ---------- Cart totals / checkout review ---------- */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--dss-bg-card);
	border: 1px solid var(--dss-border);
	border-radius: var(--dss-radius-md);
	padding: 20px;
}

/* ---------- Precio ---------- */
.woocommerce .price,
.woocommerce span.amount,
.woocommerce .woocommerce-Price-amount { color: var(--dss-text-primary); }
.woocommerce del { color: var(--dss-text-muted); }
.woocommerce ins { text-decoration: none; color: var(--dss-accent-hover); }

/* ---------- Cuentas DSS (Mis Cuentas) ---------- */
.dss-account-card {
	background: var(--dss-bg-card);
	border: 1px solid var(--dss-border) !important;
	border-radius: var(--dss-radius-md) !important;
}
.dss-account-card code {
	background: rgba(255, 255, 255, 0.06);
	padding: 2px 8px;
	border-radius: 4px;
	color: var(--dss-accent-hover);
}
.dss-code-result { min-height: 24px; color: var(--dss-text-primary); }

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
	.woocommerce form .input-text,
	.woocommerce input,
	.woocommerce textarea,
	.woocommerce select { max-width: 100%; }
}

/* ============================================================
   Single Product (movido desde single-product.php inline)
   ============================================================ */
.single-product-container { padding-top: 40px; margin-bottom: 60px; }
.dss-single-product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	margin-bottom: 50px;
}
.dss-product-gallery img {
	border-radius: var(--dss-radius-md);
	border: 1px solid var(--dss-border);
	width: 100%;
	height: auto;
}
.woocommerce-product-gallery__trigger { display: none; }

.dss-product-summary {
	background: var(--dss-bg-card);
	padding: 40px;
	border-radius: var(--dss-radius-lg);
	border: 1px solid var(--dss-border);
}
.single-product-meta {
	color: var(--dss-text-muted);
	font-size: 0.9rem;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.dss-product-summary .product_title {
	font-size: 2.2rem;
	margin: 0 0 20px;
	line-height: 1.2;
}
.single-product-price {
	font-size: 2rem;
	font-weight: 700;
	color: var(--dss-accent);
	margin-bottom: 25px;
}
.single-product-price del { font-size: 1.2rem; color: var(--dss-text-muted); font-weight: 400; margin-right: 10px; }
.single-product-price ins { text-decoration: none; }

.single-product-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: var(--dss-bg-main);
	border-radius: var(--dss-radius-md);
}
.single-product-trust span { font-size: 0.9rem; color: #2ecc71; font-weight: 500; }
.single-product-trust span:nth-child(2) { color: #3498db; }
.single-product-trust span:nth-child(3) { color: #f1c40f; }

.single-product-short-desc { color: var(--dss-text-secondary); margin-bottom: 30px; }

.single-product-action form.cart { display: flex; gap: 15px; margin-bottom: 30px; align-items: center; flex-wrap: wrap; }
.single-product-action .quantity input {
	background: var(--dss-bg-main);
	border: 1px solid var(--dss-border);
	color: #fff;
	padding: 12px;
	border-radius: var(--dss-radius-sm);
	width: 70px;
	text-align: center;
}
.single-product-action button[type="submit"] {
	flex-grow: 1;
	min-width: 180px;
}

.single-product-support-box { border-top: 1px solid var(--dss-border); padding-top: 25px; text-align: center; }
.single-product-support-box p { color: var(--dss-text-muted); margin-bottom: 15px; }
.single-product-support-box .btn { width: 100%; display: block; }

.dss-product-details {
	background: var(--dss-bg-card);
	padding: 40px;
	border-radius: var(--dss-radius-lg);
	border: 1px solid var(--dss-border);
}
.dss-product-details h2 { margin-top: 0; padding-bottom: 15px; border-bottom: 1px solid var(--dss-border); margin-bottom: 25px; }
.details-content { color: var(--dss-text-secondary); line-height: 1.7; }

@media (max-width: 768px) {
	.dss-single-product { grid-template-columns: 1fr; gap: 30px; }
	.dss-product-summary, .dss-product-details { padding: 24px; }
}

/* ---------- Shop: sidebar de categorías ---------- */
.dss-shop-widget { background: var(--dss-bg-card); border: 1px solid var(--dss-border); border-radius: var(--dss-radius-md); padding: 20px; }
.dss-shop-widget__title { font-size: 1rem; margin: 0 0 14px; }
.dss-cat-list { list-style: none; margin: 0; padding: 0; }
.dss-cat-list li { margin: 0; }
.dss-cat-list li a {
	display: flex; justify-content: space-between; align-items: center;
	padding: 9px 12px; border-radius: var(--dss-radius-sm);
	color: var(--dss-text-secondary); font-size: 0.92rem; transition: var(--dss-transition);
}
.dss-cat-list li a:hover { background: rgba(255,255,255,0.04); color: var(--dss-text-primary); }
.dss-cat-list li.is-active a { background: var(--dss-accent); color: #fff; }
.dss-cat-count { font-size: 0.78rem; opacity: 0.7; background: rgba(255,255,255,0.08); border-radius: 10px; padding: 1px 8px; }
.dss-cat-list li.is-active .dss-cat-count { background: rgba(255,255,255,0.25); }

/* ---------- Breadcrumbs (migas de pan) ---------- */
.dss-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px;
	font-size: 0.85rem;
	color: var(--dss-text-primary); /* item actual (último, sin enlace) = brillante */
	margin: 0 0 26px;
	line-height: 1.5;
}
.dss-breadcrumb a {
	color: var(--dss-text-secondary);
	padding: 3px 8px;
	border-radius: 6px;
	transition: var(--dss-transition);
}
.dss-breadcrumb a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
}
.dss-bc-sep {
	color: var(--dss-text-muted);
	font-size: 1rem;
	margin: 0 1px;
	line-height: 1;
}

/* ---------- Panel Consultar Códigos (estilo MAYFLUX) ---------- */
.dss-codes-head h3 { margin: 0 0 4px; font-size: 1.4rem; }
.dss-codes-head p { color: var(--dss-text-secondary); margin: 0 0 24px; }
.dss-codes-grid { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.dss-codes-form {
	background: var(--dss-bg-card);
	border: 1px solid var(--dss-border);
	border-radius: var(--dss-radius-md);
	padding: 22px;
	display: flex; flex-direction: column; gap: 8px;
}
.dss-codes-form label { margin-top: 8px; font-weight: 600; color: var(--dss-text-secondary); }
.dss-codes-form input, .dss-codes-form select { max-width: none !important; }
.dss-codes-form #dss-code-submit { margin-top: 18px; width: 100%; }
.dss-codes-counter {
	display: flex; justify-content: space-between; align-items: center;
	background: rgba(255,255,255,0.03); border: 1px solid var(--dss-border);
	border-radius: var(--dss-radius-sm); padding: 12px 16px; margin-bottom: 6px;
}
.dss-codes-counter span { color: var(--dss-text-secondary); font-size: 0.9rem; }
.dss-codes-counter strong { font-size: 1.4rem; color: var(--dss-accent-hover); }
.dss-codes-result {
	min-height: 260px;
	background: var(--dss-bg-card);
	border: 1px solid var(--dss-border);
	border-radius: var(--dss-radius-md);
	padding: 22px;
}
.dss-codes-placeholder { color: var(--dss-text-muted); text-align: center; padding: 60px 20px; }
.dss-code-value { text-align: center; margin-bottom: 14px; }
.dss-code-value strong {
	display: inline-block;
	font-size: 2.4rem; letter-spacing: 6px; font-weight: 800;
	color: #fff; background: rgba(138,43,226,0.12);
	border: 1px solid var(--dss-accent); border-radius: var(--dss-radius-md);
	padding: 14px 26px;
}
.dss-code-meta { text-align: center; color: var(--dss-text-secondary); font-size: 0.85rem; margin-bottom: 16px; }
.dss-code-email-frame {
	width: 100%; height: 420px; border: 1px solid var(--dss-border);
	border-radius: var(--dss-radius-sm); background: #fff;
}
@media (max-width: 782px) {
	.dss-codes-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Paginacion de la tienda
   WooCommerce la imprime con paginate_links( type => 'list' ):
   nav.woocommerce-pagination > ul.page-numbers > li > a|span.page-numbers
   El tema desencola woocommerce-general/layout, asi que sin estas reglas
   queda como lista con vinetas.
   ========================================================================== */
.woocommerce-pagination { margin: 50px 0 20px; }
.woocommerce-pagination ul.page-numbers {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.woocommerce-pagination ul.page-numbers li { list-style: none; margin: 0; }
.woocommerce-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 14px;
	background: var(--dss-bg-card); border: 1px solid var(--dss-border);
	border-radius: var(--dss-radius-sm);
	color: var(--dss-text-secondary); text-decoration: none;
	font-family: var(--dss-font-main); font-weight: 600; font-size: 0.95rem;
	transition: var(--dss-transition);
}
.woocommerce-pagination a.page-numbers:hover {
	background: var(--dss-bg-card-hover); border-color: var(--dss-accent);
	color: #fff; transform: translateY(-2px);
}
.woocommerce-pagination .page-numbers.current {
	background: var(--dss-accent); border-color: var(--dss-accent);
	color: #fff; box-shadow: 0 4px 15px var(--dss-accent-glow);
}
.woocommerce-pagination .page-numbers.dots {
	background: none; border-color: transparent; color: var(--dss-text-muted);
}
.woocommerce-pagination .page-numbers.dots:hover { transform: none; }
.woocommerce-pagination .prev,
.woocommerce-pagination .next { font-size: 1.15rem; }

@media (max-width: 480px) {
	.woocommerce-pagination ul.page-numbers { gap: 6px; }
	.woocommerce-pagination .page-numbers {
		min-width: 38px; height: 38px; padding: 0 10px; font-size: 0.9rem;
	}
}

/* ==========================================================================
   TeraWallet (woo-wallet 1.6.8) en tema oscuro
   El plugin trae su propia hoja (assets/css/frontend/main.css) pensada para
   fondo claro: superficies #fff / #f0f0f0 y texto #333. Sobre nuestro tema
   oscuro quedaba un bloque blanco en /mi-cuenta/my-wallet/.
   Expone 4 custom properties en .woo-wallet-my-wallet-container, pero solo 14
   de sus 112 reglas las usan; las otras 98 llevan color fijo. Su documentacion
   oficial no ofrece modo oscuro ni API de estilos, asi que hay que sobrescribir.
   Es el caso que CLAUDE.md permite para !important: sobrescribir un tercero.
   Todo va acotado a .woo-wallet-my-wallet-container para no salpicar nada mas.
   ========================================================================== */

/* 1. Las variables que si respeta (14 reglas gratis) */
.woo-wallet-my-wallet-container {
	--wallet-primary-color: var(--dss-accent);
	--wallet-text-color: var(--dss-text-primary);
	--wallet-bg-color: var(--dss-bg-main);
	--wallet-border-color: var(--dss-border);
}

/* 2. Superficies con color fijo */
.woo-wallet-my-wallet-container .woo-wallet-top-section,
.woo-wallet-my-wallet-container .woo-wallet-content-area,
.woo-wallet-my-wallet-container .woo-wallet-stat-card,
.woo-wallet-my-wallet-container .woo-wallet-nav-tabs,
.woo-wallet-my-wallet-container .woo-wallet-nav-tab {
	background: var(--dss-bg-card) !important;
	border-color: var(--dss-border) !important;
}
.woo-wallet-my-wallet-container .woo-wallet-nav-tab:hover,
.woo-wallet-my-wallet-container .woo-wallet-nav-tab:focus,
.woo-wallet-my-wallet-container .woo-wallet-nav-tab:active,
.woo-wallet-my-wallet-container .woo-wallet-nav-tab.active {
	background: var(--dss-bg-card-hover) !important;
	color: var(--dss-accent-hover) !important;
}

/* 3. Texto: catch-all acotado, mas barato que replicar 80 selectores.
   Se excluyen los chips de icono, que llevan fondo pastel propio y contraste
   correcto, y la tarjeta de saldo, que va sobre el degradado morado. */
.woo-wallet-my-wallet-container :is(h1,h2,h3,h4,h5,h6,p,span,td,th,label,li,strong,em,small,dt,dd):not(.woo-wallet-stat-card__icon):not(.woo-wallet-stat-card__icon *):not(.woo-wallet-balance-card):not(.woo-wallet-balance-card *) {
	color: var(--dss-text-primary) !important;
}
/* La tarjeta de saldo va sobre el degradado morado: su blanco ya es correcto. */
.woo-wallet-my-wallet-container .woo-wallet-balance-card,
.woo-wallet-my-wallet-container .woo-wallet-balance-card * {
	color: #fff !important;
}
.woo-wallet-my-wallet-container .woo-wallet-stat-card__label,
.woo-wallet-my-wallet-container .woo-wallet-header p {
	color: var(--dss-text-secondary) !important;
}

/* 4. Tablas de transacciones */
.woo-wallet-my-wallet-container table,
.woo-wallet-my-wallet-container table th,
.woo-wallet-my-wallet-container table td {
	background: transparent !important;
	border-color: var(--dss-border) !important;
}

/* 5. Superficies claras de las subpaginas (/add/, /transfer/, /transactions/).
   Estas no estaban en la primera pasada porque solo inspeccione /my-wallet/:
   quedaban blancas y, al forzar el texto a claro en el punto 3, se volvian
   ilegibles (blanco sobre blanco). Inventario tomado de las 4 subpaginas. */
.woo-wallet-my-wallet-container .woo-wallet-section-title,
.woo-wallet-my-wallet-container .woo-wallet-transactions-list,
.woo-wallet-my-wallet-container .woo-wallet-table-controls {
	background: var(--dss-bg-card) !important;
	border-color: var(--dss-border) !important;
}

/* 6. Campos de formulario del monedero (importe, transferencia, filtros de fecha).
   El plugin los pinta #f9f9f9/#fff, que con nuestro texto claro no se leian. */
.woo-wallet-my-wallet-container input,
.woo-wallet-my-wallet-container textarea,
.woo-wallet-my-wallet-container select {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: var(--dss-border) !important;
	color: var(--dss-text-primary) !important;
}
.woo-wallet-my-wallet-container input::placeholder,
.woo-wallet-my-wallet-container textarea::placeholder {
	color: var(--dss-text-muted) !important;
}

/* 7. Tabulator: la libreria de tablas va compilada dentro del bundle de
   woo-wallet (build/frontend/main.js), no como hoja aparte, asi que no se
   puede sustituir por su tema oscuro: hay que sobrescribir sus clases. */
.woo-wallet-my-wallet-container .tabulator,
.woo-wallet-my-wallet-container .tabulator-header,
.woo-wallet-my-wallet-container .tabulator-footer,
.woo-wallet-my-wallet-container .tabulator-col,
.woo-wallet-my-wallet-container .tabulator-row,
.woo-wallet-my-wallet-container .tabulator-alert-msg {
	background: var(--dss-bg-card) !important;
	border-color: var(--dss-border) !important;
	color: var(--dss-text-primary) !important;
}
.woo-wallet-my-wallet-container .tabulator-row:hover {
	background: var(--dss-bg-card-hover) !important;
}

/* 8. Controles donde el propio plugin ya usa !important con MAS especificidad
   que el punto 6, asi que ahi !important no decide: entre dos !important gana
   la especificidad. Medido en el navegador, no supuesto:
     suya: .woo-wallet-my-wallet-container .woo-wallet-table-controls
           input[type=date]                                          (0,3,1)
   El prefijo body sube un nivel de elemento y la supera sin inventar clases.

   NO se incluye aqui el <select> .tabulator-page-size del pie de la tabla.
   Se intento y no se pudo: con un selector de mayor especificidad (0,5,1) e
   !important, `appearance` del mismo bloque SI se aplica pero `background` y
   `color` no. No hay estilo inline, ni regla rival dentro de @media (ambas
   cosas comprobadas). Sospecha no confirmada: el renderizado nativo de
   <select> de Chrome. Se deja sin tocar a proposito: forzar appearance:none
   le quitaria la flecha del desplegable y quedaria peor que ahora, que es
   blanco con texto gris (legible, solo inconsistente con el tema). */
body .woo-wallet-my-wallet-container .woo-wallet-table-controls input,
body .woo-wallet-my-wallet-container .woo-wallet-table-controls input[type="date"] {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: var(--dss-border) !important;
	color: var(--dss-text-primary) !important;
}