/**
 * Simulator.css — port de `mx-cms/src/components/Simulator/styles.ts`
 * + `components/FloatContainer/styles.ts`
 * + `sections/auto-equity/Simulation/styles.ts`.
 *
 * Breakpoints: 5xl 1024 · 6xl 1280
 *   media.up('5xl') -> min-width: 1024px
 *   media.up('6xl') -> min-width: 1280px
 *
 * ## El CTA es un `<button>` propio, no el del design system
 *
 * El legacy usa `ButtonPrimaryWithArrow` de `@creditas-ui`, y **acá también** — vía
 * `shared/CardCtaButton`, igual que las otras seis secciones con CTA.
 *
 * ⚠️ **Corrección de una decisión anterior.** Antes había acá un `<button>` propio
 * con el estilo del botón replicado a mano, justificado en dos necesidades reales:
 *
 * 1. Tiene que ser `<button>`, no `<a>`: el click **escribe una cookie con el monto
 *    y después navega**. Con un `<a href>`, un ctrl+click o un click del medio
 *    abriría el destino sin la cookie y el formulario del otro lado llegaría sin
 *    monto.
 * 2. Necesita `disabled`, que el legacy usa mientras redirige.
 *
 * Las dos necesidades eran ciertas; la conclusión estaba mal. Eran razones para
 * **agregarle esas dos capacidades a `CardCtaButton`** (`as="button"` y
 * `disabled`), no para reimplementar el botón del design system justo en el CTA
 * principal de la landing — donde un cambio en `@creditas-ui/button` no habría
 * llegado nunca.
 *
 * Consecuencia para este archivo: **acá no va el estilo del botón.** Color, radio,
 * padding y tipografía salen del DS. Solo van los overrides que el legacy le aplica
 * encima; están abajo, en `.cta-slot`.
 */

