/* =========================================================
   CUENTA PLAY – ESTILO NEÓN (oscuro / claro)
   Colores sacados del logo: azul noche, violeta y naranja del "play".
   Para cambiar un color, cámbialo solo aquí arriba.
   ========================================================= */

:root,
html[data-cp-theme="dark"] {
	--cp-bg: #070818;              /* fondo de la página */
	--cp-bg-2: #0d0f2b;            /* fondo de secciones */
	--cp-card: rgba(22, 20, 58, .78);
	--cp-card-borde: rgba(139, 92, 246, .28);
	--cp-texto: #eef0ff;
	--cp-texto-2: #a9acd6;
	--cp-violeta: #a855f7;
	--cp-azul: #4f6bff;
	--cp-cian: #22d3ee;
	--cp-naranja: #ff8a1f;
	--cp-rosa: #ff3d9a;
	--cp-glow: 0 0 0 1px rgba(168, 85, 247, .55), 0 0 18px rgba(168, 85, 247, .45), 0 0 42px rgba(79, 107, 255, .25);
	--cp-sombra: 0 10px 30px rgba(0, 0, 0, .45);
	--cp-sidebar: linear-gradient(180deg, #0a0c2e 0%, #1a1450 45%, #3b1a78 100%);
	--cp-input: rgba(255, 255, 255, .06);
	color-scheme: dark;
}

html[data-cp-theme="light"] {
	--cp-bg: #f4f5ff;
	--cp-bg-2: #ffffff;
	--cp-card: #ffffff;
	--cp-card-borde: rgba(91, 76, 230, .18);
	--cp-texto: #14163a;
	--cp-texto-2: #5b5f8a;
	--cp-violeta: #7c3aed;
	--cp-azul: #3b5bfd;
	--cp-cian: #0891b2;
	--cp-naranja: #f2740b;
	--cp-rosa: #e11d74;
	--cp-glow: 0 0 0 1px rgba(124, 58, 237, .35), 0 8px 28px rgba(124, 58, 237, .22);
	--cp-sombra: 0 6px 20px rgba(30, 27, 90, .08);
	--cp-sidebar: linear-gradient(180deg, #0a0c2e 0%, #1a1450 45%, #3b1a78 100%); /* el lateral sigue con el degradado del logo */
	--cp-input: #f0f1fb;
	color-scheme: light;
}

/* ---------- Fondo general ---------- */
body,
#main, .main, .page-wrapper, #page, .site, .site-content, .content-area,
.woocommerce-page .main-content, .main-content {
	background-color: var(--cp-bg) !important;
	color: var(--cp-texto);
}
html[data-cp-theme="dark"] body {
	background-image:
		radial-gradient(900px 500px at 85% -10%, rgba(168, 85, 247, .14), transparent 60%),
		radial-gradient(700px 400px at 10% 110%, rgba(79, 107, 255, .12), transparent 60%) !important;
	background-attachment: fixed !important;
}
body, body p, body li, body label, .widget-title, h1, h2, h3, h4, h5, h6 {
	font-family: "Outfit", system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6, .widget-title, .widgettitle { color: var(--cp-texto) !important; }

/* ---------- Menú lateral con degradado del logo ----------
   Si tu tema usa otro selector para el menú lateral, agrégalo a esta lista
   (clic derecho > Inspeccionar sobre el menú y copia su id o clase). */
.cp-sidebar,
.side-header, #header.side-header, .header-side, .header-vertical,
#side-header, .sidebar-header, .vertical-header {
	background: var(--cp-sidebar) !important;
	border-right: 1px solid rgba(168, 85, 247, .35);
	box-shadow: 6px 0 30px rgba(88, 28, 135, .35);
}
.cp-sidebar a,
.side-header a, #header.side-header a, .header-side a, .header-vertical a,
#side-header a, .sidebar-header a, .vertical-header a {
	color: #e7e8ff !important;
	transition: color .2s, text-shadow .2s;
}
.cp-sidebar a:hover,
.side-header a:hover, #header.side-header a:hover, .header-side a:hover, .header-vertical a:hover,
#side-header a:hover, .sidebar-header a:hover, .vertical-header a:hover {
	color: #fff !important;
	text-shadow: 0 0 10px rgba(168, 85, 247, .9);
}

