/* ======================================= */
/* HOJA DE ESTILO PERSONALIZADA DE "NODE"  */
/* ======================================= */

/* --- 1. Variables de Color (Tu Paleta) --- */
:root {
    --color-fondo: #f4f7f6; /* Un gris muy claro */
    --color-tarjeta: #ffffff;
    --color-texto: #333333;
    --color-texto-secundario: #666;
    
    --color-primario: #007bff; /* Azul para enlaces y acentos */
    --color-gasto: #d9534f;
    --color-ingreso: #5cb85c;
    --color-analisis: #5bc0de;
    --color-categorias: #f0ad4e;
    --color-logout: #aaa;
    
    --sombra-tarjeta: 0 4px 12px rgba(0,0,0,0.05);
    --borde-radio: 8px;
}

/* --- 2. Estilos Globales --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    margin: 0;
    padding: 1.5rem;
}

main {
    max-width: 1000px;
    margin: 0 auto;
}

/* ======================================= */
/* 3. CABECERA (HEADER) Y RESPONSIVE       */
/* ======================================= */

.header-principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto 1.5rem auto;
    padding: 0.5rem 0;
}

/* --- Logo (Tu Petición) --- */
.logo-container {
    flex-shrink: 0; /* Evita que el logo se encoja */
}
/* ¡LA REGLA CLAVE! Resetea el enlace del logo */
.logo-container a {
    background: none !important; /* ¡Quita el fondo! */
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important; /* ¡Quita el redondeo! */
    text-decoration: none;
    display: inline-block;
    line-height: 0; /* Quita espacio extra */
}
/* Quita el efecto hover del logo */
.logo-container a:hover {
    opacity: 1;
}
#app-logo {
    height: 80px; /* ¡Tu altura de logo de 80px! */
    width: auto;
    display: block;
    border: none;
    outline: none;
}

/* --- Navegación Principal --- */
#nav-principal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.75rem; /* Espacio entre botones */
}
/* ¡SELECTOR CORREGIDO! Solo aplica a los botones */
.btn-nav {
    color: white;
    padding: 0.6rem 1rem;
    text-decoration: none;
    border-radius: var(--borde-radio);
    font-weight: 600;
    font-size: 0.9em;
    display: block;
    transition: opacity 0.2s;
}
.btn-nav:hover { opacity: 0.85; }

/* Asignar colores (ahora usa las clases) */
.btn-usuarios { background-color: var(--color-gasto); }
.btn-analisis { background-color: var(--color-analisis); }
.btn-categorias { background-color: var(--color-categorias); }
.btn-logout { background-color: var(--color-logout); }


/* --- Botón Hamburguesa (Estilos de responsive) --- */
#btn-hamburguesa {
    display: none; /* Oculto en PC */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001; /* Encima de todo */
}
#btn-hamburguesa span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-texto);
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* --- Estilos para Móvil (Media Query) --- */
@media (max-width: 768px) {
    #btn-hamburguesa {
        display: block;
    }
    #nav-principal {
        position: fixed;
        top: 0;
        right: -100%; /* Empieza fuera de la pantalla */
        width: 70%;
        height: 100vh;
        background-color: var(--color-tarjeta);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        z-index: 1000;
        transition: right 0.3s ease;
        padding-top: 6rem; /* Espacio para el logo/botón */
    }
    #nav-principal.abierto {
        right: 0; /* Se desliza a la vista */
    }
    #nav-principal ul {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    .btn-nav {
        text-align: center; /* Centrar texto en los botones */
    }
    #btn-hamburguesa.abierto span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    #btn-hamburguesa.abierto span:nth-child(2) {
        opacity: 0;
    }
    #btn-hamburguesa.abierto span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}

/* --- 4. Estilo de "Tarjeta" (Card) --- */
.card {
    background-color: var(--color-tarjeta);
    padding: 1.5rem;
    border-radius: var(--borde-radio);
    box-shadow: var(--sombra-tarjeta);
    margin-bottom: 1.5rem;
}
.card h2 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

/* --- 5. Formularios --- */
.form-grupo {
    margin-bottom: 1.2rem;
}
.form-grupo label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--color-texto-secundario);
}
.form-grupo input[type="text"],
.form-grupo input[type="email"],
.form-grupo input[type="password"],
.form-grupo input[type="number"],
.form-grupo input[type="date"],
.form-grupo select {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Crucial */
    font-size: 1rem;
}
.form-grupo input[type="color"] {
    width: 100%;
    height: 40px;
    padding: 0.2rem;
}

/* --- 6. Botones (btn) --- */
.btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--borde-radio);
    cursor: pointer;
    transition: opacity 0.2s;
    color: white;
}
.btn:hover { opacity: 0.85; }
.btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
/* Botones de acción principales */
.btn-ingreso { background-color: var(--color-ingreso); }
.btn-gasto { background-color: var(--color-gasto); }
.btn-cancelar { background-color: var(--color-logout); }

/* --- 7. Estilos Específicos del Dashboard --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.balance-card {
    grid-column: 1 / -1; /* Ocupa todo el ancho */
    text-align: center;
}
.balance-card h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-texto-secundario);
    border: none;
}
.balance-card #balance-total {
    font-size: 2.8rem;
    font-weight: 700;
}
.historial-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.historial-item:last-child { border-bottom: none; }
.historial-item span { font-weight: 500; }
.historial-item .gasto { color: var(--color-gasto); }
.historial-item .ingreso { color: var(--color-ingreso); }

/* --- 8. Estilos Específicos de Análisis (Tabla) --- */
.tabla-responsive {
    width: 100%;
    overflow-x: auto; /* ¡Esto hace la tabla deslizable en móviles! */
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 0.8rem 1rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}
th {
    background-color: var(--color-fondo);
    font-size: 0.9em;
    font-weight: 700;
}
td.gasto { color: var(--color-gasto); font-weight: 500; }
td.ingreso { color: var(--color-ingreso); font-weight: 500; }

/* ======================================= */
/* 10. ESTILOS DEL FOOTER (Tu Petición)    */
/* ======================================= */

.app-footer {
    background-color: #2b2b2b; /* Un gris oscuro, casi negro */
    color: #a9a9a9; /* Un gris claro para el texto */
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    margin-top: 3rem; /* Espacio entre el contenido y el footer */
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* El logo ocupa más espacio */
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.footer-col {
    padding: 0 1rem;
}

.footer-col h3 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-analisis); /* Un toque de color azul */
    padding-bottom: 0.5rem;
    display: inline-block;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 0.75rem;
}

.footer-col a {
    color: #a9a9a9;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-col a:hover {
    color: #ffffff; /* Se ilumina al pasar el mouse */
}

.footer-logo {
    max-height: 45px; /* Altura del logo Scienco */
    width: auto;
    margin-bottom: 1rem;
}

.footer-tagline {
    font-size: 0.9em;
    font-style: italic;
    margin: 0;
}

.footer-copyright {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #444;
    font-size: 0.9em;
    color: #777;
}

/* --- Responsive para el Footer --- */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Todo en una columna */
        text-align: center;
    }
    
    .footer-col h3 {
        display: block; /* El borde ahora ocupa todo el ancho */
    }
    
    .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ======================================= */
/* 11. FEEDBACK DE NAVEGACIÓN ACTIVA       */
/* ======================================= */

.btn-nav.activo {
    /* Le da un borde blanco sutil y lo hace más brillante */
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
    opacity: 1;
    font-weight: 700;
}

/* En móvil, también lo resaltamos */
@media (max-width: 768px) {
    .btn-nav.activo {
        /* Un color de fondo diferente en el menú lateral */
        background-color: var(--color-fondo);
        color: var(--color-primario);
    }
}