/* ============================================================
   PRINTIO.PE — items.css
   Tarjetas de ítems, dropdown de producto y sub-modal de boleado
   ============================================================ */

/* ============================================================
   ITEM CARDS
   ============================================================ */
.items-container {
  background: var(--modal-bg);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Misma card que .items-container (mismo fondo/borde/radio — identidad
   visual del paso 1) pero para contenido que NO es una lista de
   .item-card (que traen su propio padding interno) — acá el padding vive
   en la card misma. Ojo: no reusar .items-container para esto, esa clase
   tiene un text-align:center pensado para el botón "+ agregar" que se
   filtra a cualquier cosa que se le meta adentro (bug real, Frank
   2026-08-21: "la dirección — no sé si centrarla mejor" fue la pista). */
.paso-card {
  background: var(--modal-bg);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 0.85rem 1rem 0.25rem;
}

#items-lista {
  /* Sin scroll interno — el overlay maneja el scroll cuando hace falta */
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Transición al agregar otro producto (agregarItemUI en items.js): el
   pedido actual se oculta y el nuevo aparece — mismo fade+lift que
   irPaso (navegacion.js), no un slide lateral (Frank: "no tiene sentido"
   que el contenido se vaya para un lado dentro de un popup fijo). */
#items-lista.items-lista-saliendo {
  opacity: 0;
  transform: translateY(-6px);
}
#items-lista.items-lista-entrando {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

@keyframes item-entrar {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.item-card {
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
  position: relative;
}
.item-card-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--texto-tenue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.item-card-toggle:hover { background: var(--acento-tenue); color: var(--acento); }
.item-card:not([data-expandido="false"]) .item-card-toggle svg { transform: rotate(0); }
.item-card[data-expandido="false"] .item-card-toggle svg { transform: rotate(180deg); }
.item-card-nuevo {
  animation: item-entrar 0.5s ease-out;
}

.item-sep { height: 1px; background: var(--borde); }

/* Ítem colapsado */
.item-card-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: background 0.12s;
}
.item-card-col:hover { background: var(--acento-tenue); }
/* Mientras el box está congelado en una altura más grande que su
   contenido real (animando altura, ver animarAlturaOuterHTML en
   app/state.js) — pegar el contenido arriba en vez de centrarlo, así el
   espacio sobrante se cierra desde abajo en vez de "flotar" el contenido
   hacia el medio. Frank: "se achica medio raro, no naturalmente". */
.item-card-col.anim-altura-activa { align-items: flex-start; }

.item-col-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.item-col-nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
}
.item-col-detalle {
  font-size: 12px;
  color: var(--texto-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-col-sin-archivo { color: var(--error); opacity: 0.7; }
.item-col-archivo     { color: var(--exito); }

.item-col-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.item-col-expand {
  font-size: 12px;
  color: var(--texto-tenue);
}

/* Botón colapsar (▴) en el header expandido */
.item-col-colapsar {
  background: none;
  border: none;
  color: var(--texto-tenue);
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.item-col-colapsar:hover { color: var(--acento); }

.item-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.item-card-tipo { font-weight: 400; color: var(--texto-tenue); }

.item-card-num {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-mid);
  letter-spacing: -0.01em;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  text-align: left;
}
.item-card-num:hover { color: var(--acento); }

.item-card-cambiar {
  font-size: 13px;
  font-weight: 500;
  color: var(--acento);
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: rgba(26, 79, 138, 0.3);
  text-underline-offset: 2px;
}
.item-card-num:hover .item-card-cambiar { color: var(--acento); }

.item-card-chevron {
  font-size: 12px;
  color: var(--texto-tenue);
  line-height: 1;
  display: inline-block;
}

@keyframes chevron-pulso {
  0%, 100% { color: var(--texto-tenue); transform: scale(1);   }
  40%, 60% { color: var(--acento);      transform: scale(1.5); }
}
.item-card-chevron-pulso {
  animation: chevron-pulso 0.8s ease 0.2s 3;
}

.item-card-hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-card-precio {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  color: var(--acento);
  letter-spacing: -0.03em;
  line-height: 1;
}
.item-card-precio-moneda {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.7;
  padding-top: 4px;
  letter-spacing: 0;
}
.item-card-precio-num {
  font-size: 28px;
  font-weight: 700;
}

.item-card-quitar {
  background: none;
  border: none;
  color: var(--texto-tenue);
  font-size: 20px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.item-card-quitar:hover { color: var(--error); }

/* Upload + Millares en fila */
.item-upload-millares-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.75rem;
}

.item-upload-wrap { flex: 1; min-width: 0; }

/* ── Zona archivo ── */
.item-zone-archivo {
  margin-bottom: 8px;
}
.item-zone-archivo-row {
  display: flex;
  gap: 6px;
}
.item-zone-archivo-row .item-upload-btn,
.item-zone-archivo-row .item-archivo-ok { flex: 1 1 0; min-width: 0; }
.item-zone-archivo-row .item-archivo-ok .item-archivo-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.item-zone-archivo .item-upload-btn,
.item-zone-archivo .item-archivo-ok { margin-top: 4px; }
.item-archivo-linea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--texto-tenue);
  margin-bottom: 4px;
}
.item-archivo-tipo {
  font-size: 14px;
  font-style: italic;
  color: var(--acento);
  cursor: pointer;
  background: transparent;
  border: none;
  text-decoration: underline;
  text-decoration-color: var(--borde-activo);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  padding: 2px 4px;
  font-family: 'DM Sans', sans-serif;
  transition: color 0.15s, text-decoration-color 0.15s, transform 0.15s;
  display: inline-block;
}
.item-archivo-tipo:hover {
  color: var(--acento-hover);
  text-decoration-color: var(--acento-hover);
  animation: archivoTipoHover 0.5s ease;
}
@keyframes archivoTipoHover {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-2px); }
  60%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

.item-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-md);
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-mid);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  text-align: center;
}
.item-upload-btn .upload-hint {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-tenue);
  margin-left: 0;
}
.item-upload-btn .upload-formatos {
  display: block;
  font-size: 10.5px;
  color: var(--texto-tenue);
  opacity: 0.7;
  margin-top: 1px;
}
.item-upload-btn:hover .upload-hint { color: var(--acento); opacity: 0.75; }
.item-upload-btn:hover  { border-color: var(--acento); color: var(--acento); background: var(--acento-tenue); }
.item-upload-btn.drag-over { border-color: var(--acento); color: var(--acento); background: var(--acento-tenue); border-style: solid; transform: scale(1.02); }
.item-upload-btn-sec { font-size: 14px; }

/* ── Zona metadata ── */
.item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--texto-tenue);
}
.item-meta-medida {
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--borde);
}
.item-meta-medida:hover { color: var(--acento); border-bottom-color: var(--acento); }
.item-meta-esp { color: var(--acento); font-weight: 600; }
.item-meta-sep { opacity: 0.4; }
.item-meta-cara { font-style: italic; }
.item-meta-x {
  background: none; border: none; color: var(--texto-tenue);
  font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.item-meta-x:hover { color: var(--error); }
.item-meta-caras-btn {
  font-size: 12px; color: var(--texto-tenue); cursor: pointer;
  padding: 3px 7px; border: 1px solid var(--borde); border-radius: var(--radio-full);
  margin-left: 2px; transition: all 0.15s; line-height: 1;
}
.item-meta-caras-btn:hover { border-color: var(--acento); color: var(--acento); }

/* ── Zona config ── */
/* Layout original para productos simples (tarjetas, volantes, etiquetas) */
.item-zone-config {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: 10px;
  padding: 0 4px;
}
/* Los 3 controles comparten misma altura Y mismo ancho */
.item-zone-config > * {
  height: 38px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Unificar estilos: todos con pill borde + bg surface */
.item-zone-config > .item-opt-select {
  padding: 0 30px 0 14px;
  font-size: 14px;
  line-height: 1;
}
.item-zone-config > .item-millares {
  background: var(--surface);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-full);
  padding: 0 6px;
  gap: 6px;
  transition: border-color 0.15s;
}
.item-zone-config > .item-millares:hover { border-color: var(--borde-activo); }
.item-zone-config > .item-millares .item-millar-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  font-size: 17px;
  font-weight: 500;
  color: var(--acento);
}
.item-zone-config > .item-millares .item-millar-btn:hover {
  background: var(--acento-tenue);
  border-radius: 50%;
}
.item-zone-config > .item-millares .item-millar-display {
  min-width: 48px;
  flex-direction: row;
  gap: 4px;
  align-items: baseline;
}
.item-zone-config > .item-millares .item-millar-num { font-size: 15px; font-weight: 700; }
.item-zone-config > .item-millares .item-millar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
  font-weight: 600;
}
.item-zone-config > .item-check-label {
  padding: 0 14px;
  background: var(--surface);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-mid);
  cursor: pointer;
  transition: border-color 0.15s;
}
.item-zone-config > .item-check-label:hover { border-color: var(--borde-activo); }

/* Fallback mobile: stack vertical, centrado */
@media (max-width: 520px) {
  .item-zone-config {
    flex-direction: column;
    align-items: center;
  }
  .item-zone-config > * { width: auto; }
}
/* Layout extendido para productos con tamaño/material/acabado (calendarios, hojas membretadas) */
.item-zone-config-ext {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.item-config-fila {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.item-opt-grupo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}
.item-opt-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}
.item-config-sep {
  width: 1px;
  height: 20px;
  background: var(--borde);
}
/* Único uso hoy: Tamaño fijo (ej. "A4" de Hojas membretadas). Nunca se vio
   en vivo hasta que "Más productos" hizo alcanzable ese producto desde acá
   (Frank: "el tamaño está mal, se rompió el diseño") — el tamaño chico de
   pill nunca estaba pensado para ocupar toda la fila como las demás filas
   de Tamaño (dropdown/switch), así que se pone al mismo ancho/alto/centrado
   que esas para que no desentone. */
.item-tag-fijo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-tenue);
  background: var(--bg-alt, #F1F5F9);
  padding: 0 14px;
  border-radius: var(--radio-md);
  cursor: default;
}

/* Controles reales (toggle/dropdown/archivo) en su estado "bloqueado por
   diseño con IA": mismos componentes de siempre, solo atenuados + candado —
   Frank: "no crear nuevos botones, que la apariencia del formulario se
   mantenga casi 100%". Aplica a: switch Producto, trigger Tamaño, trigger
   Caras y la fila de archivo subido. */
.deshabilitado {
  cursor: not-allowed;
  opacity: 0.75;
}
.item-toggle-sino.deshabilitado { background: var(--bg-alt, #F1F5F9); }
.item-toggle-sino.deshabilitado .toggle-sino-btn {
  cursor: not-allowed;
}
.item-toggle-sino.deshabilitado .toggle-sino-btn:not(.activo) {
  color: var(--texto-tenue);
}
.item-toggle-sino.deshabilitado .toggle-sino-btn.activo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.item-toggle-sino.deshabilitado .toggle-sino-pill { opacity: 0.85; }
.item-toggle-sino.deshabilitado .toggle-sino-btn i.fa-lock,
.prod-dd-candado,
.item-archivo-candado {
  font-size: 11px;
  opacity: 0.85;
}
.prod-dd-trigger.deshabilitado {
  cursor: not-allowed;
  background: var(--bg-alt, #F1F5F9);
  color: var(--texto-tenue);
}
.prod-dd-trigger.deshabilitado:hover { border-color: var(--borde); }
.prod-dd-candado {
  position: absolute;
  right: 12px;
  color: var(--texto-tenue);
}
.item-archivo-ok.deshabilitado {
  background: var(--bg-alt, #F1F5F9);
  border-color: var(--borde);
  cursor: not-allowed;
}
.item-archivo-ok.deshabilitado .item-archivo-nombre { color: var(--texto-mid); }
.item-archivo-candado {
  color: var(--texto-tenue);
  flex-shrink: 0;
}

/* Valor fijo por venir de un diseño con IA (Producto/Tamaño ya no editables:
   cambiarlos desalinearía el diseño ya generado con lo que se imprime). */
.item-tag-fijo-ia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: var(--acento-tenue);
  border: 1.5px dashed var(--acento);
  border-radius: var(--radio-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--acento);
  box-sizing: border-box;
}
/* Variante "seleccionado" (Adhesivos/Hojas/Calendarios elegidos por el
   "+") — Frank: "debería ser... fondo azul sobre letra blanca para que
   sepan que ha sido seleccionado", igual que el botón activo del switch
   Tarjeta/Volante (mismo --acento de fondo, texto blanco, sin el estilo
   punteado/informativo que sí tiene el candado de "Definido por tu diseño
   con IA", ese conserva el look original). */
.item-tag-seleccionado {
  background: var(--acento);
  border-style: solid;
  color: #fff;
}
.item-tag-fijo-ia i { font-size: 12px; flex-shrink: 0; }
.item-incluye {
  font-size: 12px;
  font-weight: 500;
  color: var(--exito);
  background: #ECFDF5;
  padding: 3px 10px;
  border-radius: var(--radio-full);
  white-space: nowrap;
}
/* Precio por millar + aviso de pedido mínimo, heredado del popup de
   "Impresión personalizada" hacia este paso de checkout (2026-08-24) —
   ver _precioPorMillarPersonalizadoHtml en render.js. */
.item-millar-precio {
  font-size: 12px;
  font-weight: 700;
  color: var(--acento);
  white-space: nowrap;
}
.item-millar-precio small { font-size: 10px; font-weight: 600; opacity: 0.75; }
.item-millar-minimo-nota {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-tenue);
  background: var(--acento-tenue);
  padding: 3px 10px;
  border-radius: var(--radio-full);
  white-space: nowrap;
}
/* Ficha técnica del producto seleccionado (Frank: "incluir las
   características de cada producto... quiero ideas" — se decidió por una
   línea fija, siempre visible, en vez de un ícono "i" con hover como el
   que se sacó de la landing). Lee prod.desc directo de config.js, así que
   cambia solo con cambiar ese texto — no hace falta tocar layout por
   producto. Se actualiza sola al cambiar de producto (switch o "+"). */
.item-producto-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--texto-tenue);
  text-align: center;
  margin-top: 4px;
  line-height: 1.4;
}

.item-archivo-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
  border-radius: var(--radio-md);
  padding: 9px 12px;
}
.item-archivo-ok .item-archivo-medida,
.item-archivo-ok .item-medida-inputs {
  width: 100%;
  justify-content: center;
}
.item-archivo-generado {
  background: #ECFDF5;
  border-color: #6EE7B7;
}
.item-archivo-generado .item-archivo-nombre {
  color: var(--exito);
  font-weight: 700;
}
.item-diseno-unificado {
  padding: 12px 14px;
  align-items: center;
  gap: 12px;
}
.item-diseno-unificado .item-archivo-nombre {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.item-diseno-unificado .item-archivo-nombre strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--exito);
}
.item-diseno-sub {
  font-size: 13px;
  font-weight: 500;
  color: #047857;
  opacity: 0.8;
}

