/* =====================================================
   SISTEMA DE CONTROL DE GASTOS
   TEMA: AZUL METÁLICO + MORADO
===================================================== */


/* =====================================================
   VARIABLES DE COLORES
===================================================== */

:root {

    --azul-metalico: #1769aa;
    --azul-principal: #2563eb;
    --azul-oscuro: #0f2747;

    --morado: #6d28d9;
    --morado-claro: #8b5cf6;
    --morado-suave: #ede9fe;

    --azul-suave: #eaf3ff;

    --verde: #198754;
    --rojo: #dc3545;

    --gris-fondo: #f4f7fb;
    --gris-texto: #64748b;

    --blanco: #ffffff;

    --sombra:
        0 10px 30px rgba(15, 39, 71, 0.10);

    --sombra-hover:
        0 18px 40px rgba(15, 39, 71, 0.16);
}


/* =====================================================
   CONFIGURACIÓN GENERAL
===================================================== */

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background:
        linear-gradient(
            180deg,
            #f4f7fb 0%,
            #ffffff 45%,
            #f4f7fb 100%
        );

    color: #172033;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* Evita que las secciones queden debajo del navbar */

section {
    scroll-margin-top: 75px;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {

    background:
        linear-gradient(
            100deg,
            #0f2747,
            #1769aa 45%,
            #5b21b6 100%
        ) !important;

    box-shadow:
        0 4px 20px rgba(15, 39, 71, 0.25);

    min-height: 68px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.15);
}


.navbar-brand {

    font-size: 1.25rem;

    letter-spacing: 0.3px;

    color: #ffffff !important;
}


.navbar-brand:hover {
    color: #ffffff !important;
}


.nav-link {

    color:
        rgba(255, 255, 255, 0.82) !important;

    padding:
        0.55rem 0.7rem !important;

    margin-left: 2px;

    border-radius: 8px;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.nav-link:hover {

    color: #ffffff !important;

    background:
        rgba(255, 255, 255, 0.13);

    transform: translateY(-1px);
}


.nav-link.active {

    color: #ffffff !important;

    background:
        rgba(255, 255, 255, 0.16);
}


/* =====================================================
   INICIO / HERO
===================================================== */

.inicio-section {

    min-height: 610px;

    display: flex;

    align-items: center;

    padding:
        90px 0;

    background:

        radial-gradient(
            circle at 85% 25%,
            rgba(109, 40, 217, 0.15),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 80%,
            rgba(37, 99, 235, 0.14),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #edf5ff 0%,
            #ffffff 48%,
            #f5f0ff 100%
        );
}


/* Etiqueta superior */

.inicio-section .badge {

    background:
        linear-gradient(
            90deg,
            var(--azul-metalico),
            var(--morado)
        ) !important;

    border-radius: 30px;

    padding:
        9px 15px;

    letter-spacing: 0.5px;
}


/* Título */

.inicio-section h1 {

    font-weight: 800;

    letter-spacing: -1px;

    color:
        #172033;
}


.inicio-section h1::after {

    content: "";

    display: block;

    width: 85px;

    height: 5px;

    margin-top: 18px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--azul-principal),
            var(--morado)
        );
}


/* Texto */

.inicio-section .lead {

    color:
        #64748b !important;

    line-height: 1.7;
}


/* =====================================================
   BOTONES
===================================================== */

.btn-primary {

    border: none;

    background:
        linear-gradient(
            135deg,
            #1769aa,
            #2563eb
        );

    box-shadow:
        0 5px 15px rgba(37, 99, 235, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.btn-primary:hover {

    background:
        linear-gradient(
            135deg,
            #12598f,
            #5b21b6
        );

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.35);
}


.btn-outline-primary {

    color:
        var(--morado);

    border-color:
        var(--morado);
}


.btn-outline-primary:hover {

    background:
        var(--morado);

    border-color:
        var(--morado);

    color:
        #ffffff;
}


/* =====================================================
   RESUMEN PRINCIPAL
===================================================== */

.resumen-inicio {

    border:
        1px solid rgba(37, 99, 235, 0.08);

    border-radius:
        22px;

    background:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        0 18px 45px rgba(15, 39, 71, 0.15);

    overflow: hidden;

    position: relative;
}


.resumen-inicio::before {

    content: "";

    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--azul-metalico),
            var(--morado)
        );
}


.resumen-inicio h2 {

    color:
        var(--azul-principal);

    font-weight:
        800;
}


/* =====================================================
   SECCIONES
===================================================== */

.seccion {

    padding:
        90px 0;

    background:
        #ffffff;
}


.seccion.bg-light {

    background:
        linear-gradient(
            135deg,
            #f3f7fc,
            #f8f5ff
        ) !important;
}


.seccion-titulo {

    margin-bottom:
        50px;
}


.seccion-titulo .badge {

    border-radius:
        50%;

    width:
        32px;

    height:
        32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            var(--azul-metalico),
            var(--morado)
        ) !important;
}


