/* ─────────────────────────────────────────────────────────────
   Cotizador 3D Llaveprint. Marca: manual v1 (fondo blanco, azul
   Llaveprint, celeste solo en íconos y detalles, Plus Jakarta Sans +
   Inter). Primero el celular: el tráfico viene de Instagram.

   De la plataforma se toma la forma de los tokens (public/styles.css:
   espaciados --e-*, tamaños --t-*, radios, toque mínimo de 44 px) y los
   íconos de trazo de 1,8 px con puntas redondeadas (public/marco.js).
   Los colores y las tipografías son los del manual, no los del panel.
   ───────────────────────────────────────────────────────────── */

/* Las tipografías, servidas desde fuentes/ (SIL OFL 1.1, licencias al lado):
   las variables de Google Fonts, solo el juego latino, que tiene el
   castellano completo. Inter 400 a 600 y Plus Jakarta Sans 700 a 800, cada
   una en un solo archivo. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("fuentes/plus-jakarta-sans-latin.woff2") format("woff2");
}
:root {
  color-scheme: light;

  /* Color (manual v1) */
  --azul: #1D3055;
  --azul-hondo: #142340;
  --celeste: #72B5BD;     /* solo íconos, rayas y detalles: nunca texto */
  --niebla: #E5F2F4;      /* fondos suaves, el círculo detrás de la pieza */
  --hielo: #F4F7FA;       /* tarjetas */
  --pizarra: #727E95;     /* detalles que no son texto (bordes, marcas) */
  /* El pizarra del manual da 4,1:1 sobre blanco y 3,8:1 sobre hielo: no
     llega al 4,5:1 que pide la letra chica. Para texto, el mismo tono más
     oscuro (5,4:1 sobre blanco, 5,0:1 sobre hielo, 4,7:1 sobre niebla). */
  --pizarra-texto: #5F6B82;
  --verde: #15803D;       /* solo el precio con descuento */
  --blanco: #FFFFFF;
  --linea: #DDE4EC;
  --error: #B42318;
  --sombra: 0 12px 32px -14px rgba(29, 48, 85, 0.28);

  /* Espaciado y tamaños, con la escala de la plataforma */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 72px;
  --t-xs: 12px;
  --t-s: 14px;
  --t-m: 16px;
  --t-l: 19px;
  --t-xl: 26px;
  --t-xxl: 34px;
  --r: 16px;
  --r-chico: 10px;
  --r-full: 999px;
  --toque: 44px;

  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-titulo: "Plus Jakarta Sans", var(--fuente);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-m);
  line-height: 1.5;
  color: var(--azul);
  background: var(--blanco);
}
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 800; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); font-weight: 700; }
p { margin: 0; }
a { color: var(--azul); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 var(--e-4); }
.chico { font-size: var(--t-s); color: var(--pizarra-texto); }
.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;
}
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }
.saltar { position: absolute; left: var(--e-2); top: -60px; background: var(--azul); color: var(--blanco); padding: var(--e-2) var(--e-3); border-radius: var(--r-chico); z-index: 50; }
.saltar:focus { top: var(--e-2); }

/* ── Piezas de la marca ───────────────────────────────────── */
/* Etiqueta: mayúsculas espaciadas con una raya celeste adelante. */
.etiqueta {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--azul); margin-bottom: var(--e-3);
}
.etiqueta::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--celeste); }
/* La palabra destacada: semibold azul con subrayado niebla. */
.destacado {
  font-weight: inherit; color: var(--azul);
  background: linear-gradient(transparent 62%, var(--niebla) 62%);
  padding: 0 0.08em;
}
.icono { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icono-chico { width: 18px; height: 18px; }
/* Tarjeta de dato: ícono blanco en un círculo azul. */
.circulo-icono {
  width: 44px; height: 44px; border-radius: 50%; background: var(--azul); color: var(--blanco);
  display: grid; place-items: center; flex-shrink: 0;
}
.pildora {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--niebla); color: var(--azul);
}
.pildora-ejemplo { background: var(--azul); color: var(--blanco); letter-spacing: 0.1em; }
.pildora-atencion { background: var(--hielo); color: var(--azul); border: 1px solid var(--linea); }

/* Botones: píldoras. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque); padding: 0 var(--e-5); border-radius: var(--r-full);
  border: 2px solid var(--azul); font-weight: 600; font-size: var(--t-m); line-height: 1.25; text-align: center;
  /* El texto se parte si no entra: un botón que no se parte ensancha la
     página y el celular achica todo (pasó con «Subí el archivo y te damos
     el precio exacto»). */
  cursor: pointer; text-decoration: none; white-space: normal;
  transition: background-color 0.15s, color 0.15s, transform 0.1s;
}
.boton:active { transform: scale(0.98); }
.boton-primario { background: var(--azul); color: var(--blanco); }
.boton-primario:hover { background: var(--azul-hondo); border-color: var(--azul-hondo); }
.boton-secundario { background: var(--blanco); color: var(--azul); }
.boton-secundario:hover { background: var(--niebla); }
.boton-ancho { width: 100%; padding: var(--e-2) var(--e-4); }
.fila-categorias .boton, .cp-fila .boton, .fila-link .boton { white-space: nowrap; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }
.enlace {
  background: none; border: 0; padding: var(--e-2) 0; min-height: var(--toque);
  color: var(--azul); font-weight: 600; text-decoration: underline; text-decoration-color: var(--celeste);
  text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer;
}

/* ── Cabecera, aviso EJEMPLO y pie ────────────────────────── */
.cabecera { border-bottom: 1px solid var(--linea); background: var(--blanco); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--e-3); }
/* El logo del manual de marca (marketing, 12/11/2026): el wordmark azul
   sobre blanco. Se le fija el alto y el ancho sale solo, así no se estira.
   El área de respeto es el alto de la palabra: con 22 px de alto, la fila de
   64 px le deja 21 por arriba y por abajo, y a la derecha va el margen. */
.logo { display: inline-flex; align-items: center; min-height: var(--toque); margin-right: 22px; }
.logo img { display: block; height: 22px; width: auto; }
.volver { font-size: var(--t-s); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); }
.aviso-ejemplo {
  background: var(--azul); color: var(--blanco); text-align: center;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; padding: 6px var(--e-4);
}
/* Con el cotizador apagado para el público, lo que ve un admin. */
.aviso-apagado { background: var(--azul-hondo); }
/* «Muy pronto» (cotizador/abierto.js): la página de todos con el cotizador
   apagado. */
.pronto { min-height: 100vh; display: flex; align-items: center; padding: var(--e-7) 0; background: var(--niebla); }
.pronto h1 { margin-bottom: var(--e-4); }
.pronto p { font-size: var(--t-m); max-width: 36em; }
.pronto p + p { margin-top: var(--e-3); }
.pronto a { color: var(--azul); font-weight: 600; text-decoration-color: var(--celeste); text-underline-offset: 4px; }
.pie { background: var(--azul); color: var(--blanco); padding: var(--e-6) 0 calc(var(--e-6) + env(safe-area-inset-bottom, 0px)); margin-top: var(--e-8); text-align: center; }
.pie a { color: var(--blanco); font-weight: 600; text-decoration-color: var(--celeste); text-underline-offset: 4px; }
.pie p + p { margin-top: var(--e-2); font-size: var(--t-s); opacity: 0.85; }

/* ── Portada ──────────────────────────────────────────────── */
.portada { padding: var(--e-6) 0 var(--e-5); }
.portada-grilla { display: grid; gap: var(--e-6); }
.portada h1 .destacado { white-space: nowrap; }
.tres-pasos { list-style: none; padding: 0; margin: var(--e-5) 0 0; display: grid; gap: var(--e-3); }
.tres-pasos li { display: flex; align-items: center; gap: var(--e-3); font-weight: 500; }
.paso-num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--niebla); color: var(--azul);
  display: grid; place-items: center; font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--t-s); flex-shrink: 0;
}
.carga { display: grid; gap: var(--e-4); }
.zona-carga {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); text-align: center;
  min-height: 220px; padding: var(--e-5) var(--e-4);
  border: 2px dashed var(--celeste); border-radius: var(--r); background: var(--hielo);
  cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
}
.zona-carga:hover, .zona-carga.arrastrando { background: var(--niebla); border-color: var(--azul); }
.zona-carga:focus-within { outline: 3px solid var(--celeste); outline-offset: 2px; }
.zona-carga strong { font-family: var(--fuente-titulo); font-size: var(--t-l); }
.zona-carga .circulo-icono { width: 56px; height: 56px; margin-bottom: var(--e-1); }
.zona-carga .boton { margin-top: var(--e-2); }
.campo-link label { display: block; font-weight: 600; margin-bottom: var(--e-2); }
.fila-link { display: flex; gap: var(--e-2); }
.entrada {
  width: 100%; min-height: var(--toque); padding: 0 var(--e-4);
  border: 1.5px solid var(--linea); border-radius: var(--r-full); background: var(--blanco);
  font-size: var(--t-m);
}
.entrada:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--niebla); }
textarea.entrada { border-radius: var(--r-chico); padding: var(--e-3) var(--e-4); min-height: 88px; resize: vertical; }
.ayuda { font-size: var(--t-s); color: var(--pizarra-texto); margin-top: var(--e-2); }
.error { font-size: var(--t-s); color: var(--error); font-weight: 500; margin-top: var(--e-2); }
.error:empty { display: none; }
.privacidad { display: flex; gap: var(--e-2); font-size: var(--t-s); color: var(--pizarra-texto); }
.privacidad .icono { color: var(--celeste); width: 18px; height: 18px; margin-top: 2px; }

/* ── El flujo ─────────────────────────────────────────────── */
.flujo { padding: var(--e-4) 0; }
/* minmax(0, 1fr): sin esto, un botón largo ensancha la columna y la página
   se corre de costado en el celular. */
.flujo-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.flujo-pasos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); min-width: 0; }
.bloque { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); padding: var(--e-5) var(--e-4); }
.bloque h2 { font-size: var(--t-l); margin-bottom: var(--e-2); }
.bloque > .chico { margin-bottom: var(--e-4); }

/* Las piezas */
.pieza { display: grid; gap: var(--e-4); padding: var(--e-4) 0; border-top: 1px solid var(--linea); }
.pieza:first-of-type { border-top: 0; padding-top: 0; }
.pieza-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.pieza-nombre { font-weight: 600; word-break: break-word; }
.quitar { background: none; border: 0; color: var(--pizarra-texto); min-width: var(--toque); min-height: var(--toque); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.quitar:hover { background: var(--hielo); color: var(--azul); }
.pieza-con-vista { display: grid; gap: var(--e-4); }
.pieza-con-vista > div, .pieza > [data-cuerpo] { min-width: 0; display: grid; gap: var(--e-3); align-content: start; }
.pieza [data-cuerpo] > .grupo { margin-top: 0; }
.vista {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden;
  background: radial-gradient(circle at 50% 54%, var(--niebla) 0 38%, var(--hielo) 38.5% 100%);
  touch-action: pan-y;
}
.vista canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.vista-medidas {
  position: absolute; left: var(--e-3); bottom: var(--e-3); right: var(--e-3);
  display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none;
}
.vista-medidas .pildora { background: var(--blanco); box-shadow: var(--sombra); font-variant-numeric: tabular-nums; }
.vista-estado { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--e-4); color: var(--pizarra-texto); font-size: var(--t-s); }
/* Sin la pieza en 3D (archivo listo para imprimir): la imagen de la placa. */
.vista-miniatura { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-chico); }
.datos-pieza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.dato { background: var(--hielo); border-radius: var(--r-chico); padding: var(--e-3); }
.dato small { display: block; font-size: var(--t-xs); color: var(--pizarra-texto); }
.dato strong { font-family: var(--fuente-titulo); font-size: var(--t-l); font-variant-numeric: tabular-nums; }
.avisos { display: grid; gap: var(--e-2); }
.aviso { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-s); background: var(--hielo); border-radius: var(--r-chico); padding: var(--e-3); }
.aviso .icono { color: var(--celeste); width: 18px; height: 18px; margin-top: 1px; }
.pregunta { background: var(--niebla); border-radius: var(--r-chico); padding: var(--e-4); display: grid; gap: var(--e-3); }
.pregunta p { font-weight: 600; }
.fila-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Un 3MF con varias placas: una lista de casillas (una, varias o todas),
   ninguna marcada al abrir. */
.pregunta-placas { display: grid; gap: var(--e-3); background: var(--niebla); border-radius: var(--r-chico); padding: var(--e-4); }
.pregunta-placas .grupo-titulo { margin: 0; }
.placas { display: grid; gap: var(--e-2); }
.placa {
  display: grid; grid-template-columns: 20px 56px minmax(0, 1fr) auto; gap: var(--e-3); align-items: center;
  min-height: var(--toque); padding: var(--e-2) var(--e-3); border: 1.5px solid var(--linea); border-radius: var(--r-chico);
  background: var(--blanco); cursor: pointer; transition: border-color 0.15s, background-color 0.15s;
}
.placa input { width: 20px; height: 20px; margin: 0; accent-color: var(--azul); cursor: pointer; }
.placa-cuerpo { display: grid; gap: 2px; min-width: 0; }
.placa-cuerpo strong { font-weight: 600; font-size: var(--t-s); }
.placa-cuerpo small { font-size: var(--t-xs); color: var(--pizarra-texto); }
.placa-miniatura {
  width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-chico); background: var(--hielo);
  display: grid; place-items: center; color: var(--celeste);
}
.placa-precio { font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--t-s); font-variant-numeric: tabular-nums; text-align: right; }
.placa:hover { border-color: var(--pizarra); }
.placa.elegida { border-color: var(--azul); background: var(--hielo); box-shadow: inset 0 0 0 1px var(--azul); }
.placa.activa .placa-miniatura { outline: 2px solid var(--celeste); outline-offset: -2px; }
.placa:has(input:focus-visible) { outline: 3px solid var(--celeste); outline-offset: 2px; }
.link-tarjeta { display: grid; grid-template-columns: 84px 1fr; gap: var(--e-3); align-items: center; }
.link-imagen { width: 84px; height: 84px; border-radius: var(--r-chico); background: var(--niebla); object-fit: cover; display: grid; place-items: center; color: var(--celeste); }
.link-url { font-size: var(--t-xs); color: var(--pizarra-texto); word-break: break-all; }
.aviso-taller { font-size: var(--t-s); border-left: 3px solid var(--celeste); padding-left: var(--e-3); }

/* El cartel del precio exacto, en la tarjeta de un link: bien visible, sin
   plegar, arriba de las preguntas. */
.cartel-exacto {
  display: grid; gap: var(--e-3); padding: var(--e-4);
  background: var(--niebla); border-radius: var(--r); border-left: 5px solid var(--celeste);
}
.cartel-cabeza { display: flex; gap: var(--e-3); align-items: flex-start; }
.cartel-titulo { font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--t-l); }
.cartel-exacto .grupo-titulo { margin-top: var(--e-1); }
.boton-grande { min-height: 52px; font-size: var(--t-l); }
.pasos-descarga { margin: 0; padding-left: 20px; font-size: var(--t-s); display: grid; gap: 4px; }
.cartel-exacto .foto-lugar, .captura-descarga { aspect-ratio: 16 / 9; }
.cartel-exacto .plegable { background: var(--blanco); }
.sin-archivo { margin-top: var(--e-2); }

/* La medida del lado más largo y la forma. */
.medida-fila { display: flex; align-items: center; gap: var(--e-3); }
.medida { flex: 1; min-width: 0; height: var(--toque); accent-color: var(--azul); cursor: pointer; }
.medida-valor { font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--t-l); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.referencias { display: flex; flex-wrap: wrap; gap: 6px; }
.referencia-medida {
  border: 1.5px solid var(--linea); background: var(--blanco); color: var(--azul); border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 600; padding: 6px 12px; min-height: 36px; cursor: pointer;
}
.referencia-medida:hover { border-color: var(--azul); }
.opciones-formas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Cuántos colores (1 a 4) y cómo van. */
.opciones-colores { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.pregunta-patron { display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.pregunta-patron .franjas { max-width: 200px; }
.tabla-escala .camas { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--pizarra-texto); }
.nota-colores { margin-top: var(--e-3); }
.forma-cuerpo { align-items: center; text-align: center; }
.dibujo-forma { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--azul); margin-bottom: 2px; }

/* Lo que va solo en la compu o solo en el celular (el corte es el mismo de
   esCelular en app.js). */
@media (max-width: 899px) { .solo-compu { display: none !important; } }
@media (min-width: 900px) { .solo-celular { display: none !important; } }
.enlace-chico { font-size: var(--t-s); min-height: 36px; padding: 4px 0; justify-self: center; }

/* Al retomar una cotización desde un enlace. */
.aviso-enlace {
  display: flex; gap: var(--e-3); align-items: center; grid-column: 1 / -1;
  background: var(--azul); color: var(--blanco); border-radius: var(--r); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
}
.aviso-enlace p { flex: 1; font-weight: 600; }
.aviso-enlace .icono { color: var(--celeste); }
.aviso-enlace .quitar { color: var(--blanco); }
.aviso-enlace .quitar:hover { background: rgba(255, 255, 255, 0.12); color: var(--blanco); }

/* El cartel del precio exacto, destacado al llegar desde el celular, y
   marcado mientras se arrastra un archivo (se puede soltar encima). */
@keyframes llamar { 0%, 100% { box-shadow: 0 0 0 0 rgba(114, 181, 189, 0); } 50% { box-shadow: 0 0 0 8px rgba(114, 181, 189, 0.45); } }
.cartel-destacado { animation: llamar 1.6s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .cartel-destacado { animation: none; } }
body.arrastrando .cartel-exacto { outline: 3px dashed var(--azul); outline-offset: 2px; }

/* Soltar un archivo en cualquier parte de la página. */
.soltar { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(20, 35, 64, 0.5); pointer-events: none; }
body.arrastrando .soltar { display: grid; }
.soltar-cartel {
  display: grid; justify-items: center; gap: var(--e-3); max-width: 520px; margin: var(--e-4);
  background: var(--blanco); border: 3px dashed var(--celeste); border-radius: var(--r); padding: var(--e-6) var(--e-7); box-shadow: var(--sombra);
}
.soltar-cartel .icono { width: 44px; height: 44px; color: var(--azul); }
.soltar-cartel p { font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--t-l); text-align: center; }

/* El QR «Seguí desde el celular», en el resultado (compu). */
.seguir-celular { display: flex; gap: var(--e-4); align-items: center; border-top: 1px solid var(--linea); padding-top: var(--e-4); }
.seguir-celular .qr { width: 128px; flex-shrink: 0; }
.seguir-celular .qr svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.seguir-celular .enlace-chico { justify-self: start; text-align: left; }
.seguir-titulo { font-family: var(--fuente-titulo); font-weight: 800; }

/* La impresora de cada pieza (la elige el servidor). */
.pieza-impresora { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-s); color: var(--pizarra-texto); }
.pieza-impresora .icono { color: var(--celeste); margin-top: 2px; }
.pieza-impresora.en-partes { color: var(--azul); background: var(--hielo); border-radius: var(--r-chico); padding: var(--e-3); }
.plegable { border: 1px solid var(--linea); border-radius: var(--r-chico); }
.plegable summary { cursor: pointer; padding: var(--e-3) var(--e-4); font-weight: 600; font-size: var(--t-s); min-height: var(--toque); display: flex; align-items: center; }
.plegable[open] summary { border-bottom: 1px solid var(--linea); }
.plegable-cuerpo { padding: var(--e-4); display: grid; gap: var(--e-3); }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.campo label { display: block; font-size: var(--t-s); font-weight: 600; margin-bottom: 6px; }
.campo .entrada { border-radius: var(--r-chico); }
.agregar-mas { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-4); }
.referencia { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-s); }
.referencia img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-chico); }

/* Opciones como tarjetas (radio nativos: teclado y lectores de pantalla). */
.opciones { display: grid; gap: var(--e-2); }
.opciones-dos, .opciones-usos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcion { position: relative; display: block; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion-cuerpo {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%;
  min-height: 52px; padding: var(--e-3) var(--e-4); border: 1.5px solid var(--linea); border-radius: var(--r-chico);
  background: var(--blanco); transition: border-color 0.15s, background-color 0.15s;
}
.opcion-cuerpo strong { font-weight: 600; font-size: var(--t-s); }
.opcion-cuerpo small { font-size: var(--t-xs); color: var(--pizarra-texto); }
.opcion input:checked + .opcion-cuerpo { border-color: var(--azul); background: var(--niebla); box-shadow: inset 0 0 0 1px var(--azul); }
.opcion input:focus-visible + .opcion-cuerpo { outline: 3px solid var(--celeste); outline-offset: 2px; }
.opcion:hover .opcion-cuerpo { border-color: var(--pizarra); }
.sensibles { border: 0; padding: 0; margin: var(--e-4) 0 0; }
.sensibles legend { font-weight: 600; font-size: var(--t-s); margin-bottom: var(--e-2); }
.casilla { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--t-s); padding: var(--e-2) 0; cursor: pointer; min-height: var(--toque); }
.casilla input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--azul); flex-shrink: 0; }
/* La trampa anti-bots (etapa 3): fuera de la pantalla; no se ve ni se llega con el teclado. */
.trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* La configuración */
.selector-origen { display: flex; gap: 4px; background: var(--hielo); border-radius: var(--r-full); padding: 4px; margin-bottom: var(--e-4); overflow-x: auto; }
.selector-origen button {
  flex: 1 0 auto; min-height: 40px; padding: 0 var(--e-3); border: 0; border-radius: var(--r-full);
  background: transparent; font-weight: 600; font-size: var(--t-s); cursor: pointer; color: var(--azul);
}
.selector-origen button[aria-selected="true"] { background: var(--azul); color: var(--blanco); }
.recomendacion { display: grid; gap: var(--e-3); }
.recomendacion-fila { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* «Configuración del diseñador»: una tarjeta por pieza o placa, con los filamentos y su color. */
.tarjeta-disenador { display: grid; gap: var(--e-2); padding-top: var(--e-3); border-top: 1px solid var(--linea); }
.filamentos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.filamento-dato { display: inline-flex; align-items: center; gap: 6px; }
.filamento { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--linea); display: inline-block; }
.explicacion { display: flex; gap: var(--e-3); background: var(--niebla); border-radius: var(--r-chico); padding: var(--e-4); font-size: var(--t-s); }
.grupo { display: grid; gap: var(--e-2); margin-top: var(--e-4); }
.grupo-titulo { font-weight: 600; font-size: var(--t-s); }
.muestras { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.muestra { position: relative; }
.muestra input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.muestra span {
  display: block; width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--blanco); box-shadow: 0 0 0 1.5px var(--linea);
}
.muestra input:checked + span { box-shadow: 0 0 0 2.5px var(--azul); }
.muestra input:focus-visible + span { outline: 3px solid var(--celeste); outline-offset: 3px; }
.escala-fila { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.escala-fila .entrada { width: 96px; border-radius: var(--r-chico); text-align: center; font-variant-numeric: tabular-nums; }

/* El comparador de materiales: tarjetas lado a lado (en el celular se
   deslizan). */
.comparador { margin-top: var(--e-5); }
.comparador-tarjetas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--e-3); overflow-x: auto; padding: 4px 2px var(--e-2); scroll-snap-type: x mandatory; }
.material {
  position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--e-2);
  background: var(--hielo); border-radius: var(--r); padding: var(--e-4); border: 2px solid transparent;
}
.material.elegido { border-color: var(--azul); background: var(--blanco); box-shadow: var(--sombra); }
.material h3 { font-size: var(--t-l); }
.material p { font-size: var(--t-s); color: var(--pizarra-texto); flex: 1; }
.material .precio-lista { font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.material .precio-transferencia { font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--t-l); color: var(--verde); font-variant-numeric: tabular-nums; }
.sello { align-self: flex-start; background: var(--azul); color: var(--blanco); }

/* La escala por cantidad */
.cantidad-fila { display: flex; align-items: center; gap: var(--e-2); }
.cantidad-fila .entrada { width: 110px; text-align: center; border-radius: var(--r-chico); font-variant-numeric: tabular-nums; }
.cantidad-fila button { width: var(--toque); height: var(--toque); border-radius: 50%; border: 1.5px solid var(--linea); background: var(--blanco); font-size: 22px; line-height: 1; cursor: pointer; }
.tabla-escala { width: 100%; border-collapse: collapse; margin-top: var(--e-4); font-variant-numeric: tabular-nums; font-size: var(--t-s); }
.tabla-escala th { text-align: left; font-weight: 600; font-size: var(--t-xs); color: var(--pizarra-texto); padding: 0 var(--e-2) var(--e-2); text-transform: uppercase; letter-spacing: 0.06em; }
.tabla-escala td { padding: var(--e-3) var(--e-2); border-top: 1px solid var(--linea); }
.tabla-escala td:not(:first-child), .tabla-escala th:not(:first-child) { text-align: right; }
.tabla-escala tr.actual td { background: var(--niebla); font-weight: 600; }
.tabla-escala button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--azul); cursor: pointer; text-decoration: underline; text-decoration-color: var(--celeste); text-underline-offset: 3px; min-height: 32px; }
.nota-mayorista { margin-top: var(--e-3); }
/* La vista interna (/interno): la tabla de las listas se desliza sola si no entra. */
.tabla-interna { display: block; overflow-x: auto; }
.tabla-interna th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: var(--t-s); color: var(--tinta, inherit); }

