/* ==========================================================================
   Vértice Commerce 2 — core/components.css
   Componentes del MOTOR: botones, formularios, badges, chips, toasts,
   stepper de cantidad, paginación, paneles y piezas de los módulos
   transversales (newsletter, barra de envío gratis, stock bajo).
   Porta la mecánica de la sección 5 de theme.css de v1 con SOLO tokens.

   Fixes de auditoría aplicados acá:
   - theme.css:316 → los campos de formulario NUNCA hacen outline:none: el
     anillo global :focus-visible (core/reset.css) queda intacto y el estado
     de foco solo SUMA border-color. Nada de "anillo invisible".

   Contratos de markup consumidos (grepeados de los templates):
   - .vc-btn (+--primary/--ghost/--sm/--lg/--block, __ico)
   - .vc-field / .vc-label / .vc-input / .vc-textarea
   - .vc-badge (+--nuevo/--oferta/--agotado)   → content-product.php, sale-flash.php
   - .vc-chips / .vc-chip (+__label/__x/--clear) y .vc-filters-chips
     (+__label/__list/__item)                   → inc/filters.php, search.php
   - .quantity.vc-qty (+__btn --minus/--plus, --fixed, --readonly; input .qty)
                                                → woocommerce/global/quantity-input.php
   - .vc-pagination / .vc-pagelinks             → index/archive/search/single/page
   - .vc-panel                                  → cart/checkout/mi-cuenta
   - .vc-icon-btn                               → header.php, drawers
   - .vc-searchform (+__field/__ico/__input/__btn) → searchform.php, footer.php
   - .vc-newsletter-form (+__form/__input/__submit/__msg--ok|--error) → inc/trust.php
   - .vc-shipbar (+__msg/__track/__fill, .is-reached) → inc/woocommerce.php
   - .vc-low-stock                              → inc/product-extras.php
   - .vc-badges (+__item/__label)               → inc/trust.php

   Contrato definido ACÁ para el JS del motor (Task 11) — toasts:
   - El JS agrega <div class="vc-toasts"> al body y adentro cada aviso como
     <div class="vc-toast (vc-toast--ok|--error|--info)" role="status">.
   ========================================================================== */

/* ------------------------------ Botones -------------------------------- */
.vc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 44px; /* target táctil AA */
	padding: var(--sp-3) var(--sp-5);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1;
	border: var(--border-w) solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-align: center;
}

.vc-btn--primary {
	background: var(--cta-bg);
	color: var(--cta-ink);
}
.vc-btn--primary:hover {
	background: var(--cta-bg-hover);
	color: var(--cta-ink);
}

.vc-btn--ghost {
	background: transparent;
	color: var(--brand-strong);
	border-color: var(--brand);
}
.vc-btn--ghost:hover {
	background: var(--brand-soft);
	color: var(--brand-strong);
}

.vc-btn--sm { min-height: 36px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.vc-btn--lg { min-height: 52px; padding: var(--sp-4) var(--sp-6); font-size: var(--fs-body); }
.vc-btn--block { display: flex; width: 100%; }

.vc-btn:disabled,
.vc-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Ícono anidado del botón (hero.php, 404.php: span.vc-btn__ico). */
.vc-btn__ico {
	display: inline-grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	margin: -0.45rem -0.65rem -0.45rem 0.15rem;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, currentColor 14%, transparent);
	flex: none;
}
.vc-btn__ico svg { width: 15px; height: 15px; }

/* ------------------------------ Botón de ícono ------------------------- */
/* 44x44 (target AA). Lo usan header, drawers y cierres de overlays. */
.vc-icon-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	color: var(--ink);
}
.vc-icon-btn:hover { background: var(--surface-2); color: var(--brand-strong); }
.vc-icon-btn svg { width: 22px; height: 22px; }

/* ------------------------------ Formularios ---------------------------- */
.vc-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.vc-label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }

.vc-input,
.vc-textarea {
	width: 100%;
	padding: var(--sp-3) var(--sp-3);
	background: var(--surface);
	color: var(--ink);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
}
.vc-input::placeholder,
.vc-textarea::placeholder { color: var(--ink-3); }

/* Fix theme.css:316: NUNCA outline:none — el anillo global :focus-visible
   (reset.css, --focus-ring AA) sigue visible; el borde activo solo se suma. */
.vc-input:focus-visible,
.vc-textarea:focus-visible { border-color: var(--brand); }

.vc-textarea { min-height: 7.5rem; resize: vertical; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--brand); }

/* ------------------------------ Badges --------------------------------- */
/* .vc-badge--oferta la imprime loop/sale-flash.php; --nuevo/--agotado,
   content-product.php. Texto en --ink sobre fondos soft: contraste AA
   garantizado por contrato sin depender del tono del estado. */
.vc-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	color: var(--ink);
}
.vc-badge--nuevo { background: var(--ok-soft); }
.vc-badge--oferta { background: var(--accent-soft); }
.vc-badge--agotado { background: var(--surface-2); color: var(--ink-2); }

/* Tira de badges de confianza (inc/trust.php: vc_trust_badges). */
.vc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	padding: 0;
	list-style: none;
}
.vc-badges__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--ink-2);
}
.vc-badges__item svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); }

/* ------------------------------ Chips ---------------------------------- */
.vc-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.vc-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 36px;
	font-size: var(--fs-sm);
	color: var(--ink-2);
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-pill);
	padding: var(--sp-1) var(--sp-3);
}
a.vc-chip:hover,
button.vc-chip:hover {
	border-color: var(--brand);
	color: var(--brand-strong);
}
.vc-chip__label { min-width: 0; }
.vc-chip__x { display: inline-grid; place-items: center; }
.vc-chip__x svg { width: 14px; height: 14px; }
.vc-chip--clear {
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Chips de filtros activos (inc/filters.php: viven DENTRO del nodo que el
   AJAX reemplaza — el layout del panel .vc-filters es de core/shop.css). */
.vc-filters-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	margin-bottom: var(--sp-4);
}
.vc-filters-chips__label { font-size: var(--fs-sm); color: var(--ink-3); }
.vc-filters-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.vc-filters-chips__item { display: inline-flex; }

/* ------------------------------ Toasts --------------------------------- */
/* Contrato para el JS (ver cabecera). Región no interactiva: los toasts no
   deben bloquear clicks del contenido de abajo. */
.vc-toasts {
	position: fixed;
	inset-inline: 0;
	bottom: var(--sp-5);
	z-index: var(--z-toast);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	padding-inline: var(--gutter);
	pointer-events: none;
}
.vc-toast {
	pointer-events: auto;
	max-width: min(100%, 420px);
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	background: var(--surface-raised);
	color: var(--ink);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-2);
}
.vc-toast--ok { border-color: var(--ok); background: var(--ok-soft); }
.vc-toast--error { border-color: var(--error); background: var(--error-soft); }
.vc-toast--info { border-color: var(--info); background: var(--info-soft); }

/* ------------------------------ Stepper de cantidad -------------------- */
/* woocommerce/global/quantity-input.php: div.quantity.vc-qty > botón − /
   input.qty / botón +. Sin JS el input number nativo sigue operable.
   ÚNICA FUENTE del stepper (esta hoja se encola siempre): tienda, ficha,
   quick view y carrito lo toman de acá — shop.css/cart-checkout.css NO lo
   repiten (el duplicado que había en shop.css §14 generaba drift). */
.vc-qty {
	display: inline-flex;
	align-items: stretch;
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	overflow: hidden;
}
.vc-qty__btn {
	display: inline-grid;
	place-items: center;
	width: 42px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink-2);
	cursor: pointer;
	flex: none;
}
.vc-qty__btn:hover { background: var(--surface-2); color: var(--brand-strong); }
.vc-qty__btn:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px; /* inset: el wrapper recorta con overflow:hidden */
}
.vc-qty__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.vc-qty__btn svg { width: 16px; height: 16px; }
.vc-qty .qty {
	width: 3.25rem;
	min-width: 0;
	min-height: 44px;
	padding: 0;
	text-align: center;
	font: inherit;
	border: 0;
	background: transparent;
	color: var(--ink);
	-moz-appearance: textfield;
	appearance: textfield;
}
.vc-qty .qty::-webkit-outer-spin-button,
.vc-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vc-qty .qty:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}
/* Cantidad fija (type=hidden, min===max / sold individually): el wrapper
   colapsa — el core ya le pone .hidden, esto es cinturón y tiradores. */
.vc-qty--fixed { display: none; }
.vc-qty--readonly .qty { color: var(--ink-2); }

/* ------------------------------ Paginación ----------------------------- */
/* the_posts_pagination → nav.vc-pagination > .nav-links > .page-numbers. */
.vc-pagination { margin-top: clamp(var(--sp-6), 5vw, var(--sp-8)); }
.vc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
}
.vc-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--sp-3);
	border-radius: var(--radius-pill);
	border: var(--border-w) solid var(--line);
	background: var(--surface);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-2);
}
.vc-pagination a.page-numbers:hover {
	border-color: var(--brand);
	color: var(--brand-strong);
}
.vc-pagination .page-numbers.current {
	background: var(--surface-inverse);
	border-color: var(--surface-inverse);
	color: var(--surface);
}
.vc-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* wp_link_pages → nav.vc-pagelinks (page.php / single.php). */
.vc-pagelinks {
	margin-top: var(--sp-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
}
.vc-pagelinks > a,
.vc-pagelinks > span {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 var(--sp-2);
	border-radius: var(--radius-pill);
	border: var(--border-w) solid var(--line);
}
.vc-pagelinks > span {
	background: var(--surface-inverse);
	border-color: var(--surface-inverse);
	color: var(--surface);
}

/* ------------------------------ Panel ---------------------------------- */
/* Superficie elevada genérica (totales del carrito, revisión del checkout,
   tarjetas de mi cuenta). */
.vc-panel {
	background: var(--surface-raised);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-card);
	padding: var(--sp-5);
	box-shadow: var(--shadow-1);
}

/* ------------------------------ Form de búsqueda ----------------------- */
/* searchform.php + form del drawer de búsqueda (footer.php). */
.vc-searchform__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
.vc-searchform__ico {
	position: absolute;
	left: var(--sp-3);
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	color: var(--ink-3);
	pointer-events: none;
}
.vc-searchform__ico svg { width: 20px; height: 20px; }
.vc-searchform__input { flex: 1 1 auto; padding-left: 2.7rem; min-width: 0; }
.vc-searchform__btn { flex: none; }

/* ------------------------------ Newsletter ----------------------------- */
/* inc/trust.php: vc_newsletter_form(). Estructura + estados; la piel por
   sección la pone design/home.css. */
.vc-newsletter-form__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: stretch;
}
.vc-newsletter-form__input { flex: 1 1 220px; min-width: 0; }
.vc-newsletter-form__submit { flex: none; }
.vc-newsletter-form__msg {
	margin: 0 0 var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	border-radius: var(--radius-md);
	border: var(--border-w) solid var(--line);
	background: var(--surface-2);
	color: var(--ink);
}
.vc-newsletter-form__msg--ok { background: var(--ok-soft); border-color: var(--ok); }
.vc-newsletter-form__msg--error { background: var(--error-soft); border-color: var(--error); }

/* ------------------------------ Barra de envío gratis ------------------ */
/* inc/woocommerce.php: vc_free_shipping_bar(). Aparece en el mini-cart
   (siempre cargado) y en los totales del carrito. El fill se anima por
   transform (transición en core/motion.css). */
.vc-shipbar {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
}
.vc-shipbar__msg { margin: 0; color: var(--ink-2); }
.vc-shipbar__msg strong { color: var(--ink); }
.vc-shipbar__track {
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	overflow: hidden;
}
.vc-shipbar__fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--brand);
	transform-origin: left center;
}
.vc-shipbar.is-reached .vc-shipbar__fill { background: var(--ok); }

/* ------------------------------ Stock bajo ----------------------------- */
/* inc/product-extras.php: aparece en la ficha Y en el quick view (que puede
   abrirse en cualquier grilla) — por eso vive acá y no en core/product.css. */
.vc-low-stock {
	display: inline-block;
	margin: 0 0 var(--sp-3);
	padding: var(--sp-1) var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 500;
	background: var(--warn-soft);
	color: var(--ink);
	border-radius: var(--radius-sm);
}