/*
 * Servicell Tablada · componentes base (SD 01b, 05 a 09). Prefijo `sv-`; valores desde tokens.css.
 * Sin estilos inline (CSP de B.4.5): todo lo dinámico va por clases o el.style.setProperty.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fuentes/inter-latin-wght.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sv-fondo);
  color: var(--sv-texto);
  font-family: var(--sv-fuente);
  font-size: var(--sv-fs-cuerpo);
  line-height: var(--sv-lh-cuerpo);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--sv-info-texto); }
a:hover { color: var(--sv-texto); }
button, input, select, textarea { font: inherit; color: inherit; }

/* Foco visible global (Anexo 5 fila 92): prohibido outline:none sin reemplazo */
:focus-visible {
  outline: 2px solid var(--sv-foco);
  outline-offset: 2px;
  box-shadow: var(--sv-halo);
}
.sv-oscuro :focus-visible, .sv-sobre-oscuro:focus-visible { outline-color: var(--sv-foco-oscuro); }

.sv-oculto-visual {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sv-mono { font-family: var(--sv-fuente-mono); letter-spacing: var(--sv-ls-pedido); }

/* 03 · Escala tipográfica */
.sv-display { font-size: var(--sv-fs-display); line-height: var(--sv-lh-display); font-weight: 800; letter-spacing: var(--sv-ls-display); }
.sv-titulo-pagina { font-size: var(--sv-fs-titulo-pagina); line-height: var(--sv-lh-titulo-pagina); font-weight: 800; letter-spacing: var(--sv-ls-titulo-pagina); }
.sv-titulo-seccion { font-size: var(--sv-fs-titulo-seccion); line-height: var(--sv-lh-titulo-seccion); font-weight: 800; letter-spacing: var(--sv-ls-titulo-seccion); }
.sv-subtitulo { font-size: var(--sv-fs-subtitulo); line-height: var(--sv-lh-subtitulo); font-weight: 800; letter-spacing: var(--sv-ls-subtitulo); }
.sv-cuerpo-grande { font-size: var(--sv-fs-cuerpo-grande); line-height: var(--sv-lh-cuerpo-grande); }
.sv-cuerpo { font-size: var(--sv-fs-cuerpo); line-height: var(--sv-lh-cuerpo); }
.sv-chico { font-size: var(--sv-fs-chico); line-height: var(--sv-lh-chico); font-weight: 500; color: var(--sv-texto-2); }
.sv-precio-xl { font-size: var(--sv-fs-precio-xl); font-weight: 800; letter-spacing: var(--sv-ls-precio-xl); line-height: 1; }
.sv-precio-tarjeta { font-size: var(--sv-fs-precio-tarjeta); font-weight: 800; letter-spacing: var(--sv-ls-precio-tarjeta); line-height: 1.1; }
.sv-numero-pedido { font-family: var(--sv-fuente-mono); font-size: var(--sv-fs-pedido); font-weight: 800; letter-spacing: var(--sv-ls-pedido); }

/* 01b · Logo: 72 px desktop / 52 mobile, mínimo 40; margen ¼ de la altura. Nunca se redibuja. */
.sv-logo { display: inline-block; line-height: 0; padding: 18px; margin: -18px; }
.sv-logo img { height: 72px; width: auto; }
@media (max-width: 1023px) { .sv-logo img { height: 52px; } .sv-logo { padding: 13px; margin: -13px; } }

/* 05 · Íconos: sprite con stroke = currentColor, trazo 2; la estrella va rellena */
svg[aria-hidden="true"] {
  flex: none; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sv-icono-relleno { fill: currentColor; stroke: none; }

/* 06 · Botones */
.sv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--sv-alto-boton); padding: 0 22px; border: 0; border-radius: var(--sv-r-boton);
  font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.sv-btn:active { transform: scale(.97); }
.sv-btn--compra {
  min-height: var(--sv-alto-cta); padding: 0 32px; background: var(--sv-compra); color: #FFFFFF;
  font-size: 19px; font-weight: 800; box-shadow: var(--sv-sombra-compra);
}
.sv-btn--compra:hover { background: var(--sv-compra-hover); color: #FFFFFF; box-shadow: var(--sv-sombra-compra-hover); transform: translateY(-1px); }
.sv-btn--compra:active { transform: scale(.97); box-shadow: none; }
@media (max-width: 1023px) { .sv-btn--compra { padding: 0 24px; } }
.sv-btn--compra-icono {
  width: var(--sv-tactil); height: var(--sv-tactil); min-height: 0; padding: 0; background: var(--sv-compra); color: #FFFFFF;
  box-shadow: var(--sv-sombra-compra-icono);
}
.sv-btn--compra-icono:hover { background: var(--sv-compra-hover); color: #FFFFFF; transform: translateY(-1px); }
.sv-btn--compra-icono:active { transform: scale(.96); }
.sv-btn--listo { min-height: var(--sv-tactil); padding: 0 10px; background: var(--sv-ok-tinte); color: var(--sv-ok); font-size: 12.5px; gap: 4px; }
.sv-btn--procesando { opacity: .85; pointer-events: none; }
.sv-btn--procesando::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #FFFFFF; animation: sv-giro .8s linear infinite;
}
.sv-btn--primario { background: var(--sv-oscuro); color: #FFFFFF; }
.sv-btn--primario:hover { background: var(--sv-oscuro-2); color: #FFFFFF; }
.sv-btn--secundario { background: var(--sv-superficie); color: var(--sv-texto); border: 1.5px solid var(--sv-texto); }
.sv-btn--secundario:hover { background: var(--sv-sutil); color: var(--sv-texto); }
.sv-btn--whatsapp svg { color: var(--sv-ok); }
.sv-btn--redondo { width: var(--sv-tactil); height: var(--sv-tactil); min-height: 0; padding: 0; border-radius: 50%; background: var(--sv-superficie); border: 1.5px solid var(--sv-texto); color: var(--sv-texto); }
.sv-btn--link { min-height: var(--sv-tactil); padding: 0; background: none; color: var(--sv-info-texto); font-weight: 600; }
.sv-btn--link:hover { color: var(--sv-texto); }
/* Un solo estilo de deshabilitado (fila 89): neutro, nunca un naranja apagado */
.sv-btn:disabled, .sv-btn[aria-disabled="true"] {
  background: var(--sv-deshabilitado-fondo); color: var(--sv-deshabilitado-texto); border: 0; box-shadow: none; transform: none; cursor: not-allowed;
}
@keyframes sv-giro { to { transform: rotate(360deg); } }

/* 07 · Inputs y controles */
.sv-campo { display: flex; flex-direction: column; gap: 6px; }
.sv-campo__etiqueta { font-size: 14px; font-weight: 600; }
.sv-campo__ayuda { font-size: 13px; color: var(--sv-texto-2); }
.sv-campo__error { font-size: 13px; font-weight: 600; color: var(--sv-alerta); }
.sv-input, .sv-select {
  width: 100%; height: var(--sv-alto-campo); padding: 0 14px; border: 1.5px solid var(--sv-linea-2); border-radius: var(--sv-r-campo);
  background: var(--sv-superficie); font-size: 16px;
}
.sv-input::placeholder { color: var(--sv-texto-placeholder); opacity: 1; }
.sv-input:focus-visible, .sv-select:focus-visible { outline: 0; border: 2px solid var(--sv-foco); box-shadow: var(--sv-halo); }
.sv-input[aria-invalid="true"] { border: 2px solid var(--sv-alerta); }
.sv-input--valido { border-color: var(--sv-ok); }
.sv-input:disabled { border-color: var(--sv-linea); background: var(--sv-sutil); color: var(--sv-deshabilitado-texto); }
.sv-select { appearance: none; background-image: none; }
.sv-cantidad { display: inline-flex; align-items: center; height: var(--sv-alto-campo); border: 1.5px solid var(--sv-linea-2); border-radius: var(--sv-r-boton); }
.sv-cantidad button { width: 46px; height: 100%; border: 0; background: none; cursor: pointer; }
.sv-cantidad output { min-width: 28px; text-align: center; font-size: 17px; font-weight: 700; }
.sv-check, .sv-radio { width: 22px; height: 22px; margin: 0; accent-color: var(--sv-info-texto); }
.sv-switch { appearance: none; width: 50px; height: 30px; border-radius: var(--sv-r-pastilla); background: var(--sv-linea-2); position: relative; cursor: pointer; margin: 0; }
.sv-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; transition: transform .15s; }
.sv-switch:checked { background: var(--sv-info-texto); }
.sv-switch:checked::after { transform: translateX(20px); }
.sv-opcion {
  display: flex; flex-direction: column; gap: 4px; min-height: var(--sv-tactil); padding: 16px 18px; border: 2px solid var(--sv-linea-2);
  border-radius: 16px; background: var(--sv-superficie); cursor: pointer;
}
.sv-opcion--elegida { border-color: var(--sv-info-texto); background: var(--sv-seleccion-tinte); box-shadow: 0 0 0 4px rgba(124, 143, 255, .22); }
.sv-opcion__desc { padding-left: 32px; font-size: 13.5px; color: var(--sv-texto-2); }

/* Combobox (patrón ARIA 1.2; el comportamiento llega con localidad.js en la Fase 4/6) */
.sv-combobox { position: relative; }
.sv-combobox__lista {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px; list-style: none;
  max-height: 320px; overflow: auto; background: var(--sv-superficie); border: 1px solid var(--sv-linea); border-radius: var(--sv-r-campo);
  box-shadow: var(--sv-sombra-tarjeta);
}
.sv-combobox__opcion { display: flex; justify-content: space-between; gap: 8px; min-height: var(--sv-tactil); align-items: center; padding: 0 10px; border-radius: 8px; cursor: pointer; }
.sv-combobox__opcion[aria-selected="true"] { background: var(--sv-seleccion-tinte); color: var(--sv-info-texto); }

/* 08 · Badges y estados */
.sv-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--sv-r-pastilla);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.sv-badge--vendido { background: var(--sv-info); color: var(--sv-oscuro); }
.sv-badge--nuevo { background: var(--sv-info-tinte); color: var(--sv-info-texto); }
.sv-badge--descuento { background: var(--sv-texto); color: #FFFFFF; font-weight: 800; }
.sv-badge--stock { background: var(--sv-ok-tinte); color: var(--sv-ok); gap: 6px; }
.sv-badge--quedan { background: var(--sv-alerta-tinte); color: var(--sv-alerta); gap: 6px; }
.sv-badge--sin-stock { background: var(--sv-superficie); color: var(--sv-texto-2); border: 1px solid var(--sv-linea-2); }
.sv-badge--hoy { background: var(--sv-ok-tinte); color: var(--sv-ok); }
.sv-punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sv-estado {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--sv-r-pastilla);
  border: 1px solid var(--sv-estado-bd, transparent); background: var(--sv-estado-bg); color: var(--sv-estado-fg);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.sv-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Colores de sv-data ESTADOS; esperando_pago usa los de pago_pendiente (D.2.1) */
.sv-estado--esperando_pago, .sv-estado--pago_pendiente { --sv-estado-bg: #F7F5F0; --sv-estado-fg: #4A4740; --sv-estado-bd: #A8A49C; }
.sv-estado--pagado { --sv-estado-bg: #ECEFFE; --sv-estado-fg: #2446E8; --sv-estado-bd: #ECEFFE; }
.sv-estado--preparando { --sv-estado-bg: #0F1433; --sv-estado-fg: #7C8FFF; --sv-estado-bd: #0F1433; }
.sv-estado--listo_retiro { --sv-estado-bg: #E6F4EC; --sv-estado-fg: #067647; --sv-estado-bd: #067647; }
.sv-estado--despachado { --sv-estado-bg: #FFFFFF; --sv-estado-fg: #1D1C18; --sv-estado-bd: #1D1C18; }
.sv-estado--entregado { --sv-estado-bg: #E6F4EC; --sv-estado-fg: #067647; --sv-estado-bd: #E6F4EC; }
.sv-estado--cancelado, .sv-estado--vencida { --sv-estado-bg: #F7F5F0; --sv-estado-fg: #4A4740; --sv-estado-bd: #E4DFD5; }
.sv-estado--devolucion { --sv-estado-bg: #FEF0EE; --sv-estado-fg: #B42318; --sv-estado-bd: #FEF0EE; }
.sv-estado--reembolsado { --sv-estado-bg: #F7F5F0; --sv-estado-fg: #1D1C18; --sv-estado-bd: #A8A49C; }
.sv-estado--cot_solicitada { --sv-estado-bg: #FFFFFF; --sv-estado-fg: #2446E8; --sv-estado-bd: #2446E8; }
.sv-estado--cot_enviada { --sv-estado-bg: #ECEFFE; --sv-estado-fg: #2446E8; --sv-estado-bd: #ECEFFE; }

/* Avisos (SD 10) */
.sv-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--sv-r-campo); font-size: 14px; }
.sv-aviso--info { background: var(--sv-info-tinte); }
.sv-aviso--info svg { color: var(--sv-info-texto); }
.sv-aviso--ok { background: var(--sv-ok-tinte); color: var(--sv-ok); font-weight: 600; }
.sv-aviso--error { background: var(--sv-alerta-tinte); color: var(--sv-alerta); font-weight: 600; }
.sv-placeholder { background: var(--sv-marca-placeholder); box-shadow: inset 0 -2px 0 var(--sv-marca-placeholder-borde); }

/* 09 · SvCard (container queries) y skeleton */
.sv-card {
  container-type: inline-size; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--sv-superficie); border: 1px solid var(--sv-linea); border-radius: var(--sv-r-tarjeta);
  transition: box-shadow .2s, border-color .2s;
}
.sv-card:hover { box-shadow: var(--sv-sombra-tarjeta); border-color: var(--sv-linea-2); }
.sv-card__imagen { position: relative; aspect-ratio: 4 / 5; background: var(--sv-sutil); }
.sv-card__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sv-card__badges .sv-badge { height: 24px; padding: 0 9px; font-size: 11.5px; }
.sv-card__rank {
  position: absolute; top: 10px; right: 10px; min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center;
  border-radius: var(--sv-r-pastilla); background: var(--sv-superficie); color: var(--sv-oscuro); font-size: 12.5px; font-weight: 800; box-shadow: var(--sv-sombra-chip);
}
.sv-card__agotado { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; background: rgba(242, 239, 233, .62); }
.sv-card__cuerpo { display: flex; flex-direction: column; gap: 5px; flex: 1; padding: 12px 12px 14px; }
.sv-card__meta { font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--sv-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-card__titulo {
  font-size: clamp(14px, 6cqw, 15.5px); line-height: 1.3; font-weight: 600; letter-spacing: -.005em; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-card__titulo a { color: inherit; text-decoration: none; }
.sv-card__precio { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.sv-card__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv-card__tachado { font-size: 13px; color: var(--sv-texto-2); text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, .5); }
.sv-card__monto { font-size: clamp(18px, 8.6cqw, 22px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.sv-card__nota { font-size: 12px; font-weight: 700; color: var(--sv-ok); }
.sv-card__cuotas { font-size: 12px; color: var(--sv-texto-2); }
.sv-card__stock { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.sv-card__stock--bajo { color: var(--sv-alerta); }
.sv-card__stock--hoy { color: var(--sv-ok); font-weight: 600; }
@container (max-width: 190px) {
  .sv-card__cuerpo { padding: 10px 10px 12px; }
  .sv-card__rank { top: 8px; right: 8px; }
  .sv-card__badges { top: 8px; left: 8px; }
}
.sv-skeleton { background: var(--sv-divisor); border-radius: 6px; }
.sv-skeleton--imagen {
  aspect-ratio: 4 / 5; border-radius: 0;
  background: linear-gradient(100deg, var(--sv-divisor) 30%, var(--sv-sutil) 50%, var(--sv-divisor) 70%);
  background-size: 200% 100%; animation: sv-brillo 1.4s ease-in-out infinite;
}
@keyframes sv-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Páginas de sistema de la Fase 1 (errores y portada provisoria) */
.sv-sistema__cabecera { padding: 20px var(--sv-margen); background: var(--sv-superficie); border-bottom: 1px solid var(--sv-linea); }
.sv-sistema__principal { max-width: 1440px; margin: 0 auto; padding: var(--sv-e-16) var(--sv-margen) var(--sv-e-24); }
.sv-error { max-width: 640px; display: flex; flex-direction: column; gap: 18px; }
.sv-error__estado { font-family: var(--sv-fuente-mono); font-weight: 800; color: var(--sv-texto-2); }
.sv-error__codigo { font-size: 14px; color: var(--sv-texto-2); }
.sv-portada { max-width: 720px; display: flex; flex-direction: column; gap: 22px; }

/* SvCard (diseño SvCard): tarjeta de producto. La vista previa del panel la usa desde la Fase 4. */
.sv-card { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--sv-superficie); border: 1px solid var(--sv-linea); border-radius: var(--sv-r-tarjeta); overflow: hidden; color: var(--sv-texto); text-decoration: none; container-type: inline-size; transition: box-shadow .2s, border-color .2s; }
a.sv-card:hover { box-shadow: var(--sv-sombra-tarjeta); border-color: var(--sv-linea-2); color: var(--sv-texto); }
.sv-card__img { position: relative; aspect-ratio: 4 / 5; background: var(--sv-sutil); overflow: hidden; }
.sv-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-card__sin-foto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--sv-texto-3); background: var(--sv-divisor); }
.sv-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sv-card__badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--sv-r-pastilla); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sv-card__badge--nuevo { background: var(--sv-info-tinte); color: var(--sv-info-texto); }
.sv-card__badge--promo { background: var(--sv-texto); color: #FFFFFF; font-size: 12px; font-weight: 800; }
.sv-card__cuerpo { display: flex; flex-direction: column; gap: 5px; padding: 12px 12px 14px; flex: 1; min-width: 0; }
.sv-card__sub { font-size: 12px; line-height: 1.3; color: var(--sv-texto-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-card__nombre { margin: 0; font-size: clamp(14px, 6cqw, 15.5px); line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.sv-card__precio { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.sv-card__tachado { font-size: 13px; color: var(--sv-texto-2); line-height: 1.2; }
.sv-card__monto { font-size: clamp(18px, 8.6cqw, 22px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; }
.sv-card__nota { font-size: 12px; line-height: 1.35; color: var(--sv-texto-2); }
.sv-card__nota--ok, .sv-card__verde { color: var(--sv-ok); font-weight: 700; }
.sv-card__nota--link { color: var(--sv-info-texto); font-weight: 600; }
.sv-card__oculto { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }

/* SvCard en la tienda (Fase 6; contrato de H.1): foto y nombre dentro de links, «+» naranja de 44 px (o en tinta en
   «Completá tu compra»), veil de sin stock, rank, líneas de stock y bloque de precio oculto con «Registrarme». */
.sv-card { height: 100%; }
.sv-card:hover { box-shadow: var(--sv-sombra-tarjeta); border-color: var(--sv-linea-2); }
.sv-card__img { display: block; text-decoration: none; }
.sv-card__nombre a { color: inherit; text-decoration: none; }
.sv-card__nombre a:hover { color: var(--sv-info-texto); }
.sv-card__nombre a::after { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 4 / 5; }
.sv-card__badge--top { background: var(--sv-info); color: var(--sv-oscuro); }
.sv-card__rank { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; height: 28px; min-width: 28px; padding: 0 8px; border-radius: 999px; background: #FFFFFF; color: var(--sv-oscuro); font-size: 12.5px; font-weight: 800; box-shadow: var(--sv-sombra-chip); }
.sv-card__agotado { position: absolute; inset: 0; background: rgba(242, 239, 233, .62); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.sv-card__pill { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: #FFFFFF; color: var(--sv-texto-2); font-size: 12.5px; font-weight: 700; border: 1px solid var(--sv-linea-2); white-space: nowrap; }
.sv-card__sin-foto { color: var(--sv-texto-2); background: var(--sv-sutil); }
.sv-card__precio > .sv-card__fila, .sv-card__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.sv-card__fila form { margin: 0; flex: none; }
.sv-card__monto--apagado { color: var(--sv-texto-2); }
.sv-card__nota { font-weight: 700; }
.sv-card__nota--reg { color: var(--sv-info-texto); }
.sv-card__nota.pr__cuotas, .sv-card__nota.pr__imp { font-weight: 400; }
.sv-card__oculto-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; min-width: 0; }
.sv-card__nota--link { font-size: 12.5px; text-decoration: none; }
.sv-card__stock { margin-top: 3px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.sv-card__stock--bajo { color: var(--sv-alerta); }
.sv-card__stock--bajo .sv-punto { background: var(--sv-alerta); }
.sv-card__stock--hoy { color: var(--sv-ok); font-weight: 600; gap: 5px; }
.sv-card__stock--consultar { color: var(--sv-texto-2); font-weight: 600; }
.sv-card--agotado .sv-card__img img { filter: grayscale(.4); }
.sv-card--skeleton { pointer-events: none; }
.sv-card--skeleton .sv-card__cuerpo { gap: 8px; }
.sv-skeleton--l45 { width: 45%; height: 10px; } .sv-skeleton--l90 { width: 90%; height: 13px; } .sv-skeleton--l70 { width: 70%; height: 13px; }
.sv-skeleton__fila { margin-top: 10px; }
.sv-skeleton--precio { width: 50%; height: 20px; background: var(--sv-linea); } .sv-skeleton--boton { width: 44px; height: 44px; border-radius: 14px; }
.sv-skeleton--imagen { display: block; }
/* Botones de la tienda (SD 06): ícono en tinta (44 px, secundario) y variantes sobre oscuro */
.sv-btn--tinta-icono { width: var(--sv-tactil); height: var(--sv-tactil); min-height: 0; padding: 0; flex: none; background: var(--sv-superficie); color: var(--sv-texto); border: 1.5px solid var(--sv-texto); border-radius: var(--sv-r-boton); }
.sv-btn--tinta-icono:hover { background: var(--sv-sutil); color: var(--sv-texto); }
.sv-btn--compra-icono { flex: none; border-radius: var(--sv-r-boton); }
.sv-btn--blanco { min-height: 58px; padding: 0 26px; background: #FFFFFF; color: var(--sv-oscuro); font-size: 17px; font-weight: 800; }
.sv-btn--blanco:hover { background: var(--sv-sutil); color: var(--sv-oscuro); }
.sv-btn--contorno-claro { min-height: 58px; padding: 0 22px; background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, .5); }
.sv-btn--contorno-claro:hover { border-color: #FFFFFF; color: #FFFFFF; }
.sv-btn--ancho { width: 100%; }
/* Muestra de color de una variante (swatch.php) */
.sv-swatch { display: block; flex: none; }
.sv-variantes { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sv-variante { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border: 2px solid var(--sv-linea-2); border-radius: 999px; cursor: pointer; font-size: 14.5px; font-weight: 600; }
.sv-variante:not(.sv-variante--color) { padding-left: 14px; }
.sv-variante input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sv-variante:has(input:checked) { border-color: var(--sv-texto); }
.sv-variante:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.sv-variante:has(input:focus-visible) { outline: 2px solid var(--sv-foco); outline-offset: 2px; }
.sv-variante small { font-weight: 500; color: var(--sv-texto-2); }