/* La hoja de la tienda: las variables (colores, letras, radios, sombras) definidas UNA vez, la base y
   las piezas comunes de app/piezas.js, tal como están en el diseño aprobado (el lienzo). Lo propio de
   cada pantalla va en la hoja de su grupo (pantallas/<grupo>/<grupo>.css), que usa estas variables y
   no define colores (test/front/estilos.test.js lo revisa: un color suelto fuera de :root falla).
   Sin degradados, sin mayúsculas espaciadas, sin animaciones que estorben. El celular es lo primero:
   la columna mide hasta 560 px y en el computador queda centrada (salvo las pantallas que tienen
   diseño propio de computador, desde 960 px). */

/* vendorizar:inicio */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/vendor/fuentes/bricolage-grotesque-5.3.0-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/vendor/fuentes/figtree-5.3.0-latin.woff2') format('woff2');
}
/* vendorizar:fin */

:root {
  /* La interfaz: un solo color, el azul noche, y los textos en tres grises. */
  --fondo: #FAF9F6;
  --superficie: #FFFFFF;
  --noche: #0E1030;
  --enlace: #282870;
  --texto: #1A1A2E;
  --texto-2: #3D3D52;
  --texto-3: #55556A;
  --gris: #E3E2EC;
  --lino: #EDE7D9;
  --sobre-noche: #FFFFFF;
  --sobre-noche-suave: rgba(255, 255, 255, .8);
  --borde: rgba(40, 40, 112, .14);
  --borde-campo: rgba(40, 40, 112, .25);
  --borde-suave: rgba(40, 40, 112, .10);
  --borde-punteado: rgba(40, 40, 112, .35);
  /* Verde solo para «bien» y ámbar solo para advertencias. */
  --bien-texto: #1E6B44;
  --bien-fondo: #E3F3EA;
  --ambar-texto: #7A4B00;
  --ambar-fondo: #FFF4DB;
  /* Sombras leves. */
  --sombra-tarjeta: 0 1px 2px rgba(14, 16, 48, .06);
  --sombra-muestra: 0 1px 4px rgba(14, 16, 48, .2);
  --sombra-miniatura: 0 2px 8px rgba(14, 16, 48, .12);
  --sombra-vista: 0 4px 14px rgba(14, 16, 48, .16);
  /* Los colores de las muestras dibujadas (los ejemplos «Dulce Hogar» y «Sofía cumple 5» del inicio):
     son del dibujo, no de la interfaz. */
  --muestra-rosa: #F9D9DC;
  --muestra-frambuesa: #C2475A;
  --muestra-vino: #7A2433;
  --muestra-rosa-claro: #FFE9EC;
  --muestra-amarillo: #FFC94A;
  --muestra-cafe: #2B1B0E;
  --muestra-naranja: #D9541E;
  --muestra-verde: #2F7A55;
  --muestra-blanco: #FFFFFF;
  --muestra-dorado: #E2C48E;
  --muestra-dorado-linea: rgba(201, 160, 99, .7);
  /* Letras: Bricolage Grotesque para títulos, precios y botones; Figtree para el texto. */
  --letra-titulo: 'Bricolage Grotesque', 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --letra-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Medidas. */
  --radio-tarjeta: 12px;
  --radio-boton: 10px;
  --radio-chip: 14px;
  --radio-pestana: 8px;
  --alto-boton: 48px;
  --toque: 44px;
  --ancho-columna: 560px;
  --ancho-maximo: 1120px;
}

/* --- Base --- */

*, *::before, *::after { box-sizing: border-box; }

/* Sin el recuadro gris que Android pone al tocar: la respuesta al tocar es la de :active (abajo). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra-texto);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

#tienda { flex: 1; display: flex; flex-direction: column; }

a { color: var(--enlace); }
a:hover { color: var(--noche); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--noche); outline-offset: 2px; }
.entrada:focus { outline: 2px solid var(--noche); outline-offset: 1px; }
[tabindex="-1"]:focus { outline: none; }

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* El aviso de MODO_PRUEBA (lo pone /comun/aviso-prueba.js arriba del body, en todas las pantallas). */
.aviso-prueba {
  margin: 0;
  padding: 6px 16px;
  background: var(--ambar-fondo);
  color: var(--ambar-texto);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* --- Textos --- */

.titulo-1 { font-family: var(--letra-titulo); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--noche); }
.titulo-2 { font-family: var(--letra-titulo); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--noche); }
.titulo-3 { font-size: 16px; font-weight: 700; color: var(--texto); }
.separado { margin-top: 8px; }
.bajada { font-size: 17px; line-height: 1.45; color: var(--texto-2); }
.texto-chico { font-size: 14px; line-height: 1.4; color: var(--texto-3); }
.encabezado { display: flex; flex-direction: column; gap: 4px; }
.encabezado--fila { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
.precio-grande { font-family: var(--letra-titulo); font-weight: 800; font-size: 22px; line-height: 1.1; color: var(--noche); }
.precio { font-family: var(--letra-titulo); font-weight: 700; font-size: 17px; color: var(--texto); }
.con-iva { font-family: var(--letra-texto); font-weight: 400; font-size: 14px; color: var(--texto-3); }
.fuerte { font-weight: 600; }
.relleno { color: transparent; background: var(--gris); border-radius: 4px; }

.icono-noche { color: var(--noche); }
.icono-enlace { color: var(--enlace); }
.icono-suave { color: var(--texto-3); }

/* --- Estructura de una pantalla --- */

.pantalla { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.contenido {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-columna);
  margin: 0 auto;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- La cabecera --- */

.cabecera { background: var(--superficie); }
.cabecera-dentro { display: flex; align-items: center; width: 100%; max-width: var(--ancho-columna); margin: 0 auto; }
.cabecera--inicio:not(.cabecera--con-pasos), .cabecera--paso:not(.cabecera--con-pasos) { border-bottom: 1px solid var(--borde); }
.cabecera--inicio .cabecera-dentro { justify-content: space-between; padding: 6px 16px; }
.cabecera--paso .cabecera-dentro { gap: 4px; padding: 6px 8px; }

.logo { display: flex; align-items: center; min-height: var(--toque); }
.logo img { height: 30px; width: auto; }
.logo--grande img { height: 38px; }

.cabecera-atras {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--toque);
  height: var(--toque);
  color: var(--noche);
}
.cabecera-titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--noche);
}
.cabecera-enlace { display: flex; align-items: center; min-height: var(--toque); padding: 0 8px; font-weight: 600; font-size: 15px; }
.cabecera--inicio .cabecera-enlace { padding: 0 4px; }
.cabecera-boton {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--toque);
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--enlace);
  font-weight: 600;
  font-size: 15px;
}
.cabecera-boton[aria-disabled="true"] { color: var(--texto-3); cursor: default; }
.cabecera-dato { font-weight: 600; font-size: 15px; color: var(--texto-3); }

/* La del computador (logo, centro y derecha). */
.cabecera--ancha { border-bottom: 1px solid var(--borde); }
.cabecera--ancha .cabecera-dentro {
  max-width: var(--ancho-maximo);
  padding: 10px 24px;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 28px;
}
.cabecera-nav { flex: 1; display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 16px; font-weight: 600; }
.cabecera-nav a { display: flex; align-items: center; min-height: var(--toque); text-decoration: none; color: var(--texto); }
.cabecera-nav a:hover { color: var(--noche); text-decoration: underline; }
.cabecera-lado { display: flex; align-items: center; gap: 0 20px; font-size: 16px; font-weight: 600; }
.cabecera-lado a { display: flex; align-items: center; min-height: var(--toque); }

/* --- La barra de pasos: 1 · Diseña · 2 · Revisa · 3 · Paga --- */

.pasos {
  margin: 0;
  padding: 8px 16px 12px;
  list-style: none;
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: var(--ancho-columna);
  margin-inline: auto;
  font-size: 14px;
  font-weight: 600;
}
.cabecera--con-pasos { border-bottom: 1px solid var(--borde); }
.paso { flex: 1; display: flex; flex-direction: column; gap: 6px; color: var(--texto-3); }
.paso-barra { height: 4px; border-radius: 2px; background: var(--gris); }
.paso--hecho { color: var(--texto-2); }
.paso--hecho .paso-barra, .paso--actual .paso-barra { background: var(--noche); }
.paso--actual { color: var(--noche); font-weight: 700; }
.pasos--ancho { flex: 0 1 420px; padding: 0; margin: 0; }

/* --- La barra de abajo: total, fecha y botón --- */

.barra-abajo {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding: 12px 16px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.barra-abajo-dentro { display: flex; align-items: center; gap: 12px; width: 100%; max-width: calc(var(--ancho-columna) - 32px); margin: 0 auto; }
.barra-abajo--columna .barra-abajo-dentro { flex-direction: column; align-items: stretch; gap: 4px; }
.barra-abajo--holgada .barra-abajo-dentro { gap: 8px; }
.barra-total { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.barra-linea { font-size: 14px; line-height: 1.3; color: var(--texto-2); }
.barra-abajo .boton--primario:not(.boton--ancho) { flex: 0 0 auto; }
.barra-abajo--columna .boton { width: 100%; }
.barra-fila { display: flex; gap: 8px; }
.barra-fila > .boton { flex: 1 1 auto; padding: 0 12px; white-space: nowrap; }
.barra-nota { font-size: 14px; line-height: 1.4; color: var(--texto-3); text-align: center; }
.barra-nota--grande { font-size: 15px; }
/* «Al tocar «Ir a pagar» aceptas los Términos…»: el enlace con zona táctil de 44 px sin mover la línea. */
.barra-legal a { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 600; }

/* En una pantalla baja (el celular acostado, o con el teclado abierto) la barra va en una sola línea:
   el botón a la derecha y lo demás a su lado. */
@media (max-height: 600px) {
  .barra-abajo { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .barra-abajo--columna .barra-abajo-dentro { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .barra-abajo--columna .barra-abajo-dentro > * { flex: 1 1 0; min-width: 0; }
  .barra-abajo--columna .barra-abajo-dentro > .boton { flex: 0 0 auto; width: auto; order: 2; }
  .barra-abajo--columna .barra-abajo-dentro > .aviso { flex-basis: 100%; order: 3; }
  .barra-abajo--columna .barra-nota { text-align: left; }
  .barra-abajo--columna .enlace--centrado { justify-content: flex-start; }
  .barra-aprobar-nota { display: none; }
}

/* --- Botones y enlaces --- */

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--alto-boton);
  padding: 0 20px;
  border: none;
  border-radius: var(--radio-boton);
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}
.boton--primario { background: var(--noche); color: var(--sobre-noche); }
.boton--primario:hover { color: var(--sobre-noche); }
.boton--secundario { background: var(--superficie); color: var(--noche); border: 1.5px solid var(--noche); font-size: 16px; }
.boton--secundario:hover { color: var(--noche); }
.boton--chico {
  flex: 0 0 auto;
  height: var(--toque);
  padding: 0 14px;
  gap: 6px;
  border: 1px solid var(--borde-campo);
  background: var(--superficie);
  color: var(--enlace);
  font-family: var(--letra-texto);
  font-size: 15px;
}
.boton--chico:hover { color: var(--noche); }
.boton--texto {
  height: auto;
  min-height: var(--toque);
  padding: 0;
  background: transparent;
  color: var(--enlace);
  font-family: var(--letra-texto);
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
}
.boton--ancho { width: 100%; }
/* Al tocar se nota: un fondo suave en los claros y un poco más claro el azul noche. */
.boton, .ficha { transition: border-color 120ms ease, box-shadow 120ms ease; }
.boton:not([aria-disabled="true"]):active, .ficha:active { background: var(--borde-suave); }
.boton--primario:not([aria-disabled="true"]):active { background: var(--noche); opacity: .85; }
.boton[aria-disabled="true"] { background: var(--gris); color: var(--texto-3); border-color: transparent; cursor: default; }
.boton--chico[aria-disabled="true"], .boton--texto[aria-disabled="true"] { background: var(--superficie); color: var(--texto-3); border-color: var(--borde-campo); }
.boton--texto[aria-disabled="true"] { background: transparent; }
.boton[aria-busy="true"] { cursor: progress; }

/* BotonArchivo: el <input type="file"> va encima del label, sin verse; el foco se ve en el label. */
.archivo { position: relative; cursor: pointer; }
.archivo-entrada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.archivo-entrada:disabled { cursor: progress; }
.archivo:has(.archivo-entrada:focus-visible) { outline: 2px solid var(--noche); outline-offset: 2px; }
.archivo[aria-busy="true"] { cursor: progress; color: var(--texto-3); }
.archivo--texto {
  display: flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 2px;
  font-weight: 600;
  font-size: 16px;
  color: var(--enlace);
  text-decoration: underline;
}
.archivo--texto:hover { color: var(--noche); }

.enlace { display: flex; align-items: center; align-self: flex-start; min-height: var(--toque); font-size: 16px; }
.enlace--14 { font-size: 14px; }
.enlace--15 { font-size: 15px; }
.enlace--centrado { align-self: stretch; justify-content: center; }

/* --- Cajas --- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: 14px;
}
.tarjeta--columna { display: flex; flex-direction: column; gap: 8px; }
.tarjeta--fila { display: flex; align-items: center; gap: 12px; }

.filas {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
.fila {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--borde-suave);
}
.fila:last-child { border-bottom: 0; }
.fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-rotulo { font-size: 15px; color: var(--texto-3); }
.fila-valor { font-size: 17px; font-weight: 600; color: var(--texto); }
.fila-valor--grande { font-family: var(--letra-titulo); font-weight: 700; font-size: 18px; color: var(--noche); }

/* Las cuentas: «Productos $69.900», «Total con IVA $69.900». */
.cuenta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; color: var(--texto-2); }
.cuenta > :last-child { color: var(--texto); font-weight: 600; text-align: right; }
.cuenta--total { padding-top: 10px; border-top: 1px solid var(--borde-suave); }
.cuenta--total > :first-child { font-weight: 700; color: var(--noche); }
.cuenta--total > :last-child { font-family: var(--letra-titulo); font-weight: 800; font-size: 22px; color: var(--noche); }

.desplegable {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: 0 14px;
}
.desplegable > summary {
  min-height: var(--alto-boton);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
}
.desplegable-flecha { flex: 0 0 20px; }
.desplegable[open] .desplegable-flecha { transform: rotate(180deg); }
.desplegable-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 14px; }

/* --- Campos --- */

.campo { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 600; color: var(--texto-2); }
.campo-opcional { font-weight: 400; color: var(--texto-3); }
.entrada {
  width: 100%;
  height: var(--alto-boton);
  padding: 0 14px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-boton);
  background: var(--superficie);
  font-family: var(--letra-texto);
  font-size: 17px;
  font-weight: 400;
  color: var(--texto);
}
.entrada--selector { padding: 0 10px; }
.entrada--area { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.4; resize: vertical; }
.entrada::placeholder { color: var(--texto-3); }
.entrada[aria-invalid="true"] { border: 2px solid var(--ambar-texto); padding: 0 13px; }
.entrada--area[aria-invalid="true"] { padding: 11px 13px; }
.campo-ayuda { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--texto-3); }
.campo-error { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ambar-texto); }
.campo-error .icono { flex: 0 0 16px; margin-top: 2px; }
.campos { display: flex; flex-direction: column; gap: 12px; }

.casilla { display: flex; align-items: flex-start; gap: 10px; min-height: var(--toque); font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--texto); }
.casilla input { flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--noche); }
.casilla--fuerte { align-items: center; font-size: 16px; font-weight: 600; }
.casilla--fuerte input { margin-top: 0; }
/* La casilla sola, al principio de una fila («Revisa esto»): la fila es el label. */
.casilla-sola { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--noche); }

/* --- Escoger: fichas, pastillas y pestañas --- */

.opciones { display: grid; gap: 8px; }
.opciones--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opciones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opciones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opciones--lista { display: flex; flex-direction: column; gap: 6px; }

