/* Estilos del mostrador público — paleta placeholder (cálida, ladrillo +
   crema) hasta que Rubén defina la identidad visual real de Costurito/Suvire
   (ver pendiente de sesión dedicada en RETOMA_AQUI.md). Mobile-first: pensado
   para que un cliente lo abra desde su propio celular al escanear el QR del
   mostrador, con botones grandes y poco texto por pantalla. */

:root {
  --color-primario: #b3452e;
  --color-primario-oscuro: #8a3521;
  --color-fondo: #fdf6ec;
  --color-superficie: #ffffff;
  --color-texto: #2c2420;
  --color-texto-suave: #6b5f55;
  --color-borde: #e6d9c6;
  --color-error: #a3312a;
  --color-ok: #2f6e4f;
  --radio: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.encabezado {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-primario);
  color: #fff;
}
.encabezado h1 { margin: 0; font-size: 1.15rem; }
.encabezado .subtitulo { margin: 2px 0 0; font-size: 0.85rem; opacity: 0.9; }
.encabezado .logo { border-radius: 8px; flex-shrink: 0; }

.tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
  position: sticky;
  top: 0;
  z-index: 10;
}
.tab {
  flex: 1;
  padding: 10px 6px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  cursor: pointer;
}
.tab.activa {
  background: var(--color-primario);
  color: #fff;
}

main {
  flex: 1;
  padding: 16px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.panel { display: none; }
.panel.activo { display: block; }

.ayuda {
  font-size: 0.88rem;
  color: var(--color-texto-suave);
  margin: 0 0 16px;
  line-height: 1.4;
}

form { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 0.85rem; font-weight: 600; margin-top: 8px; }
input[type="text"], input[type="tel"] {
  padding: 12px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: 1rem;
  background: var(--color-superficie);
}
input:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; }

.boton-principal {
  margin-top: 14px;
  padding: 13px;
  border: none;
  border-radius: var(--radio);
  background: var(--color-primario);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.boton-principal:active { background: var(--color-primario-oscuro); }
.boton-principal:disabled { opacity: 0.6; cursor: default; }

.resultado { margin-top: 18px; }
.tarjeta-orden {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 14px;
}
.tarjeta-orden .estado {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef3ee;
  color: var(--color-ok);
  font-weight: 700;
  font-size: 0.85rem;
}
.tarjeta-orden ul { margin: 10px 0 0; padding-left: 18px; font-size: 0.88rem; color: var(--color-texto-suave); }
.mensaje-error {
  background: #fbeceb;
  color: var(--color-error);
  border-radius: var(--radio);
  padding: 12px;
  font-size: 0.9rem;
}
.mensaje-ok {
  background: #eaf3ee;
  color: var(--color-ok);
  border-radius: var(--radio);
  padding: 12px;
  font-size: 0.9rem;
}
.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  line-height: 1.35;
}
.consentimiento input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.pedido-resena {
  margin-top: 12px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 14px;
  text-align: center;
}
.pedido-resena p { margin: 0 0 8px; font-size: 0.92rem; color: var(--color-texto-suave); }
.pedido-resena a.boton-principal {
  display: inline-block;
  margin-top: 0;
  text-decoration: none;
  text-align: center;
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 12px;
  padding: 4px;
}
.burbuja {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 0.92rem;
  line-height: 1.35;
}
.burbuja.usuario {
  align-self: flex-end;
  background: var(--color-primario);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.burbuja.agente {
  align-self: flex-start;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-bottom-left-radius: 4px;
}
.burbuja.sistema {
  align-self: center;
  background: transparent;
  color: var(--color-texto-suave);
  font-size: 0.8rem;
  font-style: italic;
}

.form-chat { flex-direction: row; gap: 8px; }
.form-chat input { flex: 1; margin: 0; }
.form-chat .boton-principal { margin: 0; padding: 12px 18px; }

/* ACTUALIZACIÓN 143 (19/08/2026): pestaña Catálogo, modelo híbrido
   (lista + botón de consulta, ver index.html/app.js). Reusa el mismo look
   de tarjeta que .tarjeta-orden en vez de inventar un estilo nuevo. */
.lista-servicios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tarjeta-servicio {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 14px;
}
.tarjeta-servicio strong { display: block; margin-bottom: 4px; }
.tarjeta-servicio p { margin: 0 0 10px; font-size: 0.88rem; color: var(--color-texto-suave); line-height: 1.35; }
.boton-secundario {
  padding: 10px 16px;
  border: 1.5px solid var(--color-primario);
  border-radius: var(--radio);
  background: transparent;
  color: var(--color-primario);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.boton-secundario:active { background: var(--color-primario); color: #fff; }

/* ACTUALIZACIÓN 143 (19/08/2026): botones "¿sos el titular?" -- lado a lado
   en pantallas anchas, apilados en celular (mismo mobile-first del resto). */
.opciones-relacion { display: flex; gap: 8px; flex-wrap: wrap; }
.opciones-relacion .boton-secundario { flex: 1; min-width: 140px; }

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

/* ACT. 170 (24/08/2026): pantalla de bienvenida -- solo la primera vez que
   este celular abre la app (ver app.js). Animación simple con CSS puro,
   sin librerías externas (mismo criterio "liviano, sin dependencias" que ya
   sigue todo este archivo). */
.bienvenida {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 20px;
  background: linear-gradient(160deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
  animation: bienvenida-aparecer 0.35s ease-out;
}
.bienvenida[hidden] { display: none; }

.bienvenida-contenido {
  max-width: 380px;
  width: 100%;
  text-align: center;
  color: #fff;
}
.bienvenida-ilustracion {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--radio);
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: bienvenida-ilustracion-entrar 0.5s ease-out;
}
.bienvenida-contenido h1 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}
.bienvenida-contenido p {
  margin: 0 0 8px;
  font-size: 0.94rem;
  line-height: 1.42;
  opacity: 0.96;
}
.bienvenida-contenido .boton-principal {
  margin-top: 16px;
  background: #fff;
  color: var(--color-primario);
  width: 100%;
}
.bienvenida-contenido .boton-principal:active { background: #f3e8df; }

.bloque-instalar {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.instalar-texto, .instalar-texto-ios {
  margin: 0 0 10px;
  font-size: 0.86rem;
  opacity: 0.92;
}
.boton-instalar.boton-secundario {
  border-color: #fff;
  color: #fff;
  width: 100%;
}
.boton-instalar.boton-secundario:active { background: rgba(255, 255, 255, 0.2); }

@keyframes bienvenida-aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bienvenida-ilustracion-entrar {
  from { transform: scale(0.85) translateY(-8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bienvenida, .bienvenida-ilustracion { animation: none; }
}

/* 07/09/2026 (ACT.284): "Diagnóstico del mecánico" -- ver bloque-diagnostico
   en index.html. Mismo criterio de card ligera que .tarjeta-servicio (sin
   inventar un look nuevo). */
#bloque-diagnostico strong { display: block; margin-bottom: 6px; font-size: 1rem; }
#diagnostico-repuestos-lista, #diagnostico-preguntas-lista {
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#diagnostico-repuestos-lista li, #diagnostico-preguntas-lista li {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 10px 12px;
  font-size: 0.88rem;
  line-height: 1.35;
}
#diagnostico-repuestos-total { font-weight: 600; margin: 4px 0 12px; }
.galeria-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin: 6px 0 12px;
}
.galeria-fotos img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radio);
  border: 1px solid var(--color-borde);
}
.pregunta-respondida .respuesta { margin-top: 6px; color: var(--color-texto-suave); }
.pregunta-pendiente { font-style: italic; color: var(--color-texto-suave); }