/*
  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; }

/* 15-sep-2026, a pedido de Liberato: panel principal del vendedor --
   encabezado compacto (logo + nombre + estado) y lista de accesos
   rápidos, en vez de botones grandes apilados con mucho espacio. */
.panel-encabezado {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
}
.panel-encabezado img {
  width: 52px; height: 52px; border-radius: 12px; object-fit: contain;
  background: #F0F0EC; border: 1px solid var(--color-borde); flex-shrink: 0;
}
.panel-encabezado h1 { font-size: 20px; margin: 0 0 4px; line-height: 1.2; }

.panel-accesos { padding: 0; }
.fila-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  min-height: 56px;
  text-decoration: none;
  color: var(--color-texto);
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-borde);
}
.fila-menu:last-child { border-bottom: none; }
.fila-menu .flecha { color: var(--color-texto-suave); font-weight: 400; }

/* Fila horizontal compacta (Ver tienda / Compartir / Copiar enlace). */
.grupo-acciones-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.grupo-acciones-fila > * { flex: 1 1 150px; width: auto; }

/* ---------- 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; }

/* 15-sep-2026: control de cantidad del carrito -- botones grandes (44px,
   mismo piso táctil que el resto de la app) para que sumar/restar una
   pieza sea un solo toque claro, sin tener que volver al catálogo. */
.control-cantidad {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.boton-cantidad {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-marca);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.boton-cantidad:active { background: var(--color-fondo); }
.control-cantidad .cantidad-valor {
  min-width: 28px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

.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); }
/* 16-sep-2026: informativa, nunca de error -- distingue medida en pulgadas
   (offroad) de la métrica, sin insinuar un dato faltante o un problema. */
.insignia-medida-pulgadas { background: #E7EEF7; color: #2A5C99; font-size: 13px; vertical-align: middle; }

/* ---------- Pestañas (15-sep-2026: recorrido de pedidos Por entregar / Entregados / Cancelados) ---------- */
.pestanas {
  display: flex;
  gap: 6px;
  margin: 4px 0 16px;
  border-bottom: 1px solid var(--color-borde);
}
.pestana {
  flex: 1;
  padding: 10px 6px 12px;
  min-height: 44px;
  border: none;
  background: none;
  color: var(--color-texto-suave);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.pestana.activa { color: var(--color-marca); border-bottom-color: var(--color-marca); }

/* ---------- 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; }
/* 15-sep-2026: tienda-publica.html (el cliente real) y la vista previa en
   vivo de personalizacion.html siempre pedían el render con
   dispositivo=movil fijo -- nunca detectaban si quien mira de verdad está
   en una pantalla ancha, así que esa persona jamás veía el catálogo
   centrado (vista-escritorio de arriba solo lo activa el selector manual
   de "Ver como cliente"). Esta regla responde al ANCHO REAL de quien mira,
   sin depender de qué clase haya mandado el servidor. */
@media (min-width: 960px) {
  .tienda-render:not(.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); } }

/* ---------- Bloque promocional (15-sep-2026: pantalla de acceso del vendedor) ---------- */
.bloque-promocional {
  background: #E4F3E8;
  border-radius: var(--radio);
  padding: 20px;
  margin: 20px 0 0;
}
.bloque-promocional h2 {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--color-marca-oscuro);
}
.bloque-promocional p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-texto);
  margin: 0 0 10px;
}
.bloque-promocional p:last-child { margin-bottom: 0; }
.bloque-promocional strong { color: var(--color-marca-oscuro); }

.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-sku { font-size: 13px; margin: 0; color: var(--color-texto-suave); }
.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; }

/* ---------- Llantas (15-sep-2026): tarjeta + buscador, sin carrito ---------- */
.tarjeta-llanta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tarjeta-llanta .tarjeta-foto { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #eee; }
.tarjeta-llanta .tarjeta-foto img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta-llanta .tarjeta-nombre { font-size: 18px; font-weight: 800; margin: 0; }
.tarjeta-marca-modelo { font-size: 15px; margin: 0; color: var(--color-texto); }
.tarjeta-llanta .tarjeta-sku { font-size: 13px; margin: 0; color: var(--color-texto-suave); }
.tarjeta-llanta .tarjeta-precio { font-size: 19px; font-weight: 700; margin: 0; color: var(--color-marca-oscuro); }
.tarjeta-precio-pendiente { font-size: 15px !important; font-weight: 600 !important; color: var(--color-texto-suave) !important; }
.tarjeta-llanta .tarjeta-disponibilidad { font-size: 14px; margin: 0; color: var(--color-texto-suave); }
.tarjeta-descripcion summary { cursor: pointer; color: var(--color-marca); font-size: 14px; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.tarjeta-descripcion p { font-size: 14px; margin: 6px 0 0; }
.boton-whatsapp-llanta { background: #1E6B33 !important; }

.buscador-llantas {
  padding: 14px 16px;
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.buscador-llantas .buscador-tienda { width: 100%; }
.selectores-medida { display: flex; gap: 8px; }
.selectores-medida select, .buscador-llantas > select {
  flex: 1;
  min-height: var(--altura-toque);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-size: 16px;
  padding: 0 10px;
}
.contador-llantas { margin: 0; font-size: 14px; color: var(--color-texto-suave); }
.listado-llantas { padding: 14px; }

.pie-tienda { padding: 16px; text-align: center; font-size: 16px; color: var(--color-texto-suave); }
.pie-tienda p { margin: 4px 0; }
.pie-entrega, .pie-pago { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-borde); }

/* ---------- 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; }