/* piky.css: los estilos de la app (fase 5N). Reemplaza a Tailwind: ya armado, sin nada que compilar en el celular.
   Todo color, letra y tamano sale de tokens.css (la copia tal cual de tokens_piky.css): aqui no hay ningun color
   escrito con su valor (tests/test_marca_piky.py lo revisa). Mobile first, pensado a 390 px; en pantallas anchas la
   columna se centra. Las animaciones duran 400 ms o menos y no bloquean ningun toque; con "reducir movimiento" no hay. */

:root { --nav-alto: 64px; --ancho-max: 560px; --sombra: 0 1px 2px color-mix(in srgb, var(--noche) 8%, transparent),
  0 8px 24px color-mix(in srgb, var(--noche) 7%, transparent); --rapido: 120ms; --medio: 240ms; --lento: 380ms; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto); font-family: var(--fuente-texto);
  font-size: var(--letra-texto); font-weight: var(--peso-texto); line-height: 1.45; -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom) + 24px); }
body.con-accion { padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom) + var(--boton-alto) + 48px); }
body.con-accion.alta { padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom) + var(--boton-alto) + 96px); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio-chico); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.arriba-s { margin-top: 6px; } .arriba-m { margin-top: 10px; } .arriba-l { margin-top: 12px; } .abajo-m { margin: -2px 0 10px; }
.centrado { align-items: center !important; } .bloque { display: block !important; }
.suave { color: var(--texto-suave); }
.chico { font-size: var(--letra-texto); }  /* revision del subagente: lo que se lee, 16 px */
.fuerte { font-weight: var(--peso-fuerte); }
.medio { font-weight: var(--peso-medio); }
.titulo { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); letter-spacing: -0.01em; line-height: 1.15; }
.icono { width: 24px; height: 24px; flex: none; }
.icono-chico { width: 18px; height: 18px; flex: none; }

/* ---------- armazon ---------- */
.pagina { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 16px; }
.cabecera { max-width: var(--ancho-max); margin: 0 auto; padding: 12px 16px 4px; display: flex; align-items: center; gap: 8px; }
.cabecera .volver { display: inline-flex; align-items: center; gap: 4px; min-height: var(--toque-minimo); padding-right: 8px;
  text-decoration: none; font-size: var(--letra-boton); font-weight: var(--peso-medio); }
.cabecera .chip-zona { margin-left: auto; }
.cabecera-noche { background: var(--noche); color: var(--blanco); padding-bottom: 20px; }
.cabecera-noche.corta { padding-bottom: 16px; }
.buscar-arriba { max-width: var(--ancho-max); margin: 16px auto 0; padding: 0 16px; }
.buscar-arriba .campo { border-color: transparent; }
.buscar-arriba .indicador { color: var(--niebla); }
#resultados:not(:empty) { margin-top: 16px; }
.cabecera-noche .fila { max-width: var(--ancho-max); margin: 0 auto; padding: 12px 16px 0; display: flex; align-items: center; gap: 12px; }
.cabecera-noche .logo { height: 36px; width: auto; display: block; }
.enlace-logo { display: inline-flex; align-items: center; min-height: var(--toque-minimo); }
.cabecera-noche .saludo { max-width: var(--ancho-max); margin: 0 auto; padding: 20px 16px 0; }
.saludo h1 { font-size: var(--letra-titulo); }
.saludo p { margin-top: 6px; color: var(--niebla); font-size: var(--letra-texto); }
h1.titulo { font-size: var(--letra-titulo); margin-top: 8px; }
h2.titulo { font-size: var(--letra-titulo-chico); }
.seccion { margin-top: 28px; }
.seccion > h2 { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: 20px; line-height: 1.2; }
.nota { margin-top: 4px; font-size: var(--letra-texto); color: var(--texto-suave); }
.pie-pagina { max-width: var(--ancho-max); margin: 32px auto 0; padding: 0 16px; font-size: var(--letra-texto); color: var(--texto-suave); }
.pie-pagina a { display: inline-flex; align-items: center; min-height: var(--toque-minimo); }
.lema { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: 20px; color: var(--noche); }