.item-archivo-nombre {
  font-size: 14px;
  font-weight: 500;
  color: var(--exito);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-archivo-quitar {
  background: none;
  border: none;
  color: var(--texto-tenue);
  font-size: 17px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.item-archivo-quitar:hover { color: var(--error); }

.item-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.item-controls-sep {
  width: 1px;
  height: 24px;
  background: var(--borde);
}
.item-millares-compact {
  display: flex;
  align-items: center;
  gap: 4px;
}
.item-millares-input {
  width: 40px;
  padding: 4px 4px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-full);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  color: var(--texto);
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.item-millares-input::-webkit-inner-spin-button,
.item-millares-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.item-millares-input:focus { border-color: var(--acento); }
.item-millares-label {
  font-size: 13px;
  color: var(--texto-tenue);
}

/* Millares */
.item-millares {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.item-millar-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--borde);
  background: var(--surface);
  font-size: 20px;
  font-weight: 400;
  color: var(--texto);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  line-height: 1;
}
.item-millar-btn:hover  { border-color: var(--acento); background: var(--acento-tenue); }
.item-millar-btn:active { transform: scale(0.92); }

.item-millar-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
}

.item-millar-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--texto);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.item-millar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-tenue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Opciones (acabado / tamaño) y boleado */
.item-opts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.item-opts-acabado { display: flex; gap: 6px; }

.item-upload-medida {
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.item-upload-medida:hover { border-color: var(--acento); color: var(--acento); }
.item-medida-info {
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  font-size: 13px;
  color: var(--texto-tenue);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: block;
  width: 100%;
  text-align: center;
}
.item-medida-info:hover { color: var(--acento); }
.item-medida-ref-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,25,50,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  /* Se crea/destruye con appendChild/.remove() (no hay clase .open que
     togglear) — la animación en la regla base ya alcanza: arranca sola
     apenas el nodo se monta, mismo mecanismo que .prod-dd.abierto .prod-dd-list. */
  animation: appFadeIn var(--dur-fast) var(--ease-out);
}
.item-medida-ref {
  background: var(--surface);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 26px 32px;
  box-shadow: var(--sombra-md);
  min-width: 360px;
  position: relative;
  animation: appScaleIn var(--dur-fast) var(--ease-out);
}
/* Cierre — antes .remove() sacaba el nodo entero del DOM sin animar (0ms).
   Auditoría de animaciones 2026-08-24. Ver cerrarElementoAnimado() en
   app/modal.js, que agrega esta clase y recién después de la animación
   hace el .remove() real. */
.item-medida-ref-overlay.is-leaving {
  animation: appFadeOut var(--dur-fast) var(--ease-out);
}
.item-medida-ref-overlay.is-leaving .item-medida-ref {
  animation: appScaleOut var(--dur-fast) var(--ease-out);
}
.medida-info-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--texto-tenue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  padding: 0;
  font-family: inherit;
  z-index: 2;
}
.medida-info-btn:hover {
  background: var(--acento-tenue);
  color: var(--acento);
  transform: scale(1.1);
}
.medida-info-popover {
  position: absolute;
  top: 44px;
  right: 10px;
  width: 260px;
  background: var(--surface);
  border: 1.5px solid var(--borde-activo);
  border-radius: var(--radio-md);
  box-shadow: 0 12px 32px rgba(15, 45, 94, 0.18);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--texto);
  text-align: left;
  z-index: 3;
  animation: medidaInfoAparece 0.25s ease-out;
}
.medida-info-popover[hidden] { display: none; }
/* Cierre — antes popover.hidden=true escondía todo en 0ms (display:none
   corta medidaInfoAparece en el mismo frame). Auditoría de animaciones
   2026-08-24. Ver toggleMedidaInfoPopover() en items.js. */
.medida-info-popover.is-leaving {
  animation: medidaInfoDesaparece 0.18s ease-in;
}
@keyframes medidaInfoDesaparece {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
.medida-info-popover strong { color: var(--acento); font-weight: 700; }
.medida-info-popover-title {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--borde-activo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.medida-info-popover::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 16px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--borde-activo);
}
.medida-info-popover::after {
  content: '';
  position: absolute;
  top: -6.5px;
  right: 16px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--surface);
}
@keyframes medidaInfoAparece {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.item-medida-ref-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 12px;
  text-align: center;
}
.medida-ref-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--texto-mid);
  padding: 4px 0;
}
.medida-ref-row span:first-child { font-weight: 600; color: var(--texto); }
.medida-presets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.medida-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--surface);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  text-align: left;
}
.medida-preset-btn:hover { border-color: var(--acento); background: var(--acento-tenue); }
.medida-preset-btn.activa {
  border-color: var(--borde-activo);
  background: var(--acento-tenue);
  position: relative;
}
.medida-preset-btn.activa .medida-preset-nombre { color: var(--borde-activo); }
.medida-preset-check {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--borde-activo);
}
.medida-preset-nombre { font-size: 15px; font-weight: 600; color: var(--texto); }
.medida-preset-medida { font-size: 13px; color: var(--texto-tenue); }
.medida-custom-sep {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
  text-align: center;
  margin: 14px 0 8px;
}
.medida-custom-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}
/* Inputs más grandes SOLO acá (Frank 2026-08-23: "agranda un poquito
   esto") — scoped a .medida-custom-row en vez de tocar .item-medida-input
   a secas, porque esa clase base también la usa el editor inline de
   ancho/alto dentro de la tarjeta (otro lugar, no tocar). */
.medida-custom-row .item-medida-input {
  width: 76px;
  padding: 10px 12px;
  font-size: 18px;
}
/* Ancho/Alto (Frank: "acá debe decir ancho alto") con su unidad pegada al
   label — el "cm" suelto después del segundo input no quedaba claro a cuál
   de los dos aplicaba (Frank: "los cm no es el lugar adecuado"). Con "(cm)"
   en CADA label no hay ambigüedad, y se pudo sacar el span suelto.
   align-items:flex-end en .medida-custom-row (arriba) es lo que alinea la
   "×" con la base de los inputs en vez del centro de la columna completa
   (label+input), que quedaba más alta que la "×" sola. */
.medida-custom-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.medida-custom-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-align: center;
}
/* Contenedor que arranca sin ocupar espacio — crece al aparecer el tip. */
.medida-custom-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--acento);
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  border-radius: var(--radio-md);
  border: 1.5px solid transparent;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 12px;
  margin-top: 0;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    padding 0.3s ease,
    margin-top 0.3s ease,
    background 0.25s,
    border-color 0.25s;
}
.medida-custom-hint svg { flex-shrink: 0; width: 16px; height: 16px; }
.medida-custom-hint strong { color: var(--texto); }
.medida-hint-aplicar {
  margin-left: 4px;
  padding: 4px 10px;
  background: var(--acento);
  color: #fff;
  border: none;
  border-radius: var(--radio-full);
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
}
.medida-hint-aplicar:hover { background: var(--acento-hover); }
.medida-hint-aplicar:active { transform: scale(0.94); }

