/* Componentes base. Requiere tokens.css antes. Clases con prefijo c- para no chocar con nada. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color: var(--fondo); background: var(--fondo); color: var(--tinta); font: 400 var(--t-cuerpo)/var(--interlinea) var(--f-texto); font-variant-numeric: tabular-nums; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 700; line-height: var(--interlinea-titulo); letter-spacing: var(--tracking-titulo); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.oscuro { --fondo: var(--carbon); --superficie: var(--carbon-2); --tinta: var(--crema); --tinta-2: var(--gris-claro); --accion: var(--oro); --accion-tinta: var(--carbon); --foco: var(--oro); --linea: var(--carbon-3); background: var(--carbon); color: var(--crema); }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botones: relleno plano, altura mínima 44px (táctil) */
.c-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-5); border: 2px solid var(--accion); border-radius: var(--r-1); background: var(--accion); color: var(--accion-tinta); font: 600 1rem/1 var(--f-texto); text-decoration: none; cursor: pointer; transition: transform var(--dur) var(--curva), background var(--dur), border-color var(--dur); }
.c-boton svg { width: 18px; height: 18px; flex: none; }
.c-boton:hover { background: color-mix(in srgb, var(--accion) 86%, var(--fondo)); }
.c-boton:active { transform: translateY(1px); }
.c-boton[disabled] { opacity: .45; cursor: not-allowed; }
.c-boton--sec { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.c-boton--sec:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.c-boton--whatsapp { --accion: var(--bosque); --accion-tinta: var(--blanco); }
.c-boton--grande { min-height: 56px; font-size: 1.125rem; padding: 0 var(--e-6); }
.c-boton--bloque { width: 100%; }

/* Campos */
.c-campo { display: grid; gap: var(--e-1); }
.c-campo label { font-weight: 600; font-size: var(--t-pequeno); }
.c-campo .ayuda { font-size: var(--t-pequeno); color: var(--tinta-2); }
.c-input, .c-select { min-height: 44px; width: 100%; padding: 0 var(--e-3); border: 1.5px solid var(--gris-texto); border-radius: var(--r-1); background: var(--superficie); color: var(--tinta); font: inherit; }
.oscuro .c-input, .oscuro .c-select { border-color: var(--gris-claro); }
.c-input:focus-visible, .c-select:focus-visible { outline: 3px solid var(--foco); outline-offset: 0; }
.c-input[aria-invalid="true"] { border-color: var(--alerta); }
.c-cantidad { display: inline-grid; grid-template-columns: 40px 48px 40px; height: 44px; border: 1.5px solid var(--gris-texto); border-radius: var(--r-1); background: var(--superficie); }
.c-cantidad button { border: 0; background: none; font: 600 1.25rem/1 var(--f-texto); color: var(--tinta); cursor: pointer; }
.c-cantidad input { width: 100%; border: 0; text-align: center; font: 600 1rem var(--f-texto); background: none; color: var(--tinta); -moz-appearance: textfield; }
.c-cantidad input::-webkit-inner-spin-button { display: none; }

/* Chips: filtros conmutables */
.c-chip { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 36px; padding: 0 var(--e-4); border: 1.5px solid var(--gris-texto); border-radius: var(--r-pill); background: transparent; color: var(--tinta); font: 500 var(--t-pequeno)/1 var(--f-texto); cursor: pointer; }
.c-chip[aria-pressed="true"] { background: var(--carbon); border-color: var(--carbon); color: var(--oro); }
.oscuro .c-chip[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--carbon); }

/* Etiquetas de estado y píldoras tipo Recurra (borde + fondo suave) */
.c-etiqueta { display: inline-block; padding: 2px var(--e-2); border-radius: var(--r-1); font: 600 .8125rem/1.4 var(--f-texto); background: var(--crema-2); color: var(--carbon); }
.c-etiqueta--especie { background: var(--bosque-claro); color: var(--bosque); }
.c-etiqueta--alerta { background: var(--alerta-fondo); color: var(--alerta); }
.c-etiqueta--oro { background: var(--carbon); color: var(--oro); }

.c-pildora { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; padding: 2px 12px; border-radius: var(--r-pill); border: 1.5px solid transparent; font: 600 .75rem/1.3 var(--f-texto); letter-spacing: .01em; white-space: nowrap; }
.c-pildora--verde { background: var(--pildora-verde-bg); color: var(--pildora-verde-fg); border-color: var(--pildora-verde-borde); }
.c-pildora--azul { background: var(--pildora-azul-bg); color: var(--pildora-azul-fg); border-color: var(--pildora-azul-borde); }
.c-pildora--naranja { background: var(--pildora-naranja-bg); color: var(--pildora-naranja-fg); border-color: var(--pildora-naranja-borde); }
.c-pildora--rojo { background: var(--pildora-rojo-bg); color: var(--pildora-rojo-fg); border-color: var(--pildora-rojo-borde); }

/* Tarjeta: superficie blanca con borde y sombra suave */
.c-tarjeta { background: var(--superficie); border-radius: var(--r-2); padding: var(--e-5); }

/* Precio */
.c-precio { font: 700 1.375rem/1.1 var(--f-texto); color: var(--tinta); }
.c-precio small { font-size: .8125rem; font-weight: 500; color: var(--tinta-2); margin-left: 2px; }

/* Tabla */
.c-tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.c-tabla th { text-align: left; font-weight: 600; color: var(--tinta-2); padding: var(--e-2) var(--e-3); border-bottom: 1.5px solid var(--linea); }
.c-tabla td { padding: var(--e-3); border-bottom: 1px solid var(--linea); }
.c-tabla td.num, .c-tabla th.num { text-align: right; }

/* Aviso de uso veterinario */
.c-aviso { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); padding: var(--e-4); border-left: 4px solid var(--alerta); background: var(--alerta-fondo); color: var(--carbon); border-radius: var(--r-1); }

/* Firma Sodium: texto + logo monocromo, 16 px de alto */
.c-firma { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-pequeno); color: var(--tinta-2); text-decoration: none; }
.c-firma svg { height: 16px; width: auto; color: var(--tinta); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }