/* 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: #ff0f64;
    --pink-500: #ff0f64;
    --pink-100: #ffe2e7;
    --green-100: #e1ffe4;
    --blue-100: #dde9fd;
    --blue-600: #1e5fbf;
    --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;
    --placeholder: rgba(0, 0, 0, 0.25);
    --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).
   Ya no tiene steps-card (se quitó del home, ver landing.html) -- ese gap
   queda directo entre header y .hero. */
.page--plain {
    gap: 77px;
}

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

/* Header + franja de título, réplica de avisos.enelcol.com.co (logo+menú
   sobre franja de color, título grande debajo) en fucsia -- ver
   landing.html para el porqué de la estructura (fuera de .page, a
   propósito, para que el fondo sea de borde a borde). */
.site-header {
    background: var(--error-border);
}

.site-header-top {
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.site-menu ul {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-menu a {
    color: var(--white);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
}

/* Padding vertical calculado para que la franja completa quede ~50% más
   alta que el diseño original (227px -> ~340px medido con
   getBoundingClientRect, 2026-08-14). */
.site-header-title {
    max-width: 1320px;
    margin: 0 auto;
    padding: 105px 20px;
    text-align: center;
}

.site-header-title p {
    color: var(--white);
    font-weight: 600;
    font-size: 48px;
    letter-spacing: -1px;
    margin: 0;
    line-height: 1.15;
}

.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 460px;
    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 460px;
    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;
}

.info-tooltip-wrap {
    position: relative;
    display: inline-flex;
}

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

/* Tooltip rosa estilo Figma: aparece en hover (CSS) o click (JS agrega
   .is-open, ver extra_body en landing.html) -- pointer-events: none evita
   que el propio tooltip robe el hover mientras se desvanece. */
.info-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 260px;
    background: var(--pink-600);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.2px;
    text-align: center;
    white-space: normal;
    padding: 10px 16px;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.info-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--pink-600);
}

.info-tooltip-wrap:hover .info-tooltip,
.info-tooltip-wrap.is-open .info-tooltip {
    opacity: 1;
    visibility: visible;
}

.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: 180px;
}

/* Export de Figma (empty-state.html, 2026-08-13) trae un color de
   placeholder explícito en vez del gris por defecto del navegador -- el
   texto realmente tecleado sigue en --black (arriba), esto solo afecta el
   placeholder. */
.field input::placeholder {
    color: var(--placeholder);
}

.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);
}

/* DV: se pide en el form por UX (el cliente está acostumbrado a verlo en su
   factura junto al número de cuenta), pero el input no tiene "name" -- nunca
   viaja en el POST ni se valida contra la BD. */
.field.dv input {
    width: 47px;
    height: 47px;
    text-align: center;
    font-size: 18px;
    padding: 0;
}

.separator {
    font-size: 39px;
    color: rgba(0, 0, 0, 0.4);
    padding-bottom: 8px;
}

.form-cta {
    flex: 1 1 240px;
    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-v2.html): clases propias,
   distintas de .goal-row/.goal-copy que usan consumo/sin_consumo. */
.result-row {
    display: flex;
    align-items: stretch;
    gap: 21px;
    flex-wrap: wrap;
}

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

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

.error-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;
}

.error-panel h2 {
    font-size: 25px;
    font-weight: 600;
    margin: 0 0 12px;
    line-height: 1.3;
}

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

.help-card {
    flex: 1 1 400px;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    padding: 21px 37px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 31px;
}

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

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

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

/* 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 .icon-circle img {
    width: 22px;
    height: 22px;
}

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

/* Caja destacada opcional dentro de "Así se definió tu meta" (ej. "¿Qué es
   la mediana?") -- campo separado de .card-block (AsiSeDefinioMetaIntro.
   descripcion_destacada), admite HTML igual que la descripción normal.
   Vacío por defecto, no se muestra nada si el tipo de cliente no la usa. */
.intro-destacado {
    background: var(--blue-100);
    border-radius: 10px;
    padding: 16px 20px;
    color: var(--black);
    font-size: 16px;
    line-height: 1.5;
}

.intro-destacado p {
    margin: 0;
}

.intro-destacado strong {
    color: var(--blue-600);
    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;
}