/* Estado activo: fondo, borde, crece para mostrarse y animación de entrada */
.medida-custom-hint.visible {
  max-height: 90px;
  opacity: 1;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--acento-tenue);
  border-color: var(--borde-activo);
  animation: tipAparece 0.65s cubic-bezier(0.34, 1.8, 0.5, 1);
}
@keyframes tipAparece {
  0%   { transform: translateY(-14px) scale(0.6)  rotate(-2deg);
         opacity: 0;
         box-shadow: 0 0 0 0 rgba(26,122,176,0.6); }
  35%  { transform: translateY(4px)   scale(1.12) rotate(1deg);
         opacity: 1;
         box-shadow: 0 0 0 10px rgba(26,122,176,0.25); }
  55%  { transform: translateY(-2px)  scale(0.96) rotate(-0.5deg);
         box-shadow: 0 0 0 14px rgba(26,122,176,0.1); }
  75%  { transform: translateY(1px)   scale(1.03);
         box-shadow: 0 0 0 6px rgba(26,122,176,0.05); }
  100% { transform: translateY(0)     scale(1);
         box-shadow: 0 0 0 0 rgba(26,122,176,0); }
}
/* Antes vivía adentro de .medida-custom-row, al costado de los inputs —
   Frank 2026-08-23: "un OK abajo grande". Ahora es su propia fila, ancho
   completo, debajo del hint de sugerencia. */
.medida-custom-ok {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px 20px;
  border: none;
  border-radius: var(--radio-md);
  background: var(--acento);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.medida-custom-ok:hover { background: var(--acento-hover); }
.item-archivo-medida {
  font-size: 13px;
  color: var(--texto-tenue);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.item-archivo-medida:hover { color: var(--acento); border-color: var(--acento); }
.item-upload-medida-fija,
.item-archivo-medida-fija {
  font-size: 13px;
  color: var(--texto-tenue);
}
.item-archivo-medida-fija { width: 100%; }
.item-medida-select {
  padding: 2px 22px 2px 6px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-mid);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  outline: none;
}
.item-medida-select:focus { border-color: var(--acento); }
.item-medida-label {
  font-size: 13px;
  color: var(--texto-tenue);
}
.item-medida-text {
  font-size: 14px;
  color: var(--texto-tenue);
  cursor: pointer;
  border-bottom: 1px solid var(--borde);
}
.item-medida-text:hover { color: var(--acento); border-bottom-color: var(--acento); }
.item-medida-inputs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.item-medida-input {
  width: 64px;
  padding: 7px 10px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  text-align: center;
  color: var(--texto);
}
.item-medida-input::placeholder {
  color: #C8D8E8;
  font-weight: 400;
  opacity: 1;
}
.item-medida-input:focus { border-color: var(--acento); }
.item-medida-input:focus { border-color: var(--acento); }
.item-medida-input::-webkit-inner-spin-button,
.item-medida-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.item-medida-input[type=number] { -moz-appearance: textfield; }
/* Altura fija (44px, calzada con .medida-custom-row .item-medida-input:
   10px×2 padding + 18px de fuente + bordes) para poder centrar la "×"
   dentro de esa misma franja — el label ANCHO/ALTO empuja al input hacia
   abajo dentro de su columna, así que centrar la "×" contra el alto total
   de la fila (label+input) la dejaba corrida hacia arriba respecto al
   input real (Frank: "la x un poquito más grande y más centrado"). */
.item-medida-x {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-size: 20px;
  font-weight: 600;
  color: var(--texto-tenue);
}

.item-opt-select {
  padding: 6px 28px 6px 10px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-full);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-mid);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.15s;
  outline: none;
}
.item-opt-select:focus { border-color: var(--acento); }

.item-opt-btn {
  padding: 6px 12px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-full);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-mid);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  white-space: nowrap;
}
.item-opt-btn:hover  { border-color: var(--acento); color: var(--acento); }
.item-opt-btn.active { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }

/* Checkbox boleado */
.item-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-mid);
  cursor: pointer;
  user-select: none;
}
.item-check-input { display: none; }
.item-check-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--borde);
  border-radius: 4px;
  background: var(--surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.item-check-input:checked + .item-check-box {
  background: var(--acento);
  border-color: var(--acento);
}
.item-check-input:checked + .item-check-box::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

.item-boleado-tipo { font-size: 12px; color: var(--texto-tenue); }

/* Botón agregar ítem */
.item-agregar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-tenue);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
}
.items-container { text-align: center; }
.item-agregar-btn:hover { color: var(--acento); border-color: var(--acento); }

/* ============================================================
   DROPDOWN DE PRODUCTO
   ============================================================ */
@keyframes dropdown-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.producto-dropdown {
  background: var(--surface);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  margin-top: 6px;
  box-shadow: var(--sombra-md);
  animation: dropdown-open 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.producto-dropdown-titulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 7px 12px 5px;
  border-bottom: 1px solid var(--borde);
}

.producto-dropdown-opt,
a.producto-dropdown-opt {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  border-bottom: 1px solid var(--borde);
  background: transparent;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  text-align: center;
  transition: background 0.12s;
}
.producto-dropdown-opt:last-child { border-bottom: none; }
.producto-dropdown-opt:hover      { background: var(--acento-tenue); }

.producto-dropdown-nombre { font-size: 14px; font-weight: 600; color: var(--texto); }

.producto-dropdown-opt-activo { background: var(--acento-tenue); }
.producto-dropdown-opt-activo .producto-dropdown-nombre { color: var(--acento); }

/* ============================================================
   BOLEADO SUB-MODAL
   ============================================================ */
.boleado-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,25,50,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 400;
  padding: 1.5rem;
  backdrop-filter: blur(4px);
}
/* Mismo lenguaje visual que .overlay/.modal (modal.css) — fade + pop. */
.boleado-overlay.open {
  display: flex;
  animation: appFadeIn var(--dur-base) var(--ease-out);
}
.boleado-overlay.open .boleado-popup {
  animation: appScaleIn var(--dur-base) var(--ease-out);
}
.boleado-overlay.is-leaving {
  display: flex;
  animation: appFadeOut var(--dur-base) var(--ease-out);
}
.boleado-overlay.is-leaving .boleado-popup {
  animation: appScaleOut var(--dur-base) var(--ease-out);
}

.boleado-popup {
  background: var(--surface);
  border-radius: var(--radio-xl);
  padding: 1.5rem;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--sombra-md);
}

.boleado-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: -0.01em;
}

/* "Parte de adelante" AFUERA de la tarjeta, encima del preview */
.boleado-cara-hint {
  font-size: 13px;
  font-weight: 700;
  color: var(--acento);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 0 12px;
}

/* "Toca el círculo para cambiar tamaño" AFUERA, debajo del preview */
.boleado-tamano-hint {
  font-size: 12px;
  color: var(--texto-tenue);
  text-align: center;
  margin: 12px 0 16px;
  font-style: italic;
}

/* Selector visual de esquinas */
.esquinas-preview {
  position: relative;
  width: 9cm;
  height: 5.5cm;
  border: 2px solid var(--borde);
  border-radius: 0.5mm;
  margin: 0 auto 1.25rem;
  background: var(--modal-bg);
}

