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

/* grid en vez de flex: con solo 2 hijos (logo, nav), la 3ra columna (1fr)
   queda vacía y actúa de contrapeso -- el menú (columna del medio, auto)
   queda centrado en la franja sin necesidad de un spacer extra en el HTML. */
.site-header-top {
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.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;
    /* Ancla de .mediana-nota -- ver por qué cuelga de acá y no de
       .month-row en el comentario de esa clase, más abajo. */
    position: relative;
}

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

/* Botón bajo el gráfico: ordena las barras de menor a mayor para mostrar
   la mediana (ver script en landing.html). */
.btn-sort-bars {
    align-self: flex-start;
    padding: 6px 18px;
    border: 2px solid var(--pink-500);
    border-radius: 25px;
    background: transparent;
    color: var(--pink-500);
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.btn-sort-bars:hover,
.btn-sort-bars[aria-pressed="true"] {
    background: var(--pink-100);
}

/* Modo ordenado (ver script en landing.html): caja azul claro detrás de la
   mediana, de la etiqueta fucsia hasta el mes. Se arma con dos ::before (uno
   en la columna de la barra, otro en el mes) porque barras y meses viven en
   contenedores distintos. --gap es el hueco entre columnas: la caja de dos
   meses (cantidad par) se extiende ese hueco para no dejar una costura. */
.bars,
.month-row {
    --gap: 12px;
    --caja-pad: 8px;
}

/* Espacio reservado abajo (no arriba: la nota de la mediana ahora cuelga
   debajo de los meses, ver .mediana-nota) para que no se monte sobre la
   leyenda/el botón, que son los siguientes elementos de .chart-card. Subido
   de 112 a 132px (2026-09-26) al volver el texto a dos líneas (copy + valor,
   ver landing.html/mediana-texto) -- una línea más de texto que reservar. */
.chart-card.is-sorted .chart-months {
    margin-bottom: 132px;
}

/* isolation crea un contexto de apilamiento propio: así el ::before con
   z-index:-1 queda detrás del contenido de la columna/mes pero no se
   esconde detrás del fondo blanco de la tarjeta. */
.bar-col.is-mediana,
.bar-month.is-mediana {
    isolation: isolate;
}

/* Con dos meses el callout (en la 1a columna) se extiende sobre la 2a: sin
   esto, el contexto de apilamiento de la 2a (pintado después) lo tapa. */
.bar-col.is-mediana-inicio {
    z-index: 2;
}

.bar-col.is-mediana-fin {
    z-index: 1;
}

.bar-col.is-mediana::before,
.bar-month.is-mediana::before {
    content: "";
    position: absolute;
    background: var(--blue-100);
    z-index: -1;
}

/* top: 0 -- la caja no debe pasar del punto más alto del eje Y (pedido del
   negocio, 2026-09-24: se veía "muy alta", casi pegada al título). .bar-col
   ya mide el 100% de .bars (el alto completo del eje), así que top:0 la
   nivela exacto con la etiqueta superior del eje, sin sobresalir. */
.bar-col.is-mediana::before {
    top: 0;
    bottom: 0;
}

.bar-month.is-mediana {
    position: relative;
    font-weight: 700;
    opacity: 1;
}

.bar-month.is-mediana::before {
    top: -10px;
    bottom: -6px;
    border-radius: 0 0 6px 6px;
}

.bar-col.is-mediana::before {
    border-radius: 6px 6px 0 0;
}

.is-mediana-unica::before {
    left: calc(var(--caja-pad) * -1);
    right: calc(var(--caja-pad) * -1);
}

.is-mediana-inicio::before {
    left: calc(var(--caja-pad) * -1);
    right: calc(var(--gap) * -1);
}

.is-mediana-fin::before {
    left: calc(var(--gap) * -1);
    right: calc(var(--caja-pad) * -1);
}

.is-mediana-inicio::before {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.is-mediana-fin::before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Nota debajo del/los mes(es) de la mediana: un corchete que baja desde el
   mes hasta un texto centrado, con el valor real (BD) y el copy según sean
   1 o 2 meses -- ver script en landing.html. top/left/width los pone JS
   (getBoundingClientRect, recalculados también en cada scroll), no CSS.

   Cuelga de .chart-card y NO de .month-row/.chart-months a propósito: en
   mobile .chart-months tiene overflow-x:auto (scroll horizontal de muchos
   meses) y eso recorta cualquier desborde vertical de sus hijos aunque no
   haya scroll real (regla de CSS: un eje "auto" fuerza al otro a dejar de
   ser "visible") -- la nota quedaría cortada por abajo. Al vivir en
   .chart-card (que no recorta) el corte no pasa, y como el script la
   reposiciona con getBoundingClientRect en cada scroll, sigue viéndose
   justo debajo del mes aunque el usuario desplace el chart. */
.mediana-nota {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mediana-bracket {
    box-sizing: border-box;
    width: 100%;
    height: 14px;
    border-left: 2px solid var(--blue-600);
    border-right: 2px solid var(--blue-600);
    border-bottom: 2px solid var(--blue-600);
    border-radius: 0 0 4px 4px;
}

.mediana-stem {
    width: 2px;
    height: 14px;
    background: var(--blue-600);
}

/* Dos líneas a propósito (pedido del negocio, 2026-09-26, revierte el intento
   anterior de unirlas en una sola): copy y valor van en <p> separados (ver
   landing.html), y white-space:nowrap -- que se hereda a ambos <p> -- evita
   que cada uno se parta a la mitad. Sin max-width (antes 260px) no se
   recorta -- crece lo que necesite, centrado bajo el mes gracias a
   align-items:center en .mediana-nota (ver arriba), sin importar que sea
   más ancho que el corchete que tiene debajo. */
.mediana-texto {
    width: max-content;
    white-space: nowrap;
    margin-top: 6px;
    text-align: center;
    color: var(--blue-600);
    font-size: 13px;
    line-height: 1.35;
}

.mediana-texto p {
    margin: 0;
}

.mediana-texto p + p {
    margin-top: 2px;
}

.legend-dot--mediana {
    background: var(--blue-100);
}

.legend-mediana[hidden] {
    display: none;
}

.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;
    /* Ancla de .mediana-nota (JS le pone left/width medidos) -- ver arriba. */
    position: relative;
}

.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.blue {
    background: var(--blue-100);
    /* A diferencia de .pink/.green (que viven en una fila junto a otro
       panel del mismo alto), esta caja es hija directa de .page
       (flex-direction: column) -- ahí el "320px" de flex-basis del
       .info-panel base se interpreta como alto mínimo, no ancho, e
       infla la caja muy por encima de su contenido. */
    flex: none;
}

.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.blue .icon-circle {
    background: var(--blue-600);
}

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

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

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

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

.info-panel p + p {
    margin-top: 8px;
}

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

/* 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-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: var(--gray-700);
    white-space: nowrap;
}

.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: "De acuerdo con tu consumo del periodo" 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;
}

/* Estado excedente: mismo rosa de fondo que .stat-card.excess. */
.case-box.excess {
    border: none;
    background: var(--pink-100);
}

/* Estado neutro: mismo naranja de fondo que .stat-card.warning. */
.case-box.warning {
    border: none;
    background: #f1b96f;
}

.case-box.warning .case-title {
    color: var(--black);
}

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

.case-formula {
    font-size: 12px;
    color: var(--gray-700);
    line-height: 1.5;
    margin: 0;
}

.case-formula strong {
    color: var(--black);
    font-weight: 700;
}

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

    /* vuelve a flex+wrap en mobile: el grid de 3 columnas del desktop no
       tiene sentido si logo/menú se apilan al envolver. */
    .site-header-top {
        display: flex;
        justify-content: space-between;
        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;
        --gap: 2px;
        --caja-pad: 6px;
    }

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

    .mediana-texto {
        font-size: 11px;
    }

    .chart-card.is-sorted .chart-months {
        /* Subido de 96 a 113px (2026-09-26), mismo motivo que en desktop. */
        margin-bottom: 113px;
    }

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

/* Popup de aviso general (AvisoPopup), administrable desde el admin --
   overlay sobre TODA la pantalla, sin botón de cerrar. */
.aviso-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.aviso-popup-box {
    background: var(--white);
    border: 1.5px solid var(--pink-600);
    border-radius: 6px;
    max-width: 440px;
    width: 100%;
    padding: 32px 40px;
    text-align: center;
}

.aviso-popup-box h2 {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    color: var(--pink-600);
}

.aviso-popup-body {
    color: var(--black);
    font-size: 15px;
    line-height: 1.6;
}

.aviso-popup-body p {
    margin: 0 0 16px;
}

.aviso-popup-body p:last-child {
    margin-bottom: 0;
}

.aviso-popup-body strong {
    color: var(--pink-600);
    font-weight: 700;
}

@media (max-width: 767px) {
    .aviso-popup-box {
        padding: 24px 20px;
    }
}