/*
 * Base de estilo — Nalt Tomí (app de compradores).
 * Usa las variables de tokens.css. Mobile-first, botones grandes (48px+),
 * sin fuentes web, animaciones mínimas y respetando prefers-reduced-motion.
 */

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

/* Sin esto, el atributo "hidden" no sirve de nada en ningún componente que
   fije su propio "display" (.pantalla, .aviso, .nav-inferior, etc.): una
   regla de autor siempre gana sobre la hoja de estilos del navegador (la
   que trae "[hidden] { display:none }"), sin importar especificidad. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--nalt-fuente);
  font-size: var(--nalt-texto-base);
  -webkit-text-size-adjust: 100%;
}

body { display: flex; flex-direction: column; min-height: 100%; }

h1, h2, h3, p { margin: 0 0 var(--nalt-espacio-2); }

.ico { width: 22px; height: 22px; flex-shrink: 0; --acento: var(--nalt-naranja); }
.ico--jade { --acento: var(--nalt-jade); }

/* --- Papel picado: divisor de sección, sin imagen, con CSS mask --- */
.papel-picado {
  height: 14px;
  width: 100%;
  background: var(--nalt-naranja);
  -webkit-mask-image: radial-gradient(circle at 10px 0, transparent 10px, black 10.5px);
  mask-image: radial-gradient(circle at 10px 0, transparent 10px, black 10.5px);
  -webkit-mask-size: 20px 14px;
  mask-size: 20px 14px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.papel-picado--jade { background: var(--nalt-jade); }

/* --- Botones (mínimo 48px de alto, texto siempre + ícono en acciones de riesgo) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nalt-espacio-2);
  min-height: var(--nalt-boton-alto);
  padding: 0 var(--nalt-espacio-4);
  border: none;
  border-radius: var(--nalt-radio-md);
  font-size: var(--nalt-texto-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:focus-visible { outline: 3px solid var(--nalt-jade-claro); outline-offset: 2px; }
.btn-principal { background: var(--color-acento-1); color: var(--color-acento-1-texto); }
.btn-secundario { background: var(--color-acento-2); color: var(--color-acento-2-texto); }
.btn-peligro { background: var(--color-peligro); color: var(--color-peligro-texto); }
.btn-fantasma {
  background: transparent;
  color: var(--color-texto);
  border: 1.5px solid var(--color-borde);
}
.btn-bloque { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Tarjetas --- */
.tarjeta {
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--nalt-radio-lg);
  padding: var(--nalt-espacio-4);
}

/* --- Insignias (estado de pedido, categoría) --- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--nalt-radio-pill);
  font-size: var(--nalt-texto-xs);
  font-weight: 600;
}
.insignia--jade { background: rgba(0, 168, 107, .18); color: var(--nalt-jade-claro); }
.insignia--naranja { background: rgba(245, 130, 31, .18); color: var(--nalt-naranja); }
.insignia--gris { background: rgba(201, 194, 184, .16); color: var(--color-texto-tenue); }
.insignia--peligro { background: rgba(229, 72, 77, .18); color: var(--nalt-rojo); }
:root[data-tema="claro"] .insignia--jade { color: var(--nalt-jade-oscuro); }
:root[data-tema="claro"] .insignia--peligro { color: var(--nalt-rojo-oscuro); }

/* --- Aviso (nunca solo color: siempre ícono + texto) --- */
.aviso {
  display: flex;
  gap: var(--nalt-espacio-2);
  align-items: flex-start;
  padding: var(--nalt-espacio-3);
  border-radius: var(--nalt-radio-md);
  font-size: var(--nalt-texto-sm);
}
.aviso--peligro { background: rgba(229, 72, 77, .12); color: var(--color-texto); border: 1px solid var(--nalt-rojo); }
.aviso--peligro .ico { --acento: var(--nalt-rojo); color: var(--nalt-rojo); }
.aviso--exito { background: rgba(0, 168, 107, .12); color: var(--color-texto); border: 1px solid var(--nalt-jade); }
.aviso--exito .ico { --acento: var(--nalt-jade); color: var(--nalt-jade); }

/* --- Estado vacío --- */
.estado-vacio {
  text-align: center;
  padding: var(--nalt-espacio-6) var(--nalt-espacio-4);
  color: var(--color-texto-tenue);
}
.estado-vacio .ico { width: 56px; height: 56px; margin: 0 auto var(--nalt-espacio-3); opacity: .9; }

/* --- Animaciones mínimas --- */
.entra { animation: nalt-entra .18s ease-out; }
@keyframes nalt-entra {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .entra { animation: none; }
  * { scroll-behavior: auto !important; }
}
/* Nunca animar la pantalla de pago ni de canje de código */
.pantalla-pago .entra, .pantalla-canje .entra { animation: none; }

/* --- Utilidades de layout mínimas --- */
.pantalla { flex: 1; display: flex; flex-direction: column; padding-bottom: 84px; }
.contenido { padding: var(--nalt-espacio-4); display: flex; flex-direction: column; gap: var(--nalt-espacio-4); }
.fila { display: flex; align-items: center; gap: var(--nalt-espacio-2); }
.entre { display: flex; align-items: center; justify-content: space-between; gap: var(--nalt-espacio-2); }

.nav-inferior {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--color-fondo-tarjeta);
  border-top: 1px solid var(--color-borde);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-inferior__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--nalt-espacio-2) 0;
  min-height: 56px;
  color: var(--color-texto-tenue);
  background: none;
  border: none;
  font-size: var(--nalt-texto-xs);
}
.nav-inferior__item[aria-current="page"] { color: var(--nalt-naranja); }
.nav-inferior__item[aria-current="page"] .ico { --acento: var(--nalt-naranja); }

