/*! Finyana — gemeinsame Basis aller Rechner.
    ERZEUGT aus src/calc-base.css durch scripts/build-css.mjs.
    NICHT von Hand bearbeiten — jede Aenderung gehoert in die Quelle.

    Warum diese Datei existiert
    ---------------------------
    Die vier ersten Rechner wurden bewusst mit je eigenem Stylesheet gebaut,
    damit einer den anderen nicht umwirft. Dabei lagen rund 190 identische
    Zeilen viermal im Repo: cetes.css, inflacion.css und die ersten 196 Zeilen
    von compuesto.css waren zeichengleich, nur das Praefix war anders. Mit vier
    weiteren Rechnern laegen sie achtmal. Hier liegen sie einmal.

    Warum Gruppenselektoren und keine gemeinsame Wurzelklasse
    ---------------------------------------------------------
    Eine geteilte Klasse (.fy-calc am Wurzelelement) waere sauberer, wuerde
    aber das Markup der vier LIVE stehenden Rechner aendern. Warnung 15 aus
    finyana-offene-punkte: ein Rechner gilt erst als geprueft, wenn ihn jemand
    von Hand bedient hat. Vier live gemessene Rechner noch einmal von Hand zu
    bedienen ist teurer als eine laengere Selektorliste.

    Praefixe: ce = CETES · in = Inflación · cp = Interés compuesto ·
              cc = Convertidor · pr = Presupuesto · ah = Ahorro · de = Deudas

    Eingebunden wird sie NICHT vom Webflow-Embed, sondern per @import aus dem
    jeweiligen Rechner-Stylesheet. So bleibt das Markup unangetastet: die Seite
    laedt weiter cetes.css, und cetes.css holt sich diese Datei. Der @import
    steht deshalb ganz oben — die eigenen Regeln des Rechners kommen danach
    und gewinnen bei gleicher Spezifitaet.
*/
.fy-ce,
.fy-in,
.fy-cp,
.fy-cc,
.fy-pr,
.fy-ah,
.fy-de {
    /* Keine eigene Schrift. rechner-spec: von der Seite erben. */
    font-family: inherit;
    /* Keine eigene Maximalbreite. Der Rahmen fy-calc-frame IST die Box —
       eine zweite Begrenzung darin liess den Convertidor links kleben:
       gemessen 560 px in einem 846 px breiten Rahmen. */
    width: 100%;
    color: #2A2E2B;
  }
  .fy-ce *,
  .fy-in *,
  .fy-cp *,
  .fy-cc *,
  .fy-pr *,
  .fy-ah *,
  .fy-de *,
  .fy-ce *::before,
  .fy-in *::before,
  .fy-cp *::before,
  .fy-cc *::before,
  .fy-pr *::before,
  .fy-ah *::before,
  .fy-de *::before,
  .fy-ce *::after,
  .fy-in *::after,
  .fy-cp *::after,
  .fy-cc *::after,
  .fy-pr *::after,
  .fy-ah *::after,
  .fy-de *::after { box-sizing: border-box; }

  .fy-ce__row,
  .fy-in__row,
  .fy-cp__row,
  .fy-cc__row,
  .fy-pr__row,
  .fy-ah__row,
  .fy-de__row { margin-bottom: 16px; }

  .fy-ce__label,
  .fy-in__label,
  .fy-cp__label,
  .fy-cc__label,
  .fy-pr__label,
  .fy-ah__label,
  .fy-de__label {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 6px;
    color: #4A5450;
  }

  .fy-ce__input,
  .fy-in__input,
  .fy-cp__input,
  .fy-cc__input,
  .fy-pr__input,
  .fy-ah__input,
  .fy-de__input,
  .fy-ce__select,
  .fy-in__select,
  .fy-cp__select,
  .fy-cc__select,
  .fy-pr__select,
  .fy-ah__select,
  .fy-de__select {
    width: 100%;
    min-height: 44px;            /* Trefferflaeche, rechner-spec */
    padding: 10px 12px;
    font-family: inherit;
    font-size: 16px;             /* < 16px zoomt iOS beim Fokus */
    color: #2A2E2B;
    background: #FFFFFF;
    border: 1px solid #E4EBE6;
    border-radius: 10px;
  }
  .fy-ce__select,
  .fy-in__select,
  .fy-cp__select,
  .fy-cc__select,
  .fy-pr__select,
  .fy-ah__select,
  .fy-de__select { cursor: pointer; }

  .fy-ce__input:focus-visible,
  .fy-in__input:focus-visible,
  .fy-cp__input:focus-visible,
  .fy-cc__input:focus-visible,
  .fy-pr__input:focus-visible,
  .fy-ah__input:focus-visible,
  .fy-de__input:focus-visible,
  .fy-ce__select:focus-visible,
  .fy-in__select:focus-visible,
  .fy-cp__select:focus-visible,
  .fy-cc__select:focus-visible,
  .fy-pr__select:focus-visible,
  .fy-ah__select:focus-visible,
  .fy-de__select:focus-visible,
  .fy-ce__btn:focus-visible,
  .fy-in__btn:focus-visible,
  .fy-cp__btn:focus-visible,
  .fy-cc__btn:focus-visible,
  .fy-pr__btn:focus-visible,
  .fy-ah__btn:focus-visible,
  .fy-de__btn:focus-visible {
    outline: 2px solid #2C6C84;
    outline-offset: 2px;
  }

  .fy-ce__grid,
  .fy-in__grid,
  .fy-cp__grid,
  .fy-cc__grid,
  .fy-pr__grid,
  .fy-ah__grid,
  .fy-de__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 8px;
  }

  .fy-ce__hint,
  .fy-in__hint,
  .fy-cp__hint,
  .fy-cc__hint,
  .fy-pr__hint,
  .fy-ah__hint,
  .fy-de__hint {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7770;
    min-height: 20px;
  }
  .fy-ce__hint[data-origen="usuario"],
  .fy-in__hint[data-origen="usuario"],
  .fy-cp__hint[data-origen="usuario"],
  .fy-cc__hint[data-origen="usuario"],
  .fy-pr__hint[data-origen="usuario"],
  .fy-ah__hint[data-origen="usuario"],
  .fy-de__hint[data-origen="usuario"] { color: #8A6A1E; }

  /* Zurueck zur Banxico-Tasa. Ein Button, kein Link — er navigiert nicht. */
  .fy-ce__reset,
  .fy-in__reset,
  .fy-cp__reset,
  .fy-cc__reset,
  .fy-pr__reset,
  .fy-ah__reset,
  .fy-de__reset {
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: #2C6C84;
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
  }
  .fy-ce__reset:focus-visible,
  .fy-in__reset:focus-visible,
  .fy-cp__reset:focus-visible,
  .fy-cc__reset:focus-visible,
  .fy-pr__reset:focus-visible,
  .fy-ah__reset:focus-visible,
  .fy-de__reset:focus-visible { outline: 2px solid #2C6C84; outline-offset: 2px; }

  .fy-ce__btn,
  .fy-in__btn,
  .fy-cp__btn,
  .fy-cc__btn,
  .fy-pr__btn,
  .fy-ah__btn,
  .fy-de__btn {
    width: 100%;
    min-height: 44px;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #17342B;
    background: #AEE6BE;          /* menta */
    border: 1px solid #71B084;    /* salvia */
    border-radius: 10px;
    cursor: pointer;
  }
  .fy-ce__btn:hover,
  .fy-in__btn:hover,
  .fy-cp__btn:hover,
  .fy-cc__btn:hover,
  .fy-pr__btn:hover,
  .fy-ah__btn:hover,
  .fy-de__btn:hover { background: #9CDBAE; }

  .fy-ce__out,
  .fy-in__out,
  .fy-cp__out,
  .fy-cc__out,
  .fy-pr__out,
  .fy-ah__out,
  .fy-de__out {
    margin-top: 16px;
    padding: 20px;
    background: #F4F8F5;
    border: 1px solid #E4EBE6;
    border-radius: 10px;
  }

  .fy-ce__eyebrow,
  .fy-in__eyebrow,
  .fy-cp__eyebrow,
  .fy-cc__eyebrow,
  .fy-pr__eyebrow,
  .fy-ah__eyebrow,
  .fy-de__eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B7770;
  }

  .fy-ce__value,
  .fy-in__value,
  .fy-cp__value,
  .fy-cc__value,
  .fy-pr__value,
  .fy-ah__value,
  .fy-de__value {
    margin: 0;
    /* Zahlen sind Mono. rechner-spec nennt das ausdruecklich. */
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 30px;
    line-height: 1.15;
    color: #9BAAA0;               /* Leerzustand */
  }
  .fy-ce__value[data-fy-state="ok"],
  .fy-in__value[data-fy-state="ok"],
  .fy-cp__value[data-fy-state="ok"],
  .fy-cc__value[data-fy-state="ok"],
  .fy-pr__value[data-fy-state="ok"],
  .fy-ah__value[data-fy-state="ok"],
  .fy-de__value[data-fy-state="ok"] { color: #17342B; }

  .fy-ce__lines,
  .fy-in__lines,
  .fy-cp__lines,
  .fy-cc__lines,
  .fy-pr__lines,
  .fy-ah__lines,
  .fy-de__lines {
    margin: 18px 0 0;
    padding: 0;
    border-top: 1px solid #E4EBE6;
  }
  .fy-ce__line,
  .fy-in__line,
  .fy-cp__line,
  .fy-cc__line,
  .fy-pr__line,
  .fy-ah__line,
  .fy-de__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid #E4EBE6;
  }
  .fy-ce__line dt,
  .fy-in__line dt,
  .fy-cp__line dt,
  .fy-cc__line dt,
  .fy-pr__line dt,
  .fy-ah__line dt,
  .fy-de__line dt {
    font-size: 14px;
    line-height: 1.45;
    color: #4A5450;
  }
  .fy-ce__line dd,
  .fy-in__line dd,
  .fy-cp__line dd,
  .fy-cc__line dd,
  .fy-pr__line dd,
  .fy-ah__line dd,
  .fy-de__line dd {
    margin: 0;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    white-space: nowrap;
    color: #2A2E2B;
  }
  .fy-ce__line--strong dt,
  .fy-in__line--strong dt,
  .fy-cp__line--strong dt,
  .fy-cc__line--strong dt,
  .fy-pr__line--strong dt,
  .fy-ah__line--strong dt,
  .fy-de__line--strong dt { font-weight: 600; color: #2A2E2B; }
  .fy-ce__line--strong dd,
  .fy-in__line--strong dd,
  .fy-cp__line--strong dd,
  .fy-cc__line--strong dd,
  .fy-pr__line--strong dd,
  .fy-ah__line--strong dd,
  .fy-de__line--strong dd { font-weight: 600; color: #17342B; }

  .fy-ce__src,
  .fy-in__src,
  .fy-cp__src,
  .fy-cc__src,
  .fy-pr__src,
  .fy-ah__src,
  .fy-de__src {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7770;
  }
  /* Amtliche Referenz: derselbe Balken wie beim Convertidor fuer den FIX. */
  .fy-ce__src[data-oficial="si"],
  .fy-in__src[data-oficial="si"],
  .fy-cp__src[data-oficial="si"],
  .fy-cc__src[data-oficial="si"],
  .fy-pr__src[data-oficial="si"],
  .fy-ah__src[data-oficial="si"],
  .fy-de__src[data-oficial="si"] {
    padding-left: 10px;
    border-left: 3px solid #559D9B;
    color: #4A5450;
  }

  .fy-ce__avisos,
  .fy-in__avisos,
  .fy-cp__avisos,
  .fy-cc__avisos,
  .fy-pr__avisos,
  .fy-ah__avisos,
  .fy-de__avisos {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
  }
  .fy-ce__avisos li,
  .fy-in__avisos li,
  .fy-cp__avisos li,
  .fy-cc__avisos li,
  .fy-pr__avisos li,
  .fy-ah__avisos li,
  .fy-de__avisos li {
    margin: 0 0 8px;
    padding-left: 14px;
    position: relative;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7770;
  }
  .fy-ce__avisos li::before,
  .fy-in__avisos li::before,
  .fy-cp__avisos li::before,
  .fy-cc__avisos li::before,
  .fy-pr__avisos li::before,
  .fy-ah__avisos li::before,
  .fy-de__avisos li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C3D2C8;
  }
  .fy-ce__avisos li:last-child,
  .fy-in__avisos li:last-child,
  .fy-cp__avisos li:last-child,
  .fy-cc__avisos li:last-child,
  .fy-pr__avisos li:last-child,
  .fy-ah__avisos li:last-child,
  .fy-de__avisos li:last-child { margin-bottom: 0; }

  .fy-ce__msg,
  .fy-in__msg,
  .fy-cp__msg,
  .fy-cc__msg,
  .fy-pr__msg,
  .fy-ah__msg,
  .fy-de__msg {
    margin: 0 0 16px;
    padding: 10px 12px;
    font-size: 14px;
    color: #8A6A1E;               /* rechner-spec: kein Rot, kein alert() */
    background: #FBF6E9;
    border: 1px solid #E8DCBB;
    border-radius: 10px;
  }

  /* Der Satz zur angenommenen Tasa steht AM ERGEBNIS, nicht in einer Fussnote.
     Ein Diagramm laesst eine Annahme wie eine Prognose aussehen. */
  .fy-ce__aviso-fuerte,
  .fy-in__aviso-fuerte,
  .fy-cp__aviso-fuerte,
  .fy-cc__aviso-fuerte,
  .fy-pr__aviso-fuerte,
  .fy-ah__aviso-fuerte,
  .fy-de__aviso-fuerte {
    margin: 16px 0 0;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #8A6A1E;
    background: #FBF6E9;
    border: 1px solid #E8DCBB;
    border-radius: 10px;
  }

  /* Diagramm: Beiwerk. Wer es nicht sieht, verliert nichts — jeder Balken
     traegt seinen Wert auch in der Tabelle darunter. */
  .fy-ce__grafica,
  .fy-in__grafica,
  .fy-cp__grafica,
  .fy-cc__grafica,
  .fy-pr__grafica,
  .fy-ah__grafica,
  .fy-de__grafica { margin: 18px 0 0; }
  .fy-ce__grafica svg,
  .fy-in__grafica svg,
  .fy-cp__grafica svg,
  .fy-cc__grafica svg,
  .fy-pr__grafica svg,
  .fy-ah__grafica svg,
  .fy-de__grafica svg { display: block; width: 100%; height: auto; }
  .fy-ce__barra-aportado,
  .fy-in__barra-aportado,
  .fy-cp__barra-aportado,
  .fy-cc__barra-aportado,
  .fy-pr__barra-aportado,
  .fy-ah__barra-aportado,
  .fy-de__barra-aportado { fill: #C3D2C8; }
  .fy-ce__barra-rendimiento,
  .fy-in__barra-rendimiento,
  .fy-cp__barra-rendimiento,
  .fy-cc__barra-rendimiento,
  .fy-pr__barra-rendimiento,
  .fy-ah__barra-rendimiento,
  .fy-de__barra-rendimiento { fill: #71B084; }
  .fy-ce__barra-texto,
  .fy-in__barra-texto,
  .fy-cp__barra-texto,
  .fy-cc__barra-texto,
  .fy-pr__barra-texto,
  .fy-ah__barra-texto,
  .fy-de__barra-texto {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    fill: #4A5450;
  }
  .fy-ce__eje,
  .fy-in__eje,
  .fy-cp__eje,
  .fy-cc__eje,
  .fy-pr__eje,
  .fy-ah__eje,
  .fy-de__eje {
    font-family: inherit;
    font-size: 11px;
    fill: #6B7770;
  }
  .fy-ce__leyenda,
  .fy-in__leyenda,
  .fy-cp__leyenda,
  .fy-cc__leyenda,
  .fy-pr__leyenda,
  .fy-ah__leyenda,
  .fy-de__leyenda {
    margin: 8px 0 0;
    font-size: 13px;
    color: #6B7770;
  }
  .fy-ce__punto,
  .fy-in__punto,
  .fy-cp__punto,
  .fy-cc__punto,
  .fy-pr__punto,
  .fy-ah__punto,
  .fy-de__punto {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: baseline;
  }

  /* Tabelle. Scrollt auf schmalen Geraeten in ihrem eigenen Container,
     damit die Seite nicht quer laeuft. */
  .fy-ce__tablawrap,
  .fy-in__tablawrap,
  .fy-cp__tablawrap,
  .fy-cc__tablawrap,
  .fy-pr__tablawrap,
  .fy-ah__tablawrap,
  .fy-de__tablawrap { margin: 18px 0 0; overflow-x: auto; }
  .fy-ce__tabla,
  .fy-in__tabla,
  .fy-cp__tabla,
  .fy-cc__tabla,
  .fy-pr__tabla,
  .fy-ah__tabla,
  .fy-de__tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
  .fy-ce__caption,
  .fy-in__caption,
  .fy-cp__caption,
  .fy-cc__caption,
  .fy-pr__caption,
  .fy-ah__caption,
  .fy-de__caption {
    caption-side: top;
    text-align: left;
    margin-bottom: 8px;
    font-size: 13px;
    color: #6B7770;
  }
  .fy-ce__tabla th,
  .fy-in__tabla th,
  .fy-cp__tabla th,
  .fy-cc__tabla th,
  .fy-pr__tabla th,
  .fy-ah__tabla th,
  .fy-de__tabla th,
  .fy-ce__tabla td,
  .fy-in__tabla td,
  .fy-cp__tabla td,
  .fy-cc__tabla td,
  .fy-pr__tabla td,
  .fy-ah__tabla td,
  .fy-de__tabla td {
    padding: 7px 10px 7px 0;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid #E4EBE6;
  }
  .fy-ce__tabla th:first-child,
  .fy-in__tabla th:first-child,
  .fy-cp__tabla th:first-child,
  .fy-cc__tabla th:first-child,
  .fy-pr__tabla th:first-child,
  .fy-ah__tabla th:first-child,
  .fy-de__tabla th:first-child,
  .fy-ce__tabla td:first-child,
  .fy-in__tabla td:first-child,
  .fy-cp__tabla td:first-child,
  .fy-cc__tabla td:first-child,
  .fy-pr__tabla td:first-child,
  .fy-ah__tabla td:first-child,
  .fy-de__tabla td:first-child { text-align: left; }
  .fy-ce__tabla thead th,
  .fy-in__tabla thead th,
  .fy-cp__tabla thead th,
  .fy-cc__tabla thead th,
  .fy-pr__tabla thead th,
  .fy-ah__tabla thead th,
  .fy-de__tabla thead th {
    font-weight: 600;
    color: #4A5450;
    border-bottom: 1px solid #C3D2C8;
  }
  .fy-ce__tabla td,
  .fy-in__tabla td,
  .fy-cp__tabla td,
  .fy-cc__tabla td,
  .fy-pr__tabla td,
  .fy-ah__tabla td,
  .fy-de__tabla td {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #2A2E2B;
  }
  .fy-ce__tabla td:first-child,
  .fy-in__tabla td:first-child,
  .fy-cp__tabla td:first-child,
  .fy-cc__tabla td:first-child,
  .fy-pr__tabla td:first-child,
  .fy-ah__tabla td:first-child,
  .fy-de__tabla td:first-child { font-family: inherit; }

  @media (max-width: 767px) {
    .fy-ce__tabla,
    .fy-in__tabla,
    .fy-cp__tabla,
    .fy-cc__tabla,
    .fy-pr__tabla,
    .fy-ah__tabla,
    .fy-de__tabla { font-size: 13px; }
    .fy-ce__grid,
    .fy-in__grid,
    .fy-cp__grid,
    .fy-cc__grid,
    .fy-pr__grid,
    .fy-ah__grid,
    .fy-de__grid { grid-template-columns: 1fr; }
    .fy-ce__value,
    .fy-in__value,
    .fy-cp__value,
    .fy-cc__value,
    .fy-pr__value,
    .fy-ah__value,
    .fy-de__value { font-size: 26px; }
    .fy-ce__line,
    .fy-in__line,
    .fy-cp__line,
    .fy-cc__line,
    .fy-pr__line,
    .fy-ah__line,
    .fy-de__line { flex-direction: column; gap: 2px; padding: 10px 0; }
    .fy-ce__line dd,
    .fy-in__line dd,
    .fy-cp__line dd,
    .fy-cc__line dd,
    .fy-pr__line dd,
    .fy-ah__line dd,
    .fy-de__line dd { font-size: 16px; }
  }