/*
 * 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 ---- */
/* Fondo del chip aquí y no con la clase bg-white: Bootstrap tiene .bg-white con !important y dejaba el chip activo
   blanco sobre blanco (1:1) cuando un plugin lo carga. */
.chip { background-color: #fff; }
.chip[aria-current="page"] { background: #393b3f; color: #fff; border-color: #393b3f; }
.nav-cat[aria-current="page"] { color: #393b3f; background: #f4f6f7; }
/* Chips de tienda, categoría, etiqueta y búsqueda: desde 900 px van en varias filas (en escritorio no hay cómo
   deslizarlos con el mouse; en producción se cortaban a la derecha). Bajo 900 px siguen en una fila que se desliza.
   !important: que ninguna utilidad de un plugin (Bootstrap) lo devuelva a una fila. */
@media (min-width: 900px) {
	.eco-chips { flex-wrap: wrap !important; overflow-x: visible !important; gap: .5rem !important; }
}

/* ---- 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; }

/* ---- Celular: títulos de tarjeta que nunca se cortan y zonas táctiles de 44 px ---- */
/* Palabras largas ("Dispensadores") se parten si no caben; con lang="es-CL", guion en español. */
.eco-titulo-tarjeta { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
/* Bajo 640 px (2 columnas) el título se ajusta al ancho: 15 px a 360 px, 16 px desde ~400 px (el tamaño del mockup). */
@media (max-width: 639px) {
	#cat-grid .eco-titulo-tarjeta { font-size: clamp(.9375rem, .75rem + .8vw, 1rem); line-height: 1.3; }
}
/* Mínimo táctil de 44 × 44 px para botones y enlaces principales que en el mockup quedaban más chicos. */
.eco-tactil { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; }

/* ---- Paginación (44 px de alto: zona táctil) ---- */
.eco-paginas .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; 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; }

/* ---- Clases del mockup renombradas porque Bootstrap usa el mismo nombre (.toast, .sticky-top):
   mismos valores que en mockup.css. ---- */
.eco-sticky { top: env(safe-area-inset-top, 0px); }
.eco-toast { transform: translateY(16px); opacity: 0; transition: all .3s ease; }
.eco-toast.show { transform: translateY(0); opacity: 1; }

/* ---- 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; }

/* ---- Header en pantallas angostas: el logo cede ancho (el texto del logo se achica sin deformarse) para que
   el ☰ y "Cotización" siempre quepan, incluso si un plugin agranda márgenes con !important. ---- */
.eco-logo { flex: 0 1 auto; }
.eco-logo-texto { min-width: 0; flex: 0 1 auto; object-fit: contain; object-position: left center; }

/* ---- Pie en celulares: espacio al final para que el botón flotante de WhatsApp (el del tema o el de Click to Chat,
   abajo a la derecha) no tape el © ni los enlaces al terminar la página. 5rem ≈ el botón (50 px) + su margen; más la
   zona de la muesca en teléfonos que la tienen. Sin botón flotante (sin WhatsApp ni Click to Chat) no hay espacio. ---- */
@media (max-width: 767px) {
	.eco-pie.eco-pie-flotante { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Seguimiento de pedidos (page-seguimiento-de-pedidos.php): lo que el mockup no trae. ---- */
/* Foto de entrega: miniatura cuadrada (7rem, como el mockup v3.5) y visor <dialog> con la foto grande. */
.eco-foto-miniatura { display: block; width: 7rem; height: 7rem; object-fit: cover; }
.eco-visor { padding: 0; max-width: min(56rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 0; box-shadow: 0 20px 50px -12px rgb(0 0 0 / .35); }
.eco-visor::backdrop { background: rgb(44 46 49 / .7); }
.eco-visor-img { display: block; max-width: 100%; max-height: calc(100vh - 7rem); margin: 0 auto; padding: 0 .75rem .75rem; object-fit: contain; }
.eco-partir { overflow-wrap: anywhere; }
#t-buscar:disabled { opacity: .7; cursor: not-allowed; } /* bloqueado mientras busca, como 9863dce */

/* Portal de clientes (/portal/pedidos/): miniatura de la foto de entrega, visor y nombres de los 4 pasos. */
/* Miniatura dentro de "Ver foto de entrega" (07/10): 52×40, esquinas redondeadas; gris mientras se pide. */
.eco-miniatura { display: block; width: 3.25rem; height: 2.5rem; object-fit: cover; border-radius: .375rem; background: #f4f6f7; }
.eco-visor { padding: 0; max-width: min(56rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 0; box-shadow: 0 20px 50px -12px rgb(0 0 0 / .35); }
.eco-visor::backdrop { background: rgb(44 46 49 / .7); }
.eco-visor-img { display: block; max-width: 100%; max-height: calc(100vh - 7rem); margin: 0 auto; padding: 0 .75rem .75rem; object-fit: contain; }
.eco-paso-nombre { font-size: .6875rem; line-height: 1.2; letter-spacing: .02em; overflow-wrap: anywhere; hyphens: auto; }
/* Bajo 480 px los nombres se partían con guion ("INGRE-SADO"): quedan la etiqueta del estado y la barra, que dice su paso
   en su aria-label ("Paso 3 de 4: En ruta"). */
@media (max-width: 479px) {
	.eco-paso-nombre { display: none; }
}

/* Portal: el botón flotante de WhatsApp (solo el ícono, 52 px, a 20 px del borde) no tapa nada al llegar al final: el
   pie deja 5,5rem abajo en todos los anchos (el contenido del portal ya deja 7rem, pb-28). Sin botón, sin espacio. */
body.eco-portal .eco-pie.eco-pie-flotante { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }

/* Mis pedidos: meses plegables y filas. En celular cada pedido es una tarjeta (celdas apiladas); desde 1024 px, cuatro
   columnas bajo la cabecera del mes: "Pedido / OC", "Fecha", "Estado" y "Entrega y dirección". La flecha del mes gira
   sin transición: a mitad del giro (al abrir un mes con la búsqueda) se veía como una esquina. */
.eco-mes-titulo { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; padding: .5rem 0; cursor: pointer; list-style: none; }
.eco-mes-titulo::-webkit-details-marker { display: none; }
.eco-mes-titulo::before { content: ""; flex: none; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-right: .25rem; }
details[open] > .eco-mes-titulo::before { transform: rotate(45deg); }
.eco-mes details > ul { margin-top: .75rem; margin-bottom: 1rem; }
.eco-fila > * + * { margin-top: .875rem; }
.eco-tabla-cabeza { display: none; }
@media (min-width: 1024px) {
  .eco-tabla-cabeza, .eco-fila { display: grid; grid-template-columns: 11rem 7rem minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  .eco-tabla-cabeza { margin-top: .5rem; padding: 0 1.25rem; letter-spacing: .04em; }
  .eco-fila > * + * { margin-top: 0; }
  .eco-rotulo { display: none; }
}

/* Portal: logo dentro de la tarjeta de Ingreso y Activar cuenta (no se sale de la tarjeta en pantallas angostas). */
.eco-logo-tarjeta { display: block; max-width: 100%; object-fit: contain; object-position: left center; }