/* Remates engine — ajustes que no salen de una utility de Tailwind.
   El resto del estilado vive en las clases de las vistas. */

:root {
  --remates-ink: #0f172a;
  --remates-accent: #f59e0b;
}

/* La grilla de filtros scrollea horizontal en mobile: sin esto la barra de
   scroll tapa los chips en Android. */
.remates-scroll-x {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.remates-scroll-x::-webkit-scrollbar {
  display: none;
}

/* Los inputs de 16px son lo único que evita el zoom automático de iOS al
   enfocar un campo del buscador. */
.remates-no-zoom {
  font-size: 16px;
}

/* Barra apilada del análisis: la transición hace que el cambio de filtro se
   lea como un movimiento y no como un salto. */
.remates-bar {
  transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .remates-bar {
    transition: none;
  }
}

/* Impresión: el informe se descarga por "Guardar como PDF" del navegador, así
   que la hoja impresa ES el entregable. Se saca todo el chrome del sitio y se
   evita que las secciones se partan al medio entre páginas. */
@media print {
  @page {
    margin: 14mm;
  }

  body {
    background: #fff;
  }

  /* Los fondos de color son parte de la información —el estado del análisis
     crediticio se lee por color—, así que se fuerzan a imprimirse. */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .remates-print-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* El informe ocupa la hoja entera: sin el ring ni el ancho máximo de pantalla. */
  .remates-print-sheet {
    max-width: none;
    padding: 0;
    box-shadow: none;
  }
}

/* Stepper del formulario del informe. Va en CSS y no en utilidades de Tailwind
   porque los tres estados (pendiente / actual / hecho) los maneja el Stimulus
   con un `data-state`, y expresar eso con variantes arbitrarias quedaba
   ilegible. */
.remates-steps {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.remates-step {
  position: relative;
  flex: 1;
  text-align: center;
}

/* La línea que une un paso con el anterior: es la barra de progreso. */
.remates-step + .remates-step::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: #e2e8f0;
  transition: background-color 300ms ease;
}

.remates-step[data-state="done"] + .remates-step::before {
  background: #0f172a;
}

.remates-step__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border-radius: 9999px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #e2e8f0;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  transition: background-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
}

.remates-step[data-state="current"] .remates-step__dot {
  background: #f59e0b;
  box-shadow: 0 0 0 4px #fef3c7;
  color: #0f172a;
}

.remates-step[data-state="done"] .remates-step__dot {
  background: #0f172a;
  box-shadow: none;
  color: #fff;
}

/* El número se cambia por un tilde cuando el paso ya se completó. */
.remates-step__check {
  display: none;
}

.remates-step[data-state="done"] .remates-step__check {
  display: block;
}

.remates-step[data-state="done"] .remates-step__number {
  display: none;
}

.remates-step__label {
  display: block;
  margin-top: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  transition: color 250ms ease;
}

.remates-step[data-state="current"] .remates-step__label {
  color: #0f172a;
}

.remates-step[data-state="done"] .remates-step__label {
  color: #475569;
}

/* Cada paso entra con un desplazamiento corto: da la sensación de avance sin
   que el formulario parpadee. */
.remates-step-panel {
  animation: remates-step-in 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes remates-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .remates-step-panel {
    animation: none;
  }

  .remates-step__dot,
  .remates-step__label,
  .remates-step + .remates-step::before {
    transition: none;
  }
}

/* Pantalla de procesamiento entre el pago y el informe. */
.remates-processing {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgb(15 23 42 / 0.75);
  backdrop-filter: blur(4px);
  animation: remates-fade-in 200ms ease;
}

@keyframes remates-fade-in {
  from {
    opacity: 0;
  }
}

.remates-processing__task {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3rem 0;
  color: #94a3b8;
  font-size: 0.875rem;
  transition: color 200ms ease;
}

.remates-processing__task[data-state="doing"] {
  color: #0f172a;
  font-weight: 600;
}

.remates-processing__task[data-state="done"] {
  color: #475569;
}

/* Cada tarea tiene tres marcas y se muestra la del estado actual. */
.remates-processing__task > [data-mark] {
  display: none;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.remates-processing__task[data-state="pending"] > [data-mark="pending"],
.remates-processing__task[data-state="doing"] > [data-mark="doing"],
.remates-processing__task[data-state="done"] > [data-mark="done"] {
  display: block;
}

.remates-spin {
  animation: remates-spin 700ms linear infinite;
}

@keyframes remates-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .remates-spin {
    animation: none;
  }

  .remates-processing {
    animation: none;
  }
}