/* ============================================================
   Recursos Cristianos Argentina · Estilos comunes del canal mayorista
   (catálogo de clientes "/" y app interna "/app/").

   Los colores y tipografías son los de la tienda (store/src/index.css).
   Además hay variantes medidas para que el texto se lea bien (contraste
   WCAG AA: 4,5:1 en texto normal, 3:1 en íconos y bordes):
   - El dorado de marca (#C29F5D) es decorativo: como texto chico se usa
     --dorado-texto; sobre fondo dorado el texto va en azul marino.
   - El verde de WhatsApp lleva texto azul marino (blanco no se lee).
   ============================================================ */
:root {
  /* Marca (iguales a la tienda) */
  --primario: #060f2d;          /* azul marino */
  --crema: #f6f1e4;             /* fondo de la tienda */
  --dorado: #C29F5D;            /* acento (fondos, bordes, decoración) */
  --madera: #8B6D53;
  --fondo: var(--crema);
  --tarjeta: #ffffff;
  --texto: var(--primario);
  --borde: rgba(139, 109, 83, .22);

  /* Variantes accesibles */
  --dorado-texto: #7a5c24;      /* 5,5:1 sobre crema */
  --dorado-suave: #f8eed8;      /* fondo de destacados / elegidos */
  --texto-suave: #6f6556;       /* 5,1:1 sobre crema */
  --primario-suave: #efe6d2;    /* fondos de miniaturas y chips secundarios */
  --madera-texto: #6f543d;      /* 5,6:1 sobre --primario-suave */
  --verde: #15803d;             /* éxito (5:1 sobre blanco) */
  --verde-texto: #166534;       /* texto verde sobre --verde-suave (6,5:1) */
  --verde-suave: #e8f5ec;
  --verde-wa: #25d366;          /* botones de WhatsApp: con texto marino */
  --rojo: #b91c1c;              /* promo, borrar, errores (6,5:1 con blanco) */
  --amarillo: #fef3c7;
  --amarillo-texto: #92400e;

  --radio: 16px;
  --radio-chico: 12px;
  --sombra: 0 1px 2px rgba(6, 15, 45, .05), 0 6px 18px rgba(6, 15, 45, .06);
  --sombra-flotante: 0 8px 24px rgba(6, 15, 45, .3);
  --serif: 'Noto Serif', Georgia, serif;
  --sans: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --toque: 44px;                /* área táctil mínima */
  --safe-abajo: env(safe-area-inset-bottom, 0px);
  --safe-arriba: env(safe-area-inset-top, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { color-scheme: light; }
body {
  font-family: var(--sans);
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 16px; color: var(--texto); } /* 16px evita el zoom de iOS */
img { display: block; }
a { color: inherit; }

/* Foco visible para teclado (no aparece al tocar con el dedo) */
:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 6px; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Íconos (sprite /iconos.svg) ---------- */
.icono {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icono.chico { width: 16px; height: 16px; }
.icono.grande { width: 28px; height: 28px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--toque); padding: 0 18px; border-radius: var(--radio-chico);
  font-size: 15px; font-weight: 800; line-height: 1.15; text-align: center; text-decoration: none;
  transition: transform .1s, background .15s, opacity .15s;
}
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .55; cursor: default; transform: none; }
.boton.primario { background: var(--primario); color: var(--crema); }
.boton.secundario { background: var(--tarjeta); color: var(--primario); border: 1.5px solid var(--borde); }
.boton.suave { background: var(--fondo); color: var(--primario); }
.boton.dorado { background: var(--dorado); color: var(--primario); }
.boton.whatsapp { background: var(--verde-wa); color: var(--primario); }
.boton.exito { background: var(--verde); color: #fff; }
.boton.peligro { background: none; color: var(--rojo); }
.boton.bloque { width: 100%; }
.boton-icono {
  width: var(--toque); height: var(--toque); border-radius: var(--radio-chico);
  display: inline-grid; place-items: center; flex-shrink: 0;
}

/* ---------- Chips de categorías ---------- */
.fila-chips {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fila-chips::-webkit-scrollbar { display: none; }
.fila-chips.hijas { padding-top: 6px; }
.chip {
  flex-shrink: 0; min-height: var(--toque); padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  background: var(--tarjeta); color: var(--texto-suave); border: 1px solid var(--borde);
}
.chip.activo { background: var(--primario); border-color: var(--primario); color: var(--crema); }
.fila-chips.hijas .chip { min-height: 40px; font-size: 13px; background: var(--primario-suave); color: var(--madera-texto); border-color: transparent; }
.fila-chips.hijas .chip.activo { background: var(--madera-texto); color: #fff; }

/* ---------- Buscador ---------- */
.campo-busqueda {
  display: flex; align-items: center; gap: 8px;
  background: var(--tarjeta); border-radius: 999px; padding: 0 4px 0 16px;
  border: 1.5px solid var(--borde);
}
.campo-busqueda:focus-within { border-color: var(--primario); }
.campo-busqueda > .icono { color: var(--texto-suave); }
.campo-busqueda input { flex: 1; border: none; outline: none; min-height: var(--toque); background: none; min-width: 0; }
.campo-busqueda input::placeholder { color: var(--texto-suave); }
.campo-busqueda .limpiar { width: 40px; height: 40px; border-radius: 999px; display: none; place-items: center; color: var(--texto-suave); }
.campo-busqueda.con-texto .limpiar { display: grid; }

/* ---------- Stepper de cantidad (la cantidad se puede escribir) ---------- */
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  min-width: var(--toque); height: var(--toque); border-radius: var(--radio-chico);
  display: grid; place-items: center; font-weight: 800;
}
.stepper .menos { background: var(--fondo); color: var(--primario); }
.stepper .mas { background: var(--primario); color: var(--crema); }
.stepper button:active { transform: scale(.94); }
.stepper .boton { display: inline-flex; padding: 0 12px; }
.stepper .cantidad {
  width: 52px; height: var(--toque); border-radius: 10px; text-align: center;
  font-size: 17px; font-weight: 800; border: 1.5px solid transparent; background: transparent;
}
.stepper .cantidad:focus { outline: none; border-color: var(--primario); background: #fff; }

/* ---------- Interruptor ---------- */
.interruptor { position: relative; width: 50px; height: 30px; flex-shrink: 0; display: block; }
/* zona táctil de 44px alrededor del interruptor */
.interruptor::before { content: ''; position: absolute; inset: -8px -2px; }
.interruptor input { opacity: 0; width: 0; height: 0; position: absolute; }
.interruptor .pista {
  position: absolute; inset: 0; border-radius: 999px; background: #fff;
  border: 2px solid var(--madera); transition: background .2s, border-color .2s; cursor: pointer;
}
.interruptor .pista::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 999px; background: var(--madera); transition: transform .2s, background .2s;
}
.interruptor input:checked + .pista { background: var(--verde); border-color: var(--verde); }
.interruptor input:checked + .pista::after { transform: translateX(20px); background: #fff; }
.interruptor input:focus-visible + .pista { outline: 2px solid var(--primario); outline-offset: 2px; }
.interruptor input:disabled + .pista { opacity: .45; cursor: default; }

/* ---------- Etiquetas (badges) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; line-height: 1.2; white-space: nowrap;
}
.badge.destacado { background: var(--dorado); color: var(--primario); }
.badge.promo { background: var(--rojo); color: #fff; }
.badge.info { background: rgba(6, 15, 45, .72); color: #fff; }
.badge.aviso { background: var(--amarillo); color: var(--amarillo-texto); }
.badge.neutro { background: var(--primario-suave); color: var(--madera-texto); }

/* ---------- Fotos: esqueleto mientras cargan ---------- */
.foto-carga {
  position: relative; overflow: hidden; background: var(--primario-suave);
  display: grid; place-items: center; color: var(--madera);
}
.foto-carga > .icono { width: 34%; height: 34%; max-width: 48px; max-height: 48px; opacity: .55; }
.foto-carga img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s; background: #fff;
}
.foto-carga img.cargada { opacity: 1; }
.foto-carga.cargando::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  animation: brillo 1.3s infinite;
}
@keyframes brillo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Hoja inferior ---------- */
.fondo-hoja {
  position: fixed; inset: 0; z-index: 60; background: rgba(6, 15, 45, .45);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.fondo-hoja.visible { opacity: 1; pointer-events: auto; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  max-width: 640px; margin: 0 auto;
  background: var(--tarjeta); border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(24px + var(--safe-abajo));
  transform: translateY(105%); transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  max-height: 90vh; overflow-y: auto;
}
.hoja.visible { transform: none; }
.hoja .manija { width: 40px; height: 5px; border-radius: 999px; background: var(--borde); margin: 0 auto 16px; }
.hoja h3 { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--primario); margin-bottom: 8px; }

/* ---------- Campos de formulario ---------- */
.grupo-campo { margin-bottom: 14px; }
.grupo-campo > label, .etiqueta-campo { display: block; font-size: 14px; font-weight: 700; color: var(--texto-suave); margin-bottom: 6px; }
.campo {
  width: 100%; min-height: 48px; border: 1.5px solid var(--borde); border-radius: 14px; padding: 12px 14px;
  outline: none; font-weight: 600; background: var(--fondo);
}
.campo:focus { border-color: var(--primario); background: #fff; }
.campo.invalido { border-color: var(--rojo); background: #fff; }
.mensaje-error { font-size: 13px; font-weight: 700; color: var(--rojo); margin-top: 6px; }

/* ---------- Aviso emergente ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(110px + var(--safe-abajo)); z-index: 130;
  transform: translateX(-50%) translateY(16px);
  background: var(--primario); color: #fff; font-size: 14px; font-weight: 700;
  padding: 12px 22px; border-radius: 999px; box-shadow: var(--sombra-flotante);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  max-width: 88vw; text-align: center;
}
.toast.visible { opacity: 1; transform: translateX(-50%); }

/* ---------- Estados vacíos / carga / error ---------- */
.estado-vacio { text-align: center; padding: 48px 28px; color: var(--texto-suave); }
.estado-vacio .icono { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--madera); }
.estado-vacio p { font-size: 15px; font-weight: 600; line-height: 1.5; }
.estado-vacio .boton { margin-top: 16px; }
.aviso-cache {
  padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 700;
  background: var(--amarillo); color: var(--amarillo-texto); display: none;
}
.aviso-cache.visible { display: flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}