/* Oculto en desktop -- ahí el valor ya se ve flotando sobre la línea de
   meta (.goal-line .goal-label). Solo se muestra en mobile (ver media
   query), donde .goal-label flotante se oculta para no tener que
   reservarle ancho fijo a las columnas de barras. */
.goal-label-mobile {
    display: none;
    margin: 0;
    color: var(--pink-600);
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
}

.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: right;
    line-height: 1.3;
}

/* 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). Sin fondo e ícono
   chico (svg outline) desde el ajuste de meta-consumo-ext-v2.html -- antes
   tenía fondo rosa + círculo relleno de 44px. */
.info-panel-centered {
    border-radius: 10px;
    padding: 18px;
    display: flex;
    gap: 23px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.info-panel-centered .icon-circle-sm {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

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

/* "Seguimiento de tu ciclo" (meta-consumo-ext-ok/neutral/noheader-btn.html)
   -- tokens propios que no existían antes (rojo, gris de fondo del
   desglose), agregados junto a los de :root arriba. */
.stat-cards-row {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

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

.stat-card.excess {
    background: var(--pink-100);
    border: none;
}

.stat-card.saving {
    background: rgba(140, 212, 128, 0.35);
    border: none;
}

.stat-card.warning {
    background: #f1b96f;
    border: none;
}

.stat-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -1px;
}

.stat-card .value {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.stat-card .value .num {
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
}

.stat-card.excess .value .num {
    color: var(--pink-600);
}

.stat-card.saving .value .num,
.stat-card.saving .value .unit {
    color: #3c942d;
}

.stat-card.warning .value .num {
    color: var(--black);
}

.stat-card .value .unit {
    font-size: 24px;
}

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

.stat-card.warning p {
    color: var(--black);
}

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

.congrats-banner {
    background: rgba(140, 212, 128, 0.35);
    border-radius: 10px;
    padding: 21px 20px;
    display: flex;
    gap: 23px;
    align-items: flex-start;
    width: 100%;
}

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

.congrats-banner .title {
    color: #3c942d;
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 13px;
}

.congrats-banner h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
}

.congrats-banner p {
    color: var(--gray-700);
    font-size: 16px;
    margin: 0;
}

.gauge-donut-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex-wrap: wrap;
}

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

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

.gauge-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.gauge-side {
    font-weight: 700;
    color: var(--pink-600);
    font-size: 22px;
    text-align: right;
    line-height: 1.3;
}

.gauge-side span.reg {
    font-weight: 400;
}

/* 220px (no 180px del export original) -- con el texto más largo del
   estado "excedente" ("76,76 kWh de consumo excedente", 2 líneas) el
   contenido de .gauge-center se salía del contenedor y se montaba sobre
   .gauge-legend (confirmado midiendo getBoundingClientRect: ~8px de
   solape). 220px deja espacio de sobra para las 2 líneas del sub-texto en
   cualquier estado. */
/* 266px alto / .gauge-center top:154px -- medido con getBoundingClientRect:
   el cubo de la aguja (círculo en 100,100 del viewBox) cae en ~131-148px
   desde arriba de este contenedor: el texto tiene que empezar después de
   eso o la aguja lo atraviesa (bug reportado 2026-08-14, capturas
   compartidas). */
.gauge-svg-wrap {
    position: relative;
    width: 280px;
    height: 266px;
}

.gauge-center {
    position: absolute;
    left: 50%;
    top: 154px;
    transform: translateX(-50%);
    text-align: center;
}

.gauge-center .pct {
    font-weight: 700;
    font-size: 44px;
}

.gauge-center .pct-ahorro {
    color: #3c942d;
}

.gauge-center .pct-neutro {
    color: #f69522;
}

.gauge-center .pct-excedente {
    color: #f62222;
}

.gauge-center .pct-sm {
    font-size: 32px;
}

.gauge-center .label {
    font-size: 18px;
    font-weight: 700;
    margin-top: 4px;
}

.gauge-center .sub {
    color: var(--gray-700);
    font-size: 11px;
    margin-top: 2px;
}

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

.gauge-legend .legend-item {
    font-size: 12px;
}

.meaning-card {
    flex: 1 1 400px;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}

.meaning-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meaning-item .head {
    display: flex;
    align-items: center;
    gap: 5px;
}

.meaning-item .head span.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.meaning-item .head strong {
    font-size: 16px;
    font-weight: 700;
}

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

.case-box {
    border: 1px solid #ff0f64;
    border-radius: 10px;
    padding: 21px 20px;
    display: flex;
    flex-direction: column;
    gap: 23px;
}

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

/* Estado ahorro: "En tu caso" muestra el incentivo (verde), no el cobro
   (rosa/rojo) -- mismo verde que .stat-card.saving/.congrats-banner. */
.case-box.saving {
    border: none;
    background: rgba(140, 212, 128, 0.35);
}

.case-box.saving .case-title {
    color: #3c942d;
}

.case-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gray-700);
    gap: 12px;
}

