/**
 * NominaSimulator.css — port de `mx-cms/src/components/NominaSimulator/styles.ts`
 * + `sections/nomina/Simulation/styles.ts`.
 *
 * Breakpoints del DS usados acá:
 *   media.down('md')  -> max-width: 374.98px
 *   media.up('2xl')   -> min-width: 600px
 *   media.up('3xl')   -> min-width: 768px
 *   media.up('4xl')   -> min-width: 880px
 *
 * ## Qué NO va acá
 *
 * El estilo del botón y el del dropdown: los dos son componentes reales de
 * `@creditas-ui` (`ButtonPrimaryTextOnly` vía `shared/CardCtaButton`, y `Dropdown`),
 * y se estilan solos vía Emotion dentro del shadow root. Acá van únicamente los
 * overrides de layout que el legacy les aplica encima (`> button { margin-bottom }`
 * y `StyledDropdown { margin-bottom }`).
 *
 * ## La única desviación de color, y por qué
 *
 * El legacy pinta el texto de error con `tokens.error[40]`, que es **`#fbe5e5`** — un
 * rosa casi blanco, pensado para fondos, no para texto. Sobre la tarjeta blanca
 * (`neutral[0]`) el mensaje de error es **ilegible**: el usuario ve el mínimo y el
 * máximo desaparecer en vez de resaltarse.
 *
 * Acá se usa `error[60]` (`#de3543`), el rojo de texto del DS. Es el mismo criterio
 * —y el mismo tipo de bug— que la desviación ya documentada en
 * `AVISOS_Y_DUDAS.md` §3.5, donde el legacy usaba `neutral[10]` sobre su propio
 * fondo beige. Es la **segunda** desviación de color de la librería; queda anotada
 * en las dos puntas.
 */

