/*
 * Ecoactive: lo que el mockup no trae (WordPress/WooCommerce). Valores tomados de la escala del mockup
 * (mockup.css); los cambios por contraste están anotados en CLAUDE.md.
 */

/* ---- Contenido de páginas (the_content): vuelve a los estilos del navegador. Va en la misma capa
   que el reset, así que cualquier CSS propio de la página (p. ej. /seguimiento-de-pedidos/) gana. ---- */
@layer eco-base {
	.eco-contenido :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; margin: revert; }
	.eco-contenido :where(p, blockquote, figure, dl, dd, pre, hr) { margin: revert; }
	.eco-contenido :where(ul, ol, menu) { list-style: revert; margin: revert; padding: revert; }
	.eco-contenido :where(a) { color: revert; text-decoration: revert; }
	.eco-contenido :where(img, svg, video, canvas, iframe, embed, object) { display: revert; vertical-align: revert; }
	.eco-contenido :where(table) { border-collapse: revert; text-indent: revert; border-color: revert; }
	.eco-contenido :where(button, input, select, textarea) {
		font: revert; color: revert; line-height: revert; margin: revert; padding: revert; border: revert;
		background-color: revert; background-image: revert; -webkit-appearance: revert; appearance: revert;
	}
	.eco-contenido :where(input, textarea)::placeholder { color: revert; opacity: revert; }
}

/* ---- Fotos de producto: cuadrado blanco, object-fit: contain, nunca más grande que el original
   (--eco-max = ancho real de la foto, lo pone ecoactive_foto()). ---- */
.eco-foto { display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; }
.eco-foto img { width: 100%; height: 100%; max-width: var(--eco-max, 100%); max-height: var(--eco-max, 100%); object-fit: contain; }
.eco-foto-vacia { display: block; width: 100%; height: 100%; background: #f4f6f7; }

/* ---- Chips y navegación: estado actual = estado "presionado" del mockup ---- */
.chip[aria-current="page"] { background: #393b3f; color: #fff; border-color: #393b3f; }
.nav-cat[aria-current="page"] { color: #393b3f; background: #f4f6f7; }

/* ---- Menú de categorías que no cabe: desplazamiento horizontal con difuminado en el borde que tiene
   más categorías (data-mas-izq / data-mas-der los pone ecoactive.js) y flechas para el mouse.
   Con teclado se recorre con Tab; scroll-padding deja el enlace enfocado fuera del difuminado. ---- */
.eco-desliza { position: relative; flex: 1 1 0%; min-width: 0; --eco-fade-izq: 0px; --eco-fade-der: 0px; }
.eco-desliza[data-mas-izq] { --eco-fade-izq: 3rem; }
.eco-desliza[data-mas-der] { --eco-fade-der: 3rem; }
.eco-desliza-pista {
	scroll-behavior: smooth; scroll-padding-inline: 3rem; padding-block: .25rem;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--eco-fade-izq), #000 calc(100% - var(--eco-fade-der)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--eco-fade-izq), #000 calc(100% - var(--eco-fade-der)), transparent 100%);
}
.eco-desliza-flecha {
	position: absolute; top: 50%; z-index: 1; display: none; width: 2rem; height: 2rem; margin-top: -1rem;
	align-items: center; justify-content: center; border-radius: 9999px; background: #fff; color: #393b3f;
	font-size: 1.125rem; line-height: 1; box-shadow: 0 1px 2px rgba(30,35,40,.05), 0 1px 3px rgba(30,35,40,.07), inset 0 0 0 1px #e3e6e9;
}
.eco-desliza-flecha:hover { background: #f4f6f7; }
.eco-desliza-izq { left: 0; }
.eco-desliza-der { right: 0; }
.eco-desliza[data-mas-izq] .eco-desliza-izq, .eco-desliza[data-mas-der] .eco-desliza-der { display: flex; }
@media (prefers-reduced-motion: reduce) { .eco-desliza-pista { scroll-behavior: auto; } }

/* ---- Selector de referencia: radios nativos con el estilo .fmt[aria-checked] del mockup ---- */
.fmt:has(input:checked) { border-color: #327a27; background: #edf7ea; box-shadow: inset 0 0 0 1px #327a27; }
.fmt:has(input:focus-visible) { outline: 3px solid #02729e; outline-offset: 2px; }
.eco-cantidad { -moz-appearance: textfield; appearance: textfield; }
.eco-cantidad::-webkit-inner-spin-button, .eco-cantidad::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Tabla de referencias (.eco-refs, viene en la descripción): estilo de la tabla de la ficha del mockup ---- */
.eco-refs { width: 100%; font-size: .875rem; line-height: 1.25rem; border: 1px solid #e3e6e9; font-variant-numeric: tabular-nums; }
.eco-refs thead { background: #f4f6f7; text-align: left; }
.eco-refs th, .eco-refs td { padding: .625rem 1rem; text-align: left; }
.eco-refs th { font-weight: 700; }
.eco-refs tbody tr + tr { border-top: 1px solid #e3e6e9; }
.eco-refs td:first-child { font-family: IBM Plex Mono, ui-monospace, Menlo, monospace; }

/* ---- Descripción de la ficha ---- */
.eco-texto p + p { margin-top: .75rem; }

/* ---- Paginación ---- */
.eco-paginas .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; box-shadow: inset 0 0 0 1px #d1d5db; }
.eco-paginas a.page-numbers:hover { background: #f4f6f7; }
.eco-paginas .page-numbers.current { background: #393b3f; color: #fff; box-shadow: none; }
.eco-paginas .page-numbers.dots { box-shadow: none; }

/* ---- Formulario de cotización ---- */
.eco-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#q-correo > summary { list-style: none; }
#q-correo > summary::-webkit-details-marker { display: none; }

/* ---- Panel y menú cerrados: fuera del orden de tabulación ---- */
.panel[aria-hidden="true"] { visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
.panel.open { visibility: visible; transition: transform .3s ease; }
body.eco-bloqueo { overflow: hidden; }