.case-line .v {
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
}

.case-sub-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--black);
    margin: 4px 0 2px;
}

.factor-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.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: 14px;
    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;
    }

    .site-header-top {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .site-menu ul {
        gap: 18px;
        flex-wrap: wrap;
    }

    .site-header-title {
        padding: 55px 16px;
    }

    .site-header-title p {
        font-size: 26px;
    }

    .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). */
    .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;
    }

    /* .result-row (sin_resultados) se queda en fila + wrap (no pasa a
       columna), así que .error-panel/.help-card no sufren el bug de
       flex-basis-como-alto -- solo se reduce el padding para pantallas
       angostas. */
    .error-panel,
    .help-card {
        padding: 20px 24px;
    }

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

    .error-panel h2 {
        font-size: 20px;
    }

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

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

    /* flex:0 0 auto (no crecer/encoger) para que el ancho real sea la suma
       de las columnas de barras, no un valor fijo adivinado que se queda
       corto cuando hay más meses de historial. */
    .chart-plot {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* La versión flotante (sobre la línea punteada) se oculta acá: en un
       gráfico angosto necesitaba 50px reservados a la derecha para no
       taparse con la última barra. .goal-label-mobile (fuera del área que
       scrollea, junto al título) la reemplaza y libera ese espacio para
       las columnas de barras. */
    .goal-line .goal-label {
        display: none;
    }

    .goal-label-mobile {
        display: block;
    }

    /* Mismo gap en ambas filas para que los meses queden alineados bajo
       su barra (ver .bar-col/.bar-month abajo). Sin padding-right: ya no
       hace falta reservarle espacio al label flotante (ver arriba). */
    .bars,
    .month-row {
        padding-right: 0;
        gap: 2px;
    }

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

    /* Ancho fijo (no flex:1) para ambas columnas: con flex:1 + min-width
       las columnas se comprimían hasta el mínimo en pantallas angostas,
       más chico que el label numérico, y el label se salía sobre las
       columnas vecinas. Ancho fijo le da espacio de sobra al label sin
       depender de cuánto encoja el flex. 21px + gap 3px + el espacio
       liberado del label flotante alcanza para que los 12 meses entren
       sin scroll horizontal en la mayoría de los celulares actuales
       (~390px+ de ancho); en los más angostos (~375px o menos, o con
       valores de 2 dígitos) puede seguir apareciendo scroll -- sigue
       siendo funcional gracias a la sincronización de .chart-months. */
    .bar-col,
    .bar-month {
        flex: 0 0 21px;
        min-width: 21px;
    }

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

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

    /* gap:6px para igualar el de .chart-area (arriba) -- en desktop ambas
       filas comparten el gap:12px, pero acá .chart-area lo pisa a 6px y
       .chart-months se había quedado con el valor de escritorio, corriendo
       los meses 6px a la derecha de su barra correspondiente. overflow-x
       propio + scrollbar oculta: permite que si el chart scrollea (más de
       ~10-12 meses no entran fijos en una pantalla angosta), los meses
       puedan seguir el mismo scroll en vez de quedar recortados por el
       overflow-x:hidden del body (ver sincronización en el <script> del
       template). */
    .chart-months {
        gap: 6px;
        margin-top: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .chart-months::-webkit-scrollbar {
        display: none;
    }

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

    .stat-cards-row,
    .gauge-donut-row {
        flex-direction: column;
    }

    .gauge-side {
        text-align: center;
    }
}