/* =====================================================================
   Estilos comunes de toda la plataforma: estilo "2 · Suave" (aprobado por el constructor el 8/10/2026).
   Un solo patrón para todo (ver la guía /panel/estilos.html):
   pastillas, sin bordes, campos con fondo gris clarito, colores suaves, poca negrita, íconos de línea.
   Para 20 a 80 años: letra de 16 como mínimo, botones de 48 de alto, siempre texto en los botones.
   ===================================================================== */
:root {
  --color: #2f6fea;
  --color-oscuro: #2459c7;
  --color-suave: #eaf1fe;
  --texto: #111827;
  --texto-suave: #4b5563;
  --fondo: #f5f6f8;
  --tarjeta: #ffffff;
  --borde: #e6e8ec;           /* solo para líneas divisorias finas */
  --gris-suave: #eef0f4;
  --gris-suave-hover: #e3e6ec;
  --ok: #067647;
  --ok-suave: #ecfdf3;
  --error: #b42318;
  --error-suave: #fdeeec;
  --atencion: #93370d;
  --atencion-suave: #fef6e7;
  --radio: 14px;
  --radio-grande: 20px;
  --sombra: 0 1px 3px rgba(16, 24, 40, .06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.5; color: var(--texto); background: var(--fondo);
  overflow-wrap: break-word;   /* una palabra larguísima sin espacios pasa al renglón de abajo en lugar de empujar la pantalla */
}
img { max-width: 100%; display: block; }
a { color: var(--color-oscuro); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 650; letter-spacing: -0.01em; }
[hidden] { display: none !important; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* texto que se lee en voz alta para personas ciegas, pero no se ve */

.contenedor { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.cabecera { background: var(--tarjeta); box-shadow: 0 1px 0 var(--borde); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.marca { font-weight: 800; font-size: 20px; color: var(--texto); text-decoration: none; }
.marca span { color: var(--color); }

/* Lo que se ve solo en la compu (mouse) o solo en el celular (pantalla táctil) */
.solo-compu { display: none !important; }
@media (hover: hover) and (pointer: fine) { .solo-compu { display: block !important; } .solo-celu-bloque { display: none !important; } }
.solo-compu[hidden], .solo-celu-bloque[hidden] { display: none !important; }

/* ---------- Íconos de línea (un solo estilo; toman el color del texto) ---------- */
.ico { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico-check   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ico-x       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ico-mas     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ico-volver  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.ico-girar   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E"); }
.ico-estrella{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3l2.8 5.8 6.2.9-4.5 4.4 1.1 6.2L12 17.4l-5.6 2.9 1.1-6.2L3 9.7l6.2-.9z'/%3E%3C/svg%3E"); }
.ico-camara  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.ico-imagen  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='M21 16l-5-5-9 8'/%3E%3C/svg%3E"); }
.ico-carpeta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6h6l2 2h10v11H3z'/%3E%3C/svg%3E"); }
.ico-alerta  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.5'/%3E%3C/svg%3E"); }
.ico-info    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5v.5'/%3E%3C/svg%3E"); }
.ico-inicio  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9h-6v-6H9v6H3z'/%3E%3C/svg%3E"); }
.ico-caja    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7.5l9-4.5 9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5l9 4.5 9-4.5M12 12v9'/%3E%3C/svg%3E"); }
.ico-pedidos { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E"); }
.ico-menu    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
/* Rubros (registro): ícono de color en un círculo blanco (opción A, elegida el 8/10/2026). Uso: <span class="ico-circulo" style="--c:#16a34a"><span class="ico ico-almacen"></span></span> */
.ico-circulo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--c, var(--color)); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ico-circulo .ico { width: 20px; height: 20px; }
.ico-ropa      { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath fill='black' fill-opacity='.15' d='M8.5 4L3 7l2 4.5 3-1.5V20h8V10l3 1.5L21 7l-5.5-3c-.6 1.5-1.9 2.5-3.5 2.5S9.1 5.5 8.5 4z'/%3E%3C/svg%3E"); }
.ico-almacen   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath fill='black' fill-opacity='.15' d='M6.4 7.5h14.1L18.2 15H7.8z'/%3E%3Cpath d='M3 4h2.5l2.3 11'/%3E%3Ccircle cx='9.5' cy='19' r='1.5' fill='black'/%3E%3Ccircle cx='16.5' cy='19' r='1.5' fill='black'/%3E%3C/svg%3E"); }
.ico-regaleria { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath fill='black' fill-opacity='.15' d='M5 12h14v8H5zM3.5 8h17v4h-17z'/%3E%3Cpath d='M12 8v12M12 8C11 5 7.5 4 7.5 6.2S10.5 8 12 8zM12 8c1-3 4.5-4 4.5-1.8S13.5 8 12 8z'/%3E%3C/svg%3E"); }
.ico-belleza   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath fill='black' fill-opacity='.15' d='M8 13h8v8H8zM10 13V7.5L14 4v9z'/%3E%3C/svg%3E"); }
.ico-tecnologia{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect fill='black' fill-opacity='.15' x='5' y='5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M3 19h18'/%3E%3C/svg%3E"); }
/* 18/10/2026, barra del Editor (forma B): deshacer, rehacer y celular */
.ico-deshacer{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E"); }
.ico-rehacer { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14l5-5-5-5'/%3E%3Cpath d='M20 9H9.5a5.5 5.5 0 0 0 0 11H13'/%3E%3C/svg%3E"); }
.ico-celular { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect fill='black' fill-opacity='.15' x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 17.5h2'/%3E%3C/svg%3E"); }
/* 18/10/2026, Editor: cambiar el orden (flechas arriba y abajo) y la manija para arrastrar (seis puntos) */
.ico-ordenar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20V4M4 8l4-4 4 4'/%3E%3Cpath d='M16 4v16M12 16l4 4 4-4'/%3E%3C/svg%3E"); }
.ico-manija  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='9' cy='6' r='1.8'/%3E%3Ccircle cx='15' cy='6' r='1.8'/%3E%3Ccircle cx='9' cy='12' r='1.8'/%3E%3Ccircle cx='15' cy='12' r='1.8'/%3E%3Ccircle cx='9' cy='18' r='1.8'/%3E%3Ccircle cx='15' cy='18' r='1.8'/%3E%3C/svg%3E"); }
.ico-candado { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.ico-ferreteria{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath fill='black' fill-opacity='.15' d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z'/%3E%3C/svg%3E"); }
.ico-otro      { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath fill='black' fill-opacity='.15' d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E"); }
.ico-papelera{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 6h18M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6M18.5 6l-.8 13a2 2 0 0 1-2 1.9H8.3a2 2 0 0 1-2-1.9L5.5 6M10 11v6M14 11v6'/%3E%3C/svg%3E"); }   /* tacho moderno: tapa, cuerpo redondeado y dos rayitas (14/10/2026) */
/* Buscar y flecha (panel y tienda), carrito, WhatsApp y compartir (tienda pública, Fase 3) */
.ico-buscar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
.ico-flecha { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ico-carrito { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 4h2.5l2.3 11h10.4L20.5 7.5H6.4'/%3E%3Ccircle cx='9.5' cy='19' r='1.5' fill='black'/%3E%3Ccircle cx='16.5' cy='19' r='1.5' fill='black'/%3E%3C/svg%3E"); }
.ico-whatsapp{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.5a9.4 9.4 0 0 0-8.1 14.2L2.6 21.5l4.9-1.3A9.4 9.4 0 1 0 12 2.5zm0 1.7a7.7 7.7 0 1 1-3.9 14.3l-.3-.2-2.9.8.8-2.8-.2-.3A7.7 7.7 0 0 1 12 4.2zm-3.2 3.6c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.3s1 2.7 1.2 2.9c.1.2 2 3.1 4.9 4.3 2.4 1 2.9.8 3.4.7.5 0 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3l-1.9-.9c-.3-.1-.5-.1-.7.1l-.9 1.1c-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.2-1.4-.8-.7-1.4-1.6-1.5-1.9-.2-.3 0-.4.1-.6l.4-.5.3-.5v-.5l-.9-2.1c-.2-.5-.4-.5-.6-.5z'/%3E%3C/svg%3E"); }
.ico-compartir { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.5'/%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='19' r='2.5'/%3E%3Cpath d='M8.2 10.8l7.6-4.4M8.2 13.2l7.6 4.4'/%3E%3C/svg%3E"); }
/* Ojo para "Mostrar" / "Ocultar" (Editor de mi tienda, aprobado con la forma A el 17/10/2026): siempre con la palabra al lado */
.ico-ojo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ico-ojo-no { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E"); }

/* ---------- Botones: 4 tipos, todos en forma de pastilla ---------- */
.boton, .boton-secundario, .boton-peligro {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 22px; border: 0; border-radius: 99px;
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  max-width: 100%; text-align: center;   /* un texto larguísimo pasa de renglón (overflow-wrap del body): el botón nunca se sale de su lugar */
  transition: background .15s;
}
.boton { background: var(--color); color: #fff; }                                  /* 1. principal: uno por pantalla */
.boton:hover { background: var(--color-oscuro); }
.boton-secundario { background: var(--color-suave); color: var(--color-oscuro); }    /* 2. secundario: azul clarito (8/10/2026), se distingue de los campos grises */
.boton-secundario:hover { background: #dbe7fd; color: var(--color-oscuro); }
.boton-peligro { background: var(--error-suave); color: var(--error); }             /* 3. peligro (quitar, cerrar tienda) */
.boton-peligro:hover { background: #fbdcd8; }
.boton-link { background: none; border: 0; padding: 8px 4px; min-height: 48px; font: inherit; font-size: 16px; font-weight: 600;  /* 4. link */
  color: var(--color); text-decoration: none; cursor: pointer; }
.boton-link:hover { text-decoration: underline; text-underline-offset: 3px; }
:is(.boton, .boton-secundario, .boton-peligro):disabled { opacity: .5; cursor: not-allowed; }
.boton-grande { min-height: 54px; font-size: 17px; padding: 12px 28px; }
@media (max-width: 400px) { .boton-grande { font-size: 16px; padding-left: 12px; padding-right: 12px; gap: 6px; } }
@media (max-width: 359px) { .boton-grande .ico { display: none; } }
.boton-ancho { width: 100%; }
/* 5. Quitar (elegido por el constructor el 14/10/2026): solo el tacho, en un círculo rojo clarito, en TODAS las pantallas.
   Siempre con title="Quitar" (lo que se ve al pasar el mouse), aria-label con qué se quita, y el cartel para confirmar antes. */
.boton-quitar { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--error-suave); color: var(--error); cursor: pointer; transition: background .15s; }
.boton-quitar:hover { background: #fbdcd8; }
.boton-quitar .ico { width: 22px; height: 22px; vertical-align: 0; }
.boton-quitar:focus-visible { outline: 3px solid #a9c6f7; outline-offset: 2px; }
.boton-quitar:disabled { opacity: .5; cursor: not-allowed; }
.boton-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px 8px 12px;
  border: 0; border-radius: 99px; background: var(--color-suave); color: var(--color-oscuro); font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; }
.boton-volver:hover { background: #dbe7fd; }
:is(.boton, .boton-secundario, .boton-peligro, .boton-link, .boton-volver, .boton-google):focus-visible { outline: 3px solid #a9c6f7; outline-offset: 2px; }

/* Botón de Google: blanco con borde fino (lo pide la marca de Google) */
.boton-google {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  min-height: 50px; padding: 10px 20px; border: 1px solid #dadce0; border-radius: 99px;
  background: #fff; color: var(--texto); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.boton-google:hover { background: #f8fafc; }
.boton-google:disabled { opacity: .6; cursor: wait; }
.boton-google svg { width: 22px; height: 22px; flex: none; }
.separador { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--texto-suave); font-size: 16px; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* ---------- Recuadros: blancos, sin borde, sombra apenas visible ---------- */
.tarjeta-panel, .tarjeta { background: var(--tarjeta); border: 0; border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 22px 18px; }
@media (min-width: 768px) { .tarjeta-panel, .tarjeta { padding: 28px 30px; } }
@media (max-width: 359px) { .tarjeta-panel, .tarjeta { padding-left: 14px; padding-right: 14px; } }
/* Título de cada recuadro: con rayita azul a la izquierda (8/10/2026) */
.titulo-seccion, .subtitulo { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0 0 14px; padding-left: 12px; border-left: 4px solid var(--color); }

/* ---------- Campos: fondo gris clarito, sin borde; al escribir se ponen blancos con borde azul ---------- */
.campo { margin-bottom: 20px; }
/* Nombres de los campos en azul oscuro; lo que escribe la persona queda en negro y las ayudas en gris (8/10/2026) */
.campo label, .etiqueta { display: block; font-size: 16px; font-weight: 600; color: #1f4fb5; margin-bottom: 6px; }
.campo label.tilde { color: var(--texto); font-weight: 400; }
.ayuda { color: #5b6472; font-size: 16px; margin: 6px 0 0; }
.contador.al-tope { color: var(--error); font-weight: 600; }
.opcional, .ayuda-linea { font-weight: 400; color: #5b6472; font-size: 16px; }
:is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], textarea, select) {
  width: 100%; min-height: 50px; padding: 12px 16px; font: inherit; font-size: 16px; color: var(--texto); background: var(--gris-suave);
  border: 1.5px solid #c3c9d3; border-radius: var(--radio); transition: background .15s, border-color .15s, box-shadow .15s;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
select { appearance: auto; cursor: pointer; }
:is(input, textarea, select)::placeholder { color: #8b93a1; }
:is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], textarea, select):focus {
  outline: none; background: #fff; border-color: var(--color); box-shadow: 0 0 0 4px var(--color-suave); }
:is(input, textarea, select):disabled { opacity: .6; cursor: not-allowed; }
.campo-invalido { background: var(--error-suave) !important; border-color: #f4a49b !important; box-shadow: none !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--color); }

/* Opciones para elegir (rubro, IVA, unidad…): todas iguales, pastillas grises; la elegida, azul suave */
.opcion-guia, .opcion-chica, .opcion-iva, .opcion > span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border: 0; border-radius: 99px;
  background: var(--gris-suave); color: var(--texto); cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.25;
}
.campo label.opcion-guia, .campo label.opcion-chica, .campo label.opcion-iva { margin: 0; color: var(--texto); }
:is(.opcion-guia, .opcion-chica, .opcion-iva) input { width: 18px; height: 18px; margin: 0; flex: none; }
:is(.opcion-guia, .opcion-chica, .opcion-iva):has(input:checked), .opcion input:checked + span {
  background: var(--color-suave); color: var(--color-oscuro); box-shadow: inset 0 0 0 1.5px var(--color); }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion > span { display: flex; width: 100%; border-radius: var(--radio); }
.opcion input:focus-visible + span { outline: 3px solid #a9c6f7; outline-offset: 2px; }

/* Tildes (casillas) con su texto */
.tilde { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; cursor: pointer; font-size: 16px; }
.tilde input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; }

/* ---------- Mensajes al lado del campo y avisos (sin bordes) ---------- */
.mensaje { display: block; padding: 0; margin: 6px 0 0; font-size: 16px; font-weight: 500; background: none; border-radius: 0; }
.mensaje.error { color: var(--error); }
.mensaje.ok { color: var(--ok); }
/* "Gratis" (envío, retiro): siempre el mismo verde, en el panel y en la tienda (constructor 14/10/2026) */
.texto-gratis { color: var(--ok) !important; }
/* mensajes generales (no de un campo puntual): con fondo suave para que se vean */
.mensaje.caja { padding: 12px 16px; border-radius: var(--radio); margin: 12px 0 0; }
.mensaje.caja.error { background: var(--error-suave); }
.mensaje.caja.ok { background: var(--ok-suave); }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radio); margin: 0 0 14px; border: 0; font-weight: 500; }
.aviso > .ico { width: 1.3em; height: 1.3em; margin-top: .05em; }
.aviso > span { min-width: 0; overflow-wrap: anywhere; }   /* 14/10: un motivo larguísimo sin espacios empujaba la página de costado */
.sin-partir { white-space: nowrap; }   /* un CUIT, un número de pedido: nunca en dos renglones */
.aviso-ok { background: var(--ok-suave); color: var(--ok); }
.aviso-error { background: var(--error-suave); color: var(--error); }
.aviso-atencion { background: var(--atencion-suave); color: var(--atencion); }
.aviso-info { background: var(--color-suave); color: var(--color-oscuro); }

/* ---------- Etiquetas ---------- */
.etiqueta-estado { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; border-radius: 99px; padding: 3px 11px; border: 0; white-space: nowrap; }
.etiqueta-estado .ico { width: 1em; height: 1em; }
.etiqueta-estado.publicado { background: var(--ok-suave); color: var(--ok); }
.etiqueta-estado.oculto { background: var(--gris-suave); color: var(--texto-suave); border: 0; }
.etiqueta-estado.principal { background: var(--color-suave); color: var(--color-oscuro); }
.etiqueta-estado.sin-stock { background: var(--error-suave); color: var(--error); }
.etiqueta-estado.atencion { background: var(--atencion-suave); color: var(--atencion); }   /* falta algo de tu lado (cobrar, revisar): ámbar, como los avisos (Pedidos, 15/10/2026) */
.etiqueta-estado.camino { background: var(--color-suave); color: var(--color-oscuro); }

/* ---------- Pantalla de resultado ("guardado") y pantalla vacía ---------- */
.resultado, .vacio { text-align: center; }
.circulo { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; }
.circulo .ico { width: 30px; height: 30px; }
.circulo.ok { background: var(--ok-suave); color: var(--ok); }
.circulo.gris { background: var(--gris-suave); color: var(--texto-suave); }

/* ---------- Cartel para confirmar antes de quitar algo (12/10/2026; U.confirmar en comun.js) ----------
   Simple y chico (pedido del constructor): tarjeta blanca centrada, solo una pregunta corta con el nombre de lo que se quita
   y dos botones lado a lado: "Cancelar" (secundario) y "Quitar" (peligro). */
.confirmar { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .4); animation: confirmar-fondo .15s ease-out; }
.confirmar-caja { width: 100%; max-width: 340px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 34px 20px 20px; border-radius: var(--radio-grande); text-align: center; outline: none;
  background: var(--tarjeta); box-shadow: 0 16px 40px rgba(16, 24, 40, .18); animation: confirmar-caja .16s ease-out; }
.confirmar-caja h2 { font-size: 19px; font-weight: 600; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.confirmar-caja p { margin: 6px 0 0; font-size: 16px; color: var(--texto-suave); overflow-wrap: anywhere; }
/* casilla dentro del cartel (17/10/2026, "Le devolví la plata"): la opción gris de siempre, a lo ancho; tildada, azul suave */
.confirmar-casilla { display: flex; width: 100%; margin-top: 22px; text-align: left; border-radius: var(--radio); font-weight: 500; }
.confirmar-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 34px; }
.confirmar-botones > button { width: 100%; min-width: 0; justify-content: center; text-align: center; padding-left: 10px; padding-right: 10px; }
.confirmar.saliendo { opacity: 0; transition: opacity .15s; }
@keyframes confirmar-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirmar-caja { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .confirmar, .confirmar-caja { animation: none; } }
.resultado h2, .vacio h2 { font-size: 22px; margin: 0 0 6px; }
.resultado p, .vacio p { color: var(--texto-suave); margin: 0 0 20px; }
.acciones-apiladas { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.acciones-apiladas > .boton, .acciones-apiladas > .boton-secundario { width: 100%; max-width: 340px; padding-left: 16px; padding-right: 16px; }

/* "Deshacer" (en lugar de carteles de "¿Estás seguro?"): aviso blanco que sube suave, arriba de la barra de Guardar.
   La rayita de abajo se achica mientras corre el tiempo (pedido del constructor: moderno y del mismo estilo que el resto) */
.deshacer { position: fixed; left: 0; right: 0; bottom: 96px; z-index: 40; width: max-content; max-width: min(560px, calc(100% - 32px)); margin: 0 auto;
  display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 20px; border-radius: 16px; overflow: hidden;
  background: #fff; color: var(--texto); box-shadow: 0 10px 30px rgba(16, 24, 40, .16), 0 0 0 1px rgba(16, 24, 40, .06);
  animation: deshacer-entra .22s ease-out; }
.deshacer[hidden] { display: none; }
/* si a la vez aparece el aviso del momento (pedido nuevo, arrepentimiento…), el "Deshacer" sube y queda arriba de él (16/10/2026) */
.deshacer { bottom: max(96px, calc(var(--alto-momento, 0px) + 40px + env(safe-area-inset-bottom))); z-index: 43; }
/* celulares angostos (15/10/2026: "Pedido #999998: lo marcaste como pagado" quedaba en 4 renglones a 320): el texto arriba, Deshacer abajo */
@media (max-width: 399px) {
  .deshacer { flex-wrap: wrap; gap: 4px 12px; padding: 10px 10px 12px 16px; }
  .deshacer-texto { flex: 1 1 100%; }
  .deshacer-boton { margin-left: auto; }
}
.deshacer-texto { font-weight: 600; overflow-wrap: anywhere; }
.deshacer-boton { flex: none; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 99px; background: var(--color-suave); color: var(--color-oscuro);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.deshacer-boton:hover { background: #d3e2fc; }
.deshacer-boton:focus-visible { outline: 3px solid #a9c6f7; outline-offset: 2px; }
.deshacer-tiempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--color); transform-origin: left; }
.deshacer-tiempo.corre { animation: deshacer-tiempo var(--dur, 6s) linear forwards; }
@keyframes deshacer-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes deshacer-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .deshacer { animation: none; } }

/* Ver las fotos en tamaño completo (el visor: en el panel y en la tienda) */
.visor { position: fixed; inset: 0; z-index: 50; background: #0a0e16; display: flex; flex-direction: column; }
.visor-arriba, .visor-abajo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.visor-abajo { justify-content: center; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.visor-contador { color: #fff; font-weight: 600; }
.visor-foto { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.visor-foto img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; background: #fff; }
.visor-boton { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 8px 18px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.visor-boton:hover { background: rgba(255, 255, 255, .24); }
.visor-boton:focus-visible { outline: 3px solid #a9c6f7; outline-offset: 2px; }

/* ---------- Pago por transferencia (Fase 3, paso 5; forma "A · Paso a paso", elegida el 14/10/2026) ---------- */
.ico-copiar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M5 15V6.5A2.5 2.5 0 0 1 7.5 4H15'/%3E%3C/svg%3E"); }
.ico-billete { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E"); }
/* un dato de la cuenta con su botón "Copiar" (si no hay lugar, el botón pasa abajo) */
.dato-cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.dato-cuenta:last-of-type { border-bottom: 0; }
.dato-cuenta > div { flex: 1 0 auto; max-width: 100%; min-width: 0; }
.dato-cuenta small { display: block; color: var(--texto-suave); font-size: 15px; }
.dato-cuenta b { display: block; font-size: 18px; overflow-wrap: anywhere; }
.dato-cuenta b.codigo { white-space: nowrap; overflow-wrap: normal; font-size: clamp(14px, 4.4vw, 18px); letter-spacing: .01em; }   /* alias, CBU y CUIT nunca se parten */
.dato-cuenta b.monto { white-space: nowrap; font-size: clamp(30px, 9vw, 40px); font-weight: 800; line-height: 1.1; margin: 2px 0 4px; }
.boton-copiar { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 0; border-radius: 99px;
  background: var(--color-suave); color: var(--color-oscuro); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.boton-copiar:hover { background: #dbe7fd; }
.boton-copiar:focus-visible { outline: 3px solid #a9c6f7; outline-offset: 2px; }
.boton-copiar.listo { background: var(--ok-suave); color: var(--ok); }
.boton-copiar .ico { width: 18px; height: 18px; }

/* ---------- Campanita de avisos (15/10/2026, forma "C · Desplegable + aviso al momento", elegida por el constructor) ---------- */
.ico-campana { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.ico-reloj { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.campana-zona { position: relative; flex: none; }
.campana { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; background: var(--color-suave); color: var(--color-oscuro);
  display: grid; place-items: center; cursor: pointer; }
.campana .ico { width: 24px; height: 24px; }
.campana:hover { background: #dbe7fd; }
.campana:focus-visible { outline: 3px solid #a9c6f7; outline-offset: 2px; }
.campana[aria-expanded="true"] { background: var(--color); color: #fff; }
.campana-num { position: absolute; top: 0; right: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--error); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.campana-num[hidden] { display: none; }
/* el desplegable: debajo de la campana (en el celular, de lado a lado) */
.avisos-desp { position: absolute; top: calc(100% + 10px); right: 0; z-index: 45; width: 400px; max-width: calc(100vw - 16px); background: #fff; border-radius: 18px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .22), 0 0 0 1px rgba(16, 24, 40, .06); overflow: hidden; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 100px)); }
.avisos-desp[hidden] { display: none; }
@media (max-width: 559px) { .avisos-desp { position: fixed; left: 8px; right: 8px; width: auto; max-width: none; top: var(--avisos-arriba, 72px); max-height: calc(100vh - var(--avisos-arriba, 72px) - 12px); } }
.avisos-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; flex: none; }
.avisos-cab h2 { margin: 0; font-size: 19px; }
.avisos-cab .boton-link { font-size: 15px; min-height: 44px; padding: 0; text-align: right; }
.avisos-lista { overflow-y: auto; overscroll-behavior: contain; }
.aviso-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--borde);
  text-decoration: none; color: var(--texto); background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
a.aviso-item:hover, button.aviso-item:hover { background: var(--gris-suave, #f1f3f6); }
.aviso-item:focus-visible { outline: 3px solid #a9c6f7; outline-offset: -3px; }
.aviso-item.sin-link { cursor: default; }
.aviso-item.nuevo, .aviso-fila.nuevo { background: #f2f7ff; }
.aviso-circ { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; grid-row: span 2; }
.aviso-circ .ico { width: 20px; height: 20px; }
.c-azul { background: var(--color-suave); color: var(--color-oscuro); } .c-verde { background: var(--ok-suave); color: var(--ok); }
.c-rojo { background: var(--error-suave); color: var(--error); } .c-ambar { background: var(--atencion-suave); color: var(--atencion); } .c-gris { background: #eef0f3; color: var(--texto-suave); }
.aviso-texto { min-width: 0; overflow-wrap: anywhere; }
.aviso-texto b { display: block; font-size: 16px; line-height: 1.3; }
.aviso-texto small { display: block; color: var(--texto-suave); font-size: 15px; margin-top: 2px; }
.aviso-cuando { grid-column: 2; display: flex; align-items: center; gap: 8px; color: var(--texto-suave); font-size: 14px; }
.aviso-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--color); flex: none; }
.avisos-vacio { padding: 18px 16px 22px; color: var(--texto-suave); text-align: center; border-top: 1px solid var(--borde); margin: 0; }
.avisos-pie { padding: 6px 16px 10px; border-top: 1px solid var(--borde); text-align: center; flex: none; }
.avisos-pie .boton-link { font-size: 15px; min-height: 44px; }
.avisos-nota { margin: 0 0 6px; font-size: 14px; color: var(--texto-suave); }
/* Borrar avisos (16/10/2026, forma B elegida por el constructor): "Borrar todos" arriba, el tacho en cada aviso y "Deshacer"
   arriba de la lista (la misma pieza blanca del "Deshacer" de siempre, pero dentro del desplegable para que no quede tapada) */
.avisos-cab { flex-wrap: wrap; row-gap: 0; column-gap: 12px; }
/* "Borrar todos": pastilla rojo clarito, del mismo color que el tacho (constructor 16/10: "más estético") */
.boton-borrar-todo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px 6px 12px; border: 0; border-radius: 99px;
  background: var(--error-suave); color: var(--error); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.boton-borrar-todo:hover { background: #fbdcd8; }
.boton-borrar-todo:focus-visible { outline: 3px solid #a9c6f7; outline-offset: 2px; }
.boton-borrar-todo .ico { width: 18px; height: 18px; }
.aviso-fila { display: flex; align-items: center; border-top: 1px solid var(--borde); }
.aviso-fila .aviso-item { flex: 1 1 auto; min-width: 0; border-top: 0; background: none; }
.aviso-fila:has(> a.aviso-item:hover), .aviso-fila:has(> button.aviso-item:hover) { background: var(--gris-suave, #f1f3f6); }
.aviso-quitar { margin: 0 12px 0 0; width: 40px; height: 40px; }   /* el tacho de siempre, más chico en la campanita (constructor 16/10) */
.aviso-quitar .ico { width: 18px; height: 18px; }
.avisos-desp .avisos-deshacer { position: relative; bottom: auto; left: auto; right: auto;   /* más fuerte que el "left: 240px" del Deshacer de la compu (panel.css) */
  z-index: auto; width: auto; max-width: none; margin: 0 12px 10px; flex: none;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .12), 0 0 0 1px rgba(16, 24, 40, .08); }
@media (max-width: 399px) { .avisos-desp .avisos-deshacer { padding: 8px 8px 10px 14px; } }
.avisos-error { padding: 10px 16px; margin: 0; border-top: 1px solid var(--borde); }
/* el aviso al momento: aparece abajo unos segundos cuando llega algo nuevo con la página abierta */
.aviso-momento { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 42; width: max-content; max-width: min(460px, calc(100% - 24px)); margin: 0 auto;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .22), 0 0 0 1px rgba(16, 24, 40, .06); animation: deshacer-entra .22s ease-out; }
.aviso-momento[hidden] { display: none; }
.aviso-momento .aviso-circ { grid-row: auto; }
.aviso-momento-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.aviso-momento-acciones .boton, .aviso-momento-acciones .boton-link { min-height: 44px; padding: 6px 16px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .aviso-momento { animation: none; } }

/* ---------- Dibujitos de los beneficios (Editor, Fase 3B paso 6, 18/10/2026): lista cerrada, en la tienda y en el panel ---------- */
.ico-camion { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6h11v10h-11z'/%3E%3Cpath d='M13.5 9.5h4l3 3.5v3h-7'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.ico-tarjeta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/svg%3E"); }
.ico-porcentaje { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M19 5L5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E"); }
.ico-pesos { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19'/%3E%3Cpath d='M16.8 7.3C16.2 5.8 14.5 5 12.2 5 9.5 5 7.7 6.3 7.7 8.2c0 4.4 9.1 2.4 9.1 6.9 0 2-1.9 3.6-4.7 3.6-2.5 0-4.3-1-4.9-2.8'/%3E%3C/svg%3E"); }
.ico-diamante { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12l3.5 5L12 20.5 2.5 9z'/%3E%3Cpath d='M2.5 9h19M9.5 4L8 9l4 11.5L16 9l-1.5-5'/%3E%3C/svg%3E"); }
.ico-local { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10L5 4h14l1.5 6z'/%3E%3Cpath d='M5 10v10h14V10M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.ico-cuotas { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M7.5 14h2M11 14h2M14.5 14h2M7.5 17h2'/%3E%3C/svg%3E"); }
.ico-devolucion { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E"); }
/* Opiniones, Horarios y dirección, y Redes (Editor, Fase 3B paso 6, tanda 3, 19/10/2026): dibujitos de línea, como los demás */
.ico-opinion { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-4 4v-4H4z'/%3E%3Cpath d='M12 7.8l.9 1.8 2 .3-1.4 1.4.3 2-1.8-1-1.8 1 .3-2-1.4-1.4 2-.3z'/%3E%3C/svg%3E"); }
.ico-ubicacion { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.ico-ruta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l9.5 9.5-9.5 9.5L2.5 12z'/%3E%3Cpath d='M9 14v-2.5h5M12 9l2 2.5-2 2.5'/%3E%3C/svg%3E"); }
.ico-instagram { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17' cy='7' r='.6' fill='black'/%3E%3C/svg%3E"); }
.ico-facebook { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13.6 22v-8.2h2.8l.4-3.3h-3.2V8.4c0-.9.3-1.6 1.6-1.6H17V3.9c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.4H7.5v3.3h2.8V22z'/%3E%3C/svg%3E"); }   /* relleno, como el logo oficial (19/10/2026) */
.ico-tiktok { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16.6 2.5h-3.4v12.8a2.8 2.8 0 1 1-2.8-2.8c.3 0 .6 0 .8.1V9.1a6.2 6.2 0 1 0 5.4 6.2V8.8a7.9 7.9 0 0 0 4.6 1.4V6.8a4.6 4.6 0 0 1-4.6-4.3z'/%3E%3C/svg%3E"); }   /* relleno, como el logo oficial (19/10/2026) */
/* Arriba y abajo de la tienda (Editor, paso 7, 19/10/2026): el email del pie y los anuncios de la barra de arriba */
.ico-email { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.ico-anuncio { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h3l7 4V6L7 10z'/%3E%3Cpath d='M17.5 9.5a3.5 3.5 0 0 1 0 5'/%3E%3C/svg%3E"); }
.ico-anterior { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }