/* Tokens y componentes tomados 1:1 del export de Figma (dashboard.html) que
   sirve de referencia de diseño para el estado "consumo". Los estados sin
   referencia exportada (vacio/error/sin_consumo/sin_resultados) reutilizan
   los mismos tokens y patrones (.eyebrow, .body-text, .info-panel, etc.). */

:root {
    --pink-600: #e30d81;
    --pink-500: #ea0383;
    --pink-100: #ffe2e7;
    --green-100: #e1ffe4;
    --green-600: #5eb24b;
    --orange-start: #fdbf6f;
    --orange-end: #f69522;
    --green-bar-start: #90d785;
    --green-bar-end: #5eb24b;
    --gray-700: #767676;
    --gray-border: rgba(0, 0, 0, 0.2);
    --error-border: #ff0f64;
    --black: #000;
    --white: #fff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    color: var(--black);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    /* red de seguridad: si algo se desborda (ver .chart-card/.chart-area
       más abajo) que no arrastre a toda la página a scrollear horizontal. */
    overflow-x: hidden;
}

.page {
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* Estado vacio: export de Figma usa un gap mayor antes del contenido (77px)
   y agrupa hero+steps-card aparte con 29px. */
.page--plain {
    gap: 77px;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 29px;
}

/* Estado error: export propio, gap plano de 43px, sin wrapper .content. */
.page--error {
    gap: 43px;
}

/* Header: 54px es el alto usado en la mayoría de los exports (con o sin
   botón); solo el estado vacio (formulario.html) usa 35px, el alto exacto
   del logo. */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
}

.page--plain .header {
    height: 35px;
}

.logo img {
    height: 35px;
    display: block;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 47px;
    padding: 4px 25px;
    border: 2px solid var(--pink-500);
    border-radius: 5px;
    background: transparent;
    color: var(--pink-500);
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -1px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-outline:hover {
    background: var(--pink-100);
}

.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 47px;
    padding: 4px 25px;
    border: 2px solid var(--pink-500);
    border-radius: 5px;
    background: var(--pink-500);
    color: var(--white);
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -1px;
    cursor: pointer;
    white-space: nowrap;
    flex: 1 0 0;
}

.btn-solid:hover {
    background: var(--pink-600);
    border-color: var(--pink-600);
}

