/*
 * Estilo global de la app. Todo sale de las variables y clases de Bootstrap 5.3; acá solo se
 * ajustan sus variables y se definen pocas clases propias. Las páginas usan estas clases, sin
 * estilos en línea.
 */

/*
 * Letra: Inter (static/vendor/InterVariable.woff2, un solo archivo con todos los pesos).
 * Sin el archivo, la página usa la letra del sistema.
 */
@font-face {
    font-family: "Inter";
    src: url("../vendor/InterVariable.2bf3d951bf9d.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
:root {
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Cifras de ancho fijo: los montos quedan alineados en listas y columnas */
body { font-variant-numeric: tabular-nums; }

/*
 * Tamaño base 15px. Bootstrap mide todo en rem (letra, botones, campos, márgenes), así que
 * achicar la raíz deja todo proporcionado: base 15px y small (.875em) 13px.
 */
html { font-size: 93.75%; }

/*
 * Escala de tamaños: 13px (small de Bootstrap) · 15px (base) · 17px (títulos) · 24px (página) · 40px (cifra principal).
 * Dos pesos: normal y semibold (600).
 */
:root {
    --app-font-size-title: 1.125rem;   /* ~17px */
    --app-font-size-page: 1.6rem;      /* 24px */
    --app-font-size-hero: 2.6667rem;   /* 40px */
}
/* Título de la página (h1) y las flechas del mes, que lo acompañan */
.page-title { font-size: var(--app-font-size-page); font-weight: 600; }
/* Títulos de tarjeta (.card-title de Bootstrap), de diálogo (.modal-title) y de sección */
.card-title, .modal-title, .section-title { font-size: var(--app-font-size-title); font-weight: 600; }
/* Cifra principal de una tarjeta (p. ej. el total del mes) */
.hero-figure { font-size: var(--app-font-size-hero); font-weight: 600; line-height: 1.1; }
.navbar-brand { font-size: var(--app-font-size-title); font-weight: 600; }

/* Texto de los ítems de lista tocables en el color normal (Bootstrap los pone en gris) */
.list-group-item-action { --bs-list-group-action-color: var(--bs-body-color); }

/*
 * Botón flotante redondo, abajo a la derecha (p. ej. el "+" del alta en el celular).
 * Se usa junto con .btn y un color: <button class="btn btn-primary fab d-md-none">.
 */
.fab {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 3.5rem;
    height: 3.5rem;
    margin: 1rem;
    border-radius: 50%;
    box-shadow: var(--bs-box-shadow);
    font-size: 1.75rem;
    line-height: 1;
}

/*
 * Botón de texto al lado de un título, del mismo tamaño y color: .page-title-action junto al de
 * la página (p. ej. las flechas de mes), .card-title-action junto al de una tarjeta (p. ej. las
 * flechas del gráfico de evolución).
 */
.page-title-action, .card-title-action {
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: var(--app-font-size-page);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-color: var(--bs-body-color);
    text-decoration: none;
}
.card-title-action { --bs-btn-font-size: var(--app-font-size-title); }

/*
 * Textos que se alternan en el mismo lugar (p. ej. el título del gráfico de evolución): todos en
 * la misma celda de una grilla, así ocupa el ancho del más largo y lo que sigue no se mueve.
 * Los que no se muestran llevan .invisible (ocupan lugar sin verse) y aria-hidden.
 */
.text-stack { display: inline-grid; }
.text-stack > * { grid-area: 1 / 1; }

/* Ícono bar-chart-fill (columnas) girado: barras horizontales con la más larga arriba */
.icon-horizontal-bars { transform: rotate(90deg) scaleX(-1); }

/*
 * <dialog> nativo con el aspecto del modal de Bootstrap.
 * Adentro se usan .modal-content, .modal-header, .modal-body y .modal-footer, que leen
 * las variables --bs-modal-* (Bootstrap las define en .modal; acá en el dialog).
 * Celular: pantalla completa (como modal-fullscreen-sm-down). Desde sm: 500px, arriba y centrado.
 */
dialog.app-dialog {
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);

    /* El borde y el fondo los pone .modal-content */
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-modal-color);
    overflow: visible;
}

dialog.app-dialog::backdrop {
    background-color: rgb(0 0 0 / 0.5);
}

@media (max-width: 575.98px) {
    dialog.app-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0;
    }

    /* El contenedor del formulario (#…-dialog) y el formulario ocupan todo el alto */
    dialog.app-dialog > *,
    dialog.app-dialog .modal-content {
        height: 100%;
    }

    dialog.app-dialog .modal-content {
        border: 0;
        border-radius: 0;
    }

    dialog.app-dialog .modal-body {
        overflow-y: auto;
    }
}

@media (min-width: 576px) {
    dialog.app-dialog {
        --bs-modal-margin: 1.75rem;
        --bs-modal-box-shadow: var(--bs-box-shadow);
        width: var(--bs-modal-width);
        max-width: calc(100% - 2 * var(--bs-modal-margin));
        /* Arriba, como el modal de Bootstrap (el dialog por defecto se centra verticalmente) */
        margin: var(--bs-modal-margin) auto auto;
        max-height: calc(100% - 2 * var(--bs-modal-margin));
        overflow-y: auto;
    }
}

/*
 * Gráficos (Chart.js, static/js/charts.js); el JS lee los colores de acá.
 * La serie única usa el azul primario de Bootstrap, el mismo de los botones (un solo azul en
 * la app). Contraste con el fondo blanco >= 3:1 (pauta para marcas de datos).
 */
:root {
    --chart-series-1: var(--bs-primary);
    /* Paso atenuado del mismo azul: columnas que no son el mes elegido en la evolución */
    --chart-series-1-muted: var(--bs-primary-border-subtle);
}
/*
 * Torta: un color por porción, en este orden (paleta categórica validada para daltonismo;
 * 2 a 5 no llegan a 3:1 con el fondo, por eso la leyenda lleva nombre y porcentaje).
 * La porción "Otras" va en gris (--bs-gray-500 de Bootstrap).
 */
:root {
    --chart-series-2: #eb6834;
    --chart-series-3: #1baf7a;
    --chart-series-4: #eda100;
    --chart-series-5: #e87ba4;
}
/*
 * Contenedor de un gráfico: barras y columnas con alto fijo (--chart-height); la torta mantiene
 * su proporción (aspectRatio en charts.js), así que alto automático.
 * Barras horizontales: el alto depende de la cantidad de barras y lo pone charts.js
 * (horizontalBarConfig). Evolución: .chart-evolution.
 */
.chart-box { position: relative; height: var(--chart-height); }
.chart-evolution { --chart-height: 220px; }
.chart-box:has(> canvas[data-chart-type="pie"]) { height: auto; }

/*
 * Ítems de lista (templates/cotton/list_item.html), también fuera de c-list (p. ej. en el inicio).
 * Celular: la tarjeta no tiene encabezado, así que la jerarquía la marca el estilo:
 * principal y destacado en negrita; secundarios chicos y en gris.
 * Desde md (768px): el encabezado ya dice qué es cada columna, texto uniforme como una tabla.
 */
.list-primary { font-weight: 600; }
.list-secondary { font-size: .875em; color: var(--bs-secondary-color); }
@media (min-width: 768px) {
    .list-primary { font-weight: inherit; }
    .list-secondary { font-size: inherit; color: inherit; }
}