.ficha {
  margin: 0;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  color: var(--texto-2);
  font-family: var(--letra-texto);
  font-size: 15px;
  font-weight: 600;
}
.ficha[aria-checked="true"] { border-color: var(--noche); box-shadow: inset 0 0 0 1px var(--noche); color: var(--noche); font-weight: 700; }
.ficha--icono { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 80px; padding: 0 4px; font-size: 14px; }
/* Con letra grande o en 260 px, «Profesional» y «Agradecimiento» se parten en dos líneas y no se salen. */
.ficha-texto { max-width: 100%; text-align: center; line-height: 1.2; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.ficha--fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 14px; color: var(--texto); }
.ficha--centro { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 12px; font-size: 17px; }
.ficha--tarjeta { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; text-align: left; color: var(--texto); }
.ficha--radio { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px; text-align: left; }
.ficha-aro {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid var(--texto-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ficha-punto { width: 10px; height: 10px; border-radius: 50%; }
.ficha[aria-checked="true"] .ficha-aro { border-color: var(--noche); }
.ficha[aria-checked="true"] .ficha-punto { background: var(--noche); }
.ficha-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Lo de adentro de una ficha: nombre, detalle y diferencia de precio (papel); cantidad y precio
   (filas); título con valor (entrega). */
.ficha-nombre { font-size: 16px; font-weight: 600; color: var(--texto-2); }
.ficha[aria-checked="true"] .ficha-nombre { font-weight: 700; color: var(--noche); }
.ficha-detalle { display: flex; flex-direction: column; font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--texto-3); }
.ficha-extra { font-size: 14px; font-weight: 700; color: var(--texto); }
.ficha-foto { height: 56px; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); overflow: hidden; }
.ficha--fila .ficha-nombre { font-size: 17px; font-weight: 700; color: var(--texto); }
.ficha--fila[aria-checked="true"] .ficha-nombre { color: var(--noche); }
.ficha-valor { display: flex; align-items: baseline; gap: 8px; }
.ficha-unidad { font-size: 14px; font-weight: 400; color: var(--texto-3); }
.ficha-titulo { display: flex; justify-content: space-between; gap: 8px; font-size: 17px; font-weight: 700; }

.pildoras { display: flex; flex-wrap: wrap; column-gap: 8px; margin: -4px 0; }
.pildora { display: flex; align-items: center; height: var(--toque); padding: 0; border: none; background: transparent; }
.pildora-cuerpo {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--borde-campo);
  border-radius: 18px;
  background: var(--superficie);
  color: var(--texto-2);
  font-size: 15px;
  font-weight: 600;
}
.pildora[aria-checked="true"] .pildora-cuerpo { background: var(--noche); border-color: var(--noche); color: var(--sobre-noche); }

.pestanas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
}
.pestana {
  height: 40px;
  padding: 0 2px;
  border: none;
  border-radius: var(--radio-pestana);
  background: transparent;
  color: var(--texto-2);
  font-family: var(--letra-texto);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.pestana[aria-selected="true"] { background: var(--noche); color: var(--sobre-noche); }

/* --- Mensajes --- */

.chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radio-chip);
  font-size: 14px;
  font-weight: 600;
}
.chip--bien { background: var(--bien-fondo); color: var(--bien-texto); }
.chip--neutro { background: var(--gris); color: var(--noche); }
.chip--advertencia { background: var(--ambar-fondo); color: var(--ambar-texto); }

.aviso { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radio-tarjeta); font-size: 15px; line-height: 1.4; }
.aviso > .icono { flex: 0 0 20px; margin-top: 1px; }
.aviso--bien { background: var(--bien-fondo); color: var(--bien-texto); }
.aviso--advertencia { background: var(--ambar-fondo); color: var(--ambar-texto); }
.aviso a { color: inherit; font-weight: 600; }
.aviso-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.aviso-cuerpo strong { font-weight: 700; }
.aviso-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }

.nota { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--texto-3); }
.nota > .icono { flex: 0 0 18px; margin-top: 1px; }
.nota--centrada { justify-content: center; text-align: center; }

.numerados { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.4; }
.numerados > li { display: flex; align-items: flex-start; gap: 10px; }
.numerado {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--noche);
  color: var(--sobre-noche);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.numerado-texto { padding-top: 1px; }

/* La lista de confianza: ✓ Precio final con IVA… */
.confianza { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; font-size: 15px; line-height: 1.3; color: var(--texto-2); }
.confianza > li { display: flex; gap: 6px; align-items: flex-start; }
.confianza .icono { flex: 0 0 18px; margin-top: 1px; color: var(--noche); }

/* --- La escena (el diseño del cliente pintado por el editor) --- */

.escena { display: flex; align-items: center; justify-content: center; }
.escena svg { width: 100%; height: auto; }
.escena--vista { border-radius: 6px; overflow: hidden; box-shadow: var(--sombra-vista); }
.escena--miniatura { flex: 0 0 auto; border-radius: 3px; overflow: hidden; box-shadow: var(--sombra-muestra); }
.escena--circulo { border-radius: 50%; }

/* La prueba (VistaPrueba): la pieza sobre el lino, con «En el papel» girada y «Acercar». El tamaño de
   la caja, el giro y el zoom cambian por producto, como en el lienzo. */
.vista-prueba { display: flex; flex-direction: column; gap: 12px; }
.vista-prueba-caja {
  --giro: -6deg;
  --en-papel: .82;
  --en-papel-cerca: 1.35;
  --cerca: 1.5;
  --origen: 92% 50%;
  position: relative;
  height: 240px;
  padding: 0 0 40px;
  border-radius: var(--radio-tarjeta);
  background: var(--lino);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vista-prueba--invitacion { --giro: -5deg; --en-papel: .86; --en-papel-cerca: 1.4; --cerca: 1.6; --origen: 50% 30%; height: 368px; padding: 10px 0 58px; }
.vista-prueba--sticker { --giro: -8deg; --en-papel: .8; --en-papel-cerca: 1.3; --cerca: 1.45; --origen: 50% 50%; }
.vista-prueba--reverso { --origen: 50% 50%; }
.vista-prueba-pieza { flex: 0 0 auto; transform-origin: var(--origen); transition: transform .2s ease; }
.vista-prueba--cerca .vista-prueba-pieza { transform: scale(var(--cerca)); }
.vista-prueba--papel .vista-prueba-pieza { transform: rotate(var(--giro)) scale(var(--en-papel)); }
.vista-prueba--papel.vista-prueba--cerca .vista-prueba-pieza { transform: rotate(var(--giro)) scale(var(--en-papel-cerca)); }
.vista-prueba-papel { position: absolute; z-index: 1; left: 12px; bottom: 18px; font-size: 13px; color: var(--texto-3); }
.vista-prueba-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
.vista-prueba-nota { text-align: center; }
/* La fila de «Revisa esto» que sigue con el texto de ejemplo de la plantilla. */
.revisar-ejemplo { color: var(--ambar-texto); font-weight: 600; }

/* «Revisa esto» y la barra de aprobar. */
.fila-enlace { align-self: center; padding: 0 2px; }
.barra-aprobar-nota { margin-bottom: 2px; }
.escena[data-error] { background: var(--lino); }
.escena-texto { font-kerning: none; font-variant-ligatures: none; }

/* --- El pie --- */

.pie {
  padding: 14px 16px 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--texto-3);
}
.pie > * { width: 100%; max-width: calc(var(--ancho-columna) - 32px); margin-inline: auto; }
.pie strong { font-weight: 700; color: var(--texto-2); }
/* Los cuatro enlaces del pie del celular en dos filas parejas (como en el lienzo Main). */
.pie-enlaces { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 16px; margin-top: 2px; }
.pie-enlaces a { display: flex; align-items: center; min-height: var(--toque); }
.pie .celular { font-weight: 600; }
.pie--ancho { padding: 0; }
.pie--ancho > * { max-width: none; }
.pie-dentro {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 28px 24px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto-2);
}
.pie-datos { display: flex; flex-direction: column; gap: 2px; }
.pie-datos strong { color: var(--texto); }
.pie-datos a { align-self: flex-start; display: flex; align-items: center; min-height: var(--toque); }
.pie-datos .pie-contacto { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }
.pie-contacto a { align-self: auto; }
.pie--ancho .pie-enlaces { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 20px; margin: 0; }

/* --- Pantallas del sistema (cargando, no existe, falta terminar, el navegador viejo y la 404) --- */

.cargando { flex: 1; }
.sistema { align-items: flex-start; }
.sistema-productos { align-self: stretch; margin-top: 8px; }
.sistema-enlaces { align-self: stretch; }
.sistema-enlaces .fila { text-decoration: none; color: var(--enlace); }
.sistema-enlaces .fila-valor { color: inherit; }
.tienda-vieja { gap: 8px; }