/* Paridad de render de texto con el legacy: el sitio viejo setea
 * -webkit-font-smoothing: antialiased global. 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;
}

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

  /* `Wrapper`: bg neutral[0] y `margin-top: 50px`.

     ⚠️ Ese margen de 50px es del legacy y es **externo a la sección**. En Webflow el
     espaciado entre secciones lo maneja el canvas, así que queda como variante de
     `Espacio arriba` en vez de horneado: por default se replica (50px) y el editor
     puede ponerlo en 0 si la sección de arriba ya trae su propio aire. */
  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] */
  }

  &[data-gap='legacy'] {
    margin-top: 0px;
  }

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

     Misma caja que `Simulator`: **`GeneralContainerMd` es 1200px, no 1366** (el de
     1366 es `GeneralContainerLg`). El padding horizontal tiene tres tramos y el
     último es el que más se nota: 20px hasta 3xl, 40px de 768 a 1440, y arriba de
     1440 ninguno — el contenedor ya está capado en 1200 y solo se centra. */
  .wrapper {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;

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

    @media (min-width: 880px) {
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      gap: 28px;
    }

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

  /* `HeadContainer`. El `min-width: 0` no está en el legacy pero hace falta por el
     mismo motivo que en `Simulator`: sin él, un título largo infla la columna de
     texto y empuja la tarjeta fuera de su ancho. */
  .copy {
    display: flex;
    flex-direction: column;

    @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 de nómina.
     body.md bold = 16px · ls xs 0.3 · lh md 24px · bold 700 · neutral[80] */
  .eyebrow {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 24px;
    color: #3b4540; /* neutral[80] */
  }

  /* `TitleH2`: 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 · neutral[80] */
  .description {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
    color: #3b4540; /* neutral[80] */
  }

  /* `CardContainer`: la caja de afuera, la que capa la tarjeta en 400px desde 3xl.
     Son DOS cajas en el legacy y acá también — aplanarlas es exactamente el bug que
     documenta `Simulator.css` (un `max-width` que empieza a resolver contra el
     wrapper de 1200px en vez de contra los 400 del padre). */
  .card-container {
    width: 100%;
    margin: 20px auto;

    @media (min-width: 768px) {
      max-width: 400px;
      width: 50%;
      margin: 0 auto;
    }
  }

  /* `Card`: la tarjeta blanca. Sombra alta y borde, distinta de la de garantía de
     auto (que es una sombra difusa sin borde). */
  .card {
    padding: 24px;
    margin: 0 auto;
    background: #ffffff; /* neutral[0] */
    border: 1px solid #d6dcd9; /* neutral[15] */
    box-shadow: 0 28px 64px rgba(31, 45, 39, 0.16);
    border-radius: 24px;
    box-sizing: border-box;

    @media (min-width: 600px) {
      max-width: 510px;
    }

    @media (min-width: 880px) {
      max-width: 392px;
    }
  }

  /* `> button { margin-bottom }` del legacy. El botón real está dentro del wrapper
     `.cta-slot` que pone `CardCtaButton`, así que el margen va ahí. */
  .cta-slot {
    display: block;
    margin-bottom: 24px;

    @media (min-width: 600px) {
      margin-bottom: 16px;
    }
  }

  /* `TextContainer`: uno por bloque (monto, plazo, resultado). */
  .field {
    width: 100%;

    .text-labels {
      display: flex;
      justify-content: space-between;

      p:last-child {
        text-align: end;
      }
    }
  }

  /* body.md bold = 16px · 700 · ls 0.3 · lh 24px · neutral[90] */
  .field-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 24px;
    color: #292929; /* neutral[90] */
  }

  /* heading.xs bold = 22px · 700 · lh 28px. Envuelve el input y su unidad. */
  .field-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    color: #292929; /* neutral[90] */
  }

  /* `AmountInput` / `MonthsInput`. El ancho en `ch` se setea inline desde el largo
     del texto — no hay forma de hacerlo en CSS. Los dos sumandos del legacy son
     distintos (1.4 para el monto, 0.2 para los meses) y se replican. */
  .value-input {
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    display: inline;
    border: none;
    background: transparent;
    color: inherit;
    margin: 0;
    padding: 8px 0;
    -webkit-appearance: none;
    appearance: none;
    outline: none;

    &:focus {
      text-decoration: underline;
    }
  }

  /* `SliderContainer` */
  .slider {
    width: 100%;
    height: 32px;
    position: relative;
    padding-bottom: 8px;
    box-sizing: border-box;
  }

  /* `Slider`: el track es el propio input, 2px de alto sobre neutral[15]. */
  .range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    background: #d6dcd9; /* neutral[15] */
    transition: opacity 0.2s;
    overflow: visible;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: relative;
    /* El control tiene que quedar por encima de `.progress`, que es un hermano
       posterior en el DOM (`pointer-events: none` no alcanza para el apilado). */
    z-index: 1;

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #8edb00; /* primary[40] */
      box-sizing: border-box;
      cursor: grab;

      &:active {
        cursor: grabbing;
      }
    }

    &::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #8edb00; /* primary[40] */
      box-sizing: border-box;
      cursor: grab;

      &:active {
        cursor: grabbing;
      }
    }
  }

  /* `SliderProgress`: la parte verde del track. El `- (p/100)*16px` compensa el
     ancho del control para que la punta verde caiga en su centro y no lo pase.
     El ancho se setea inline (depende del valor). `top: 12px` es del legacy. */
  .progress {
    display: block;
    background-color: #8edb00; /* primary[40] */
    height: 2px;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 12px;
    margin: 0;
  }

  /* `AdviceText`: los avisos de mínimo y máximo debajo de cada slider.
     body.sm = 14px · 400 · ls 0.3 · lh 20px, y 16px desde 2xl (600px). */
  .advice {
    margin: 0;
    padding-bottom: 24px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 20px;
    color: #52605a; /* neutral[60] */

    @media (min-width: 600px) {
      font-size: 16px;
    }

    /* ⚠️ Desviación deliberada: el legacy usa `error[40]` (#fbe5e5), ilegible sobre
       blanco. Ver el comentario del encabezado. */
    &[data-error='true'] {
      color: #de3543; /* error[60] */
    }
  }

  /* `SimulationContainer` + `SimulationText`: el pago quincenal y el "IVA Incluido". */
  .result {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 8px 0 32px;
  }

  .result-amount {
    margin-right: 8px;
    margin-bottom: -1px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #292929; /* neutral[90] */

    @media (max-width: 374.98px) {
      width: 100%;
    }

    @media (min-width: 600px) {
      margin-right: 16px;
    }
  }

  /* body.md = 16px · 400 · ls 0.3 · lh 24px · neutral[80] */
  .result-note {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 24px;
    color: #3b4540; /* neutral[80] */
  }

  /* `StyledDropdown { margin-bottom: 32px }`. El Dropdown del DS se estila solo;
     acá solo va su lugar en la columna. */
  .purpose {
    display: block;
    margin-bottom: 32px;
  }

  /* El disclaimer del CAT. body.xs = 12px · 400 · ls 0.3 · lh 16px · neutral[60] */
  .disclaimer {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 16px;
    color: #52605a; /* neutral[60] */
  }
}

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