/*
* Pescando a Pleno · base.css · sistema visual compartido por la tienda y el panel (corrida 2B, 20/10/2026).
* Guía: docs/areas/sistema-visual.md. Muestra viva: /dev/estilos (solo local).
* Valores de docs/03-direccion-visual.md y diseno/direccion-final/final.css. Correcciones de Pablo: diseno/feedback-pablo.md.
*
* Archivos: base.css (tokens, reset y componentes) · marco-tienda.css (encabezado, menú, franja y pie de la tienda)
* · admin.css (marco del panel) · tienda.css, checkout.css, admin-*.css (cada página).
* Reglas que no se negocian: base blanca y crema, arena en recuadros, verde acción (#357567) en acciones,
* azul marino solo en texto, íconos, bordes y detalles. Ningún fondo azul ni tinta. Radio 6 px en todo.
* Sin sombras en tarjetas: sombra solo en lo que flota (hojas, barras fijas, aviso flotante).
* Contrastes medidos: ver "Color" en docs/areas/sistema-visual.md.
*/
/* ---------- Fuentes (OFL, ver assets/fonts/OFL.txt) ---------- */
@font-face {
font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
src: url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
src: url("/assets/fonts/montserrat-latin-ext-700-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap;
src: url("/assets/fonts/montserrat-latin-900-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap;
src: url("/assets/fonts/montserrat-latin-ext-900-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/assets/fonts/roboto-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/assets/fonts/roboto-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
src: url("/assets/fonts/roboto-latin-500-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
src: url("/assets/fonts/roboto-latin-ext-500-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- Tokens ---------- */
:root {
/* Base clara */
--blanco: #FFFFFF; /* tienda, encabezado, tarjetas, campos */
--crema: #F5F0EB; /* franja de arriba, bandas, pie */
--crema-clara: #FAF7F2; /* fondo del panel */
/* Arena y kraft (cartel, bolsas y cinta del mockup) */
--arena: #CBB68E; /* líneas del separador */
--arena-clara: #EFE6D6; /* recuadros de categoría, temporada, pista del medidor */
--arena-media: #E6D9BF; /* botón terciario, fila de categorías, botón del buscador */
--arena-encima: #DCCCAB; /* terciario al pasar */
--arena-dibujo: #BCA67C; /* trazo del dibujo del producto sin foto. Nada más */
--kraft: #D9C39C; /* cenefa y etiqueta mayorista, lista "Precios por mayor". Nada más */
/* Verde agua: acentos chicos. Verde acción: botón principal (blanco encima 5,40:1) */
--verde-agua: #6BADA0; /* subrayado de enlaces y acentos. Nunca de fondo con texto (blanco 2,59:1) */
--accion: #357567;
--accion-encima: #2B6155;
--accion-apretado: #22503F;
--verde-claro: #E1EEEA; /* elegido, chip activo, fila activa. Siempre con borde --accion */
/* Texto, íconos y bordes */
--azul: #1A3A5C; /* texto de acción, íconos, enlaces, bordes finos. Nunca fondo */
--tinta: #1A2730; /* títulos grandes y texto sobre kraft. Nunca fondo */
--carbon: #1C1C1C; /* texto corrido y precios */
--gris: #5F5A4E; /* texto secundario (6,86:1 sobre blanco) */
--gris-placeholder: #6E685B;
--pozo: #F1EEEA; /* fondo de la foto de producto */
--linea: #E2DACB; /* separadores */
--linea-fuerte: #CFC4B0; /* bordes de tarjetas, chips y tablas */
--borde-campo: #948A78; /* borde de campos: 3,41:1 sobre blanco (pide 3:1) */
--apagado: #ECE7DE; /* botón deshabilitado */
--salvia: #D7E3DA; /* solo dentro de ilustraciones */
--salvia-media: #ADC6B5;
/* Estados, apagados */
--aviso: #7A4F0E; --aviso-fondo: #FBF0DA; /* DEMO, pendiente (6,29:1) */
--error: #9B3B2A; --error-fondo: #F8E9E4; /* (5,82:1) */
--ok: #2F6B5F; --ok-fondo: #E1EEEA; /* (5,20:1) */
/* Etapas mayoristas: rampa de un tono (prospecto va con aro azul) */
--etapa-contactado: #7DB5A8;
--etapa-visitado: #4E9486;
--etapa-primer-pedido: #2F6B5F;
--etapa-recurrente: #17423A;
/* Tipografía */
--fuente-titulos: "Montserrat", "Arial Black", "Helvetica Neue", Arial, sans-serif;
--fuente-cuerpo: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--texto-xs: 0.75rem; /* 12 px: mínimo absoluto (contador, DEMO) */
--texto-s: 0.875rem; /* 14 px: secundario */
--texto-b: 0.9375rem; /* 15 px: botón, nombre de producto, chips, secundario largo */
--texto-m: 1rem; /* 16 px: cuerpo y campos */
--texto-l: 1.125rem; /* 18 px */
--texto-xl: 1.25rem; /* 20 px: precio de tarjeta, título de hoja */
--texto-2xl: 1.625rem; /* 26 px: título de bloque en celular, título de ficha */
--texto-3xl: 2rem; /* 32 px: título de página en celular */
--interlineado: 1.55;
--interlineado-titulos: 1.15;
/* Espacios: 4, 8, 12, 16, 24, 32, 48, 72 (20 queda para rellenos internos) */
--esp-1: 4px;
--esp-2: 8px;
--esp-3: 12px;
--esp-4: 16px;
--esp-5: 24px;
--esp-6: 32px;
--esp-7: 48px;
--esp-8: 72px;
/* margen lateral: 16 hasta 599, 24 hasta 1099, 40 desde 1100. En apaisado con muesca, nunca menos que el área segura */
--lado: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
--ancho: 1200px; /* ancho máximo del contenido */
/* Radios: 6 px en todo. 4 en cenefa e insignias. 16 arriba de las hojas */
--radio: 6px;
--radio-chico: 4px;
--radio-hoja: 16px;
--radio-pildora: 999px; /* solo el contador del carrito */
/* Sombras: solo lo que flota */
--sombra-flota: 0 8px 24px rgba(26, 39, 48, 0.16);
--sombra-barra: 0 -6px 20px rgba(26, 39, 48, 0.12);
--sombra-hoja: 0 -8px 28px rgba(26, 39, 48, 0.18);
--velo: rgba(26, 39, 48, 0.45);
/* Interacción */
--toque: 44px; /* zona táctil mínima */
--alto-boton: 48px;
--transicion: 120ms ease;
/* Capas */
--z-barra: 50;
--z-flotante: 70;
--z-menu: 80;
--z-hoja: 90;
--z-avisos: 100;
/* Nombres viejos (corrida 2A). Siguen andando para las hojas de cada área hasta que las reescriban. No usar en código nuevo. */
--teal: var(--verde-agua);
--teal-fuerte: var(--accion);
--teal-texto: var(--ok);
--teal-claro: var(--verde-claro);
--arena-claro: var(--arena-clara);
--azul-oscuro: var(--tinta);
--azul-claro: var(--pozo);
--gris-claro: var(--linea);
--borde: var(--linea-fuerte);
--error-claro: var(--error-fondo);
--ok-claro: var(--ok-fondo);
--alerta: var(--aviso);
--alerta-claro: var(--aviso-fondo);
--whatsapp: var(--accion);
--margen-lateral: var(--lado);
--ancho-max: var(--ancho);
--radio-grande: var(--radio);
--sombra-1: 0 0 0 1px var(--linea);
--sombra-2: var(--sombra-flota);
--sombra-3: var(--sombra-flota);
--foco: 0 0 0 3px var(--azul);
--espaciado-letras-titulos: 0;
color-scheme: light;
}
@media (min-width: 600px) { :root { --lado: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } }
@media (min-width: 1100px) { :root { --lado: max(40px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } }
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Sin scroll-padding en html: con el encabezado fijo, cada foco dentro del encabezado subía la página.
El aire debajo de lo fijo lo da scroll-margin solo a la página (marco-tienda.css). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
min-height: 100vh; min-height: 100dvh;
font: 400 var(--texto-m)/var(--interlineado) var(--fuente-cuerpo);
color: var(--carbon); background: var(--blanco);
-webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
/* Leaflet mide sus capas en píxeles: con max-width se corren los mosaicos */
.leaflet-container svg, .leaflet-container canvas, .leaflet-container img { max-width: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul); text-decoration-color: var(--verde-agua); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--azul); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; }
/* Lista sin viñetas. Con :where no pesa nada: el relleno que pone un componente (chips, carruseles) gana siempre.
Antes (0,1,1) le ganaba a .chips y a .ficha__miniaturas: corrían de costado pegados al borde (cierre de 2B). */
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
[hidden] { display: none !important; }
p, li, dd { text-wrap: pretty; }
main:focus { outline: none; }
/* ---------- Títulos ---------- */
h1, h2, h3, h4, .titulo, .titulo-pagina, .titulo-bloque, .titulo-1, .titulo-2, .titulo-3, .titulo-4 {
font-family: var(--fuente-titulos); font-weight: 700; line-height: var(--interlineado-titulos);
color: var(--tinta); text-wrap: balance;
}
h1, .titulo-pagina, .titulo-1 { font-size: var(--texto-3xl); font-weight: 900; line-height: 1.02; text-transform: uppercase; }
h2, .titulo-bloque, .titulo-2 { font-size: var(--texto-2xl); font-weight: 900; line-height: 1.1; text-transform: uppercase; }
h3, .titulo-3 { font-size: var(--texto-l); font-weight: 700; line-height: 1.3; text-transform: none; }
h4, .titulo-4 { font-size: var(--texto-m); font-weight: 700; line-height: 1.3; text-transform: none; }
@media (min-width: 768px) {
h1, .titulo-pagina, .titulo-1 { font-size: 2.75rem; }
h2, .titulo-bloque, .titulo-2 { font-size: var(--texto-3xl); }
}
@media (min-width: 1100px) { h1, .titulo-pagina, .titulo-1 { font-size: 3.25rem; } }
/* Título chico: subsecciones dentro de un bloque (Datos del producto, Vencidas, Pedido mayorista) */
.titulo-chico {
font: 700 var(--texto-b)/1.3 var(--fuente-titulos); letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul);
}
.titulo-chico small, .titulo-chico .cuenta { font: 400 var(--texto-s)/1 var(--fuente-cuerpo); letter-spacing: 0; text-transform: none; color: var(--gris); }
/* Separador del mockup: título centrado entre dos líneas arena. Bloques del inicio y relacionados de la ficha. */
.separador { display: flex; align-items: center; gap: var(--esp-4); margin: 0 0 var(--esp-5); }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--arena); }
.separador > * { font: 700 var(--texto-b)/1.3 var(--fuente-titulos); letter-spacing: 0.12em; text-transform: uppercase; color: var(--azul); text-align: center; }
@media (min-width: 768px) { .separador { margin-bottom: var(--esp-6); } .separador > * { font-size: 1.0625rem; } }
.bajada { margin-top: var(--esp-3); font-size: 1.0625rem; max-width: 38em; }
/* ---------- Diseño de página ---------- */
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--lado)); margin-inline: auto; padding-inline: var(--lado); }
.bloque { padding-block: var(--esp-7); }
.bloque--crema { background: var(--crema); }
@media (min-width: 1024px) { .bloque { padding-block: var(--esp-8); } }
.pila { display: flex; flex-direction: column; gap: var(--esp-4); }
.pila--chica { gap: var(--esp-2); }
.pila--grande { gap: var(--esp-6); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.fila--entre { justify-content: space-between; }
.fila--fin { justify-content: flex-end; }
.grilla { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grilla-min, 16rem)), 1fr)); }
.grilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.centrado { text-align: center; }
.min-0 { min-width: 0; }
/* ---------- Texto ---------- */
.texto-chico { font-size: var(--texto-s); }
.texto-xs { font-size: var(--texto-xs); }
.texto-gris { color: var(--gris); }
.texto-fuerte { font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.sin-partir { white-space: nowrap; }
.visualmente-oculto {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
position: absolute; left: var(--esp-2); top: -100px; z-index: var(--z-avisos);
padding: 10px 14px; border: 2px solid var(--azul); border-radius: var(--radio); background: var(--blanco); color: var(--azul); font-weight: 500;
}
.saltar:focus { top: var(--esp-2); }
/* Dato que no se puede calcular: siempre con su motivo al lado */
.indeterminado { font: 500 var(--texto-b)/1.3 var(--fuente-cuerpo); letter-spacing: 0.02em; color: var(--aviso); overflow-wrap: normal; }
.indeterminado + .motivo, .motivo { display: block; font: 400 var(--texto-s)/1.4 var(--fuente-cuerpo); color: var(--gris); }
.etiqueta-mayus { font: 700 var(--texto-xs)/1.3 var(--fuente-titulos); letter-spacing: 0.08em; text-transform: uppercase; }
/* ---------- Íconos (assets/img/iconos/) ---------- */
.icono { width: 24px; height: 24px; flex: none; }
.icono--20 { width: 20px; height: 20px; }
.icono--18 { width: 18px; height: 18px; }
.ilus { width: 72px; height: 72px; flex: none; }
/* ---------- Botones: un solo sistema para tienda y panel ----------
.boton es el principal (verde acción, texto blanco). Uno solo por bloque.
Al lado va un secundario (borde azul) o un terciario (arena). Nunca dos del mismo peso. */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
min-height: var(--alto-boton); padding: 0 20px;
border: 2px solid var(--accion); border-radius: var(--radio);
background: var(--accion); color: var(--blanco);
font: 700 var(--texto-b)/1.2 var(--fuente-titulos); letter-spacing: 0.01em; text-transform: none;
text-align: center; text-decoration: none; white-space: nowrap;
cursor: pointer; transition: background-color var(--transicion), border-color var(--transicion);
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* A 320 px (zoom al 400 %) un botón largo puede partir su texto: si no, la página corre de costado. Desde 360, nunca parte. */
@media (max-width: 359.98px) { .boton { white-space: normal; } }
.boton:hover { background: var(--accion-encima); border-color: var(--accion-encima); color: var(--blanco); }
.boton:active { background: var(--accion-apretado); border-color: var(--accion-apretado); }
.boton:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.boton .icono, .boton svg { width: 20px; height: 20px; flex: none; }
.boton--principal { /* igual que .boton: se escribe para que se lea en el HTML */ }
.boton--secundario { background: var(--blanco); border-color: var(--azul); color: var(--azul); }
.boton--secundario:hover { background: var(--crema); border-color: var(--azul); color: var(--azul); }
.boton--secundario:active { background: var(--arena-clara); border-color: var(--azul); }
.boton--terciario, .boton--claro { background: var(--arena-media); border-color: var(--arena-media); color: var(--azul); }
.boton--terciario:hover, .boton--claro:hover { background: var(--arena-encima); border-color: var(--arena-encima); color: var(--azul); }
.boton--terciario:active, .boton--claro:active { background: var(--arena); border-color: var(--arena); }
/* De texto: azul, sin borde, 44 px de alto. Hecho, Ver ficha, Sacar filtros, Deshacer */
.boton--texto { min-height: var(--toque); padding: 0 8px; background: transparent; border-color: transparent; color: var(--azul); }
.boton--texto:hover { background: var(--crema); border-color: transparent; color: var(--azul); }
.boton--texto:active { background: var(--arena-clara); border-color: transparent; }
/* Peligro: borrar o anular. Con borde; el relleno rojo queda para la confirmación del segundo toque */
.boton--peligro { background: var(--blanco); border-color: var(--error); color: var(--error); }
.boton--peligro:hover { background: var(--error-fondo); border-color: var(--error); color: var(--error); }
.boton--confirmar, .boton--peligro.boton--confirmar { background: var(--error); border-color: var(--error); color: var(--blanco); }
.boton--confirmar:hover { background: #82301F; border-color: #82301F; color: var(--blanco); }
/* Viejos: --azul era el elegido de un grupo de pestañas; --whatsapp va como secundario */
.boton--azul, .boton[aria-pressed="true"]:not(.boton--principal) { background: var(--verde-claro); border-color: var(--accion); color: var(--tinta); }
.boton--azul:hover { background: var(--verde-claro); border-color: var(--accion-encima); color: var(--tinta); }
.boton--whatsapp { background: var(--blanco); border-color: var(--azul); color: var(--azul); }
.boton--whatsapp:hover { background: var(--crema); border-color: var(--azul); color: var(--azul); }
/* Tamaños */
.boton--chico { min-height: var(--toque); padding: 0 14px; }
.boton--ancho { width: 100%; }
.boton--icono { width: var(--alto-boton); padding: 0; }
.boton--chico.boton--icono { width: var(--toque); }
/* Apagado: sin relleno, borde punteado y texto gris, con su motivo escrito al lado (.motivo-apagado).
Nunca se parece al terciario arena. Cargando: ruedita y texto ("Enviando…") */
.boton:disabled, .boton[aria-disabled="true"], .boton:disabled:hover, .boton[aria-disabled="true"]:hover,
.boton:disabled:active, .boton[aria-disabled="true"]:active {
background: transparent; border: 2px dashed var(--linea-fuerte); color: var(--gris); cursor: not-allowed;
}
.boton[aria-busy="true"] { cursor: progress; }
.boton[aria-busy="true"]::before {
content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
border: 2.5px solid currentColor; border-right-color: transparent; animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
/* Agregar al carrito: el resto del texto ("al carrito") entra solo si la tarjeta es ancha */
.boton__resto { display: none; }
@container tarjeta (min-width: 200px) { .boton__resto { display: inline; } }
/* Grupo de botones: en celular (menos de 600 px) cada botón normal ocupa su renglón a ancho completo. Una sola regla.
Los de ícono (flechas), los de texto y los chicos quedan de su ancho y se acomodan juntos en un renglón. */
.botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
@media (max-width: 599px) {
.botones > .boton:not(.boton--icono):not(.boton--texto):not(.boton--chico), .botones > form { flex: 1 1 100%; }
.botones > form > .boton { width: 100%; }
}
.motivo-apagado { font-size: var(--texto-s); color: var(--carbon); display: flex; gap: var(--esp-2); align-items: flex-start; }
.motivo-apagado .icono { width: 18px; height: 18px; margin-top: 1px; color: var(--aviso); }
/* ---------- Enlaces ---------- */
.enlace { color: var(--azul); font-weight: 500; text-decoration: underline; text-decoration-color: var(--verde-agua); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.enlace:hover { text-decoration-color: var(--azul); }
.enlace--toque { display: inline-flex; align-items: center; min-height: var(--toque); }
/* Enlace dentro de un párrafo: suma zona táctil sin mover el renglón */
.enlace--en-texto { padding-block: 13px; margin-block: -13px; }
/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .etiqueta { font-size: var(--texto-b); font-weight: 500; color: var(--carbon); }
.campo .opcional { font-weight: 400; color: var(--gris); }
.campo .ayuda { font-size: var(--texto-s); color: var(--gris); }
.campo .error-campo, .campo .error { display: flex; gap: 6px; font-size: var(--texto-s); font-weight: 500; color: var(--error); }
/* :where() deja la especificidad en cero: cualquier componente (.cantidad, .buscador) o área la pisa sin pelear */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"])),
:where(select, textarea) {
width: 100%; min-height: var(--alto-boton); padding: 10px 12px;
font: 400 var(--texto-m)/1.4 var(--fuente-cuerpo); /* 16 px: el celular no hace zoom */
color: var(--carbon); background: var(--blanco);
border: 1px solid var(--borde-campo); border-radius: var(--radio);
appearance: none; -webkit-appearance: none; transition: border-color var(--transicion);
}
textarea { min-height: 96px; resize: vertical; line-height: var(--interlineado); }
:where(select) {
padding-right: 40px; cursor: pointer;
background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231A3A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
input::placeholder, textarea::placeholder { color: var(--gris-placeholder); opacity: 1; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"],
.campo--error input, .campo--error select, .campo--error textarea { border: 2px solid var(--error); }
input:disabled, select:disabled, textarea:disabled { background: var(--apagado); color: var(--gris); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--accion); flex: none; margin: 0; cursor: pointer; }
input[type="file"] { max-width: 100%; font-size: var(--texto-b); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Casilla o botón de radio con su texto: 48 px de alto, todo el renglón se toca */
.opcion { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alto-boton); font-size: var(--texto-m); cursor: pointer; }
.grupo-campos { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
fieldset { border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: var(--esp-4); min-width: 0; }
legend { padding-inline: var(--esp-1); font: 700 var(--texto-b)/1.3 var(--fuente-titulos); color: var(--tinta); }
.formulario { display: grid; gap: var(--esp-4); }
.formulario[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.privacidad { font-size: var(--texto-s); color: var(--gris); }
.codigo-tramite { font: 700 var(--texto-xl)/1.2 var(--fuente-titulos); letter-spacing: 0.06em; color: var(--tinta); }
/* Elección: un botón o una etiqueta que se elige (modo del carrito, resultado de la visita, casa).
Elegida: verde claro con borde verde acción de 2 px. Sin correr el contenido. */
.elecciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
.elecciones--una { grid-template-columns: minmax(0, 1fr); }
.eleccion {
display: grid; gap: 2px; justify-items: start; align-content: center; width: 100%; min-height: 52px; padding: 7px 13px;
border: 1px solid var(--linea-fuerte); box-shadow: inset 0 0 0 1px transparent; border-radius: var(--radio);
background: var(--blanco); color: var(--carbon); font: 500 var(--texto-b)/1.25 var(--fuente-cuerpo); text-align: left; cursor: pointer;
}
.eleccion:hover { border-color: var(--azul); }
.eleccion b { font: 700 var(--texto-b)/1.2 var(--fuente-titulos); color: var(--azul); }
.eleccion small { font-size: var(--texto-s); color: var(--gris); }
.eleccion[aria-pressed="true"], .eleccion[aria-checked="true"], .eleccion:has(input:checked) {
background: var(--verde-claro); border-color: var(--accion); box-shadow: inset 0 0 0 1px var(--accion);
}
.eleccion input[type="radio"], .eleccion input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.eleccion:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }
/* ---------- Selector de cantidad: menos, número, más. 48 px ---------- */
.cantidad { display: inline-flex; align-items: stretch; width: fit-content; height: var(--alto-boton); border: 1px solid var(--borde-campo); border-radius: var(--radio); background: var(--blanco); }
.cantidad > button, .cantidad > .boton {
display: grid; place-items: center; width: 46px; min-height: 0; height: auto; padding: 0;
border: 0; border-radius: 0; background: none; color: var(--azul); font: 500 1.25rem/1 var(--fuente-cuerpo); cursor: pointer;
}
.cantidad > button:first-child { border-radius: var(--radio) 0 0 var(--radio); }
.cantidad > button:last-child { border-radius: 0 var(--radio) var(--radio) 0; }
.cantidad > button:hover, .cantidad > .boton:hover { background: var(--crema); color: var(--azul); }
.cantidad > button:disabled { color: var(--linea-fuerte); background: none; cursor: not-allowed; }
.cantidad input:not([type="checkbox"]):not([type="radio"]) {
width: 52px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none;
text-align: center; font: 500 1.0625rem/1 var(--fuente-cuerpo); font-variant-numeric: tabular-nums;
}
.cantidad input:focus { outline-offset: -3px; }
.cantidad--chica { height: 46px; }
.cantidad--chica > button { width: 44px; }
.cantidad--chica input:not([type="checkbox"]) { width: 44px; }
/* ---------- Chips de filtro ---------- */
/* Todo lo que corre de costado lleva position: relative: un .visualmente-oculto (absoluto) que queda fuera de pantalla
dentro de la pista no ensancha la página (cierre de 2B). Lo mismo .tabla-scroll, .carril__pista > li, .ficha__miniaturas y .cats-fila ul. */
.chips { position: relative; display: flex; gap: var(--esp-2); overflow-x: auto; padding: var(--esp-3) var(--lado); margin: 0 calc(-1 * var(--lado)); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .chips { flex-wrap: wrap; overflow: visible; padding: var(--esp-4) 0; margin: 0; } }
.chips--envuelve { flex-wrap: wrap; overflow: visible; padding: 0; margin: 0; }
.chip {
display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--toque); padding: 0 14px;
border: 1px solid var(--linea-fuerte); box-shadow: inset 0 0 0 1px transparent; border-radius: var(--radio);
background: var(--blanco); color: var(--azul); font: 500 var(--texto-b)/1.1 var(--fuente-cuerpo);
white-space: nowrap; cursor: pointer; text-decoration: none;
}
.chip:hover { border-color: var(--azul); }
.chip small { font-size: var(--texto-s); color: var(--gris); }
.chip[aria-pressed="true"], .chip[aria-current], .chip--activo, .chip:has(input:checked) {
background: var(--verde-claro); border-color: var(--accion); box-shadow: inset 0 0 0 1px var(--accion); color: var(--tinta);
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip .icono { width: 18px; height: 18px; }
/* ---------- Avisos: sin raya de color al costado ---------- */
.aviso {
display: block; padding: 14px var(--esp-4);
border-radius: var(--radio); background: var(--crema); color: var(--carbon); font-size: var(--texto-b);
}
/* Con ícono: texto
*/
.aviso:has(> .icono) { display: flex; gap: var(--esp-3); align-items: flex-start; }
.aviso > .icono { width: 22px; height: 22px; margin-top: 1px; color: var(--azul); }
.aviso strong, .aviso b { font-weight: 500; }
.aviso--ok { background: var(--ok-fondo); color: var(--ok); }
.aviso--ok > .icono { color: var(--ok); }
.aviso--error { background: var(--error-fondo); color: var(--error); }
.aviso--error > .icono { color: var(--error); }
.aviso--alerta, .aviso--demo { background: var(--aviso-fondo); color: var(--aviso); }
.aviso--alerta > .icono, .aviso--demo > .icono { color: var(--aviso); }
/* DEMO: todo bloque con datos o fotos de muestra lleva su etiqueta */
.etiqueta-demo {
display: inline-block; padding: 2px 6px; border: 1px solid #C9A86A; border-radius: var(--radio-chico);
background: var(--aviso-fondo); color: var(--aviso); font: 700 var(--texto-xs)/1.3 var(--fuente-titulos); letter-spacing: 0.06em; vertical-align: middle;
}
/* Aviso que flota (Quitaste..., Agregaste...): blanco, borde, sombra porque flota */
.aviso-flotante {
display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
min-height: 52px; padding: 6px 6px 6px var(--esp-4);
border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--blanco); color: var(--carbon);
font-size: var(--texto-b); box-shadow: var(--sombra-flota);
}
.aviso-flotante a, .aviso-flotante button {
display: inline-flex; align-items: center; flex: none; min-height: var(--toque); padding: 0 10px; border: 0; border-radius: var(--radio);
background: none; color: var(--azul); font: 700 var(--texto-b)/1 var(--fuente-titulos); text-decoration: none; cursor: pointer;
}
.aviso-flotante a:hover, .aviso-flotante button:hover { background: var(--crema); }
.aviso-flotante--ok { border-color: var(--ok); }
.aviso-flotante--error { border-color: var(--error); background: var(--error-fondo); color: var(--error); }
/* ---------- Insignias: pocas y calladas ---------- */
.insignia {
display: inline-flex; align-items: center; gap: var(--esp-1); padding: 2px 8px; border-radius: var(--radio-chico);
background: var(--arena-clara); color: var(--tinta); font: 500 var(--texto-s)/1.45 var(--fuente-cuerpo); white-space: nowrap;
}
.insignia--ok, .insignia--teal { background: var(--ok-fondo); color: var(--ok); }
.insignia--alerta { background: var(--aviso-fondo); color: var(--aviso); }
.insignia--error { background: var(--error-fondo); color: var(--error); }
.insignia--gris { background: var(--apagado); color: var(--gris); }
.insignia--azul { background: var(--blanco); color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.insignias { display: flex; flex-wrap: wrap; gap: var(--esp-1); list-style: none; padding: 0; }
/* ---------- Precios ----------
.precio: el número (Roboto 500, sin partir). Minorista 20 px en tarjeta, 34 en ficha.
.cenefa: precio mayorista en kraft, radio 4. .etiqueta-kraft: la de la ficha, con punta. */
.precio { line-height: 1.2; font-family: var(--fuente-cuerpo); font-weight: 500; color: var(--carbon); white-space: nowrap; font-variant-numeric: tabular-nums; }
.precio--tachado { font-weight: 400; color: var(--gris); text-decoration: line-through; }
.precios { display: grid; gap: 6px; justify-items: start; }
.precio-minorista { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--texto-xl); line-height: 1.2; }
.precio-minorista .precio--tachado { font-size: var(--texto-s); }
.cenefa {
display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 8px; border-radius: var(--radio-chico);
background: var(--kraft); color: var(--tinta); font-size: var(--texto-s); line-height: 1.3;
}
.cenefa .precio { color: var(--tinta); font-size: var(--texto-b); }
.sin-precio { font-size: var(--texto-b); color: var(--gris); }
/* Modo mayorista (el pone html[data-modo="mayorista"]): manda el precio por mayor */
html[data-modo="mayorista"] .precios [data-precio="minorista"] { font-size: var(--texto-b); color: var(--gris); }
html[data-modo="mayorista"] .precios [data-precio="minorista"] .precio { color: var(--gris); }
html[data-modo="mayorista"] .precios .cenefa { font-size: var(--texto-b); }
html[data-modo="mayorista"] .precios .cenefa .precio { font-size: var(--texto-l); }
.etiqueta-kraft { position: relative; margin: var(--esp-4) 0 0 14px; padding: 14px var(--esp-4) 14px 20px; border-radius: 0 var(--radio) var(--radio) 0; background: var(--kraft); color: var(--tinta); }
.etiqueta-kraft::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; background: var(--kraft); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.etiqueta-kraft__linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 700 var(--texto-b)/1.2 var(--fuente-titulos); }
.etiqueta-kraft__linea .precio { font: 500 var(--texto-2xl)/1.1 var(--fuente-cuerpo); color: var(--tinta); }
.etiqueta-kraft p { margin-top: 6px; font-size: var(--texto-b); }
.etiqueta-kraft a { color: var(--tinta); text-decoration-color: var(--tinta); white-space: nowrap; }
/* ---------- Producto: foto en el pozo, tarjeta y fila ---------- */
.foto-pozo { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radio); background: var(--pozo); }
.foto-pozo > img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.foto-pozo > img.imagen-sin-foto { width: 58%; height: auto; max-width: 120px; mix-blend-mode: normal; }
/* Tarjeta: foto 1:1, nombre en tipo oración, precio minorista, cenefa mayorista y Agregar */
.producto { container: tarjeta / inline-size; display: flex; flex-direction: column; gap: 10px; height: 100%; min-width: 0; }
.producto__enlace { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.producto__nombre { font: 700 var(--texto-b)/1.32 var(--fuente-titulos); text-transform: none; color: var(--tinta); text-wrap: balance; }
.producto__enlace:hover .producto__nombre { text-decoration: underline; text-decoration-color: var(--verde-agua); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.producto .insignias { margin-top: -2px; }
.producto .precios { margin-top: auto; }
.producto__stock { font-size: var(--texto-s); font-weight: 500; color: var(--aviso); }
.producto > .boton { margin-top: 4px; width: 100%; }
/* Fila: foto de 96 px, nombre, precio y Agregar en la misma línea, cenefa abajo. Celular y productos sin foto. */
.producto-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--linea); }
.producto-fila:last-child { border-bottom: 1px solid var(--linea); }
.producto-fila .foto-pozo { width: 96px; }
.producto-fila__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "p b" "c c"; gap: 6px 12px; align-items: center; align-content: start; }
.producto-fila__cuerpo .producto__nombre { grid-area: n; }
.producto-fila__cuerpo .producto__nombre a { display: inline-block; padding: 13px 0; margin: -13px 0; color: inherit; text-decoration: none; }
.producto-fila__cuerpo .precio-minorista { grid-area: p; }
.producto-fila__cuerpo .boton { grid-area: b; }
.producto-fila__cuerpo .cenefa { grid-area: c; justify-self: start; }
/* ---------- Migas y paginación ---------- */
/* Migas: texto corrido. Un nombre largo sigue en el renglón de abajo sin saltar entero; la barra queda pegada a lo que sigue.
Cada enlace suma su zona de 44 px con relleno, sin agrandar el renglón. */
.migas { padding-block: 4px 12px; font-size: var(--texto-s); line-height: 1.6; color: var(--gris); }
.migas ol { display: block; list-style: none; padding: 0; }
.migas li { display: inline; }
.migas li + li::before { content: "/\00a0"; padding: 0 4px; color: var(--linea-fuerte); }
.migas a { padding: 14px 6px; margin: 0 -6px; color: var(--azul); text-decoration: underline; text-decoration-color: var(--verde-agua); text-underline-offset: 3px; }
.migas [aria-current] { color: var(--gris); }
.paginacion ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); list-style: none; padding: 0; margin: var(--esp-6) 0 0; }
/* Solo el hijo directo de cada li lleva caja: el texto de Anterior y Siguiente va suelto adentro */
.paginacion li > a, .paginacion li > span {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--toque); min-height: var(--toque); padding: 0 12px;
border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--blanco); color: var(--azul);
font: 500 var(--texto-b)/1 var(--fuente-cuerpo); text-decoration: none; font-variant-numeric: tabular-nums;
}
.paginacion li > a:hover { border-color: var(--azul); }
@media (max-width: 479px) { .paginacion__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.paginacion li > [aria-current] { background: var(--verde-claro); border-color: var(--accion); box-shadow: inset 0 0 0 1px var(--accion); color: var(--tinta); }
/* ---------- Tarjeta (panel y bloques): blanca con borde, sin sombra ---------- */
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px var(--esp-4); }
@media (min-width: 768px) { .tarjeta { padding: 22px var(--esp-5); } }
.tarjeta--borde { border-color: var(--linea-fuerte); }
.tarjeta--crema { background: var(--crema); border-color: var(--crema); }
.tarjeta--arena { background: var(--arena-clara); border-color: var(--arena-clara); }
/* ---------- Tablas. En celular: .tabla--tarjetas pasa a filas apiladas (data-etiqueta en cada td), o .tabla-scroll ---------- */
.tabla { font-size: var(--texto-b); }
.tabla th, .tabla td { padding: 11px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla th { padding-block: 8px; font: 500 var(--texto-s)/1.2 var(--fuente-cuerpo); color: var(--gris); border-bottom-color: var(--linea-fuerte); white-space: nowrap; }
.tabla th:first-child, .tabla td:first-child { padding-left: 0; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla .num, .tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--crema-clara); }
.tabla tr.es-activa, .tabla tr[aria-selected="true"] { background: var(--verde-claro); }
.tabla-scroll { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabla-scroll > .tabla { min-width: 36rem; }
@media (max-width: 639.98px) {
.tabla--tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabla--tarjetas, .tabla--tarjetas tbody, .tabla--tarjetas tr, .tabla--tarjetas td { display: block; width: 100%; }
.tabla--tarjetas tr { padding: var(--esp-3) 0; border-bottom: 1px solid var(--linea); }
.tabla--tarjetas tbody tr:hover { background: none; }
.tabla--tarjetas td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); padding: 3px 0; border: 0; text-align: right; }
.tabla--tarjetas td::before { content: attr(data-etiqueta); flex: none; max-width: 50%; color: var(--gris); font-size: var(--texto-s); text-align: left; }
.tabla--tarjetas td:not([data-etiqueta])::before { content: none; }
.tabla--tarjetas td:not([data-etiqueta]), .tabla--tarjetas td:first-child { justify-content: flex-start; text-align: left; }
.tabla--tarjetas td:first-child { font-weight: 500; font-size: var(--texto-m); }
}
/* ---------- KPI: etiqueta, valor y nota. El número manda ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); } }
.kpi { min-width: 0; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.kpi__etiqueta { display: block; font-size: var(--texto-s); color: var(--gris); }
.kpi__valor { display: block; margin-top: 4px; font: 500 1.625rem/1.15 var(--fuente-cuerpo); color: var(--carbon); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi__nota { display: block; margin-top: 4px; font-size: var(--texto-s); color: var(--gris); }
.kpi__nota b, .kpi__sube { font-weight: 500; color: var(--ok); }
.kpi__baja { font-weight: 500; color: var(--error); }
.kpi__fuente { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--gris); }
.kpi--principal { grid-column: 1 / -1; }
.kpi--principal .kpi__valor { font-size: 2.5rem; }
@media (min-width: 768px) { .kpi--principal .kpi__valor { font-size: 3rem; } }
.kpi__valor .indeterminado, .kpi__valor.indeterminado { display: block; margin-top: 4px; font-size: var(--texto-b); color: var(--aviso); overflow-wrap: normal; }
/* ---------- Embudo: barra = % que pasó desde la etapa anterior. Solo la peor etapa en color de alerta ---------- */
.caida { font: 500 1.0625rem/1.4 var(--fuente-cuerpo); color: var(--tinta); max-width: 40em; }
.embudo { list-style: none; padding: 0; }
.embudo__etapa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.embudo__etapa:last-child { border-bottom: 0; }
.embudo__nombre { font-size: var(--texto-m); }
.embudo__n { font: 500 var(--texto-l)/1.2 var(--fuente-cuerpo); font-variant-numeric: tabular-nums; text-align: right; }
.embudo__pista { grid-column: 1 / -1; position: relative; height: 16px; border-radius: 0 4px 4px 0; background: #EFE9DF; }
.embudo__pista > span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accion); }
.embudo__pista > i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta); }
.embudo__det { grid-column: 1 / -1; font-size: var(--texto-s); color: var(--gris); }
.embudo__det b { font-weight: 500; color: var(--carbon); }
.embudo__etapa--peor .embudo__pista > span { background: var(--error); }
.embudo__etapa--peor .embudo__det .alerta { color: var(--error); }
.embudo__etapa--base .embudo__pista { display: none; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--texto-s); color: var(--gris); }
.leyenda i { display: inline-block; width: 14px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--accion); vertical-align: middle; }
.leyenda i.leyenda--peor { background: var(--error); }
.leyenda i.leyenda--antes { width: 2px; height: 14px; border-radius: 0; background: var(--tinta); }
/* ---------- Estado de pedido: punto de color y texto. Pendiente con fondo, porque pide acción ---------- */
.estado, .etapa {
display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 2px 10px 2px 8px;
border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); background: var(--blanco);
color: var(--carbon); font: 500 var(--texto-s)/1.3 var(--fuente-cuerpo); white-space: nowrap;
}
.estado::before, .etapa::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--c, var(--gris)); box-shadow: var(--aro, none); }
.estado--pendiente { --c: #B7791F; background: var(--aviso-fondo); border-color: #E7CF9E; color: var(--aviso); }
.estado--pagado { --c: var(--accion); }
.estado--preparando { --c: var(--arena-dibujo); }
.estado--enviado { --c: var(--azul); }
.estado--entregado { --c: var(--ok); background: var(--ok-fondo); border-color: #BFD8D0; color: var(--ok); }
.estado--cancelado { --c: var(--linea-fuerte); color: var(--gris); text-decoration: line-through; }
/* Etapa de una casa mayorista: rampa de un tono; prospecto con aro azul */
.etapa { border-color: transparent; background: none; padding-left: 0; }
.etapa--prospecto { --c: var(--blanco); --aro: inset 0 0 0 2px var(--azul); }
.etapa--contactado { --c: var(--etapa-contactado); }
.etapa--visitado { --c: var(--etapa-visitado); }
.etapa--primer_pedido { --c: var(--etapa-primer-pedido); }
.etapa--recurrente { --c: var(--etapa-recurrente); }
.etapa--inactivo { --c: var(--linea-fuerte); color: var(--gris); }
.etapa--descartado { --c: var(--error); color: var(--error); }
/* ---------- Medidor del mínimo mayorista: pista arena, relleno verde acción ---------- */
.medidor { display: grid; gap: 8px; }
.medidor__falta { font: 700 var(--texto-l)/1.3 var(--fuente-titulos); color: var(--tinta); }
.medidor__falta--listo { display: flex; align-items: center; gap: 6px; color: var(--ok); }
.medidor__pista { height: 8px; border-radius: 4px; background: var(--arena-clara); overflow: hidden; }
.medidor__pista > span { display: block; height: 100%; border-radius: 4px; background: var(--accion); }
.medidor progress { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 4px; background: var(--arena-clara); overflow: hidden; }
.medidor progress::-webkit-progress-bar { background: var(--arena-clara); }
.medidor progress::-webkit-progress-value { background: var(--accion); border-radius: 4px; }
.medidor progress::-moz-progress-bar { background: var(--accion); }
.medidor__lleva { display: flex; justify-content: space-between; gap: 8px; font-size: var(--texto-s); color: var(--gris); }
.medidor__lleva b { color: var(--carbon); font-weight: 500; }
/* ---------- Hoja que sube (filtros, agregado, visita).