.esquina-btn {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 2px solid var(--borde);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, border-radius 0.22s ease;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-tenue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
}
.esquina-btn.activa { color: #fff; }
#esq-a { top: -2px;    left: -2px;   border-radius: 3px 0 0 0; }
#esq-b { top: -2px;    right: -2px;  border-radius: 0 3px 0 0; }
#esq-c { bottom: -2px; right: -2px;  border-radius: 0 0 3px 0; }
#esq-d { bottom: -2px; left: -2px;   border-radius: 0 0 0 3px; }

#esq-a:hover, #esq-a.activa { border-radius: var(--radio-mm, 4mm) 0 0 0; }
#esq-b:hover, #esq-b.activa { border-radius: 0 var(--radio-mm, 4mm) 0 0; }
#esq-c:hover, #esq-c.activa { border-radius: 0 0 var(--radio-mm, 4mm) 0; }
#esq-d:hover, #esq-d.activa { border-radius: 0 0 0 var(--radio-mm, 4mm); }

.esquina-btn.activa { background: var(--acento); border-color: var(--acento); }

/* Radio display (centro del preview — clic para ciclar 1→2→3→4) */
.radio-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.radio-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  line-height: 1;
}
.radio-mm {
  font-size: 13px;
  font-weight: 700;
  color: var(--acento);
  margin-top: 3px;
}

.radio-display {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid var(--acento);
  background: var(--acento);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, background 0.12s;
  line-height: 1;
  user-select: none;
}
.radio-display:hover  { transform: scale(1.12); }
.radio-display:active { transform: scale(0.92); }

.boleado-confirmar {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--acento);
  border: none;
  border-radius: var(--radio-lg);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 8px;
  transition: background 0.15s;
}
.boleado-confirmar:hover { background: var(--acento-hover); }

.boleado-cancelar {
  display: block;
  width: 100%;
  padding: 10px;
  background: none;
  border: none;
  font-size: 15px;
  color: var(--texto-tenue);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  text-align: center;
}
.boleado-cancelar:hover { color: var(--texto-mid); }

/* ============================================================
   RESPONSIVE — MÓVIL
   ============================================================ */
@media (max-width: 480px) {
  /* ── Tarjeta de item ── */
  .item-card { padding: 0.6rem; }
  .item-card-hdr { flex-wrap: wrap; gap: 4px; }
  .item-card-num { font-size: 14px; }
  .item-card-precio-num    { font-size: 28px; }
  .item-card-precio-moneda { font-size: 14px; padding-top: 3px; }
  .item-card-cambiar { font-size: 13px; }

  /* ── Upload ── */
  .item-upload-btn { padding: 10px 12px; font-size: 14px; }
  .item-archivo-ok { padding: 7px 10px; }
  .item-archivo-nombre { font-size: 14px; }

  /* ── Zona config ── */
  .item-zone-config { gap: 6px; flex-wrap: wrap; justify-content: center; }
  .item-opt-select { font-size: 14px; padding: 5px 24px 5px 8px; }
  .item-millar-btn { width: 26px; height: 26px; font-size: 16px; }
  .item-millar-num { font-size: 20px; }
  .item-millar-label { font-size: 12px; }
  .item-config-sep { height: 18px; }

  /* ── Colapsado ── */
  .item-card-col { padding: 0.5rem 0.6rem; }
  .item-col-nombre { font-size: 15px; }
  .item-col-detalle { font-size: 13px; }

  /* ── Medida ── */
  .item-archivo-linea { font-size: 13px; gap: 4px; }
  .item-archivo-tipo { font-size: 13px; }
  .item-meta-medida { font-size: 13px; }

  /* ── Agregar ── */
  .item-agregar-btn { font-size: 13px; padding: 5px 14px; }

  /* ── Boleado ── */
  .boleado-popup { padding: 1.25rem; min-width: 0; width: 90vw; }
  .esquina-btn { width: 26px; height: 26px; font-size: 11px; }

  /* ── Dropdown producto ── */
  .producto-dropdown { min-width: 180px !important; }

  /* ── Presets medida ── */
  .item-medida-ref { padding: 14px 16px; min-width: 0; width: 85vw; }
  .medida-preset-btn { padding: 8px 12px; }
  .medida-preset-nombre { font-size: 14px; }
}

/* Item-card: layout vertical único (config + upload apilados) */
.item-card-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.item-card-col-izq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  justify-content: flex-start;
}

/* Grupo vertical estilo formulario: label arriba, control full-width debajo. */
.item-grupo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
}
.item-grupo-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  /* Frank: "esa línea vertical del teclado aparece en lugares donde no
     debería" — el cursor de selección de texto aparecía en labels como
     "PRODUCTO"/"TAMAÑO" (son texto plano, sin user-select:none, a
     diferencia de los botones que ya lo tienen). Son etiquetas de UI, no
     contenido para copiar. */
  user-select: none;
}
/* "+" de "Más productos". Historial de intentos: v1 envolvía el switch en
   un div nuevo (rompió el pill entero, .item-toggle-sino dejaba de ser
   hijo DIRECTO de .item-grupo-valor); v2 con position:absolute junto al
   título ("la posición/tamaño no convence", chocaba con la esquina de la
   tarjeta); v3 como hermano flex DENTRO de .item-grupo-valor (funcionaba,
   pero Frank: "ese + vamos a ponerlo al costado de PRODUCTO, ahí se vería
   mejor"). v4 con justify-content:space-between empujaba el "+" al
   extremo opuesto de la fila, lejos de la palabra (Frank: "centrado no?")
   — con `gap` en vez de space-between queda pegado al label, no al borde.
   line-height:1 en el label (abajo) es necesario porque el line-height
   heredado (~1.4) deja al texto con aire arriba/abajo que el
   align-items:center de acá NO compensa (centra la LINE BOX, no el
   glifo) — sin esto el texto se ve corrido respecto al círculo del "+"
   aunque el flex diga que están centrados. Otro bug real: al volver este
   label un flex container, dejó de heredar el text-align:center que tienen
   los demás labels (TAMAÑO, CANTIDAD) — flexbox no respeta text-align para
   posicionar sus hijos, así que quedó pegado a la izquierda (Frank: "te
   dije de derecha a izquierda, está a un lado"). justify-content:center
   centra el PAR label+"+" como unidad, para que quede igual de centrado
   que los demás grupos. */
.item-grupo-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* user-select:none en .item-grupo-label no alcanza al "+" (es hermano,
     no hijo) — la marquita de selección seguía apareciendo ahí. Cubriendo
     toda la fila de una vez, en vez de agregarlo hijo por hijo. */
  user-select: none;
}
.item-grupo-label-row .item-grupo-label {
  line-height: 1;
}
.item-mas-productos-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--borde-activo);
  background: var(--surface);
  color: var(--acento);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.item-mas-productos-btn:hover { background: var(--acento-tenue); }
.item-mas-productos-btn.abierto { transform: rotate(45deg); }

/* Este "+" vive DENTRO de una tarjeta de ítem, no en el fondo suelto de la
   landing. Se probó el mismo mecanismo que la landing (clases
   is-entering/is-leaving + @keyframes de opacity/translateY) pero Frank lo
   diagnosticó bien: "la animación consta de 2 partes, hacerse espacio y
   luego aparecer el contenido... eso no está pasando, la apertura de
   espacio es abrupta". Causa: un keyframe de opacity/translateY solo anima
   EL CONTENIDO, no el layout — `lista.hidden = false` seguía dejando el
   contenedor en su altura final de un frame a otro, empujando "TAMAÑO"
   de golpe. Fix real en toggleItemMasProductos (items.js): alto Y opacidad
   se animan JUNTOS con una sola `transition` inline (mismo espíritu que
   animarAltura en app/state.js), así que no hace falta CSS de animación
   acá — .mas-productos-links-item queda solo como marcador de contexto.
   OJO — bug real encontrado al probarlo (Frank: "crece raro, no crece
   bien"): un contenedor flex-column ENCOGE a sus hijos por default
   (flex-shrink:1) cuando su altura explícita todavía no alcanza para el
   contenido natural — eso pasa en CADA frame de la transición mientras
   crece. Sin este corte, los botones se veían comprimidos/deformados
   creciendo junto con el box en vez de quedar recortados limpio por el
   overflow:hidden. En la landing esto nunca se nota porque su animación es
   scaleY (transform, no toca layout/flex-sizing) — por eso queda acotado
   acá y no en .mas-productos-item a secas. */