.seccion-titulo h2 {

    font-size:
        2.2rem;

    font-weight:
        800;

    color:
        #172033;
}


.seccion-titulo p {

    color:
        var(--gris-texto);
}


/* =====================================================
   CARDS
===================================================== */

.card {

    border:
        1px solid rgba(37, 99, 235, 0.07);

    border-radius:
        18px;

    overflow:
        hidden;
}


.card-principal {

    background:
        rgba(255, 255, 255, 0.95);

    border:
        none;

    box-shadow:
        var(--sombra);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.card-principal:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--sombra-hover);
}


/* =====================================================
   ICONOS
===================================================== */

.icono {

    width:
        72px;

    height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    font-size:
        2rem;

    margin-bottom:
        20px;
}


/* =====================================================
   FORMULARIOS
===================================================== */

.form-control,
.form-select {

    border:
        1px solid #dbe3ef;

    border-radius:
        10px;

    padding:
        11px 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.form-control:focus,
.form-select:focus {

    border-color:
        var(--morado);

    box-shadow:
        0 0 0 0.2rem
        rgba(109, 40, 217, 0.12);
}


.input-group-text {

    background:
        var(--azul-suave);

    color:
        var(--azul-metalico);

    border:
        1px solid #dbe3ef;

    font-weight:
        700;
}


/* =====================================================
   CATEGORÍAS
===================================================== */

.categoria-card {

    border:
        none;

    border-top:
        4px solid transparent;

    border-image:
        linear-gradient(
            90deg,
            var(--azul-principal),
            var(--morado)
        ) 1;

    box-shadow:
        var(--sombra);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.categoria-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--sombra-hover);
}


.categoria-icon {

    width:
        65px;

    height:
        65px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 15px;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            var(--azul-suave),
            var(--morado-suave)
        );

    font-size:
        2rem;
}


/* =====================================================
   TABLA
===================================================== */

.table-container {

    border-radius:
        18px;

    overflow:
        hidden;

    box-shadow:
        var(--sombra);
}


.table {

    margin-bottom:
        0;

    background:
        #ffffff;
}


.table thead {

    background:
        linear-gradient(
            90deg,
            var(--azul-oscuro),
            var(--morado)
        );

    color:
        #ffffff;
}


.table thead th {

    color:
        #ffffff;

    border:
        none;

    padding:
        15px;

    white-space:
        nowrap;
}


.table tbody td {

    padding:
        14px;

    vertical-align:
        middle;
}


.table-hover tbody tr:hover {

    background:
        #f4f7ff;
}


/* =====================================================
   RESUMEN FINANCIERO
===================================================== */

.resumen-card {

    border:
        none;

    border-radius:
        20px;

    color:
        #ffffff;

    overflow:
        hidden;

    box-shadow:
        var(--sombra);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.resumen-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--sombra-hover);
}


.ingreso-card {

    background:
        linear-gradient(
            135deg,
            #087f5b,
            #20a978
        );
}


.gasto-card {

    background:
        linear-gradient(
            135deg,
            #c92a3a,
            #e35d6a
        );
}


.disponible-card {

    background:
        linear-gradient(
            135deg,
            #1769aa,
            #6d28d9
        );
}


.resumen-card h2 {

    font-size:
        2rem;

    font-weight:
        800;
}


/* =====================================================
   BADGES
===================================================== */

.badge {

    font-weight:
        600;
}


/* =====================================================
   SALIR
===================================================== */

.salir-section {

    padding:
        75px 0;

    background:
        linear-gradient(
            135deg,
            #edf3fb,
            #f2edff
        );
}


/* =====================================================
   FOOTER
===================================================== */

footer {

    background:
        linear-gradient(
            100deg,
            #0b1f38,
            #21104d
        ) !important;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 991px) {

    .navbar-nav {

        padding:
            10px 0;
    }

    .nav-link {

        margin:
            2px 0;
    }

    .inicio-section {

        min-height:
            auto;

        padding:
            70px 0;
    }

    .seccion {

        padding:
            70px 0;
    }

}


@media (max-width: 767px) {

    .inicio-section {

        text-align:
            center;

        padding:
            55px 0;
    }

    .inicio-section h1 {

        font-size:
            2.15rem;
    }

    .inicio-section h1::after {

        margin-left:
            auto;

        margin-right:
            auto;
    }

    .inicio-section .d-flex {

        justify-content:
            center;
    }

    .inicio-section .btn {

        width:
            100%;
    }

    .seccion {

        padding:
            60px 0;
    }

    .seccion-titulo h2 {

        font-size:
            1.8rem;
    }

}


@media (max-width: 575px) {

    .inicio-section h1 {

        font-size:
            1.85rem;
    }

    .resumen-inicio {

        margin-top:
            15px;
    }

    .card-body {

        padding:
            1.35rem;
    }

}