/**
 * DR. EVERT · COTIZADOR — estilos de la SPA.
 * ============================================================================
 * Móvil-first (§6: la mayoría llega desde pauta en el celular). Consume los
 * tokens del tema (--dr-*): el plugin no escribe ningún valor de marca a mano
 * (§0.3.1). Si el tema no está activo, la app funciona igual pero sin la piel
 * de marca — los plugins no dependen del tema (§0.3.5).
 * ============================================================================
 */

.dr-cotizador {
  max-width: 640px;
  margin-inline: auto;
  min-height: 60vh;
}

/* --------------------------------------------------------------------------
   Progreso
   -------------------------------------------------------------------------- */

.dr-cotizador__progreso {
  margin-bottom: var(--dr-esp-lg);
}

.dr-cotizador__progreso-texto {
  display: block;
  font-size: var(--dr-texto-xs);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dr-acento);
  margin-bottom: var(--dr-esp-2xs);
}

.dr-cotizador__progreso-barra {
  display: block;
  height: 2px;
  background-color: var(--dr-borde);
  border-radius: var(--dr-radio-full);
  overflow: hidden;
}

.dr-cotizador__progreso-barra > span {
  display: block;
  height: 100%;
  background: var(--dr-degradado-superficie);
  transition: width var(--dr-transicion);
}

/* --------------------------------------------------------------------------
   Título y textos del paso
   -------------------------------------------------------------------------- */

.dr-cotizador__titulo {
  outline: none; /* recibe foco al cambiar de paso, sin anillo visual */
}

.dr-cotizador__ayuda,
.dr-cotizador__pregunta {
  color: var(--dr-texto-tenue);
}

.dr-cotizador__pregunta {
  font-weight: var(--dr-peso-medio);
  color: var(--dr-texto);
  margin-top: var(--dr-esp-md);
}

/* --------------------------------------------------------------------------
   Opciones (botones de respuesta)
   -------------------------------------------------------------------------- */

.dr-cotizador__opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--dr-esp-sm);
  margin-block: var(--dr-esp-md);
}

.dr-cotizador__opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dr-esp-2xs);
  padding: var(--dr-esp-sm);
  min-height: 56px; /* objetivo táctil cómodo */
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-sm);
  font-weight: var(--dr-peso-medio);
  text-align: center;
  color: var(--dr-texto);
  background-color: var(--dr-fondo-elevado);
  border: 1px solid var(--dr-borde);
  border-radius: var(--dr-radio-md);
  cursor: pointer;
  transition: border-color var(--dr-transicion-rapida),
              color var(--dr-transicion-rapida),
              background-color var(--dr-transicion-rapida);
}

.dr-cotizador__opcion:hover {
  border-color: var(--dr-acento);
}

.dr-cotizador__opcion.es-activa {
  border-color: var(--dr-acento);
  color: var(--dr-acento);
  background-color: var(--dr-fondo);
}

/* Las ilustraciones de la escala, en línea oro (§6 paso 3). */
.dr-cotizador__figura {
  width: 72px;
  height: auto;
  color: var(--dr-acento);
}

.dr-cotizador__opciones--chips {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* --------------------------------------------------------------------------
   Fotos guiadas — motor de captura (fusión del 17-ago)
   -------------------------------------------------------------------------- */

/* Sugerencia de continuar desde el celular (solo se pinta en escritorio). */
.dr-cotizador__nota-movil {
  padding: var(--dr-esp-sm);
  border: 1px solid var(--dr-acento);
  border-radius: var(--dr-radio-md);
  font-size: var(--dr-texto-sm);
  color: var(--dr-texto);
}

/* Mini-grilla de tomas: hechas con miniatura, pendientes con su silueta. */
.dr-cotizador__tomas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--dr-esp-2xs);
  margin-block: var(--dr-esp-md);
}

.dr-cotizador__toma {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dr-esp-3xs);
  padding: var(--dr-esp-2xs);
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-xs);
  color: var(--dr-texto-tenue);
  background-color: var(--dr-fondo-elevado);
  border: 1px solid var(--dr-borde);
  border-radius: var(--dr-radio-md);
  cursor: pointer;
}

.dr-cotizador__toma svg {
  width: 44px;
  height: auto;
  color: var(--dr-texto-tenue);
  opacity: 0.6;
}