/* Hero + form */
.hero {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.hero-copy {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.eyebrow {
    color: var(--pink-600);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.4px;
    margin: 0;
}

h1 {
    font-weight: 600;
    font-size: 36px;
    letter-spacing: -1px;
    margin: 0;
    line-height: 1.15;
}

.body-text {
    color: var(--gray-700);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.5px;
    line-height: 1.55;
    margin: 0;
}

.body-text strong {
    color: var(--black);
    font-weight: 700;
}

.hero-form {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}

.hero-form.has-error {
    justify-content: flex-start;
    gap: 10px;
}

.form-row {
    display: flex;
    gap: 21px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-fields {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.4px;
    white-space: nowrap;
}

.field label .info-icon {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-700);
    color: var(--gray-700);
    font-size: 9px;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: help;
    flex-shrink: 0;
}

.field input {
    border: 1px solid var(--gray-border);
    border-radius: 5px;
    padding: 10px 15px;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    letter-spacing: -1px;
    color: var(--black);
    width: 240px;
}

.field input:focus {
    outline: none;
    border-color: var(--pink-500);
}

.field input.is-invalid {
    border-color: var(--error-border);
}

.field input.is-invalid:focus {
    outline: 2px solid var(--error-border);
    outline-offset: 1px;
    border-color: var(--error-border);
}

.form-cta {
    flex: 1 1 200px;
    display: flex;
    align-items: stretch;
}

.form-error {
    background: var(--pink-100);
    border-radius: 10px;
    padding: 5px 20px;
}

.form-error p {
    color: var(--pink-500);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -1px;
    line-height: 25px;
    margin: 0;
}

/* Goal section */
.goal-section {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.goal-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

h2.big {
    font-weight: 600;
    font-size: 36px;
    letter-spacing: -1px;
    margin: 0;
    line-height: 1.2;
}

h2.big strong {
    color: var(--pink-600);
    font-weight: 700;
}

/* Resultado "sin_resultados" (not-eligible-state.html): clases propias,
   distintas de .goal-row/.goal-copy que usan consumo/sin_consumo. */
.result-row {
    display: flex;
    align-items: center;
    gap: 56px;
    flex-wrap: wrap;
}

.result-copy {
    flex: 1 1 460px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.result-row .info-panel {
    flex: 1 1 400px;
}

/* Meta diaria (reemplaza el gauge circular de meta por ciclo: ver
   enel_status memoria, "Reemplazar por completo" confirmado por el
   usuario). */
.daily-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.daily-copy {
    flex: 1 1 500px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.daily-copy .value {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.daily-copy .value .num {
    color: var(--pink-600);
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
}

.daily-copy .value .unit {
    font-size: 24px;
}

.note-panel {
    background: var(--pink-100);
    border-radius: 10px;
    padding: 18px 45px;
    display: flex;
    align-items: center;
    flex: 1 1 460px;
}

.note-panel-inner {
    display: flex;
    gap: 23px;
    align-items: flex-start;
}

.note-panel .icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pink-500);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.note-panel h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
}

.note-panel p {
    color: var(--gray-700);
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
}

/* Bloque de texto dentro de una .steps-card genérica (intro antes de
   .steps-row: usado en "Así se definió tu meta"). */
.card-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-block h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.card-block p {
    color: var(--gray-700);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.card-block p strong {
    color: var(--black);
    font-weight: 700;
}

/* Chart + summary row */
.analytics-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex-wrap: wrap;
}

.chart-card {
    flex: 2 1 700px;
    /* min-width:0 anula el mínimo implícito de flexbox (los flex items no
       se encogen más allá de su contenido por defecto). Sin esto, el
       min-width:280px de .chart-plot empuja a .chart-card -- y en cascada
       a .page y <body> -- a desbordar hacia la derecha en mobile, en vez
       de quedar contenido solo dentro de .chart-area (que sí scrollea). */
    min-width: 0;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    padding: 24px 31px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.chart-title {
    color: var(--pink-600);
    font-weight: 700;
    font-size: 22px;
    margin: 0;
}

.chart-sub {
    color: var(--gray-700);
    font-weight: 400;
    font-size: 12px;
    margin: 2px 0 0;
}

.range-toggle {
    display: flex;
    gap: 7px;
    align-items: center;
}

.range-toggle span {
    color: var(--gray-700);
    font-size: 12px;
    padding: 4px 25px;
    border-radius: 25px;
    white-space: nowrap;
    cursor: default;
}

.range-toggle span.active {
    background: var(--pink-600);
    color: var(--white);
    font-weight: 700;
    border-radius: 5px;
}

.chart-area {
    display: flex;
    gap: 12px;
    min-width: 0;
}

/* Ancho fijo del eje para poder replicarlo en el spacer de .chart-months
   y así alinear los meses exactamente bajo cada barra. */
.chart-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
    color: var(--black);
    opacity: 0.5;
    text-align: right;
    width: 34px;
    flex-shrink: 0;
    height: 176px;
}

.chart-plot {
    position: relative;
    flex: 1;
}

/* height:0 es a propósito: así "bottom: X%" ubica la línea punteada misma
   en la fracción exacta del eje. El label se posiciona aparte, absoluto,
   para que su propio alto no desplace la línea (bug que teníamos antes:
   el label sumaba ~28px a la caja y la línea aparecía más arriba de lo
   que decía el porcentaje). */
.goal-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--pink-600);
}

.goal-line .goal-label {
    position: absolute;
    right: 0;
    bottom: 6px;
    color: var(--pink-600);
    font-weight: 700;
    font-size: 11px;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

/* Altura exacta = altura del eje: así la barra al 100% toca el borde
   inferior de la caja y el "0" del eje queda a la misma altura que la
   base de las barras. Los meses viven en .chart-months, fuera de esta
   caja, para que no se sumen a su alto y empujen las barras hacia arriba. */
.bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 176px;
    padding-right: 70px;
}

.bar-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    flex: 1;
    min-width: 27px;
}

/* Fondo blanco: cuando el valor cae cerca de la línea de meta (ej. 340, 352
   vs meta 400), tapa el tramo de línea punteada detrás en vez de que el
   texto quede atravesado por ella. */
.bar-value {
    font-size: 12px;
    position: absolute;
    margin-bottom: 6px;
    background: var(--white);
    padding: 0 3px;
    border-radius: 2px;
    z-index: 1;
}

.bar {
    width: 21px;
    border-radius: 4px 4px 0 0;
}

.bar.over {
    background: linear-gradient(to bottom, var(--orange-start), var(--orange-end));
}

.bar.under {
    background: linear-gradient(to bottom, var(--green-bar-start), var(--green-bar-end));
}

.chart-months {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.chart-axis-spacer {
    width: 34px;
    flex-shrink: 0;
}

.month-row {
    flex: 1;
    display: flex;
    gap: 12px;
    padding-right: 70px;
}

.bar-month {
    flex: 1;
    min-width: 27px;
    font-size: 12px;
    opacity: 0.5;
    text-align: center;
    line-height: 1.25;
}

.bar-month.current {
    font-weight: 700;
    opacity: 1;
}

.legend {
    display: flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
}

.legend-row {
    display: flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.over {
    background: var(--orange-end);
}

.legend-dot.under {
    background: var(--green-bar-end);
}

.legend-line {
    width: 24px;
    height: 0;
    border-top: 1.5px dashed var(--pink-600);
}

.summary-card {
    flex: 1 1 320px;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    padding: 31px 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
}

.summary-title {
    color: var(--pink-600);
    font-weight: 700;
    font-size: 22px;
    margin: 0;
}

.summary-big {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.summary-big .num {
    color: var(--pink-600);
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
}

.summary-big .unit {
    font-size: 20px;
}

/* Info panels */
.info-panel {
    border-radius: 10px;
    padding: 31px 40px;
    display: flex;
    gap: 23px;
    flex: 1 1 320px;
}

.info-panel.pink {
    background: var(--pink-100);
}

.info-panel.green {
    background: var(--green-100);
}

.info-panel .icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.info-panel.pink .icon-circle {
    background: var(--pink-500);
}

.info-panel.green .icon-circle {
    background: var(--green-600);
}

.info-panel h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
}

.info-panel.green h3 {
    color: var(--green-600);
}

.info-panel p {
    color: var(--gray-700);
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

/* Monthly grid (detalle mes a mes: consumo/días/media diaria) */
.month-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    width: 100%;
}

.month-card {
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    padding: 21px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.month-card h4 {
    color: var(--pink-600);
    font-weight: 700;
    font-size: 20px;
    margin: 0;
}

.month-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.month-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gray-700);
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-border);
}

.month-line:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.month-line.media .l {
    color: var(--gray-700);
}

.month-line.media .v {
    color: var(--green-600);
    font-weight: 700;
}

/* Panel informativo centrado, de una sola fila (distinto del .info-panel
   genérico, que trae h3 + p y va en fila de a dos). */
.info-panel-centered {
    background: var(--pink-100);
    border-radius: 10px;
    padding: 18px;
    display: flex;
    gap: 23px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.info-panel-centered .icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pink-500);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.info-panel-centered p {
    color: var(--gray-700);
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
}

/* Información de interés */
.interest-heading {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.interest-row {
    display: flex;
    gap: 30px;
    width: 100%;
}

.interest-card {
    flex: 1;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    padding: 21px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.interest-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.interest-card p {
    color: var(--gray-700);
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
}

.interest-card .link {
    color: var(--pink-600);
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
}

/* Steps card */
.steps-card {
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    padding: 31px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.steps-title {
    color: var(--pink-600);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -1px;
    margin: 0;
}

.steps-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.step {
    flex: 1 1 260px;
    display: flex;
    gap: 23px;
    padding: 0 20px;
}

.step-icon-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.step-number {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: var(--pink-500);
    color: var(--white);
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon {
    width: 44px;
    height: 44px;
    color: #2e7d32;
}

.step-icon svg {
    width: 100%;
    height: 100%;
}

.step-copy h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
}

.step-copy p {
    color: var(--gray-700);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}

/* Mobile: exports de Figma (mobile-formulario.html y mobile-dashboard.html,
   frame de 420px). Cubren vacio y consumo completos; sin_consumo/error/
   sin_resultados extrapolan estos mismos ajustes por analogía -- revisar si
   llegan exports mobile específicos para esos estados. */
@media (max-width: 767px) {
    .page {
        padding: 26px 16px 40px;
        gap: 23px;
    }

    .header {
        height: auto;
    }

    .logo img {
        height: 30px;
    }

    .hero {
        flex-direction: column;
        align-items: stretch;
        gap: 23px;
    }

    /* flex:1 1 400px del desktop se hereda por .hero-copy/.hero-form; con
       .hero en columna esos 400px pasan a leerse como alto mínimo (no
       ancho) e inflan la caja con espacio vacío. Mismo problema para
       .daily-copy una vez aplanado (display:contents) directo bajo .page. */
    .hero-copy,
    .daily-copy {
        flex: none;
    }

    .eyebrow {
        font-size: 16px;
    }

    h1 {
        font-size: 24px;
        line-height: 1.3;
    }

    .body-text {
        font-size: 14px;
    }

    .hero-form {
        flex: none;
        justify-content: flex-start;
        gap: 15px;
    }

    .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .field {
        gap: 5px;
    }

    .field label {
        font-size: 14px;
    }

    .field:not(.dv) {
        flex: 1;
        min-width: 0;
    }

    .field:not(.dv) input {
        width: 100%;
    }

    .form-cta {
        flex: none;
        width: 100%;
    }

    .steps-card {
        padding: 31px 10px;
        gap: 24px;
    }

    .steps-title {
        padding: 0 10px;
    }

    .steps-row {
        flex-direction: column;
        gap: 24px;
    }

    .step {
        flex: none;
        flex-direction: column;
    }

    .step-icon-col {
        flex-direction: row;
    }

    /* mobile-dashboard.html: en mobile no hay tarjeta contenedora para
       meta+estado ni fila lado a lado para gráfico+resumen -- todo se
       aplana en secciones sueltas con el gap:23px de .page. display:contents
       saca el contenido de estos wrappers sin tocar el HTML (mismo template
       para ambos breakpoints). */
    .goal-section,
    .daily-row,
    .analytics-row,
    .chart-head {
        display: contents;
    }

    h2.big {
        font-size: 24px;
        line-height: 1.3;
    }

    /* Mismo problema de flex-basis-como-alto que .hero-copy/.daily-copy,
       ahora en los hijos de .analytics-row (también aplanado) y en
       .note-panel (hermano suelto de .daily-copy tras el aplanado). */
    .chart-card,
    .summary-card,
    .note-panel {
        flex: none;
    }

    /* info-panel también trae flex-basis en px de escritorio (mismo bug que
       .hero-copy/.daily-copy) -- .result-row .info-panel (sin_resultados,
       que sigue en fila) tiene un selector más específico y no se ve
       afectado por este reset. */
    .info-panel {
        flex: none;
        flex-direction: column;
        padding: 24px 20px;
        gap: 16px;
    }

    .info-panel p {
        line-height: 1.4;
        font-size: 14px;
    }

    .info-panel .icon-circle {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .info-panel h3 {
        font-size: 18px;
        margin: 0 0 10px;
    }

    .summary-card {
        padding: 24px 20px;
        gap: 22px;
    }

    .summary-title {
        font-size: 20px;
    }

    .summary-item {
        gap: 16px;
    }

    .summary-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .summary-text .label {
        font-size: 14px;
    }

    .summary-text .value {
        font-size: 18px;
    }

    .chart-card {
        padding: 20px 14px;
        gap: 16px;
    }

    .chart-title {
        font-size: 20px;
    }

    .chart-sub {
        font-size: 11px;
    }

    .range-toggle {
        gap: 6px;
    }

    .range-toggle span {
        font-size: 11px;
        padding: 4px 14px;
    }

    /* El chart no se comprime: scrollea horizontal con las barras a tamaño
       fijo (más chicas que desktop), como en el export mobile. */
    .chart-area {
        gap: 6px;
        overflow-x: auto;
    }

    .chart-axis {
        width: 24px;
        flex-shrink: 0;
        height: 150px;
        padding-bottom: 26px;
        font-size: 9px;
    }

    .chart-axis-spacer {
        width: 24px;
    }

    .chart-plot {
        min-width: 280px;
    }

    .goal-line .goal-label {
        font-size: 9px;
        bottom: 4px;
    }

    .bars,
    .month-row {
        padding-right: 50px;
    }

    .bars {
        gap: 6px;
        height: 150px;
        padding-top: 14px;
    }

    .bar-col {
        min-width: 20px;
    }

    .bar {
        width: 9px;
        border-radius: 2px 2px 0 0;
    }

    .bar-value {
        font-size: 9px;
    }

    .chart-months {
        margin-top: 8px;
    }

    .bar-month {
        font-size: 8px;
    }

    .legend {
        flex-direction: column;
        gap: 6px;
    }

    .legend-row {
        gap: 16px;
    }

    .legend-item {
        font-size: 11px;
    }

    .legend-dot {
        width: 10px;
        height: 10px;
    }

    .daily-copy .value .num {
        font-size: 36px;
    }

    .daily-copy .value .unit {
        font-size: 18px;
    }

    .note-panel {
        padding: 20px;
    }

    .card-block p {
        font-size: 14px;
    }

    .summary-big .num {
        font-size: 36px;
    }

    .summary-big .unit {
        font-size: 18px;
    }

    .month-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .info-panel-centered {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .interest-row {
        flex-direction: column;
        gap: 20px;
    }
}