/* Paridad de render de texto con el legacy: el sitio viejo setea
 * -webkit-font-smoothing: antialiased global, que en macOS renderiza la
 * tipografía más liviana. Los Code Components viven en shadow roots aislados,
 * así que hay que declararlo por componente en :host para que herede al shadow
 * tree — la propiedad NO cruza el límite. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.simulator {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;
  box-sizing: border-box;

  /* Defaults del legacy: backgroundColorSimulation ?? neutral[0],
     textColor ?? neutral[90] */
  background-color: #ffffff; /* neutral[0] */
  color: #292929; /* neutral[90] */

  &[data-bg='gray'] {
    background-color: #f1f3f2; /* neutral[10] */
  }

  &[data-bg='beige'] {
    background-color: #e9e9e1; /* other[10] */
  }

  /* `Wrapper` = `GeneralContainerMd` + `padding-block: 80px`, y desde 4xl (880px)
     pasa a fila con `gap: 28px; align-items: center; justify-content: space-around`.

     ⚠️ **`GeneralContainerMd` es 1200px, no 1366.** El de 1366 es
     `GeneralContainerLg`, que usan otras secciones. Estaba puesto el Lg y por eso
     la sección salía 166px más ancha que el sitio actual.

     El padding horizontal del legacy tiene tres tramos, y el último es el que más
     se nota: `media.down('4xl')` da 20px, `media.between('3xl','8xl')` lo sube a
     40px, y **arriba de 1440px no queda ninguno** — el contenedor ya está capado en
     1200 y solo se centra. */
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;

    @media (min-width: 768px) {
      padding-inline: 40px;
    }

    /* 880px, no 1024: el legacy pasa a fila en `media.up('4xl')`. */
    @media (min-width: 880px) {
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      gap: 28px;
    }

    @media (min-width: 1024px) {
      padding-block: 80px;
    }

    @media (min-width: 1440px) {
      padding-inline: 0;
    }
  }

  /* Acompaña el breakpoint de la fila: 880px, no 1024. `min-width: 0` para que la
     columna pueda encogerse por debajo del ancho de su contenido — sin eso, un
     título largo la infla y empuja la tarjeta. */
  .copy {
    display: block;

    @media (min-width: 880px) {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  /* El antetítulo es un `<h1>`: esta sección es el header de la landing.
     body.sm = 14px · ls xs 0.3 · lh sm 20px · bold 700 · neutral[80] */
  .eyebrow {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 20px;
    color: #3b4540; /* neutral[80] */
  }

  /* TitleH2 con `margin: 12px 0` en mobile y `16px 0` desde 1024px.
     heading.lg = 32px · ls sm 0.5 · lh 4xl 40px · medium 500 */
  .title {
    margin: 12px 0;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;
    color: #292929; /* neutral[90] */

    @media (min-width: 1024px) {
      margin: 16px 0;
    }
  }

  /* body.lg = 18px · ls xs 0.3 · lh lg 26px · regular 400 */
  .description {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
    color: #292929; /* neutral[90] */
  }

  /* SimulatorContainer: la tarjeta blanca. */
  .card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 275px;
    padding: 35px 15px;
    text-align: center;
    background-color: #ffffff; /* neutral[0] */
    /* ⚠️ El legacy declara `box-shadow` DOS veces seguidas, así que la primera se
       pierde. Se replica la que efectivamente gana. */
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    box-sizing: border-box;

    /* ⚠️ EL BUG QUE MÁS SE VIO EN LA AUDITORÍA, y no era un typo.

       En el legacy hay **dos** cajas anidadas y acá están colapsadas en una:

       1. `auto-equity/Simulation` → `SimulatorContainer`, la de afuera:
          `width: 100%` y desde 3xl (768px) `max-width: 400px; width: 50%`.
          **Esta es la que capa la tarjeta en 400px.**
       2. `components/Simulator` → `SimulatorContainer`, la tarjeta blanca de
          adentro: `min-width: 275px`, y desde 6xl (1280px) `min-width: 100%`.

       Ese `min-width: 100%` es real, pero en el legacy resuelve contra un padre ya
       capado en 400px: significa "llená tus 400". Al colapsar las dos cajas, el
       mismo `min-width: 100%` empezó a resolver contra el `.wrapper` de 1200px, se
       comió la fila entera y dejó la columna de texto en 16px.

       O sea: **la declaración era correcta, lo que cambió fue contra qué resuelve el
       porcentaje.** Es el riesgo de aplanar dos contenedores en uno, y no lo
       detecta ningún verificador que mire una hoja de estilos sola.

       La geometría del legacy, en una sola caja: `width: 50%` capado a 400px. A
       1200px de wrapper, 50% = 600 → gana el `max-width` y quedan los 400 reales. */
    @media (min-width: 768px) {
      width: 50%;
      max-width: 400px;
      flex: 0 0 auto;
    }

    @media (min-width: 1024px) {
      padding: 40px 25px;
    }
  }

  /* body.md = 16px · ls xs 0.3 · lh md 24px · regular 400 · neutral[60] */
  .label {
    display: block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 24px;
    color: #52605a; /* neutral[60] */
  }

  .amount {
    display: block;
  }

  /* El input del monto: 32px, sin borde, ancho en `ch` calculado desde el largo del
     texto formateado (se setea inline en el JSX). */
  .amount-input {
    display: inline;
    font-family: inherit;
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    text-align: left;
    color: #292929; /* neutral[90] */
    border: none;
    background: transparent;
    margin: 6px 0 20px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;

    &:focus {
      text-decoration: underline;
    }

    @media (min-width: 1024px) {
      margin: 20px 0;
    }
  }

  .currency {
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    color: #292929;
  }

  /* SliderContainer */
  /* ── El slider ──────────────────────────────────────────────────────────────
     Los tres elementos —track gris, barra verde y control— tienen que quedar
     centrados en **la misma línea horizontal**. En el sitio actual esa línea está
     en `y=10` (la barra ocupa 6..14, medido en el publicado).

     `--track-center` es esa línea, y todo se posiciona respecto de ella. Un solo
     número: si el diseño la mueve, se cambia acá y los tres acompañan. Antes eran
     valores literales en reglas distintas y se desincronizaron. */
  .slider {
    position: relative;
    width: 100%;
    height: 32px;
    padding-bottom: 8px;

    --track-center: 10px;
    --track-height: 8px;
    --thumb-size: 47px;
  }

  /* El `<input type="range">`. El track propio se pinta con `.progress`; el nativo
     queda como fondo gris.

     ⚠️ **`position: absolute` con el MISMO `top` que `.progress`, y es el arreglo de
     un bug real.**

     El legacy lo deja en el flujo, como `inline-block` con `vertical-align:
     baseline`. Ahí su posición vertical **la decide el `line-height` heredado** del
     contenedor, no el CSS del slider. En el sitio actual eso lo deja en `y=6..14`,
     justo sobre la barra verde (que está en `top: 6px`).

     Adentro de un shadow root el `line-height` heredado es otro, así que el mismo
     CSS lo dejaba en `y=7..15`: un píxel más abajo. Y el control nativo
     (`::-webkit-slider-thumb`, 47px) **se centra sobre el input**, así que se iba
     con él y quedaba desalineado de la barra y de la imagen del control — que sí
     está bien puesta, porque su `top` es explícito.

     Anclarlo con `position: absolute` lo saca de esa dependencia: queda en `6..14`
     como el legacy, medido, y el centro del control cae en `y=10` igual que el
     centro de la barra. Es el tipo de cosa que solo se ve cruzando el límite del
     shadow DOM: el CSS es idéntico, lo que cambia es lo que hereda. */
  /* ⚠️ **El input mide lo mismo que el control, no 8px.** Es el arreglo del control
     descentrado, y va al fondo del problema en vez de al síntoma.

     El legacy le da `height: 8px` al input y `47px` al control. Cómo se posiciona un
     control más grande que su input **no es estable**: Chrome lo centra sobre el
     track en algunos casos y lo alinea a la caja en otros, y adentro de un shadow
     root además compite con las reglas de tag que Webflow inyecta (por
     `applyTagSelectors: true`). Se intentó dos veces ajustarlo por píxeles —primero
     el `line-height` heredado, después el centrado— y las dos veces el resultado
     dependía del entorno.

     Con el input del tamaño del control la ambigüedad desaparece:

     - el input mide `--thumb-size` y su fondo es transparente;
     - el track gris lo pinta `::-webkit-slider-runnable-track`, que Chrome centra
       verticalmente en la caja del input;
     - el control se centra sobre ese track **a mano**, con un `margin-top` negativo
       (ver la regla del control).

     O sea que los tres quedan en el centro del input, y el input se ancla para que
     ese centro sea `--track-center`. Nada depende del `line-height` ni de cómo el
     browser trate un control más grande que su caja.

     Efecto lateral bueno: el área de arrastre pasa de 8px a 47px de alto. */
  .range {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    top: calc(var(--track-center) - var(--thumb-size) / 2);
    width: 100%;
    height: var(--thumb-size);
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    overflow: visible;
    transition: opacity 0.2s;

    /* El control nativo: círculo blanco de 47px con anillo verde de 3px. Los
       prefijos van por separado porque un selector inválido invalida toda la regla.

       ⚠️ Es **del diseño**, no un accidente del port: el sitio actual tiene la regla
       `.css-…::-webkit-slider-thumb` con esos mismos 47px, fondo blanco y
       `border: 3px solid rgba(142,219,0,1)`. La imagen de los brackets se dibuja
       encima, centrada: el círculo es el aro y la imagen es el contenido.

       Hubo un intento de volverlo transparente, basado en un barrido de
       `document.styleSheets` que devolvió "cero reglas de slider-thumb". **Ese
       barrido estaba mal** —se saltaba hojas sin reportarlo— y la conclusión era
       falsa. Quedó anotado en AVISOS §1.1-ter. Si alguna vez parece que este círculo
       no debería estar, la forma de comprobarlo es abrir el sitio y buscar la regla
       en DevTools, no un script propio. */
    /* ⚠️ **`margin-top` negativo: Chrome NO centra el control sobre el track.**

       Esto se verificó mirándolo: inyectando este CSS en el shadow root del sitio
       publicado, el círculo aparecía **24px por debajo de la línea** —o sea con su
       borde superior apoyado en el track, no con su centro. La versión anterior de
       este comentario afirmaba lo contrario ("el control se centra sobre ese
       track"); era falso, y es lo que dejaba el control descentrado por tercera vez.

       Con `appearance: none` en el track, Chrome apoya el control arriba del track y
       hay que subirlo la mitad de la diferencia. Sale de las mismas dos variables,
       así que un cambio de tamaño no lo desincroniza.

       Firefox no lo necesita: `::-moz-range-thumb` sí queda centrado sobre el track,
       por eso la regla de abajo no lleva margen. */
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--thumb-size);
      height: var(--thumb-size);
      margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #8edb00; /* primary[40] */
      cursor: grab;
    }

    &::-webkit-slider-thumb:active {
      cursor: grabbing;
    }

    /* Firefox: el legacy lo deja en 40px (no usa su variable de tamaño acá).
       Se respeta el valor del legacy en vez de unificarlo. */
    &::-moz-range-thumb {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #8edb00; /* primary[40] */
      cursor: grab;
    }

    &::-moz-range-thumb:active {
      cursor: grabbing;
    }

    /* El track gris. Antes lo pintaba el `background` del input y esto era
       decorativo; ahora es el track de verdad, porque el input es transparente.
       `0.5rem` del legacy → la variable, para que no se desincronice de la barra. */
    &::-webkit-slider-runnable-track {
      height: var(--track-height);
      border-radius: 500px;
      background: #f1f3f2; /* neutral[10] */
    }

    &::-moz-range-track {
      height: var(--track-height);
      border-radius: 500px;
      background: #f1f3f2; /* neutral[10] */
    }
  }

  /* La barra de progreso verde, encima del track. `pointer-events: none` para no
     robarle el arrastre al input. */
  .progress {
    position: absolute;
    left: 0;
    top: calc(var(--track-center) - var(--track-height) / 2);
    height: var(--track-height);
    background-color: #8edb00; /* primary[40] */
    border-radius: 500px;
    pointer-events: none;
  }

  /* La imagen del control, superpuesta al nativo. Su `left` lo calcula el JS.
     Si no se sube imagen no se renderiza y queda el control nativo, que ya se ve
     bien — por eso el thumb nativo tiene su propio estilo arriba. */
  .thumb {
    position: absolute;
    top: 32%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 32px;
    height: 32px;
  }

  /* body.xs = 12px · ls xs 0.3 · lh xs 16px · regular 400 · primary[100] */
  .slider-subtitle {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 16px;
    color: #1c4200; /* primary[100] */
  }

  /* ─────────────────────────── El CTA ───────────────────────────
     Es el `ButtonPrimaryWithArrow` real de `@creditas-ui`, no una réplica: lo
     renderiza `shared/CardCtaButton` (ver la nota en el `.jsx`). Así que acá NO
     va el estilo del botón —color, radio, padding, tipografía salen del design
     system— sino **solo los overrides que el legacy le aplica encima**, que son
     estos cuatro:

       styled(ButtonPrimaryWithArrow)`
         margin-top: 20px;                 // 40px desde 5xl
         svg { margin-left: auto; }        // la flecha al borde derecho
         .ripple { display: none; }
         :disabled { … }                   // lo trae el DS, no hace falta
       `

     ⚠️ Los selectores tienen que **bajar dentro del botón** (`.cta-slot button`,
     `.cta-slot svg`) porque el DS renderiza su propio árbol. Emotion inyecta sus
     reglas en este mismo shadow root vía `ShadowEmotionProvider`, así que las de
     acá compiten con las suyas: por eso el `svg` y el `.ripple` van con la
     especificidad de un descendiente y no con `!important`. */
  .cta-slot {
    display: block;
    width: 100%;
    margin-top: 20px;

    @media (min-width: 1024px) {
      margin-top: 40px;
    }
  }

  /* La flecha pegada a la derecha, como en el legacy. Sin esto el DS la deja
     junto al texto. */
  .cta-slot svg {
    margin-left: auto;
  }

  /* El legacy apaga el ripple del botón del DS en esta sección. */
  .cta-slot .ripple {
    display: none;
  }

  /* FloatContainer: fijo abajo, y NO se muestra desde 1024px.
     ⚠️ `position: fixed` funciona dentro del shadow root (se posiciona contra el
     viewport), pero el `z-index: 10` compite con lo que haya en la página de
     Webflow. Si el flotante queda tapado, es acá donde hay que mirar. */
  .float {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100vw;
    padding: 16px 20px;
    background-color: #ffffff; /* neutral[0] */
    border-top: 0.92px solid #d6dcd9; /* neutral[20] */
    box-sizing: border-box;

    @media (min-width: 1024px) {
      display: none;
    }
  }

  /* `ButtonFixed` del legacy: el flotante es más chico y con otro radio. Son
     overrides sobre el mismo botón del DS, así que también bajan al elemento.
     El `14.77px` es literal del legacy — no es un token, es un valor calculado
     que quedó horneado. */
  .cta-float {
    margin-top: 0;

    @media (min-width: 1024px) {
      margin-top: 0;
    }
  }

  .cta-float button {
    padding: 16px 20px;
    font-size: 14.77px;
    font-weight: 500;
    border-radius: 15px;
  }

  .cta-float svg {
    width: 29px;
    height: 29px;
  }

  /* Del barrido sobre BR: 7 de sus componentes respetan esta preferencia. */
  @media (prefers-reduced-motion: reduce) {
    .cta-slot button,
    .range {
      transition: none;
    }
  }
}

/* Reset de box-sizing scopeado al componente. El reset de Webflow no llega
   adentro del shadow root, así que cada componente declara el suyo. */
.simulator,
.simulator *,
.simulator *::before,
.simulator *::after {
  box-sizing: border-box;
}