/* ---------- navegacion de abajo ---------- */
.nav-abajo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--blanco); border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom); view-transition-name: nav-abajo; }
.nav-abajo ul { max-width: var(--ancho-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.nav-abajo a { min-height: var(--nav-alto); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; color: var(--pizarra); font-size: var(--letra-media); font-weight: var(--peso-medio); position: relative; }
.nav-abajo a[aria-current="page"] { color: var(--noche); font-weight: var(--peso-fuerte); }
.nav-abajo a[aria-current="page"] .icono { color: var(--pitahaya); }
.contador { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--radio-pastilla); background: var(--pitahaya); color: var(--blanco); font-size: var(--letra-chica);
  font-weight: var(--peso-fuerte); line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.contador.vacio { opacity: 0; }  /* con la lista vacia no se ve un 0 */
.contador.salta { animation: salto var(--medio) ease-out; }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--toque-minimo);
  padding: 0 18px; border-radius: var(--radio); border: 2px solid transparent; font-size: var(--letra-boton);
  font-weight: var(--peso-fuerte); text-decoration: none; line-height: 1.2; text-align: center;
  transition: transform var(--rapido) ease-out, opacity var(--rapido); touch-action: manipulation; }
.boton:active, .boton.presionado { transform: scale(0.97); }
.boton-primario { background: var(--pitahaya); color: var(--blanco); min-height: var(--boton-alto); width: 100%;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pitahaya) 30%, transparent); }
.boton-noche { background: var(--noche); color: var(--blanco); }
.boton-borde { background: var(--blanco); color: var(--noche); border-color: var(--noche); }
.boton-suave { background: var(--suave); color: var(--noche); }
.boton-texto { background: none; border: 0; color: var(--pitahaya); padding: 0 4px; }
.boton-ancho { width: 100%; }
.boton[disabled] { opacity: 0.4; cursor: default; }
.htmx-request.boton, .boton.htmx-request { opacity: 0.75; }
.accion-fija { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom)); z-index: 15;
  padding: 12px 16px; background: linear-gradient(to top, var(--fondo) 75%, transparent); view-transition-name: accion-fija; }
.accion-fija > * { max-width: calc(var(--ancho-max) - 32px); margin-left: auto; margin-right: auto; }
.accion-fija .nota { text-align: center; }
.chip-zona { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque-minimo); padding: 0 16px;
  border-radius: var(--radio-pastilla); background: var(--suave); color: var(--noche); text-decoration: none;
  font-weight: var(--peso-medio); white-space: nowrap; }
.cabecera-noche .chip-zona { margin-left: auto; background: var(--noche-chip); color: var(--blanco); }

/* ---------- tarjetas y filas ---------- */
.tarjeta { background: var(--superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); padding: 16px; }
.tarjeta + .tarjeta { margin-top: 12px; }
.tarjeta.destacada { box-shadow: 0 0 0 2px var(--ahorro), var(--sombra); }
.tarjeta.apagada { background: var(--suave); box-shadow: none; color: var(--texto-suave); }
.filas > li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
.filas > li:first-child { border-top: 0; }
.filas .cuerpo { flex: 1; min-width: 0; }
.filas .derecha { margin-left: auto; text-align: right; }
.nombre { font-weight: var(--peso-medio); line-height: 1.3; overflow-wrap: anywhere; }
.foto { width: var(--foto-producto); height: var(--foto-producto); flex: none; border-radius: 12px; }
.foto-real { object-fit: contain; background: var(--blanco); } /* 5S-1: la foto del super, sobre blanco como en su pagina */
.punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; background: var(--color-super, var(--pizarra)); }
.super-walmart { --color-super: var(--super-walmart); }
.super-paiz { --color-super: var(--super-paiz); }
.super-latorre { --color-super: var(--super-la-torre); }
.super-maxidespensa { --color-super: var(--super-maxi-despensa); }

/* ---------- pastillas ---------- */
.pastilla { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radio-pastilla);
  font-size: var(--letra-chica); font-weight: var(--peso-medio); line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.pastilla-ahorro { background: var(--ahorro-fondo); color: var(--ahorro); }
.pastilla-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.pastilla-borde { border: 1.5px solid var(--noche); color: var(--noche); }
.pastilla-suave { background: var(--suave); color: var(--pizarra); }
.pastilla-noche { background: var(--noche); color: var(--blanco); font-weight: var(--peso-fuerte); }
.etiqueta-verde { background: var(--ahorro-fondo); color: var(--ahorro); }
.etiqueta-ambar { background: var(--aviso-fondo); color: var(--aviso); }
.texto-ahorro { color: var(--ahorro); font-weight: var(--peso-fuerte); }
.texto-neutro { color: var(--texto); }
.texto-aviso { color: var(--aviso); }
.texto-error { color: var(--error); }
.caja-aviso { background: var(--aviso-fondo); color: var(--aviso); border-radius: var(--radio); padding: 12px 14px; }
.caja-error { background: var(--error-fondo); color: var(--error); border-radius: var(--radio); padding: 12px 14px; }
.caja-pregunta { background: var(--blanco); border: 2px solid var(--noche); border-radius: var(--radio-tarjeta); padding: 16px; }