/* Feedback de hover más notorio (Frank 2026-08-23: "un efecto más notorio
   de que son cliqueables"). Primero se probó un fondo tipo píldora (mismo
   recurso que .prod-dd-option:hover) pero Frank, viéndolo en vivo: "mal
   efecto, quítalo, que sea como que la letra salta o agranda o ambos" —
   se cambió a scale + un leve salto vertical (transform, no toca layout,
   por eso "salta" no empuja a los vecinos). */
.mas-productos-links-item .mas-productos-item {
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}
.mas-productos-links-item .mas-productos-item:hover {
  transform: scale(1.1) translateY(-2px);
  color: var(--acento-hover);
}
.item-grupo-label-extra {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-tenue);
  padding: 2px 7px;
  background: var(--acento-tenue);
  border-radius: var(--radio-full);
}

/* Dropdown custom "Producto" — 2 columnas (nombre | precio) */
.prod-dd { position: relative; width: 100%; }
.prod-dd-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 12px 0 14px;
  background: var(--surface);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.15s;
  /* Frank: la "×" de "10.5×16.5cm" mostraba la marquita de selección de
     texto al hacer click — es un botón, no texto para copiar. */
  user-select: none;
}
.prod-dd-trigger:hover { border-color: var(--acento); }
.prod-dd.abierto .prod-dd-trigger {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}
.prod-dd-chevron {
  transition: transform 0.2s;
  color: var(--texto-tenue);
  flex-shrink: 0;
  margin-left: auto;
  transform: rotate(180deg); /* cerrada: flecha hacia arriba */
}
.prod-dd.abierto .prod-dd-chevron { transform: rotate(0); } /* abierta: hacia abajo, apunta a la lista */
.prod-dd-trigger > .prod-dd-nombre { flex: 1; text-align: left; }
.prod-dd-trigger > .prod-dd-precio { color: var(--acento); font-weight: 700; }

/* Variante: solo nombre centrado (trigger sin precio) */
.prod-dd-trigger-solo-nombre > .prod-dd-nombre {
  text-align: center;
  flex: 1;
}
.prod-dd-trigger-solo-nombre .prod-dd-chevron { margin-left: 0; position: absolute; right: 12px; }
/* padding-left iguala al padding-right (36px, el espacio reservado para
   el chevron absoluto) — Frank 2026-08-23: "no está centrado" (en el
   selector de Tamaño de Calendarios/Afiches). Con solo padding-right:36px
   el área de texto quedaba asimétrica (14px izq / 36px der), así que
   centrar el texto DENTRO de esa área lo dejaba corrido hacia la
   izquierda del botón real. Mismo bug heredado por el trigger de
   medida_ref (Tarjeta/Volante/Etiquetas) y por Caras — Caras no se nota
   porque .caras-trigger pisa el padding con su propio !important. */
.prod-dd-trigger-solo-nombre { position: relative; padding-left: 36px; padding-right: 36px; }

.prod-dd-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-md);
  box-shadow: 0 8px 24px rgba(15,45,94,0.15);
  max-height: 300px;
  overflow-y: auto;
  z-index: 9999;
  padding: 4px;
  flex-direction: column;
  gap: 1px;
}
.prod-dd.abierto .prod-dd-list {
  display: flex;
  animation: prodDDAbrir 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top center;
}
/* Animación de apertura del dropdown (Frank 2026-08-22, v2 "más animado" —
   la v1 era muy sutil). Curva con overshoot (rebote leve al asentar) +
   las opciones entran en cascada, no todas juntas. No hace falta tocar el
   toggle en items.js: se dispara sola cuando el elemento pasa de
   display:none a flex. */
@keyframes prodDDAbrir {
  from { opacity: 0; transform: translateY(-14px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.prod-dd.abierto .prod-dd-list .prod-dd-option {
  animation: prodDDOpcionIn 0.22s ease-out backwards;
}
.prod-dd.abierto .prod-dd-list .prod-dd-option:nth-child(1)  { animation-delay: 0.03s; }
.prod-dd.abierto .prod-dd-list .prod-dd-option:nth-child(2)  { animation-delay: 0.06s; }
.prod-dd.abierto .prod-dd-list .prod-dd-option:nth-child(3)  { animation-delay: 0.09s; }
.prod-dd.abierto .prod-dd-list .prod-dd-option:nth-child(4)  { animation-delay: 0.12s; }
.prod-dd.abierto .prod-dd-list .prod-dd-option:nth-child(5)  { animation-delay: 0.15s; }
.prod-dd.abierto .prod-dd-list .prod-dd-option:nth-child(6)  { animation-delay: 0.18s; }
.prod-dd.abierto .prod-dd-list .prod-dd-option:nth-child(7)  { animation-delay: 0.21s; }
.prod-dd.abierto .prod-dd-list .prod-dd-option:nth-child(8)  { animation-delay: 0.24s; }
.prod-dd.abierto .prod-dd-list .prod-dd-option:nth-child(n+9) { animation-delay: 0.27s; }
@keyframes prodDDOpcionIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Cierre — antes .prod-dd-list desaparecía en 0ms (display:none aplicado en
   el mismo frame que se quitaba .abierto, sin transición). Auditoría de
   animaciones 2026-08-24. Ver _cerrarTodosDD() en items.js, que agrega
   .cerrando y recién saca display tras animationend. */
.prod-dd.cerrando .prod-dd-list {
  display: flex;
  animation: prodDDCerrar 0.22s ease-in;
  transform-origin: top center;
}
@keyframes prodDDCerrar {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-10px) scale(0.94); }
}
.prod-dd-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radio-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
  user-select: none;
  transition: background 0.12s;
}
.prod-dd-option:hover { background: var(--acento-tenue); }
.prod-dd-option.activa {
  background: var(--acento);
  color: #fff;
}
.prod-dd-option.activa .prod-dd-precio { color: #fff; opacity: 0.85; }
.prod-dd-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--texto-tenue);
  margin-left: 6px;
}
.prod-dd-option.activa .prod-dd-sub { color: rgba(255,255,255,0.8); }

/* "¿Lleva acabados?" (form Personalizado, popups.js _toggleAcabadosPers)
   togglea con el atributo [hidden] nativo, no con .abierto — acá no hay
   clase que animar, así que se dispara con :not([hidden]) (mismo mecanismo
   que .prod-dd.abierto .prod-dd-list: arranca sola al pasar de display:none
   a visible). .prod-dd no define su propio display, así que el UA rule
   [hidden]{display:none} no necesita guardia extra aquí. */
#pers-acabados-dd:not([hidden]) {
  animation: appFadeInDown 0.22s var(--ease-out);
}

/* Opción "Personalizar mi medida" — se destaca con borde arriba y estilo link */
.prod-dd-option-custom {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
  color: var(--acento);
  font-weight: 600;
  font-style: italic;
}
.prod-dd-option-custom .prod-dd-precio {
  color: var(--acento) !important;
  font-size: 16px;
}

/* Caras dropdown — trigger estilo "link" cursivo alineado con el upload */
.caras-dd { width: auto; display: inline-block; }
.caras-trigger {
  height: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 3px 8px !important;
  font-style: normal;
  font-weight: 600;
  color: var(--acento) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  border-radius: var(--radio-sm) !important;
  transition: background 0.12s, color 0.12s;
  box-shadow: none !important;
}
.caras-trigger:hover {
  background: transparent !important;
  color: var(--acento-hover) !important;
}
.caras-trigger:hover .prod-dd-chevron {
  color: var(--acento-hover);
  transform: translateY(1px);
}
.prod-dd.abierto .caras-trigger {
  background: transparent !important;
  color: var(--acento-hover) !important;
}
.caras-trigger .prod-dd-chevron {
  position: static;
  margin-left: 1px;
  color: currentColor;
  transition: transform 0.14s;
}
/* .prod-dd-trigger-solo-nombre > .prod-dd-nombre trae flex:1 pensado para
   cuando el chevron es position:absolute (le da igual el ancho de nombre,
   solo importa centrar el texto en TODO el trigger). Acá el chevron es
   position:static (arriba) — con flex:1 el box de nombre ocupa casi todo
   el ancho, el texto se centra ADENTRO de ese box, y el chevron queda
   pegado al borde derecho del trigger, lejos del texto (Frank: "acercar
   el chevron al texto, ahí se ve raro"). Sin flex:1, el box de nombre mide
   lo justo y el chevron queda pegado al lado — el justify-content:center
   del padre centra a los dos JUNTOS como grupo. */
.caras-trigger .prod-dd-nombre {
  flex: none;
}
.prod-dd.abierto .caras-trigger .prod-dd-chevron { transform: rotate(180deg); }
.caras-dd .prod-dd-list {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  top: auto;
  bottom: calc(100% + 4px);
}
/* El keyframe genérico prodDDAbrir (arriba) pisa el `transform` ENTERO
   mientras anima — no le afecta a los demás dropdowns (Producto/Tamaño se
   posicionan con left:0/right:0, sin necesitar transform), pero acá rompe
   el centrado (translateX(-50%) de arriba). Sin fill-mode en la animación
   base, al terminar el transform vuelve a leer la regla estática — eso es
   el "abre a un costado, luego salta al centro" que reportó Frank. Fix:
   animación propia para este dropdown que incluye el translateX(-50%) en
   cada frame, en vez de reemplazarlo. Entra desde abajo (no desde arriba)
   porque este dropdown abre hacia ARRIBA del trigger (bottom, no top). */
.caras-dd.prod-dd.abierto .prod-dd-list {
  animation: carasDDAbrir 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes carasDDAbrir {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
/* Cierre — mismo fix que prodDDCerrar arriba, pero conservando el
   translateX(-50%) (si no, salta al centro real un frame antes de
   desaparecer) y colapsando hacia ABAJO, de donde vino. */
.caras-dd.prod-dd.cerrando .prod-dd-list {
  animation: carasDDCerrar 0.22s ease-in;
}
@keyframes carasDDCerrar {
  from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  to   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.94); }
}
.prod-dd-option > .prod-dd-nombre { flex: 1; }
/* Opciones SIN precio (ej. Tamaño de Calendarios/Afiches: solo "35×50 cm",
   nada a la derecha) — Frank 2026-08-23: "estas opciones deben estar
   centradas". El nombre ya ocupa el ancho completo (flex:1 de arriba);
   acá solo se centra el TEXTO dentro de ese ancho. No se toca
   .prod-dd-nombre a secas porque las opciones CON precio (medida_ref de
   Tarjeta/Volante/Etiquetas) sí necesitan quedar a la izquierda, con el
   precio a la derecha. */
.prod-dd-option-simple .prod-dd-nombre { text-align: center; }
.prod-dd-option > .prod-dd-precio {
  font-weight: 700;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

/* Nombre + descripción apilados a la izquierda; precio a la derecha */
.prod-dd-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.prod-dd-option-text .prod-dd-nombre {
  font-weight: 600;
  line-height: 1.25;
}
.prod-dd-desc {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--texto-tenue);
  line-height: 1.35;
}
.prod-dd-option.activa .prod-dd-desc {
  color: rgba(255, 255, 255, 0.82);
}
.item-grupo-valor {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* ═══ Consistencia visual de los 4 controles ═══
   Tamaño, Tipo, Acabados, Cantidad — todos con MISMO ANCHO y misma pastilla. */
.item-grupo-valor > .item-meta-medida,
.item-grupo-valor > .item-opt-select,
.item-grupo-valor > select,
.item-grupo-valor > .item-check-label,
.item-grupo-valor > .item-millares {
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: var(--surface);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto);
  transition: border-color 0.15s, background 0.15s;
}
/* Para select nativo: text-align-last centra la opción seleccionada */
.item-grupo-valor > .item-opt-select,
.item-grupo-valor > select {
  text-align-last: center;
  -moz-text-align-last: center;
}
.item-grupo-valor > .item-meta-medida:hover,
.item-grupo-valor > .item-opt-select:hover,
.item-grupo-valor > select:hover,
.item-grupo-valor > .item-check-label:hover,
.item-grupo-valor > .item-millares:hover {
  border-color: var(--borde-activo);
}

.item-grupo-valor > .item-meta-medida {
  cursor: pointer;
  gap: 4px;
}

.item-grupo-valor > .item-opt-select,
.item-grupo-valor > select {
  padding: 0 34px 0 14px;
  background-position: right 12px center;
}

.item-grupo-valor > .item-check-label {
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  color: var(--texto-mid);
}

/* Toggle Sí/No segmented control — reemplaza al checkbox del boleado.
   Misma pastilla deslizante que el toggle de Entrega (Frank 2026-08-21:
   "esta animación funciona bien pero no se ha aplicado al switch de acá")
   — como esta clase la comparten Boleado Y el switch Producto, se arregla
   una sola vez para los dos. */
.item-grupo-valor > .item-toggle-sino {
  position: relative;
  display: flex;
  width: 100%;
  height: 38px;
  padding: 3px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--surface);
  gap: 3px;
}
.toggle-sino-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 0;
  background: var(--acento);
  border-radius: calc(var(--radio-md) - 3px);
  box-shadow: 0 2px 8px rgba(15,45,94,0.22);
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.toggle-sino-pill.sin-transicion { transition: none; }
.item-grupo-valor > .item-toggle-sino .toggle-sino-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  border: none;
  background: transparent;
  border-radius: calc(var(--radio-md) - 3px);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-mid);
  cursor: pointer;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.item-grupo-valor > .item-toggle-sino .toggle-sino-btn:hover:not(.activo) {
  color: var(--acento);
}
.item-grupo-valor > .item-toggle-sino .toggle-sino-btn.activo {
  color: #fff;
  font-weight: 700;
  transform: scale(1);
}
.item-grupo-valor > .item-toggle-sino .toggle-sino-btn:not(.activo) {
  transform: scale(0.98);
}

/* Stack vertical cuando hay sub-texto (ej: resumen del boleado).
   Ocupa el ancho completo; el sub-texto se centra debajo del toggle. */
.item-grupo-valor-stack {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* Resumen del boleado activo: mini-texto clickeable debajo del toggle, centrado */
.item-boleado-resumen {
  font-size: 11px;
  font-weight: 500;
  color: var(--acento);
  background: transparent;
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  border-bottom: 1px solid var(--borde);
  transition: color 0.15s, border-color 0.15s;
  line-height: 1.3;
  text-align: center;
}
.item-boleado-resumen:hover {
  color: var(--acento-hover);
  border-bottom-color: var(--acento);
}

.item-grupo-valor > .item-millares {
  padding: 0 6px;
  gap: 4px;
  justify-content: center;
}
.item-grupo-valor > .item-millares .item-millar-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--acento);
  font-size: 17px;
  font-weight: 600;
}
.item-grupo-valor > .item-millares .item-millar-btn:hover {
  background: var(--acento-tenue);
  border-radius: 50%;
}
.item-grupo-valor > .item-millares .item-millar-display {
  flex-direction: row;
  gap: 6px;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
  min-width: 110px;
}
.item-grupo-valor > .item-millares .item-millar-num {
  width: 48px;
  font-size: 20px;
  font-weight: 700;
  color: var(--acento);
  line-height: 1;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  padding: 0;
  -moz-appearance: textfield;
}
.item-grupo-valor > .item-millares .item-millar-num::-webkit-outer-spin-button,
.item-grupo-valor > .item-millares .item-millar-num::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.item-grupo-valor > .item-millares .item-millar-num:focus {
  background: var(--surface);
  border-radius: var(--radio-sm);
  box-shadow: inset 0 0 0 1.5px var(--acento);
}
.item-grupo-valor > .item-millares .item-millar-label {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--texto-mid);
  font-weight: 500;
  text-transform: none;
  margin-top: 0;
}

@media (max-width: 520px) {
  .item-grupo { grid-template-columns: 1fr; gap: 4px; }
}

/* Precio como grupo: alineado a la izquierda del valor sin pastilla */
.item-grupo-valor > .item-card-precio {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--acento);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.item-grupo-valor > .item-card-precio .item-card-precio-moneda {
  font-size: 16px;
  font-weight: 600;
}
.item-grupo-valor > .item-card-precio .item-card-precio-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.item-card-col-der {
  display: flex;
  align-items: stretch;
}
.item-upload-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Achicado de 10px (Frank: "achica el espacio entre el cuadro verde y
     el texto anverso/reverso para que sepa que le pertenece") — los únicos
     2 hijos posibles de este flex son el box del archivo y la pregunta de
     caras, así que este gap es exactamente el espacio entre esos dos. */
  gap: 3px;
  align-items: center;
}
.item-upload-wrap > .item-upload-btn,
.item-upload-wrap > .item-archivo-ok,
.item-upload-wrap > .item-zone-archivo-row {
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.item-upload-wrap .item-archivo-tipo {
  text-align: center;
  width: auto;
  align-self: center;
  margin-top: 2px;
}
.item-zone-archivo-vert {
  flex-direction: row;
  gap: 10px;
  width: 100%;
}
.item-zone-archivo-vert > * { flex: 1 1 0; min-width: 0; }

@media (max-width: 640px) {
  .item-card-grid { grid-template-columns: 1fr; }
  .item-card-col-der > *,
  .item-card-col-der .item-upload-btn,
  .item-card-col-der .item-archivo-ok { min-height: 80px; }
}

/* Texto "(N espacios en plancha)" — neutral, no interactivo */
.item-esp-label {
  font-size: 12px;
  color: var(--texto-tenue);
}

/* Ícono ⓘ — único trigger del tooltip */
.item-esp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0 1px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--texto-tenue);
  cursor: help;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.item-esp-icon-btn svg { width: 15px; height: 15px; }
.item-esp-icon-btn:hover,
.item-esp-icon-btn:focus-visible {
  background: var(--acento-tenue);
  color: var(--acento);
  outline: none;
  transform: scale(1.12);
}

/* Tooltip GLOBAL — position: fixed, sobre todo */
.tip-espacios {
  position: fixed;
  left: 0;
  top: 0;
  width: max-content;
  max-width: 300px;
  padding: 14px 16px;
  background: var(--surface);
  color: var(--texto);
  border: 1.5px solid var(--borde-activo);
  border-radius: var(--radio-md);
  box-shadow: 0 12px 32px rgba(15, 45, 94, 0.22);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000;
}
.tip-espacios.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tip-espacios strong { color: var(--acento); font-weight: 600; }
.tip-espacios-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--borde-activo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
/* Flecha hacia arriba cuando el tooltip está abajo del trigger */
.tip-espacios::before,
.tip-espacios::after {
  content: '';
  position: absolute;
  left: var(--flecha-x, 50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  transform: translateX(-50%);
}
.tip-espacios::before {
  bottom: 100%;
  border-bottom: 10px solid var(--borde-activo);
}
.tip-espacios::after {
  bottom: calc(100% - 1.5px);
  border-bottom: 9px solid var(--surface);
}
/* Cuando el tooltip está arriba del trigger, flecha abajo */
.tip-espacios.arriba::before,
.tip-espacios.arriba::after {
  bottom: auto;
}
.tip-espacios.arriba::before {
  top: 100%;
  border-bottom: none;
  border-top: 10px solid var(--borde-activo);
}
.tip-espacios.arriba::after {
  top: calc(100% - 1.5px);
  border-bottom: none;
  border-top: 9px solid var(--surface);
}

/* ── Advertencia del acabado (hot stamping / troquelado / sectorizado) ── */
/* Mensaje general de revisión (siempre que hay archivo subido) */
.item-revision-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--acento-tenue);
  border: 1.5px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio-md);
  font-size: 13px;
  line-height: 1.3;
  color: var(--texto);
  animation: acabadoAdvertenciaAparece 0.35s ease-out;
}
.item-revision-msg svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--acento);
  margin-top: 1px;
}
.item-revision-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-revision-txt strong {
  color: var(--texto);
  font-weight: 600;
  font-size: 12.5px;
}
.item-revision-txt small {
  color: var(--texto-mid);
  font-size: 11.5px;
  line-height: 1.35;
}
.item-revision-txt small b {
  color: var(--acento-hover);
  font-weight: 600;
}

/* Variante: archivo viene de una plantilla curada, no hay que revisar */
.item-revision-msg.from-plantilla {
  background: #DCFCE7;
  border-left-color: #16A34A;
}
.item-revision-msg.from-plantilla svg { color: #16A34A; }
.item-revision-msg.from-plantilla strong { color: #14532D; }
.item-revision-msg.from-plantilla small { color: #15803D; }

.item-acabado-advertencia {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: #FFF7E6;
  border: 1.5px solid #F5B84A;
  border-left-width: 4px;
  border-radius: var(--radio-md);
  font-size: 13px;
  line-height: 1.45;
  color: #7A4E00;
  animation: acabadoAdvertenciaAparece 0.35s ease-out;
}
.item-acabado-advertencia svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #D48B00;
  margin-top: 1px;
}
.item-acabado-advertencia strong { color: #5A3A00; }
@keyframes acabadoAdvertenciaAparece {
  0%   { transform: translateY(-4px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Post-archivo: tono de checklist verde más suave (no alarma) */
.item-acabado-advertencia.post-archivo {
  background: #E8F6EC;
  border-color: #4CAF50;
  border-left-color: #2E7D32;
  color: #1F5A28;
}
.item-acabado-advertencia.post-archivo svg {
  color: #2E7D32;
}
.item-acabado-advertencia.post-archivo strong { color: #0F3D16; }