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

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

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

/* Columna flex y no bloque: un hijo más ancho que el paso desborda parejo hacia
   los dos lados, así que el punto y el rótulo siguen centrados mientras el paso
   del titular 2 crece desde ancho cero. `min-width: 0` es lo que deja que llegue
   a cero: sin él, el flex no lo achica por debajo del punto y del rótulo. */
.remates-step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
  transition:
    flex-grow 320ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 240ms ease,
    visibility 320ms;
}

/* El paso que prende una casilla (el titular 2). Apagado queda con ancho cero y
   los demás se reparten el lugar; al prenderse crece y los otros se corren, que
   es lo que hace notar que tildar tuvo efecto. `flex-grow` es animable y
   `display` no: por eso no se esconde con `hidden`. `visibility` con transición
   espera al final para esconderse y se muestra apenas arranca. */
.remates-step[data-active="false"] {
  flex-grow: 0;
  opacity: 0;
  visibility: hidden;
}

/* La línea que une un paso con el anterior: es la barra de progreso. El paso
   apagado mide cero, así que la línea del siguiente llega hasta el centro del
   anterior prendido; el wizard le da al apagado el estado que le toca por su
   posición, y el color sale bien sin saltearlo. */
.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;
}

/* `overflow: hidden` recorta el número mientras entra deslizándose; el halo del
   paso actual es un `box-shadow`, que no se recorta. */
.remates-step__dot {
  position: relative;
  z-index: 1;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  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,
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.remates-step[data-active="false"] .remates-step__dot {
  transform: scale(0.3);
}

.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__number {
  display: block;
}

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

/* Cuando la casilla suma o saca un paso, los que cambian de número lo reciben
   con un deslizamiento corto: entra desde abajo si subió y desde arriba si
   bajó. El wizard pone el atributo sólo al tildar o destildar, así que el
   primer render no se anima. */
.remates-step[data-renumbered="up"] .remates-step__number {
  animation: remates-step-renumber-up 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.remates-step[data-renumbered="down"] .remates-step__number {
  animation: remates-step-renumber-down 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes remates-step-renumber-up {
  from {
    opacity: 0;
    transform: translateY(110%);
  }
}

@keyframes remates-step-renumber-down {
  from {
    opacity: 0;
    transform: translateY(-110%);
  }
}

/* `nowrap` porque con cuatro pasos en un celular de 360 px quedan unos 80 px
   por rótulo, y mientras el paso nuevo crece desde cero un rótulo que se
   partiera en dos renglones haría saltar el alto de la fila. */
.remates-step__label {
  display: block;
  margin-top: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  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);
  }
}

/* Sin movimiento el paso igual aparece y desaparece, y los números igual
   cambian: lo que se va es la transición, no el cambio. */
@media (prefers-reduced-motion: reduce) {
  .remates-step-panel {
    animation: none;
  }

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

  .remates-step[data-renumbered] .remates-step__number {
    animation: none;
  }
}

/* El overlay que tapa el viaje a la pasarela. La coreografía de cuatro tareas
   que vivía adentro (.remates-processing__task y sus marcas) se fue con el
   embudo invertido: ese POST ya no arma el informe, sólo crea la orden. */
.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-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;
  }
}

/* Barra fija del CTA en mobile. El padding va acá y no en una utility porque
   tiene que respetar el `safe-area-inset` del iPhone: con `viewport-fit=cover`
   en el layout, un `py-3` pelado deja el botón abajo de la barra de gestos. */
.remates-sticky-cta {
  padding-top: 0.625rem;
  padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
}

/* El botón flotante de compartir. El `bottom` va acá y no en una utility por lo
   mismo que la barra de arriba: tiene que respetar el `safe-area-inset` del
   iPhone, que ninguna clase de Tailwind conoce, y con `viewport-fit=cover` un
   `bottom-4` pelado lo deja abajo de la barra de gestos. */