/* El envío */
.cp-fila { display: flex; gap: var(--e-2); max-width: 360px; }
.cp-fila .entrada { font-variant-numeric: tabular-nums; }
.envio-opciones { margin-top: var(--e-4); }
.opcion-cuerpo .fila-precio { display: flex; justify-content: space-between; gap: var(--e-3); align-items: baseline; }
.opcion-cuerpo .fila-precio span { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── El resultado ─────────────────────────────────────────── */
.resultado {
  background: var(--blanco); border-radius: var(--r); box-shadow: var(--sombra); border: 1px solid var(--linea);
  padding: var(--e-5) var(--e-4); display: grid; gap: var(--e-4);
}
.resultado-cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.resultado .etiqueta { margin: 0; }
.total { display: grid; gap: 2px; }
.total-lista { font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--t-xxl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.total-lista.rango { font-size: var(--t-xl); }
.total-transferencia { font-weight: 600; color: var(--verde); font-variant-numeric: tabular-nums; }
.desglose { display: grid; gap: var(--e-2); font-size: var(--t-s); border-top: 1px solid var(--linea); padding-top: var(--e-4); }
.desglose div { display: flex; justify-content: space-between; gap: var(--e-3); }
.desglose span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.sena { background: var(--niebla); border-radius: var(--r-chico); padding: var(--e-4); display: grid; gap: var(--e-2); font-size: var(--t-s); }
.sena strong { font-family: var(--fuente-titulo); font-size: var(--t-l); font-variant-numeric: tabular-nums; }
.motivos { font-size: var(--t-s); background: var(--hielo); border-radius: var(--r-chico); padding: var(--e-4); }
.motivos ul { margin: var(--e-2) 0 0; padding-left: 18px; }
.motivos li + li { margin-top: 4px; }
.resultado-vacio { color: var(--pizarra-texto); font-size: var(--t-s); }
.actualizando .total-lista, .actualizando .desglose { opacity: 0.5; transition: opacity 0.2s; }

/* La barra con el total, abajo, en el celular. */
.barra-total {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--azul); color: var(--blanco);
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  box-shadow: 0 -8px 24px -12px rgba(29, 48, 85, 0.5);
}
.barra-total strong { font-family: var(--fuente-titulo); font-size: var(--t-l); font-variant-numeric: tabular-nums; }
.barra-total small { display: block; font-size: var(--t-xs); opacity: 0.85; }
.barra-total .boton { background: var(--blanco); color: var(--azul); border-color: var(--blanco); min-height: 40px; padding: 0 var(--e-4); }

/* ── Confianza e ideas ────────────────────────────────────── */
.seccion { padding: var(--e-7) 0 0; }
.seccion h2 { margin-bottom: var(--e-5); }
.datos-confianza { display: grid; gap: var(--e-3); }
.dato-confianza { display: flex; gap: var(--e-4); align-items: flex-start; background: var(--hielo); border-radius: var(--r); padding: var(--e-4); }
.dato-confianza strong { display: block; font-family: var(--fuente-titulo); font-weight: 700; }
.dato-confianza p { font-size: var(--t-s); color: var(--pizarra-texto); }
.fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-4); }
/* Lugar marcado para una foto que todavía no cargó Mauro. */
.foto-lugar {
  aspect-ratio: 1; border-radius: var(--r); background: var(--niebla); border: 2px dashed var(--celeste);
  display: grid; place-items: center; text-align: center; padding: var(--e-2);
  font-size: 11px; font-weight: 600; color: var(--pizarra-texto); line-height: 1.3;
}
.foto { aspect-ratio: 1; border-radius: var(--r); object-fit: cover; width: 100%; background: var(--niebla); }
.grilla-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.idea { display: flex; flex-direction: column; gap: var(--e-2); background: var(--hielo); border-radius: var(--r); padding: var(--e-2) var(--e-2) var(--e-3); }
.idea h3 { font-size: var(--t-s); font-family: var(--fuente); font-weight: 600; padding: 0 var(--e-1); flex: 1; }
.idea .pildora { align-self: flex-start; margin-left: var(--e-1); background: var(--blanco); }
.idea .boton { min-height: 40px; font-size: var(--t-s); padding: 0 var(--e-3); margin: 0 var(--e-1); }
.categorias { margin-top: var(--e-6); }
.categorias h3 { margin-bottom: var(--e-3); }
.fila-categorias { display: flex; gap: var(--e-2); overflow-x: auto; padding: 2px 2px var(--e-2); }
.fila-categorias .boton { min-height: 40px; font-size: var(--t-s); }

