/*! Finyana — Calculadora de Presupuesto. Quelle: finyana-datos/public/presupuesto.css
    Die geteilten Regeln stehen in fy-calc.css (erzeugt aus src/calc-base.css).
    Hier steht nur, was diesen Rechner von den anderen unterscheidet: das
    dreispaltige Ausgabenraster und die Auszeichnung der Vergleichstabelle. */
@import url("./fy-calc.css");

  /* Das Eingabefeld fuer das Einkommen steht allein und darf breit sein. */
  .fy-pr__row { margin-bottom: 20px; }

  .fy-pr__fieldset {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
  }
  .fy-pr__legend {
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2A2E2B;
  }
  .fy-pr__nota {
    margin: 6px 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7770;
  }

  /* Drei Spalten: Rubro, Betrag, Zuordnung. Die Beschriftung traegt die
     Breite, die beiden Felder sind schmal und gleich breit — so stehen die
     Betraege untereinander und lassen sich lesen wie eine Spalte. */
  .fy-pr__cab {
    display: grid;
    grid-template-columns: 1fr 140px 150px;
    gap: 10px;
    padding: 0 0 6px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B7770;
    border-bottom: 1px solid #E4EBE6;
  }
  .fy-pr__cab span:nth-child(2),
  .fy-pr__cab span:nth-child(3) { text-align: left; }

  .fy-pr__gasto {
    display: grid;
    grid-template-columns: 1fr 140px 150px;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #EFF4F0;
  }
  /* Die Beschriftung sitzt hier neben dem Feld, nicht darueber. */
  .fy-pr__gasto .fy-pr__label { margin-bottom: 0; }

  /* Was die ENIGH nicht als gasto corriente zaehlt, steht sichtbar
     abgesetzt — sonst vergleicht der Nutzer zwei verschiedene Dinge, ohne
     es zu merken. */
  .fy-pr__gasto--aparte {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid #C3D2C8;
    border-bottom: 0;
  }

  .fy-pr__ej {
    display: block;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.45;
    color: #6B7770;
  }

  /* Der Satz unter der grossen Zahl sagt, in welche Richtung sie zeigt.
     "−$1,200" allein sagt nicht, dass das Geld fehlt. */
  .fy-pr__frase {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4A5450;
  }
  /* Ein negativer Saldo ist keine Fehlermeldung, aber auch keine Nebensache.
     Dieselbe warme Warnfarbe wie ueberall, kein Rot. */
  .fy-pr__value[data-fy-saldo="negativo"] { color: #8A6A1E; }

  .fy-pr__smg {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7770;
  }

  /* Abweichungen in der Vergleichstabelle: ueber dem Durchschnitt, darunter,
     oder praktisch gleich. Keine Wertung — mehr auszugeben ist nicht falsch. */
  .fy-pr__dif { white-space: nowrap; }
  .fy-pr__dif[data-fy-dif="arriba"] { color: #8A6A1E; }
  .fy-pr__dif[data-fy-dif="abajo"] { color: #4A7C59; }

  /* Die Bloecke der 50/30/20-Tabelle tragen ihren Namen in der ersten Spalte,
     linksbuendig wie beim Zinseszinsrechner. */
  .fy-pr__tabla th[scope="row"] { font-weight: 500; color: #2A2E2B; }

  @media (max-width: 767px) {
    /* Einspaltig: die Kopfzeile hat keinen Sinn mehr, jede Zeile wird zu
       einem kleinen Block aus Beschriftung, Betrag und Zuordnung. */
    .fy-pr__cab { display: none; }
    .fy-pr__gasto {
      grid-template-columns: 1fr 1fr;
      align-items: end;
      padding: 12px 0;
    }
    .fy-pr__gasto .fy-pr__label { grid-column: 1 / -1; margin-bottom: 2px; }
  }