/* --- Flores de cempasúchil de fondo (Inicio), 100% CSS, sin imagen ni SVG.
   Aprobado 2026-09-30. Muy tenues a propósito: nunca deben restar lectura al
   saldo ni a los botones, por eso van en un contenedor con z-index bajo. --- */
.inicio-fondo { position: relative; }
.inicio-fondo > .contenido { position: relative; z-index: 1; }
.flor-css {
  position: absolute;
  width: 44px; height: 44px;
  opacity: .10;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 9px 14px at 50% 15%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(ellipse 9px 14px at 78% 30%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(ellipse 9px 14px at 78% 68%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(ellipse 9px 14px at 50% 85%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(ellipse 9px 14px at 22% 68%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(ellipse 9px 14px at 22% 30%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(circle 6px at 50% 50%, var(--nalt-jade) 90%, transparent 92%);
}
.flor-css--1 { width: 64px; height: 64px; top: -14px; right: -10px; }
.flor-css--2 { width: 34px; height: 34px; top: 150px; left: -8px; transform: rotate(18deg); }
.flor-css--3 { width: 26px; height: 26px; top: 60px; right: 70px; opacity: .07; transform: rotate(-12deg); }
:root[data-tema="claro"] .flor-css { opacity: .14; }

/* --- "Lo más pedido" (Inicio): cuadrícula que crece hacia abajo, NUNCA una
   pasarela con scroll horizontal — se veía mal con la barra de desplazamiento
   y rompía el estilo (ajustado 2026-09-30 a pedido del dueño). --- */
.populares-seccion + .populares-seccion { margin-top: var(--nalt-espacio-4); }
.populares-titulo { display: flex; align-items: center; gap: 6px; font-size: var(--nalt-texto-sm); font-weight: 700; margin-bottom: var(--nalt-espacio-2); }
.populares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.popular-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--nalt-radio-md);
  padding: 8px;
  position: relative;
}
.popular-card__rango {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--nalt-radio-pill);
  background: var(--nalt-naranja); color: var(--nalt-negro);
  font-size: .7rem; font-weight: 800;
}
.popular-card .foto-prod { aspect-ratio: 1 / 1; }
.popular-card__nombre { font-size: var(--nalt-texto-xs); font-weight: 700; line-height: 1.25; }
.popular-card__precio { font-size: var(--nalt-texto-xs); font-weight: 800; color: var(--nalt-naranja); font-variant-numeric: tabular-nums; }
.popular-card__loc { font-size: .68rem; color: var(--color-texto-tenue); display: flex; align-items: center; gap: 3px; }
.popular-card__loc .ico { width: 12px; height: 12px; }

/* --- Foto de producto genérica (placeholder hasta tener fotos reales) --- */
.foto-prod {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--nalt-radio-md);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  display: flex; align-items: center; justify-content: center;
}
.foto-prod .ico { width: 34px; height: 34px; opacity: .5; }

/* --- Cuenta: encabezado y recarga de saldo Nalt Tomín por código --- */
.avatar-cuenta {
  width: 56px; height: 56px; border-radius: var(--nalt-radio-pill);
  background: var(--nalt-jade); color: var(--nalt-negro);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avatar-cuenta .ico { width: 30px; height: 30px; --acento: var(--nalt-negro); }
.separador-o { display: flex; align-items: center; gap: 10px; color: var(--color-texto-tenue); font-size: var(--nalt-texto-xs); margin: 2px 0; }
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: var(--color-borde); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: var(--nalt-texto-xs); color: var(--color-texto-tenue); font-weight: 600; }
.campo input, .campo select {
  height: var(--nalt-boton-alto);
  padding: 0 var(--nalt-espacio-3);
  border-radius: var(--nalt-radio-md);
  border: 1.5px solid var(--color-borde);
  background: var(--color-fondo);
  color: var(--color-texto);
  font-size: var(--nalt-texto-base);
  font-family: inherit;
}
.campo input:focus-visible, .campo select:focus-visible { outline: 3px solid var(--nalt-jade-claro); outline-offset: 1px; border-color: var(--nalt-jade); }
/* Solo para campos de código (Nalt Tomí, etc.) — no es el estilo por
   defecto de cualquier campo de texto (p. ej. usuario/contraseña del login). */
.campo input.input-codigo { text-transform: uppercase; letter-spacing: .04em; }

/* --- Subtítulo náhuatl (bilingüe): bajo el texto en español, SOLO cuando
   el administrador lo valida en WooCommerce → Vocabulario náhuatl
   (GET /app-delivery/v1/vocabulario). Si no hay término validado para esa
   clave, el elemento se queda solo en español — nunca vacío ni roto. --- */
.nah-subtitulo {
  display: block;
  font-size: .72em;
  font-weight: 500;
  font-style: italic;
  opacity: .78;
  margin-top: 1px;
}

/* --- Tarjeta de saldo (Inicio y Cuenta) --- */
.saldo-tarjeta { background: linear-gradient(135deg, var(--nalt-jade), var(--nalt-jade-oscuro)); color: #fff; border-radius: var(--nalt-radio-lg); padding: var(--nalt-espacio-4); position: relative; overflow: hidden; }
.saldo-tarjeta__etq { font-size: var(--nalt-texto-xs); opacity: .9; text-transform: uppercase; letter-spacing: .05em; }
.saldo-tarjeta__monto { font-size: 2rem; font-weight: 800; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.saldo-tarjeta__nota { font-size: var(--nalt-texto-xs); opacity: .85; }
.saldo-tarjeta .ico-flor-fondo { position: absolute; right: -10px; top: -10px; width: 96px; height: 96px; opacity: .15; --acento: #fff; color: #fff; }