/* ── Diálogos ─────────────────────────────────────────────── */
dialog {
  width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0;
  border-radius: var(--r); box-shadow: var(--sombra); color: var(--azul);
}
dialog::backdrop { background: rgba(20, 35, 64, 0.55); }
.dialogo-cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-4) 0 var(--e-5); }
.dialogo-cuerpo { padding: var(--e-4) var(--e-5) var(--e-5); display: grid; gap: var(--e-4); }
.pasos-guia { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); counter-reset: paso; }
.pasos-guia li { display: grid; grid-template-columns: 30px 1fr; gap: var(--e-3); }
.pasos-guia li::before { counter-increment: paso; content: counter(paso); width: 30px; height: 30px; border-radius: 50%; background: var(--niebla); display: grid; place-items: center; font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--t-s); }
.pasos-guia .foto-lugar { aspect-ratio: 16 / 9; margin-top: var(--e-2); grid-column: 2; }
.mas-preciso { background: var(--niebla); border-radius: var(--r-chico); padding: var(--e-4); font-size: var(--t-s); }
.form-encargo { display: grid; gap: var(--e-3); }
.confirmacion { display: grid; gap: var(--e-3); text-align: left; }

/* ── Aparecer: suave, para la pieza, la recomendación y el precio ── */
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes latido { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
.aparece { animation: aparecer 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.late { animation: latido 0.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .aparece, .late { animation: none; }
}

/* ── Compu ────────────────────────────────────────────────── */
@media (min-width: 720px) {
  h1 { font-size: 44px; }
  .portada { padding: var(--e-7) 0 var(--e-6); }
  .datos-confianza { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grilla-ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bloque { padding: var(--e-5); }
  .datos-pieza { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .portada-grilla { grid-template-columns: 1.05fr 1fr; align-items: center; gap: var(--e-7); }
  .flujo-grilla { grid-template-columns: minmax(0, 1fr) 380px; }
  .resultado { position: sticky; top: var(--e-4); }
  .barra-total { display: none !important; }
  .grilla-ideas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pieza-con-vista { grid-template-columns: 1fr 1fr; align-items: start; }
  .pieza-con-vista .datos-pieza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fotos .foto, .fotos .foto-lugar { aspect-ratio: 4 / 3; }
}

/* ── Compu ancha: la pantalla principal para los archivos ─────
   Va al final, para ganarle a la de 960 px. Con el flujo abierto, la
   portada se esconde (otro archivo se arrastra a cualquier parte; otro link
   se pega en la tarjeta de las piezas), la pieza con su vista 3D grande
   queda al lado del resultado, y los pasos van en dos columnas: todo a la
   vista con poco scroll. Probado en 1366 × 768 y 1920 × 1080
   (tests/pantalla/probar-cotizador-compu.js). */
@media (min-width: 1100px) {
  body.con-flujo .portada { display: none; }
  .zona-carga { min-height: 340px; }
  .zona-carga strong { font-size: var(--t-xl); }
  .flujo { padding-top: var(--e-4); }
  .flujo-grilla { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--e-5); }
  .flujo-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); align-items: start; }
  #bloque-piezas { grid-column: 1 / -1; }
  #bloque-config { grid-row: span 2; }
  .bloque { padding: var(--e-4) var(--e-5); }
  .bloque > .etiqueta { margin-bottom: var(--e-1); }
  .pieza-con-vista { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .pieza-con-vista .vista { aspect-ratio: auto; height: clamp(300px, 48vh, 540px); }
  .resultado { top: var(--e-4); max-height: calc(100vh - 2 * var(--e-4)); overflow-y: auto; gap: var(--e-3); }
  .agregar-mas { margin-top: var(--e-3); }
  #form-link-mas { margin-top: var(--e-3); max-width: 640px; }
  #form-link-mas label { font-size: var(--t-s); }
}
/* En una pantalla grande (1920 px), el flujo usa más ancho: la vista 3D
   crece en vez de dejar márgenes vacíos. */
@media (min-width: 1600px) {
  .flujo .contenedor { max-width: 1440px; }
  .flujo-grilla { grid-template-columns: minmax(0, 1fr) 420px; }
}