.remates-share-float {
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* La ficha y la guía tienen la barra fija del CTA ocupando el borde inferior en
   mobile, y esa barra es el botón que cobra: el de compartir se corre arriba de
   ella. Los 5,5rem salen de su alto real (0,625rem + 44px del botón + 0,625rem),
   más un respiro. El `safe-area` no se suma dos veces: la barra ya lo absorbe en
   su padding, así que acá mide desde el mismo borde. */
.remates-share-float-raised {
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

/* Desde `lg` la barra no se dibuja (`lg:hidden`), así que no hay nada que
   esquivar. */
@media (min-width: 1024px) {
  .remates-share-float-raised {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Tipografía de los artículos (/articulos). Va en CSS y no en utilidades sobre
   cada etiqueta porque el cuerpo de un artículo es prosa: con una clase por
   párrafo el texto se vuelve ilegible en el diff, que es justo donde se corrige
   y donde se revisa que una cláusula citada diga lo que dice. Es el equivalente
   local del plugin `typography` de Tailwind, que el monolito no instala. */
.remates-article {
  color: #334155;
  font-size: 1rem;
  line-height: 1.75;
}

.remates-article p {
  margin-top: 1rem;
}

.remates-article h2 {
  margin-top: 2.5rem;
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.remates-article h3 {
  margin-top: 1.75rem;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 700;
}

.remates-article ul,
.remates-article ol {
  margin-top: 1rem;
  padding-left: 1.25rem;
}

.remates-article ul {
  list-style: disc;
}

.remates-article ol {
  list-style: decimal;
}

.remates-article li {
  margin-top: 0.5rem;
  padding-left: 0.25rem;
}

/* El punto en ámbar es lo único que separa visualmente una lista de un bloque
   de texto en una pantalla de celular. */
.remates-article li::marker {
  color: #f59e0b;
}

.remates-article strong {
  color: #0f172a;
  font-weight: 600;
}

.remates-article a {
  color: #0f172a;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #cbd5e1;
  text-underline-offset: 2px;
}

.remates-article a:hover {
  text-decoration-color: #f59e0b;
}

/* La cita literal del edicto. Es la pieza que sostiene la autoridad del
   artículo, así que se distingue del texto que la explica. */
.remates-article blockquote {
  margin-top: 1.25rem;
  border-left: 3px solid #f59e0b;
  padding-left: 1rem;
  color: #475569;
}

/* El salto desde el índice lateral tiene que dejar el título a la vista, y la
   barra de navegación es `sticky`: sin esto, el `<h2>` al que se salta queda
   tapado abajo de ella. */
.remates-article h2,
.remates-article h3 {
  scroll-margin-top: 5rem;
}

/* En desktop el texto crece un punto. La medida de la columna no cambia (sigue
   en `max-w-2xl`), así que la línea se acorta en caracteres y se lee mejor, que
   es al revés de lo que pasa cuando se ensancha el contenedor. */
@media (min-width: 1024px) {
  .remates-article {
    font-size: 1.0625rem;
  }
}

/* La fila de botones del wizard en la pantalla del precio, en el celular: «Tengo dudas» y «Pagar» del
   mismo ancho en la primera línea, el sello de quién cobra debajo y «Atrás» al final, porque los tres
   botones no entran en una fila. Sólo cuando «Tengo dudas» está a la vista, para que los pasos
   anteriores sigan con «Atrás» y «Siguiente» en la misma línea. */
@media (max-width: 639.98px) {
  .remates-wizard-actions:has([data-remates--wizard-target="doubts"]:not([hidden])) [data-remates--wizard-target="doubts"],
  .remates-wizard-actions:has([data-remates--wizard-target="doubts"]:not([hidden])) [data-remates--wizard-target="submit"] {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    white-space: nowrap;
  }

  .remates-wizard-actions:has([data-remates--wizard-target="doubts"]:not([hidden])) [data-remates--wizard-target="paymentNote"] {
    order: 1;
  }

  .remates-wizard-actions:has([data-remates--wizard-target="doubts"]:not([hidden])) [data-remates--wizard-target="back"] {
    order: 2;
    margin: 0 auto;
  }
}