/*
  estilos.css — sistema visual único para todas las pantallas del laboratorio.
  Reglas obligatorias de la auditoría UX/UI (sección 4):
  - móvil primero, funciona desde 320px;
  - texto normal mínimo 16px;
  - botones táctiles mínimos 48x48px;
  - una acción principal sólida + una secundaria con borde + enlaces menores;
  - sin tablas horizontales en móvil (tarjetas);
  - sin paneles fijos grandes que tapen productos;
  - contraste accesible.
*/

:root {
  --texto-base: 16px;
  --radio: 12px;
  --espacio: 16px;
  --altura-toque: 48px;

  --color-fondo: #FAFAF8;
  --color-superficie: #FFFFFF;
  --color-texto: #1B1B1B;
  --color-texto-suave: #4A4A4A;
  --color-borde: #D8D8D3;
  --color-exito: #1E6B33;
  --color-alerta: #8A5A00;
  --color-peligro: #B3261E;

  /* Tema por defecto: verde. Cada tema redefine --color-marca y --color-marca-texto. */
  --color-marca: #1E6B33;
  --color-marca-oscuro: #144B23;
  --color-marca-texto: #FFFFFF;
}

.tema-verde   { --color-marca: #1E6B33; --color-marca-oscuro: #144B23; --color-marca-texto: #FFFFFF; }
.tema-azul    { --color-marca: #1955A6; --color-marca-oscuro: #123C79; --color-marca-texto: #FFFFFF; }
.tema-morado  { --color-marca: #6A2E9C; --color-marca-oscuro: #4E2075; --color-marca-texto: #FFFFFF; }
.tema-naranja { --color-marca: #B15600; --color-marca-oscuro: #8A4300; --color-marca-texto: #FFFFFF; }
.tema-rosa    { --color-marca: #A6215B; --color-marca-oscuro: #7C1843; --color-marca-texto: #FFFFFF; }
.tema-gris    { --color-marca: #33393D; --color-marca-oscuro: #1F2224; --color-marca-texto: #FFFFFF; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--texto-base);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

body { min-width: 320px; }

img { max-width: 100%; display: block; }

a { color: var(--color-marca); }

.contenedor {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--espacio);
}

@media (min-width: 900px) {
  .contenedor { max-width: 720px; }
}

/* ---------- Cabecera de progreso del asistente ---------- */
.barra-progreso {
  position: sticky;
  top: 0;
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
  padding: 10px var(--espacio);
  z-index: 5;
}
.barra-progreso .paso-texto {
  font-size: 16px;
  color: var(--color-texto-suave);
  margin: 0 0 6px 0;
}
.barra-progreso .riel {
  height: 6px;
  background: var(--color-borde);
  border-radius: 4px;
  overflow: hidden;
}
.barra-progreso .relleno {
  height: 100%;
  background: var(--color-marca);
  transition: width 0.2s ease;
}

/* ---------- Tipografía ---------- */
h1 { font-size: 24px; margin: 8px 0 8px; }
h2 { font-size: 20px; margin: 24px 0 8px; }
p  { font-size: 16px; color: var(--color-texto-suave); margin: 0 0 12px; }
label { font-size: 16px; font-weight: 600; display: block; margin: 16px 0 6px; }
.ayuda { font-size: 16px; color: var(--color-texto-suave); margin-top: -4px; }

/* ---------- Campos ---------- */
input[type="text"], input[type="search"], input[type="tel"], input[type="email"],
input[type="number"], textarea, select {
  width: 100%;
  min-height: var(--altura-toque);
  font-size: 16px; /* evita zoom automático en iOS */
  padding: 10px 14px;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  color: var(--color-texto);
}
input:focus, textarea:focus, select:focus, button:focus {
  outline: 3px solid #1955A6;
  outline-offset: 2px;
}
textarea { min-height: 88px; resize: vertical; }

/* ---------- Botones ---------- */
/*
 * Punto 4 del alcance de producción (14-sep-2026): la regla `button {
 * display: inline-flex }` de abajo, al venir de la hoja de estilos del
 * propio sitio (origen "autor"), le gana SIEMPRE a la regla por defecto
 * del navegador `[hidden] { display: none }` (origen "user-agent") --
 * el origen de la hoja decide antes que la especificidad, sin importar el
 * orden. Resultado real: cualquier <button hidden> quedaba VISIBLE, aunque
 * el atributo estuviera puesto correctamente. Nadie lo había disparado
 * antes (ningún botón usaba `hidden`) hasta el carrito del comprador (ver
 * comun.js: activarCarritoTienda). Se restaura el comportamiento estándar
 * de forma explícita, para cualquier elemento, no solo botones.
 */
[hidden] { display: none !important; }

button, .boton-principal, .boton-secundario, .boton-texto {
  font-size: 16px;
  min-height: var(--altura-toque);
  border-radius: var(--radio);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: none;
}

.boton-principal {
  width: 100%;
  background: var(--color-marca);
  color: var(--color-marca-texto);
}
.boton-principal:active { background: var(--color-marca-oscuro); }
.boton-principal:disabled {
  background: #C9C9C4;
  color: #6E6E6E;
  cursor: not-allowed;
}

.boton-secundario {
  width: 100%;
  background: var(--color-superficie);
  color: var(--color-marca);
  border: 2px solid var(--color-marca);
}

.boton-texto {
  background: none;
  color: var(--color-texto-suave);
  min-height: var(--altura-toque);
  text-decoration: underline;
  padding: 0 4px;
}

.boton-peligro { color: var(--color-peligro); border-color: var(--color-peligro); }

.grupo-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/*
 * Parche 1.1.1, punto 7: esta barra de acción YA NO es fija -- se retiró
 * `position: fixed` (auditoría: "las acciones deben desplazarse con la
 * página"). Ahora es un bloque normal al final del contenido, en el flujo
 * natural de la página, como cualquier otra sección.
 */
/* 15-sep-2026, a pedido de Liberato: mismos botones de "Continuar" / "Ver
   como cliente" / "Volver", pero arriba del contenido -- con hasta 300
   productos seleccionados, dejarlos solo al final de la página los volvía
   invisibles sin desplazarse hasta abajo. */
.barra-accion-superior {
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
  padding: 0 0 16px;
  margin: 0 0 20px;
  display: flex;
  gap: 10px;
}
.barra-accion-superior .boton-principal,
.barra-accion-superior .boton-secundario { flex: 1; }

/* ---------- Tarjetas (nunca tablas horizontales) ---------- */
.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 14px;
  margin-bottom: 12px;
}

.tarjeta-fila {
  display: flex;
  gap: 12px;
  align-items: center;
}
/* Punto 9 de la auditoría Etapa 1.1: mostrar el producto COMPLETO, nunca
   recortarlo — object-fit: contain (nunca cover) en toda foto de producto.
   El fondo #F0F0EC rellena el espacio que deja "contain" sin recortar nada. */
.tarjeta-fila img { width: 64px; height: 64px; border-radius: 8px; object-fit: contain; background: #F0F0EC; flex-shrink: 0; }
.tarjeta-fila .info { flex: 1; min-width: 0; }
.tarjeta-fila .info h3 { font-size: 16px; margin: 0 0 2px; }
.tarjeta-fila .info p { margin: 0; font-size: 16px; }

.insignia {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #EEEFE9;
  color: var(--color-texto-suave);
}
.insignia-exito { background: #E4F3E8; color: var(--color-exito); }
.insignia-alerta { background: #FBF0DB; color: var(--color-alerta); }
.insignia-peligro { background: #FBE7E5; color: var(--color-peligro); }

/* ---------- Contador de productos ---------- */
.contador-productos {
  position: sticky;
  top: 48px;
  z-index: 4;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 10px 14px;
  margin: 12px 0;
  font-weight: 700;
  text-align: center;
}
.contador-productos.contador-lleno { color: var(--color-peligro); border-color: var(--color-peligro); }

/* ---------- Vista previa de tienda (RenderizadorCompartido) ---------- */
.banda-vista-previa {
  background: #33393D;
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 10px;
  font-size: 16px;
  position: sticky;
  top: 0;
  z-index: 6;
}
.tienda-render { background: var(--color-fondo); }
.tienda-render.vista-escritorio { max-width: 900px; margin: 0 auto; }
.encabezado-tienda {
  background: var(--color-marca);
  color: var(--color-marca-texto);
  padding: 20px var(--espacio) 16px;
  text-align: center;
}
.encabezado-tienda .logo-tienda {
  /* 15-sep-2026: object-fit: contain (nunca cover) -- el logotipo se ve
     COMPLETO, sin recortar ni deformar, mismo criterio que las fotos de
     producto (ver arriba). Ya no es un círculo forzado (cover+circulo
     recortaba cualquier logo que no fuera cuadrado); fondo blanco relleno
     para logos con transparencia o que no llenan el cuadro. */
  width: 72px; height: 72px; border-radius: 14px;
  margin: 0 auto 10px; object-fit: contain; border: 3px solid #fff; background: #fff;
}
.encabezado-tienda .nombre-tienda { font-size: 22px; margin: 0 0 4px; color: #fff; }
.encabezado-tienda .frase-tienda, .encabezado-tienda .zona-tienda { color: rgba(255,255,255,0.9); margin: 0 0 4px; font-size: 16px; }
.encabezado-tienda .boton-whatsapp {
  margin-top: 12px; background: #fff; color: var(--color-marca-oscuro); width: 100%;
}
.encabezado-tienda .buscador-tienda {
  margin-top: 14px; width: 100%; border: none;
}

.listado-productos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: var(--espacio);
}
@media (min-width: 640px) { .listado-productos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .listado-productos { grid-template-columns: repeat(4, 1fr); } }

.tarjeta-producto {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Punto 9: object-fit: contain (nunca cover) — el producto se ve COMPLETO. */
.tarjeta-foto { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #eee; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta-nombre { font-size: 16px; margin: 0; min-height: 2.6em; }
.tarjeta-precio { font-size: 17px; font-weight: 700; margin: 0; color: var(--color-marca-oscuro); }
.tarjeta-disponibilidad { font-size: 16px; margin: 0; color: var(--color-texto-suave); }
.selector-tallas { display: flex; flex-wrap: wrap; gap: 10px; }
.selector-tallas .talla {
  min-width: 48px; min-height: 48px; border: 1.5px solid var(--color-borde); border-radius: 8px;
  background: #fff; font-size: 16px;
}
.selector-tallas .talla[aria-pressed="true"] {
  border-color: var(--color-marca); background: var(--color-marca); color: var(--color-marca-texto); font-weight: 700;
}
.selector-tallas .talla-agotada { color: #9A9A9A; background: #F0F0EC; text-decoration: line-through; }
.mensaje-vacio { grid-column: 1 / -1; text-align: center; color: var(--color-texto-suave); padding: 40px 10px; }

.pie-tienda { padding: 16px; text-align: center; font-size: 16px; color: var(--color-texto-suave); }

/* ---------- Aviso de diagnóstico de laboratorio (NUNCA visible en Ver como cliente) ---------- */
.aviso-diagnostico {
  background: #FBF0DB;
  border: 1.5px dashed var(--color-alerta);
  color: #5A3B00;
  border-radius: var(--radio);
  padding: 10px 14px;
  font-size: 16px;
  margin: 12px 0;
}

.selector-dispositivo {
  display: flex;
  gap: 10px;
  padding: 10px var(--espacio);
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
}
.selector-dispositivo button { flex: 1; min-height: var(--altura-toque); background: #F0F0EC; color: var(--color-texto); }
.selector-dispositivo button[aria-pressed="true"] { background: var(--color-marca); color: var(--color-marca-texto); }

/* ---------- Utilidades ---------- */
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.confirmacion-guardado { font-size: 16px; color: var(--color-exito); font-weight: 600; min-height: 20px; }
.centro { text-align: center; }

/* ---------- Punto 10: opciones de color (Paso 1) con área de toque >=48px
   y separación clara entre opciones, para evitar toques equivocados. ---------- */
.opcion-color {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin: 0;
  min-height: var(--altura-toque);
  padding: 8px 12px;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio);
}
.opcion-color input[type="radio"] { width: 24px; height: 24px; flex-shrink: 0; }
.opcion-color:has(input:checked) { border-color: var(--color-marca); border-width: 2px; }