/* ---------- el total y el plan ---------- */
.total-grande { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: var(--letra-total);
  line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.pagas { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: var(--letra-titulo-chico); line-height: 1.2; margin-top: 4px; }
.linea-ahorro { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; color: var(--ahorro); font-weight: var(--peso-fuerte); }
.linea-ahorro .icono { margin-top: 1px; }
.encabezado-plan { display: flex; align-items: flex-start; gap: 8px; font-weight: var(--peso-fuerte); }
.encabezado-plan > .punto { margin-top: 6px; }
.encabezado-plan > .foto { margin-top: 0; }
.recomendado { margin-left: auto; }
.separador { border: 0; border-top: 1px solid var(--linea); margin: 14px 0; }

/* ---------- barras de los super ---------- */
.barras > li { padding: 10px 0 0; }
.barras > li.tarjeta { padding: 14px 16px 16px; }
.barras .fila-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 32px; }  /* nunca mas ancha que la pantalla */
.barras .monto { margin-left: auto; font-weight: var(--peso-fuerte); }
.barra { height: 10px; border-radius: var(--radio-pastilla); background: var(--suave); margin-top: 6px; overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: inherit; background: var(--color-super, var(--pizarra));
  transform-origin: left center; animation: crecer var(--lento) cubic-bezier(.2, .7, .3, 1) both; }
.barras > li:nth-child(2) .barra > span { animation-delay: 60ms; }
.barras > li:nth-child(3) .barra > span { animation-delay: 120ms; }
.barras > li:nth-child(4) .barra > span { animation-delay: 180ms; }
.barras > li:nth-child(n+5) .barra > span { animation-delay: 220ms; }
.cheque { width: 14px; height: 16px; color: var(--ahorro); }
.pastilla-ahorro .cheque { animation: aparecer var(--medio) 300ms ease-out both; }

/* ---------- buscador y lista ---------- */
.campo { width: 100%; min-height: var(--boton-alto); border: 1.5px solid var(--borde-campo); border-radius: var(--radio);
  background: var(--blanco); color: var(--texto); padding: 0 16px; font-size: var(--letra-boton); }
.campo::placeholder { color: var(--texto-suave); opacity: 1; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }  /* la cruz nativa mide 16 px */
.campo:focus { outline: none; border-color: var(--noche); box-shadow: var(--foco); }
.buscador { position: relative; }
.buscador .campo { padding-left: 48px; }
.buscador .lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pizarra); pointer-events: none; }
.indicador { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--texto-suave); font-size: var(--letra-texto); }
.indicador::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar 400ms linear infinite; }
.htmx-indicator { opacity: 0; transition: opacity var(--rapido); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.grupo h2 { font-size: var(--letra-texto); font-weight: var(--peso-fuerte); color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.grupo + .grupo { margin-top: 12px; }
.agregar { min-width: 120px; }
.accion-fila { display: flex; justify-content: flex-end; align-items: center; min-height: var(--toque-minimo); margin-top: 6px; }
.agregado { color: var(--ahorro); font-weight: var(--peso-fuerte); }
.cantidad { display: flex; align-items: center; gap: 4px; }
.cantidad .boton { width: var(--toque-minimo); padding: 0; border-color: var(--linea); background: var(--blanco); color: var(--noche); }
.cantidad input { width: 52px; min-height: var(--toque-minimo); border: 1.5px solid var(--borde-campo); border-radius: var(--radio-chico);
  text-align: center; font-size: var(--letra-boton); font-variant-numeric: tabular-nums; background: var(--blanco); }
.quitar { color: var(--error); border-color: transparent; background: none; padding: 0 8px; font-size: var(--letra-texto); }
.controles { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.quitar { margin-left: -8px; }
.filas > li.fila-lista { display: grid; grid-template-columns: var(--foto-producto) 1fr 40px; column-gap: 12px; align-items: start; }
.fila-lista .controles { grid-column: 1 / -1; }
.progreso { height: 10px; border-radius: var(--radio-pastilla); background: var(--linea); overflow: hidden; margin-top: 8px; }
.progreso > span { display: block; height: 100%; background: var(--noche); border-radius: inherit; transition: width var(--medio) ease-out; }

/* ---------- tachar ---------- */
.casilla { flex: none; width: var(--toque-minimo); height: var(--toque-minimo); display: inline-flex; align-items: center;
  justify-content: center; background: none; border: 0; padding: 0; margin: -4px -8px 0 0; position: relative; }
.casilla .caja { width: var(--casilla); height: var(--casilla); border: 2px solid var(--borde-campo); border-radius: var(--radio-chico);
  background: var(--blanco); display: flex; align-items: center; justify-content: center;
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido); }
.casilla svg { width: 20px; height: 20px; }
.casilla path { fill: none; stroke: var(--limon); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; }
.casilla[aria-checked="true"] .caja { background: var(--pitahaya); border-color: var(--pitahaya); }
.casilla[aria-checked="true"] path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--lento) ease-out 40ms; }
.casilla:active .caja { transform: scale(0.92); }
.casilla .chispa { position: absolute; inset: 0; pointer-events: none; }
.casilla .chispa i { position: absolute; left: 50%; top: 50%; width: 3px; height: 8px; margin: -4px 0 0 -1.5px; border-radius: 2px;
  background: var(--pitahaya); opacity: 0; }
.casilla.recien .chispa i { animation: chispa var(--lento) ease-out both; }
.tachado .nombre { text-decoration: line-through; text-decoration-color: var(--pitahaya); text-decoration-thickness: 2px; color: var(--texto-suave); }
.tachado .foto { opacity: 0.55; }
.celebracion { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radio);
  background: var(--ahorro-fondo); color: var(--ahorro); font-weight: var(--peso-fuerte); animation: aparecer var(--lento) ease-out both; }
.celebracion .cheque { width: 22px; height: 26px; }

/* ---------- detalles (ver mas) ---------- */
details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: var(--toque-minimo);
  color: var(--pitahaya); font-weight: var(--peso-medio); }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .icono-chico { transform: rotate(180deg); }
.ver-mas { font-size: var(--letra-texto); }
.ver-mas ul { display: grid; gap: 12px; padding-bottom: 8px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.acciones .boton { min-height: var(--toque-minimo); font-size: var(--letra-texto); padding: 0 14px; border-color: var(--linea); background: var(--blanco); color: var(--noche); }

/* ---------- formulario del perfil ---------- */
.formulario { display: grid; gap: 22px; }
.formulario legend, .formulario .etiqueta-campo { font-weight: var(--peso-fuerte); margin-bottom: 8px; display: block; padding: 0; }
.formulario fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
select.campo { appearance: none; background-image: none; padding-right: 44px; }
.selector { position: relative; }
.selector .icono { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--noche); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span { display: inline-flex; align-items: center; min-height: var(--toque-minimo); padding: 0 18px; border-radius: var(--radio-pastilla);
  border: 1.5px solid var(--borde-campo); background: var(--blanco); font-weight: var(--peso-medio); }
.opcion input:checked + span { background: var(--noche); border-color: var(--noche); color: var(--blanco); }
.opcion input:focus-visible + span { box-shadow: var(--foco); }

/* ---------- avisos flotantes ---------- */
.aviso-flotante { position: fixed; left: 16px; right: 16px; bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom) + 12px); z-index: 30;
  max-width: calc(var(--ancho-max) - 32px); margin: 0 auto; }
.aviso-flotante p { background: var(--noche); color: var(--blanco); border-radius: var(--radio); padding: 8px 8px 8px 16px; box-shadow: var(--sombra);
  min-height: var(--toque-minimo); display: flex; align-items: center; justify-content: space-between; gap: 8px;
  animation: aparecer var(--medio) ease-out both; }
.aviso-flotante .deshacer { color: var(--pitahaya-clara); flex: none; }
.con-accion .aviso-flotante { bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom) + var(--boton-alto) + 32px); }  /* no tapa el boton */
body.inicio.buscando main { min-height: 100vh; }  /* con el inicio vacio, que el buscador pueda subir arriba del teclado */
.vuela { position: fixed; z-index: 40; width: 14px; height: 14px; border-radius: 50%; background: var(--pitahaya); pointer-events: none; }

/* ---------- indicador al cambiar de pantalla ---------- */
html.navegando::before { content: ""; position: fixed; z-index: 50; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--pitahaya); transform-origin: left center; animation: avanza 400ms cubic-bezier(.1,.6,.2,1) both; }
.boton[aria-busy="true"] { opacity: 0.75; }

/* ---------- movimiento ---------- */
@keyframes avanza { from { transform: scaleX(0); } to { transform: scaleX(0.85); } }
@keyframes crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes salto { 40% { transform: scale(1.25); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes chispa { 0% { opacity: 1; transform: rotate(var(--giro)) translateY(-14px) scaleY(.4); }
  100% { opacity: 0; transform: rotate(var(--giro)) translateY(-26px) scaleY(1); } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: salir 160ms ease-in both; }
::view-transition-new(root) { animation: entrar 240ms ease-out both; }
@keyframes salir { to { opacity: 0; transform: translateX(-16px); } }
@keyframes entrar { from { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (min-width: 720px) { .cabecera-noche .fila, .cabecera-noche .saludo { padding-left: 16px; padding-right: 16px; } }