/* ---------- Botón Oscuro / Claro ---------- */
.cp-modo {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(168, 85, 247, .45);
	box-shadow: 0 0 14px rgba(168, 85, 247, .25);
}
.cp-modo__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #c9cbf2;
	font: 600 13px/1 "Outfit", system-ui, sans-serif;
	cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s;
}
.cp-modo__btn[aria-pressed="true"] {
	background: linear-gradient(135deg, var(--cp-violeta), var(--cp-azul));
	color: #fff;
	box-shadow: 0 0 14px rgba(168, 85, 247, .6);
}
/* Debajo del logo, dentro del menú lateral (se ubica solo). */
.cp-modo-lateral {
	display: flex;
	justify-content: center;
	margin: 14px 0 6px;
	position: static;
}
/* Mientras se ubica, no se muestra (evita que tape el menú). */
.cp-modo-flotante { visibility: hidden; position: fixed; }
/* Si no hay logo lateral: botón pequeño a la derecha, encima del de WhatsApp. */
.cp-modo-flotante--mini {
	visibility: visible;
	right: 22px;
	bottom: 96px;
	z-index: 9998;
}
.cp-modo-flotante--mini .cp-modo {
	flex-direction: column;
	background: rgba(10, 12, 46, .92);
	backdrop-filter: blur(8px);
}
.cp-modo-flotante--mini .cp-modo__btn { padding: 9px; }
.cp-modo-flotante--mini .cp-modo__btn span { display: none; }
/* En PC, si ya está debajo del logo, se oculta el pequeño. */
@media (min-width: 992px) { html.cp-tiene-lateral .cp-modo-flotante--mini { display: none; } }
/* En celular y tableta no se muestra el del menú lateral. */
@media (max-width: 991px) { .cp-modo-lateral { display: none !important; } }

/* ---------- Buscador, selects e inputs ---------- */
.woocommerce select, .woocommerce-ordering select, select.orderby,
input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
	background-color: var(--cp-input) !important;
	color: var(--cp-texto) !important;
	border: 1px solid var(--cp-card-borde) !important;
	border-radius: 12px !important;
}
input:focus, select:focus {
	outline: none !important;
	box-shadow: var(--cp-glow) !important;
}

/* ---------- Categorías (barra izquierda de la tienda) ---------- */
.widget_product_categories a,
.wc-block-product-categories-list a { color: var(--cp-texto-2) !important; transition: color .2s; }
.widget_product_categories a:hover,
.wc-block-product-categories-list a:hover,
.widget_product_categories .current-cat > a {
	color: var(--cp-violeta) !important;
}

/* =========================================================
   TARJETAS DE PRODUCTO
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.wc-block-grid__product,
.wp-block-post.product {
	background: var(--cp-card) !important;
	border: 1px solid var(--cp-card-borde) !important;
	border-radius: 18px !important;
	padding: 10px 10px 14px !important;
	box-shadow: var(--cp-sombra);
	backdrop-filter: blur(6px);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-4px);
	border-color: var(--cp-violeta) !important;
	box-shadow: var(--cp-glow), var(--cp-sombra);
}

.woocommerce ul.products li.product a,
.woocommerce a.button, .woocommerce ul.products li.product .button { text-decoration: none !important; }

/* Imagen redondeada */
.woocommerce ul.products li.product img,
.wc-block-grid__product img {
	border-radius: 12px !important;
	margin-bottom: 10px !important;
}

/* Nombre COMPLETO del producto (sin "...") */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .product-title,
.woocommerce ul.products li.product .product-name,
.wc-block-grid__product-title {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	-webkit-line-clamp: unset !important;
	display: block !important;
	height: auto !important;
	max-height: none !important;
	color: var(--cp-texto) !important;
	font: 700 15px/1.3 "Outfit", system-ui, sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	padding: 0 4px !important;
	margin: 4px 0 8px !important;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product .product-title a:hover {
	color: var(--cp-violeta) !important;
}

/* Categoría pequeña sobre el nombre */
.woocommerce ul.products li.product .category-list,
.woocommerce ul.products li.product .product-cat,
.woocommerce ul.products li.product .posted_in {
	color: var(--cp-texto-2) !important;
	font-size: 11px !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 0 4px;
}

/* Sin estrellas */
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .rating-wrap,
.woocommerce ul.products li.product .woocommerce-product-rating,
.woocommerce ul.products li.product .ratings-container,
.wc-block-grid__product-rating,
.wc-block-components-product-rating {
	display: none !important;
}

/* Precio con brillo */
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	color: var(--cp-cian) !important;
	font: 800 18px/1.2 "Outfit", system-ui, sans-serif !important;
	padding: 0 4px;
	margin-top: auto !important;
}
html[data-cp-theme="dark"] .woocommerce ul.products li.product .price ins,
html[data-cp-theme="dark"] .woocommerce ul.products li.product .price > .amount,
html[data-cp-theme="dark"] .woocommerce ul.products li.product .price > .woocommerce-Price-amount {
	text-shadow: 0 0 12px rgba(34, 211, 238, .55);
}
.woocommerce ul.products li.product .price del {
	color: var(--cp-texto-2) !important;
	opacity: .7;
	font-size: 13px;
	font-weight: 500;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; background: none; }

/* Etiqueta de % descuento */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .product-label,
.woocommerce ul.products li.product .onsale.product-label,
.wc-block-components-product-sale-badge {
	background: linear-gradient(135deg, var(--cp-rosa), var(--cp-violeta)) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 4px 10px !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
	font: 800 12px/1.2 "Outfit", system-ui, sans-serif !important;
	box-shadow: 0 0 14px rgba(255, 61, 154, .55);
}

/* "Sin existencias" */
.woocommerce ul.products li.product .out-of-stock,
.woocommerce ul.products li.product .stock.out-of-stock,
.woocommerce ul.products li.product .out-of-stock-label {
	background: rgba(7, 8, 24, .82) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 61, 154, .6) !important;
	border-radius: 10px !important;
	box-shadow: 0 0 14px rgba(255, 61, 154, .35);
	letter-spacing: .04em;
}

/* Botones: añadir al carrito, vista rápida, comprar */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-button__link {
	background: linear-gradient(135deg, var(--cp-violeta), var(--cp-azul)) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 12px !important;
	font: 700 13px/1 "Outfit", system-ui, sans-serif !important;
	text-transform: none !important;
	padding: 11px 16px !important;
	box-shadow: 0 0 16px rgba(168, 85, 247, .45);
	transition: transform .2s, box-shadow .2s, filter .2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce ul.products li.product .button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.1);
	box-shadow: 0 0 24px rgba(168, 85, 247, .75), 0 0 40px rgba(79, 107, 255, .35);
}
/* Botón principal de compra (pagar / finalizar) en naranja del logo */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button {
	background: linear-gradient(135deg, var(--cp-naranja), var(--cp-rosa)) !important;
	box-shadow: 0 0 18px rgba(255, 138, 31, .55) !important;
}

/* Vista rápida (pop-up) */
.mfp-content .product, .quickview-wrap, .quick-view-content, .yith-quick-view-content,
.woosq-popup, .woosq-product {
	background: var(--cp-bg-2) !important;
	color: var(--cp-texto) !important;
	border: 1px solid var(--cp-card-borde);
	border-radius: 20px !important;
	box-shadow: var(--cp-glow), 0 30px 80px rgba(0, 0, 0, .5);
}

/* Barra de ordenar / mostrar */
.woocommerce-ordering, .woocommerce-result-count, .shop-loop-before, .toolbox {
	color: var(--cp-texto-2) !important;
}

/* Precio de producto individual */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--cp-cian) !important;
	font-weight: 800;
}

/* Paginación */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	background: var(--cp-card) !important;
	color: var(--cp-texto) !important;
	border: 1px solid var(--cp-card-borde) !important;
	border-radius: 10px;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: linear-gradient(135deg, var(--cp-violeta), var(--cp-azul)) !important;
	color: #fff !important;
}

/* Respeta a quien pide menos animación */
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce a.button { transition: none !important; }
	.woocommerce ul.products li.product:hover { transform: none; }
}

