/*! Finyana — Calculadora de Interés Compuesto. Quelle: finyana-datos/public/compuesto.css */
.fy-cp {
    /* 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-cp *, .fy-cp *::before, .fy-cp *::after { box-sizing: border-box; }

  .fy-cp__row { margin-bottom: 16px; }

  .fy-cp__label {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 6px;
    color: #4A5450;
  }

  .fy-cp__input, .fy-cp__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-cp__select { cursor: pointer; }

  .fy-cp__input:focus-visible, .fy-cp__select:focus-visible,
  .fy-cp__btn:focus-visible {
    outline: 2px solid #2C6C84;
    outline-offset: 2px;
  }

  .fy-cp__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 8px;
  }

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

  /* Zurueck zur Banxico-Tasa. Ein Button, kein Link — er navigiert nicht. */
  .fy-cp__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-cp__reset:focus-visible { outline: 2px solid #2C6C84; outline-offset: 2px; }

  .fy-cp__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-cp__btn:hover { background: #9CDBAE; }

  .fy-cp__out {
    margin-top: 16px;
    padding: 20px;
    background: #F4F8F5;
    border: 1px solid #E4EBE6;
    border-radius: 10px;
  }

  .fy-cp__eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B7770;
  }

  .fy-cp__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-cp__value[data-fy-state="ok"] { color: #17342B; }

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

  .fy-cp__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-cp__src[data-oficial="si"] {
    padding-left: 10px;
    border-left: 3px solid #559D9B;
    color: #4A5450;
  }

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

  .fy-cp__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;
  }

  @media (max-width: 767px) {
    .fy-cp__grid { grid-template-columns: 1fr; }
    .fy-cp__value { font-size: 26px; }
    .fy-cp__line { flex-direction: column; gap: 2px; padding: 10px 0; }
    .fy-cp__line dd { font-size: 16px; }
  }

  /* Zweispaltiges Eingaberaster: fuenf Felder, das letzte darf allein stehen. */
  .fy-cp__grid { grid-template-columns: 1fr 1fr; gap: 12px 12px; margin-bottom: 16px; }

  /* Der Satz zur angenommenen Tasa steht AM ERGEBNIS, nicht in einer Fussnote.
     Ein Diagramm laesst eine Annahme wie eine Prognose aussehen. */
  .fy-cp__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-cp__grafica { margin: 18px 0 0; }
  .fy-cp__grafica svg { display: block; width: 100%; height: auto; }
  .fy-cp__barra-aportado { fill: #C3D2C8; }
  .fy-cp__barra-rendimiento { fill: #71B084; }
  .fy-cp__barra-texto {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    fill: #4A5450;
  }
  .fy-cp__eje {
    font-family: inherit;
    font-size: 11px;
    fill: #6B7770;
  }
  .fy-cp__leyenda {
    margin: 8px 0 0;
    font-size: 13px;
    color: #6B7770;
  }
  .fy-cp__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-cp__tablawrap { margin: 18px 0 0; overflow-x: auto; }
  .fy-cp__tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
  .fy-cp__caption {
    caption-side: top;
    text-align: left;
    margin-bottom: 8px;
    font-size: 13px;
    color: #6B7770;
  }
  .fy-cp__tabla th, .fy-cp__tabla td {
    padding: 7px 10px 7px 0;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid #E4EBE6;
  }
  .fy-cp__tabla th:first-child, .fy-cp__tabla td:first-child { text-align: left; }
  .fy-cp__tabla thead th {
    font-weight: 600;
    color: #4A5450;
    border-bottom: 1px solid #C3D2C8;
  }
  .fy-cp__tabla td {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #2A2E2B;
  }
  .fy-cp__tabla td:first-child { font-family: inherit; }

  @media (max-width: 767px) {
    .fy-cp__grid { grid-template-columns: 1fr; }
    .fy-cp__tabla { font-size: 13px; }
  }