.dr-cotizador__toma img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--dr-radio-sm);
}

.dr-cotizador__toma.es-actual {
  border-color: var(--dr-acento);
  color: var(--dr-acento);
}

.dr-cotizador__toma.es-hecha {
  color: var(--dr-texto);
}

/* Escena de captura: cámara (o foto tomada) con la silueta superpuesta. */
.dr-cotizador__marco {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 420px;
  margin-inline: auto;
  background-color: var(--dr-fondo-elevado);
  border: 1px solid var(--dr-borde);
  border-radius: var(--dr-radio-lg);
  overflow: hidden;
}

.dr-cotizador__marco video,
.dr-cotizador__marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La cámara delantera se muestra en espejo, como espera cualquier persona. */
.dr-cotizador__marco.es-espejo video {
  transform: scaleX(-1);
}

/* La silueta de guía flota sobre la imagen, en oro, sin capturar toques. */
.dr-cotizador__silueta {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 86%;
  width: auto;
  color: var(--dr-acento);
  opacity: 0.85;
  pointer-events: none;
}

.dr-cotizador__nav--tomas {
  margin-top: var(--dr-esp-md);
  justify-content: center;
}

/* Código de caso en la pantalla final. */
.dr-cotizador__codigo {
  font-family: var(--dr-fuente-display);
  font-size: var(--dr-texto-2xl);
  letter-spacing: var(--dr-tracking-display);
  color: var(--dr-acento);
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

.dr-cotizador__campo label {
  display: block;
  font-size: var(--dr-texto-sm);
  font-weight: var(--dr-peso-medio);
}

.dr-cotizador__campo input {
  display: block;
  width: 100%;
  margin-top: var(--dr-esp-3xs);
  padding: var(--dr-esp-xs) var(--dr-esp-sm);
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-base);
  color: var(--dr-texto);
  background-color: var(--dr-fondo-elevado);
  border: 1px solid var(--dr-borde);
  border-radius: var(--dr-radio-md);
}

.dr-cotizador__campo input:focus {
  border-color: var(--dr-acento);
  outline: none;
}

.dr-cotizador__habeas label {
  display: flex;
  gap: var(--dr-esp-2xs);
  align-items: flex-start;
  font-size: var(--dr-texto-xs);
  color: var(--dr-texto-tenue);
}

.dr-cotizador__habeas input {
  margin-top: 0.2em;
  accent-color: var(--dr-acento);
}

/* Honeypot: fuera de la vista, no un display:none (algunos bots lo detectan). */
.dr-cotizador__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Navegación y avisos
   -------------------------------------------------------------------------- */

.dr-cotizador__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dr-esp-sm);
  margin-top: var(--dr-esp-lg);
}

.dr-cotizador__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--dr-esp-xs) var(--dr-esp-md);
  min-height: 48px;
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-sm);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-boton);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--dr-radio-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dr-transicion), color var(--dr-transicion);
}

.dr-cotizador__boton--primario {
  background-color: var(--dr-acento);
  color: var(--dr-sobre-acento);
}

.dr-cotizador__boton--primario:hover {
  background-color: var(--dr-acento-hover);
  color: var(--dr-sobre-acento);
}

.dr-cotizador__boton--primario:disabled {
  opacity: 0.7;
  cursor: wait;
}

.dr-cotizador__boton--secundario {
  background-color: transparent;
  color: var(--dr-texto);
  border-color: var(--dr-acento);
}

.dr-cotizador__boton--secundario:hover {
  background-color: var(--dr-acento);
  color: var(--dr-sobre-acento);
}

.dr-cotizador__error {
  color: var(--dr-error);
  font-size: var(--dr-texto-sm);
  margin-top: var(--dr-esp-sm);
}

/* --------------------------------------------------------------------------
   Resultado
   -------------------------------------------------------------------------- */

.dr-cotizador__resultado .dr-cotizador__titulo {
  color: var(--dr-acento);
}

.dr-cotizador__nota {
  padding-left: var(--dr-esp-sm);
  border-left: 2px solid var(--dr-acento);
  color: var(--dr-texto-tenue);
  font-size: var(--dr-texto-sm);
}

.dr-cotizador__disclaimer {
  margin-top: var(--dr-esp-lg);
  font-size: var(--dr-texto-xs);
  color: var(--dr-texto-tenue);
}