/* =========================================================
   MODO OSCURO: textos y cajas que el tema (Porto) deja con colores claros fijos
   ========================================================= */
html[data-cp-theme="dark"] body :is(p, li, label, td, th, dt, dd, legend, blockquote, figcaption, address, h1, h2, h3, h4, h5, h6),
html[data-cp-theme="dark"] body :is(.text-dark, .text-color-dark, .heading-dark, .page-title, .product_title, .entry-title, .widget-title, .widgettitle, .section-title, .breadcrumb, .breadcrumb li, .woocommerce-breadcrumb, .woocommerce-result-count, .woocommerce-loop-category__title, .woocommerce-product-details__short-description, .woocommerce-tabs, .wpb_text_column, .vc_custom_heading, .porto-u-main-heading, .porto-heading, .toolbox, .filter-item-list, .product-cat-list, .woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation a, .woocommerce-form-row, .woocommerce-checkout-review-order, .cart_totals, .shop_table) {
	color: var(--cp-texto) !important;
	text-shadow: none;
}
/* Textos secundarios */
html[data-cp-theme="dark"] body :is(small, .text-muted, .text-default, .description, .woocommerce-review__dated, .posted_in, .tagged_as, .sku_wrapper, .product-meta, .meta-date, .woocommerce-privacy-policy-text, .form-row .description) {
	color: var(--cp-texto-2) !important;
}
/* Enlaces de texto (no botones) */
html[data-cp-theme="dark"] body :is(#main, .main, .main-content, .page-wrapper, footer, #footer) a:not(.button):not(.btn):not([class*="button"]) {
	color: #c4b5fd;
}
html[data-cp-theme="dark"] body :is(#main, .main, .main-content, .page-wrapper, footer, #footer) a:not(.button):not(.btn):not([class*="button"]):hover {
	color: #fff;
}
/* Cajas blancas del tema → tarjeta oscura */
html[data-cp-theme="dark"] body :is(.woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation, table.shop_table, .cart_totals, #order_review, .woocommerce-checkout-review-order, form.woocommerce-form-login, form.woocommerce-form-register, form.checkout_coupon, .featured-box, .card, .card-body, .tab-content, .woocommerce-tabs .panel, .woocommerce-tabs .tabs li, .bg-white, .bg-light, .bg-color-light, .main-content .widget, .sidebar-content, .porto-block, .woocommerce-info, .woocommerce-message, .woocommerce-error, .select2-dropdown, .mfp-content, .dropdown-menu, .mega-menu .popup, .popup .inner) {
	background-color: var(--cp-bg-2) !important;
	border-color: var(--cp-card-borde) !important;
	color: var(--cp-texto) !important;
}
html[data-cp-theme="dark"] body :is(table, th, td, hr, .divider, .woocommerce-MyAccount-navigation li) {
	border-color: var(--cp-card-borde) !important;
}
html[data-cp-theme="dark"] body :is(table.shop_table thead, table.shop_table tfoot, .shop_table th) {
	background-color: rgba(255, 255, 255, .04) !important;
}
/* Selectores de moneda y desplegables (YayCurrency, select2) */
html[data-cp-theme="dark"] body :is(.select2-container .select2-selection, .select2-results__option, textarea, input[type="tel"], input[type="url"], input[type="date"]) {
	background-color: var(--cp-input) !important;
	color: var(--cp-texto) !important;
	border-color: var(--cp-card-borde) !important;
}
html[data-cp-theme="dark"] body .select2-results__option--highlighted {
	background-color: var(--cp-violeta) !important;
	color: #fff !important;
}
/* Iconos del tema que quedan negros */
html[data-cp-theme="dark"] body :is(#main, .main, .main-content) :is(i[class*="porto-icon"], i[class*="fa-"], .porto-icon, svg:not([fill])) {
	color: var(--cp-texto-2);
}
/* El precio y las etiquetas mantienen sus colores neón */
html[data-cp-theme="dark"] .woocommerce ul.products li.product .price,
html[data-cp-theme="dark"] .woocommerce div.product p.price,
html[data-cp-theme="dark"] .woocommerce div.product span.price { color: var(--cp-cian) !important; }