Desarrollo web
Finanzas
Inicia sesión para descargarEl proyecto FINANZAS se concibe como una plataforma web integral diseñada para facilitar la gestión financiera personal. Su propósito es ofrecer a los usuarios un control centralizado y claro sobre sus cuentas, …
Publicado: 26/05/2025
Por:
Juan Felipe Orozco Cortés
Contenido del tutorial ⌄
- Estructura de Directorios del Proyecto
- dashboard.html
- dashboard.css
- cuentas.html
- cuentas.css
- gastos.html
- gastos.css
- inversiones.html
- inversiones.css
- presupuestos.html
- presupuestos.css
- reportes.html
- reportes.css
- configuracion.html
- configuracion.css
- mi_perfil.html
- mi_perfil.css
- seguridad.html
- seguridad.css
- ayuda.html
- ayuda.css
- login.html
- login.css
- registrarse.html
- registrarse.css
- recuperar-contrasena.html
- recuperar-contrasena.css
El proyecto FINANZAS se concibe como una plataforma web integral diseñada para facilitar la gestión financiera personal. Su propósito es ofrecer a los usuarios un control centralizado y claro sobre sus cuentas, gastos, presupuestos e inversiones, ayudándoles a tomar decisiones informadas y alcanzar sus objetivos económicos de manera eficiente.
Estructura de Directorios del Proyecto
│ ayuda.html
│ configuracion.html
│ cuentas.html
│ dashboard.html
│ gastos.html
│ inversiones.html
│ login.html
│ mi_perfil.html
│ presupuesto.html
│ recuperar-contrasena.html
│ registrarse.htm
│ reportes.html
│ seguridad.html
│
├───css
│ │ base.css
│ │ layout.css
│ │ state.css
│ │ style.css
│ │ theme.css
│ │
│ ├───modules
│ │ button.css
│ │ card.css
│ │ footer.css
│ │ form.css
│ │ list.css
│ │ logo.css
│ │ modal.css
│ │ navigation.css
│ │ profile-dropdown.css
│ │ progress-bar.css
│ │
│ └───pages
│ ayuda.css
│ configuracion.css
│ cuentas.css
│ dashboard.css
│ gastos.css
│ inversiones.css
│ login.css
│ mi_perfil.css
│ presupuestos.css
│ recuperar-contrasena.css
│ registrarse.css
│ reportes.css
│ seguridad.css
│
└───js
ayuda.js
configuracion.js
cuentas.js
gastos.js
inversiones.js
login.js
mi_perfil.js
navigation.js
presupuestos.js
recuperar-contrasena.js
registrarse.js
reportes.js
seguridad.jsdashboard.html
A continuación, se presenta el código fuente del archivo dashboard.html. Esta página constituye el panel principal de la plataforma "FINANZAS", ofreciendo al usuario un resumen visual de su estado financiero general y acceso directo a las funcionalidades más importantes:
FINANZAS: Código del Panel Principal (dashboard.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Dashboard</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/dashboard.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item active"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="content">
<section id="dashboard">
<div class="section-header">
<h1><ion-icon name="speedometer-outline"></ion-icon> Panel Principal</h1>
<p class="subtitle">Un resumen visual de tu estado financiero general.</p>
</div>
<div class="dashboard-grid">
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="cash-outline"></ion-icon>Resumen de Saldos</h2>
<div class="card-content">
<p class="amount">$25,750.00 <span class="currency">USD</span></p>
<p class="detail">Saldo total en todas tus cuentas.</p>
<div class="chart-placeholder">
<span>Gráfico de distribución de saldos</span>
</div>
</div>
</div>
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="calendar-clear-outline"></ion-icon>Próximos Vencimientos</h2>
<div class="card-content">
<ul class="upcoming-list">
<li>
<div>
<span class="item-name">Suscripción App Música</span>
<span class="item-date d-block">Vence: 25 Mayo, 2025</span>
</div>
<span class="item-amount">$9.99</span>
</li>
<li>
<div>
<span class="item-name">Factura Internet</span>
<span class="item-date d-block">Vence: 28 Mayo, 2025</span>
</div>
<span class="item-amount">$59.00</span>
</li>
<li>
<div>
<span class="item-name">Tarjeta de Crédito</span>
<span class="item-date d-block">Vence: 01 Junio, 2025</span>
</div>
<span class="item-amount">$150.00</span>
</li>
</ul>
<a href="gastos.html#proximos-pagos" class="view-all-link">Ver todos los vencimientos <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>
</div>
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="pie-chart-outline"></ion-icon>Progreso de Presupuestos</h2>
<div class="card-content">
<div>
<p><strong>Alimentación:</strong> $350 / $500</p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">70% utilizado</p>
</div>
<div style="margin-top: 15px;">
<p><strong>Ocio:</strong> $120 / $200</p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 60%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">60% utilizado</p>
</div>
<a href="presupuestos.html#lista" class="view-all-link">Gestionar presupuestos <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>
</div>
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="golf-outline"></ion-icon>Metas de Ahorro</h2>
<div class="card-content">
<div>
<p><strong>Viaje a Europa:</strong> $3,500 / $5,000</p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">70% alcanzado</p>
</div>
<div style="margin-top: 15px;">
<p><strong>Nuevo Portátil:</strong> $800 / $1,200</p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 66%;" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">66% alcanzado</p>
</div>
<a href="presupuestos.html#metas" class="view-all-link">Ver todas las metas <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>
</div>
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="trending-up-outline"></ion-icon>Resumen de Inversiones</h2>
<div class="card-content">
<p class="amount">$12,500.00 <span class="currency">USD</span></p>
<p class="detail">Valor total de tu portafolio.</p>
<div class="investment-performance">
<span class="performance-change positive">+3.5% <ion-icon name="arrow-up"></ion-icon></span>
<span class="period">Últimos 30 días</span>
</div>
<div class="chart-placeholder">
<span>Gráfico de rendimiento de inversiones</span>
</div>
<a href="inversiones.html#portafolio" class="view-all-link">Ver detalle de inversiones <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>
</div>
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="list-outline"></ion-icon>Última Actividad</h2>
<div class="card-content">
<ul class="activity-list">
<li>
<div class="activity-icon expense"><ion-icon name="arrow-down-circle-outline"></ion-icon></div>
<div class="activity-details">
<span class="activity-description">Café Matutino</span>
<span class="activity-category">Alimentación</span>
</div>
<div class="activity-amount expense">-$3.50</div>
</li>
<li>
<div class="activity-icon income"><ion-icon name="arrow-up-circle-outline"></ion-icon></div>
<div class="activity-details">
<span class="activity-description">Salario Mensual</span>
<span class="activity-category">Ingresos</span>
</div>
<div class="activity-amount income">+$2,500.00</div>
</li>
<li>
<div class="activity-icon expense"><ion-icon name="arrow-down-circle-outline"></ion-icon></div>
<div class="activity-details">
<span class="activity-description">Compra Supermercado</span>
<span class="activity-category">Hogar</span>
</div>
<div class="activity-amount expense">-$75.20</div>
</li>
<li>
<div class="activity-icon income"><ion-icon name="arrow-up-circle-outline"></ion-icon></div>
<div class="activity-details">
<span class="activity-description">Venta Acción XYZ</span>
<span class="activity-category">Inversiones</span>
</div>
<div class="activity-amount income">+$120.00</div>
</li>
</ul>
<a href="reportes.html#transacciones" class="view-all-link">Ver todas las transacciones <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>
</div>
</div> <div class="dashboard-quick-actions">
<h2 class="section-subtitle"><ion-icon name="flash-outline"></ion-icon> Acciones Rápidas</h2>
<div class="actions-grid">
<a href="gastos.html#registrar" class="action-button neumorphic-button">
<ion-icon name="add-circle-outline"></ion-icon>
<span>Registrar Gasto</span>
</a>
<a href="cuentas.html#registrar-ingreso" class="action-button neumorphic-button">
<ion-icon name="trending-up-outline"></ion-icon>
<span>Añadir Ingreso</span>
</a>
<a href="inversiones.html#ver" class="action-button neumorphic-button">
<ion-icon name="bar-chart-outline"></ion-icon>
<span>Ver Inversiones</span>
</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script>
</body>
</html>Explicación del código: FINANZAS: Código del Panel Principal (dashboard.html)
<!DOCTYPE >
Declara el tipo de documento como 5, asegurando que el navegador interprete el código con los estándares más recientes.
< lang="es">
Elemento raíz de la página, especificando que el idioma principal del contenido es español (es).
<head>
Inicia la sección de cabecera del documento. Contiene metadatos, enlaces a estilos y el título, información no visible directamente en la página.
<meta charset="UTF-8">
Define la codificación de caracteres como UTF-8, permitiendo el uso correcto de acentos, eñes y otros símbolos especiales.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el área visible (viewport) para que la página se adapte al ancho del dispositivo y tenga una escala inicial de 1.0, esencial para el diseño responsivo.
<title>Plataforma Financiera - Dashboard</title>
Establece el título que se mostrará en la pestaña del navegador y en los resultados de búsqueda para esta página específica: el Dashboard.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que define la apariencia general y estilos base de la plataforma.
<link rel="stylesheet" href="css/pages/dashboard.css">
Enlaza una hoja de estilos específica para la página del Dashboard (dashboard.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la tipografía "Poppins" desde Google Fonts con varios grosores (weights) para usar en el texto de la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible de la página.
<header class="glassmorphic-header">
Define la cabecera principal de la página, con una clase glassmorphic-header que sugiere un estilo de diseño translúcido (efecto vidrio).
<div class="logo-container">
<a href="dashboard.#dashboard" class="logo">FINANZAS</a>
</div>
Contenedor para el logotipo. Incluye un enlace (<a>) con el texto "FINANZAS" que probablemente lleva al inicio del dashboard.
<nav class="main-nav">
Sección de navegación principal de la aplicación.
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
Contenedor para el icono del menú tipo "hamburguesa" (usando ion-icon), usualmente para mostrar/ocultar la navegación en dispositivos móviles.
<ul id="nav-menu-list">
Lista desordenada (<ul>) que contendrá los ítems del menú de navegación principal.
<li><a href="dashboard.#dashboard" class="nav-item active"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
Primer ítem de la lista de navegación, enlace a "Dashboard". Está marcado como active e incluye un icono y texto.
<li><a href="cuentas.#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
Ítem de navegación para la sección "Cuentas", con su respectivo icono y texto.
<li><a href="gastos.#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
Ítem de navegación para la sección "Gastos", con su icono y texto.
<li><a href="inversiones.#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
Ítem de navegación para la sección "Inversiones", con su icono y texto.
<li><a href="presupuestos.#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
Ítem de navegación para la sección "Presupuestos", con su icono y texto.
<li><a href="reportes.#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
Ítem de navegación para la sección "Reportes", con su icono y texto.
<li><a href="configuracion.#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
Ítem de navegación para la sección "Configuración", con su icono y texto.
</ul>
</nav>
Cierra la lista (</ul>) y la sección de navegación principal (</nav>).
<div class="header-actions">
Contenedor para acciones adicionales en la cabecera, como el perfil de usuario.
<div class="user-profile-container">
Contenedor específico para los elementos del perfil de usuario.
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
Icono del perfil de usuario, que probablemente activa el menú desplegable.
<div class="profile-dropdown" id="profileDropdownMenu">
Contenedor del menú desplegable del perfil, inicialmente oculto.
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
Cabecera del menú desplegable, mostrando un avatar, nombre y correo del usuario.
<ul class="dropdown-menu-list">
<li><a href="configuracion.#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
Ítem del menú desplegable para "Mi Perfil".
<li><a href="configuracion.#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
Ítem del menú desplegable para "Seguridad".
<li><a href="ayuda." class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
Ítem del menú desplegable para "Ayuda".
<li><hr class="dropdown-divider"></li>
Separador horizontal dentro del menú desplegable.
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
Cierra el menú desplegable (</ul>), el contenedor del perfil, las acciones del header y la cabecera principal (</header>).
<main class="content">
Elemento principal (<main>) que contendrá el contenido específico de la página del dashboard.
<section id="dashboard">
Sección principal de la página, identificada como "dashboard".
<div class="section-header">
<h1><ion-icon name="speedometer-outline"></ion-icon> Panel Principal</h1>
<p class="subtitle">Un resumen visual de tu estado financiero general.</p>
</div>
Cabecera de la sección "dashboard", con un título principal (<h1>) que incluye un icono y un subtítulo (<p>).
<div class="dashboard-grid">
Contenedor que organiza los diferentes elementos del dashboard en una cuadrícula.
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="cash-outline"></ion-icon>Resumen de Saldos</h2>
<div class="card-content">
<p class="amount">$25,750.00 <span class="currency">USD</span></p>
<p class="detail">Saldo total en todas tus cuentas.</p>
<div class="chart-placeholder">
<span>Gráfico de distribución de saldos</span>
</div>
</div>
</div>
Tarjeta del dashboard para el "Resumen de Saldos". Incluye título, monto, detalle y un espacio para un gráfico.
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="calendar-clear-outline"></ion-icon>Próximos Vencimientos</h2>
<div class="card-content">
<ul class="upcoming-list">
<li>
<div>
<span class="item-name">Suscripción App Música</span>
<span class="item-date d-block">Vence: 25 Mayo, 2025</span>
</div>
<span class="item-amount">$9.99</span>
</li>
Tarjeta para "Próximos Vencimientos". Contiene una lista (<ul>) de ítems (<li>) con nombre, fecha y monto del vencimiento. Este es el primer ítem de la lista.
<li>
<div>
<span class="item-name">Factura Internet</span>
<span class="item-date d-block">Vence: 28 Mayo, 2025</span>
</div>
<span class="item-amount">$59.00</span>
</li>
Segundo ítem en la lista de próximos vencimientos.
<li>
<div>
<span class="item-name">Tarjeta de Crédito</span>
<span class="item-date d-block">Vence: 01 Junio, 2025</span>
</div>
<span class="item-amount">$150.00</span>
</li>
</ul>
<a href="gastos.#proximos-pagos" class="view-all-link">Ver todos los vencimientos <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>
</div>
Tercer ítem de vencimientos, cierre de la lista (</ul>) y un enlace para ver todos los vencimientos. Cierre de la tarjeta "Próximos Vencimientos".
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="pie-chart-outline"></ion-icon>Progreso de Presupuestos</h2>
<div class="card-content">
<div>
<p><strong>Alimentación:</strong> $350 / $500</p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">70% utilizado</p>
</div>
Tarjeta para "Progreso de Presupuestos". Muestra el progreso de un presupuesto (Alimentación) con una barra de progreso.
<div style="margin-top: 15px;">
<p><strong>Ocio:</strong> $120 / $200</p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 60%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">60% utilizado</p>
</div>
<a href="presupuestos.#lista" class="view-all-link">Gestionar presupuestos <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>
</div>
Segundo ítem de progreso de presupuesto (Ocio) y enlace para gestionar presupuestos. Cierre de la tarjeta.
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="golf-outline"></ion-icon>Metas de Ahorro</h2>
<div class="card-content">
<div>
<p><strong>Viaje a Europa:</strong> $3,500 / $5,000</p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">70% alcanzado</p>
</div>
Tarjeta para "Metas de Ahorro". Muestra el progreso de una meta (Viaje a Europa) con barra de progreso.
<div style="margin-top: 15px;">
<p><strong>Nuevo Portátil:</strong> $800 / $1,200</p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 66%;" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">66% alcanzado</p>
</div>
<a href="presupuestos.#metas" class="view-all-link">Ver todas las metas <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>
</div>
Segundo ítem de meta de ahorro (Nuevo Portátil) y enlace para ver todas las metas. Cierre de la tarjeta.
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="trending-up-outline"></ion-icon>Resumen de Inversiones</h2>
<div class="card-content">
<p class="amount">$12,500.00 <span class="currency">USD</span></p>
<p class="detail">Valor total de tu portafolio.</p>
<div class="investment-performance">
<span class="performance-change positive">+3.5% <ion-icon name="arrow-up"></ion-icon></span>
<span class="period">Últimos 30 días</span>
</div>
<div class="chart-placeholder">
<span>Gráfico de rendimiento de inversiones</span>
</div>
<a href="inversiones.#portafolio" class="view-all-link">Ver detalle de inversiones <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>
</div>
Tarjeta para "Resumen de Inversiones". Muestra el valor total, rendimiento y un placeholder para gráfico, con enlace a detalles.
<div class="dashboard-card">
<h2 class="card-title"><ion-icon name="list-outline"></ion-icon>Última Actividad</h2>
<div class="card-content">
<ul class="activity-list">
<li>
<div class="activity-icon expense"><ion-icon name="arrow-down-circle-outline"></ion-icon></div>
<div class="activity-details">
<span class="activity-description">Café Matutino</span>
<span class="activity-category">Alimentación</span>
</div>
<div class="activity-amount expense">-$3.50</div>
</li>
Tarjeta para "Última Actividad". Contiene una lista de transacciones recientes. Este es el primer ítem de actividad (un gasto).
<li>
<div class="activity-icon income"><ion-icon name="arrow-up-circle-outline"></ion-icon></div>
<div class="activity-details">
<span class="activity-description">Salario Mensual</span>
<span class="activity-category">Ingresos</span>
</div>
<div class="activity-amount income">+$2,500.00</div>
</li>
Segundo ítem de actividad (un ingreso).
<li>
<div class="activity-icon expense"><ion-icon name="arrow-down-circle-outline"></ion-icon></div>
<div class="activity-details">
<span class="activity-description">Compra Supermercado</span>
<span class="activity-category">Hogar</span>
</div>
<div class="activity-amount expense">-$75.20</div>
</li>
Tercer ítem de actividad (un gasto).
<li>
<div class="activity-icon income"><ion-icon name="arrow-up-circle-outline"></ion-icon></div>
<div class="activity-details">
<span class="activity-description">Venta Acción XYZ</span>
<span class="activity-category">Inversiones</span>
</div>
<div class="activity-amount income">+$120.00</div>
</li>
</ul>
<a href="reportes.#transacciones" class="view-all-link">Ver todas las transacciones <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>
</div>
</div>
Cuarto ítem de actividad (un ingreso), cierre de la lista de actividad (`</ul>`), enlace a todas las transacciones y cierre de la tarjeta "Última Actividad". El comentario indica el cierre de `dashboard-grid`.
<div class="dashboard-quick-actions">
<h2 class="section-subtitle"><ion-icon name="flash-outline"></ion-icon> Acciones Rápidas</h2>
<div class="actions-grid">
<a href="gastos.#registrar" class="action-button neumorphic-button">
<ion-icon name="add-circle-outline"></ion-icon>
<span>Registrar Gasto</span>
</a>
Sección de "Acciones Rápidas" dentro del dashboard. El primer botón/enlace es para "Registrar Gasto".
<a href="cuentas.#registrar-ingreso" class="action-button neumorphic-button">
<ion-icon name="trending-up-outline"></ion-icon>
<span>Añadir Ingreso</span>
</a>
Segundo botón/enlace de acción rápida para "Añadir Ingreso".
<a href="inversiones.#ver" class="action-button neumorphic-button">
<ion-icon name="bar-chart-outline"></ion-icon>
<span>Ver Inversiones</span>
</a>
</div>
</div>
</section> </main>
Tercer botón/enlace de acción rápida para "Ver Inversiones". Cierre del `actions-grid`, `dashboard-quick-actions`, la sección `dashboard` y el elemento `main`.
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
Inicio del pie de página (<footer>). Contiene una sección superior (footer-top) con información sobre el sitio y el logo.
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.#dashboard">Dashboard</a></li>
<li><a href="cuentas.#cuentas">Cuentas</a></li>
<li><a href="gastos.#gastos">Gastos</a></li>
<li><a href="inversiones.#inversiones">Inversiones</a></li>
<li><a href="presupuestos.#presupuestos">Presupuestos</a></li>
</ul>
</div>
Sección de enlaces de navegación en el pie de página.
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.">Acerca del Proyecto</a></li>
<li><a href="privacidad.">Política de Privacidad</a></li>
<li><a href="terminos.">Términos de Servicio</a></li>
<li><a href="ayuda.">Centro de Ayuda</a></li>
<li><a href="seguridad.">Seguridad</a></li>
</ul>
</div>
Sección de enlaces de información (Acerca de, Privacidad, etc.) en el pie de página.
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
Sección de contacto y redes sociales en el pie de página. Cierre de `footer-top`.
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página (`footer-bottom`) con información de copyright y diseño. Cierre de `footer-container` y `footer`.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza el módulo ES de Ionicons desde un CDN para los iconos vectoriales, para navegadores modernos.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza la versión tradicional de Ionicons para navegadores más antiguos que no soportan módulos ES.
<script src="js/navigation.js"></script>
Enlaza un archivo JavaScript local (navigation.js), probablemente para manejar la interactividad del menú de navegación.
</body>
Cierra el cuerpo (<body>) y el documentodashboard.css
A continuación, se muestra el contenido del archivo css/pages/dashboard.css. Este archivo define los estilos específicos aplicados exclusivamente a la página del Panel Principal (Dashboard), personalizando su apariencia y complementando las reglas de estilo globales y de los módulos generales:
dashboard.css – Estilos del Panel Principal: Rendimiento de Inversiones y Acciones Rápidas
/* css/pages/dashboard.css */
.investment-performance {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0 15px 0;
padding: 10px;
background-color: rgba(var(--color-background-rgb), 0.3);
border-radius: var(--border-radius-small);
}
.investment-performance .period {
font-size: 0.85em;
color: var(--color-text-muted);
}
.dashboard-quick-actions {
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid var(--color-surface);
}
.section-subtitle {
font-size: 1.6em;
color: var(--color-text);
margin-bottom: 25px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.section-subtitle ion-icon {
color: var(--color-neon-accent);
font-size: 1.3em;
}Explicación del código: dashboard.css – Estilos del Panel Principal: Rendimiento de Inversiones y Acciones Rápidas
/* css/pages/dashboard.css */
Comentario que indica la ruta y el nombre del archivo, especificando que estos estilos pertenecen a dashboard.css dentro de la carpeta css/pages.
.investment-performance {
Inicia la definición de estilos para los elementos HTML que tengan la clase investment-performance.
display: flex;
Establece el tipo de visualización del contenedor como flex, lo que permite un modelo de diseño flexible para sus elementos hijos.
justify-content: space-between;
Dentro del modelo flexbox, esta propiedad distribuye los elementos hijos a lo largo del eje principal, colocando el primer elemento al inicio, el último al final y el espacio restante se distribuye equitativamente entre ellos.
align-items: center;
Alinea los elementos hijos al centro del eje transversal (perpendicular al eje principal) del contenedor flexible.
margin: 10px 0 15px 0;
Define los márgenes exteriores del elemento: 10 píxeles para el margen superior, 0 píxeles para el derecho, 15 píxeles para el inferior y 0 píxeles para el izquierdo.
padding: 10px;
Añade un relleno (espacio interior) de 10 píxeles en todos los lados del elemento.
background-color: rgba(var(--color-background-rgb), 0.3);
Establece el color de fondo del elemento. Utiliza una variable CSS (--color-background-rgb) para el color base y le aplica una opacidad del 30% (0.3 en el canal alfa), creando un efecto semitransparente.
border-radius: var(--border-radius-small);
Redondea las esquinas del elemento utilizando el valor de una variable CSS (--border-radius-small), que define un radio de curvatura pequeño.
}
Cierra el bloque de reglas de estilo para la clase .investment-performance.
.investment-performance .period {
Define estilos para los elementos con la clase period que son descendientes de un elemento con la clase investment-performance.
font-size: 0.85em;
Establece el tamaño de la fuente del texto a un 85% del tamaño de la fuente de su elemento padre. em es una unidad relativa.
color: var(--color-text-muted);
Establece el color del texto utilizando el valor de la variable CSS (--color-text-muted), que generalmente es un color de texto con menor énfasis o más atenuado.
}
Cierra el bloque de reglas de estilo para .investment-performance .period.
.dashboard-quick-actions {
Inicia la definición de estilos para los elementos HTML que tengan la clase dashboard-quick-actions.
margin-top: 50px;
Añade un margen superior de 50 píxeles al elemento, separándolo de los elementos que estén encima.
padding-top: 30px;
Añade un relleno superior de 30 píxeles dentro del elemento.
border-top: 1px solid var(--color-surface);
Añade un borde en la parte superior del elemento de 1 píxel de grosor, de estilo sólido, y con el color definido por la variable CSS --color-surface.
}
Cierra el bloque de reglas de estilo para la clase .dashboard-quick-actions.
.section-subtitle {
Inicia la definición de estilos para los elementos HTML que tengan la clase section-subtitle.
font-size: 1.6em;
Establece el tamaño de la fuente a 1.6 veces el tamaño de la fuente del elemento padre.
color: var(--color-text);
Define el color del texto utilizando la variable CSS --color-text, que es probablemente el color de texto principal del tema.
margin-bottom: 25px;
Añade un margen inferior de 25 píxeles, creando espacio debajo del subtítulo.
text-align: center;
Centra el texto horizontalmente dentro del elemento.
display: flex;
Establece el tipo de visualización como flex para el subtítulo, lo que permite alinear fácilmente sus contenidos internos (como un icono y texto).
align-items: center;
Cuando display es flex, esta propiedad alinea los elementos hijos verticalmente al centro.
justify-content: center;
Cuando display es flex, esta propiedad centra los elementos hijos horizontalmente.
gap: 10px;
Establece un espaciado (hueco) de 10 píxeles entre los elementos hijos directos del subtítulo (por ejemplo, entre un icono y el texto que lo acompaña).
}
Cierra el bloque de reglas de estilo para la clase .section-subtitle.
.section-subtitle ion-icon {
Define estilos específicamente para los elementos ion-icon que son descendientes directos de un elemento con la clase section-subtitle.
color: var(--color-neon-accent);
Establece el color de estos iconos utilizando la variable CSS --color-neon-accent, que define el color de acento neón del tema.
font-size: 1.3em;
Establece el tamaño de estos iconos a 1.3 veces el tamaño de la fuente de su elemento padre (.section-subtitle).
}
Cierra el bloque de reglas de estilo para .section-subtitle ion-icon.cuentas.html
A continuación, se detalla el código HTML correspondiente al archivo cuentas.html. Esta sección de la plataforma "FINANZAS" está diseñada para que el usuario pueda administrar sus diversas cuentas financieras, registrar ingresos y tener una visión clara de sus saldos:
FINANZAS: Código de Gestión de Cuentas (cuentas.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Mis Cuentas</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/cuentas.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item active"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="content">
<section id="cuentas" class="cuentas-page-container">
<div class="section-header">
<h1><ion-icon name="wallet-outline"></ion-icon> Gestión de Cuentas e Ingresos</h1>
<p class="subtitle">Administra tus cuentas financieras y registra tus ingresos.</p>
</div>
<div class="cuentas-summary-actions">
<div class="summary-card">
<h4>Saldo Total Consolidado</h4>
<p class="total-balance" id="totalBalanceDisplay">$0.00 <span class="currency">USD</span></p>
<span class="detail">Suma de todas tus cuentas activas.</span>
</div>
<div class="actions-buttons-group">
<button id="openAddAccountModalBtn" class="neumorphic-button primary-action">
<ion-icon name="add-circle-outline"></ion-icon>
<span>Agregar Nueva Cuenta</span>
</button>
<button id="openRegisterIncomeModalBtn" class="neumorphic-button secondary-action">
<ion-icon name="arrow-up-circle-outline"></ion-icon>
<span>Registrar Ingreso</span>
</button>
<button id="connectBankAccountBtn" class="neumorphic-button tertiary-action">
<ion-icon name="link-outline"></ion-icon>
<span>Conectar Cuenta Bancaria</span>
</button>
</div>
</div>
<div class="section-header" style="margin-top: 40px;">
<h2><ion-icon name="list-outline"></ion-icon> Mis Cuentas</h2>
</div>
<div id="accountListContainer" class="account-list-grid">
<div class="dashboard-card account-card example-card">
<div class="account-card-header">
<h3 class="account-name">Ej: Banco Principal (Ahorros)</h3>
<span class="account-type-badge">Cuenta Bancaria</span>
</div>
<div class="account-card-body">
<p class="account-balance-label">Saldo Actual:</p>
<p class="account-balance">$1,250.00 <span class="currency">USD</span></p>
<p class="account-initial-balance-label">Saldo Inicial: $1,000.00 USD</p>
</div>
<div class="account-card-actions">
<button class="action-btn view-transactions-btn"><ion-icon name="eye-outline"></ion-icon> Transacciones</button>
<button class="action-btn edit-account-btn"><ion-icon name="pencil-outline"></ion-icon> Editar</button>
<button class="action-btn delete-account-btn"><ion-icon name="trash-outline"></ion-icon> Eliminar</button>
</div>
</div>
<p class="empty-state" id="emptyAccountListMessage">Aún no has agregado ninguna cuenta. ¡Comienza agregando una!</p>
</div>
</section>
</main>
<div id="addAccountModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="add-circle-outline"></ion-icon> Agregar Nueva Cuenta</h2>
<button class="close-modal-btn" id="closeAddAccountModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
<form id="addAccountForm">
<div class="modal-body">
<div class="form-group">
<label for="accountName">Nombre de la Cuenta:</label>
<input type="text" id="accountName" name="accountName" required placeholder="Ej: Ahorros Banco X, Tarjeta Visa Gold">
</div>
<div class="form-group">
<label for="accountType">Tipo de Cuenta:</label>
<select id="accountType" name="accountType" required>
<option value="" disabled selected>Selecciona un tipo</option>
<option value="Cuenta Bancaria">Cuenta Bancaria (Ahorros, Corriente)</option>
<option value="Tarjeta de Crédito">Tarjeta de Crédito</option>
<option value="Efectivo">Efectivo</option>
<option value="Inversión">Cuenta de Inversión</option>
<option value="Billetera Electrónica">Billetera Electrónica</option>
<option value="Otra">Otra</option>
</select>
</div>
<div class="form-group">
<label for="initialBalance">Saldo Inicial:</label>
<input type="number" id="initialBalance" name="initialBalance" step="0.01" required placeholder="0.00">
</div>
<div class="form-group">
<label for="accountCurrency">Moneda:</label>
<select id="accountCurrency" name="accountCurrency" required>
<option value="USD">USD - Dólar Estadounidense</option>
<option value="COP" selected>COP - Peso Colombiano</option>
<option value="EUR">EUR - Euro</option>
</select>
</div>
<div class="form-group">
<label for="accountDescription">Descripción (Opcional):</label>
<textarea id="accountDescription" name="accountDescription" rows="3" placeholder="Ej: Cuenta principal para gastos diarios"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Cuenta</button>
</div>
</form>
</div>
</div>
<div id="registerIncomeModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="arrow-up-circle-outline"></ion-icon> Registrar Nuevo Ingreso</h2>
<button class="close-modal-btn" id="closeRegisterIncomeModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
<form id="registerIncomeForm">
<div class="modal-body">
<div class="form-group">
<label for="incomeDescription">Descripción/Fuente del Ingreso:</label>
<input type="text" id="incomeDescription" name="incomeDescription" required placeholder="Ej: Salario Mayo, Venta de Artículo">
</div>
<div class="form-group">
<label for="incomeAmount">Monto:</label>
<input type="number" id="incomeAmount" name="incomeAmount" step="0.01" required placeholder="0.00">
</div>
<div class="form-group">
<label for="incomeDate">Fecha:</label>
<input type="date" id="incomeDate" name="incomeDate" required>
</div>
<div class="form-group">
<label for="incomeAccount">Cuenta de Destino:</label>
<select id="incomeAccount" name="incomeAccount" required>
<option value="" disabled selected>Selecciona una cuenta</option>
</select>
</div>
<div class="form-group">
<label for="incomeCategory">Categoría del Ingreso:</label>
<select id="incomeCategory" name="incomeCategory" required>
<option value="" disabled selected>Selecciona una categoría</option>
<option value="Salario">Salario</option>
<option value="Bonificación">Bonificación</option>
<option value="Ingresos Pasivos">Ingresos Pasivos (ej. rentas)</option>
<option value="Regalo">Regalo</option>
<option value="Ventas">Ventas</option>
<option value="Otro">Otro Ingreso</option>
</select>
</div>
<div class="form-group form-group-checkbox">
<input type="checkbox" id="incomeIsRecurring" name="incomeIsRecurring">
<label for="incomeIsRecurring">¿Es un ingreso recurrente?</label>
</div>
<div id="incomeRecurrenceOptions" class="form-group recurrence-options" style="display: none;">
<label for="incomeFrequency">Frecuencia:</label>
<select id="incomeFrequency" name="incomeFrequency">
<option value="diario">Diario</option>
<option value="semanal">Semanal</option>
<option value="quincenal">Quincenal</option>
<option value="mensual" selected>Mensual</option>
<option value="anual">Anual</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Ingreso</button>
</div>
</form>
</div>
</div>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>Explicación del código: FINANZAS: Código de Gestión de Cuentas (cuentas.html)
<!DOCTYPE html>
Declara que el tipo de documento es HTML5, lo que asegura que el navegador interprete el código utilizando los estándares más recientes y compatibles.
<html lang="es">
Es el elemento raíz de la página HTML. El atributo lang="es" especifica que el idioma principal del contenido de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Esta parte contiene metadatos, enlaces a hojas de estilo (CSS), y el título de la página, que no son visibles directamente en el cuerpo de la página.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8. Esto es crucial para asegurar que todos los caracteres, incluyendo acentos y símbolos especiales del español, se muestren correctamente.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" (el área visible de la página en el dispositivo del usuario). width=device-width ajusta el ancho de la página al del dispositivo, e initial-scale=1.0 establece el nivel de zoom inicial. Es fundamental para el diseño web responsivo y adaptable a diferentes tamaños de pantalla.
<title>Plataforma Financiera - Mis Cuentas</title>
Establece el título de la página, "Plataforma Financiera - Mis Cuentas". Este título aparece en la pestaña del navegador, en los resultados de los motores de búsqueda y cuando se guarda la página como marcador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal de la aplicación, ubicada en css/style.css. Este archivo probablemente contiene los estilos globales y la base visual para toda la plataforma.
link rel="stylesheet" href="css/pages/cuentas.css">
Enlaza una hoja de estilos específica para la página "Mis Cuentas", ubicada en css/pages/cuentas.css. Este archivo contendrá los estilos particulares para los elementos de esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde el servicio Google Fonts, especificando varios grosores (weights) desde 300 hasta 700. display=swap ayuda a que el texto se muestre con una fuente de respaldo mientras se carga la fuente principal.
</head>
Cierra la sección de cabecera (<head>) del documento.
<body>
Inicia el cuerpo (<body>) del documento. Aquí se encuentra todo el contenido visible de la página web.
<header class="glassmorphic-header">
Define la cabecera principal (<header>) de la página. La clase glassmorphic-header sugiere que se aplicará un estilo visual de "vidrio esmerilado" o translúcido.
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
Contenedor para el logotipo. Incluye un enlace (<a>) con el texto "FINANZAS" (clase logo) que dirige al usuario a la sección dashboard de dashboard.html.
<nav class="main-nav">
Elemento de navegación (<nav>) que contiene el menú principal de la aplicación.
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
Contenedor para el icono del menú "hamburguesa" (realizado con ion-icon). Este icono se usa comúnmente para desplegar el menú de navegación en pantallas pequeñas.
<ul id="nav-menu-list">
Lista desordenada (<ul>) con el id="nav-menu-list", que contiene los ítems del menú de navegación.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
Ítem de lista (<li>) para el enlace "Dashboard". Incluye un icono (ion-icon) y el texto "Dashboard".
<li><a href="cuentas.html#cuentas" class="nav-item active"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
Ítem de lista para "Cuentas". La clase active indica que esta es la página actualmente seleccionada en el menú.
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
Ítem de lista para la sección "Gastos".
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
Ítem de lista para la sección "Inversiones".
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
Ítem de lista para la sección "Presupuestos".
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
Ítem de lista para la sección "Reportes".
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
Ítem de lista para la sección "Configuración".
</ul>
</nav>
Cierra la lista del menú de navegación (</ul>) y la etiqueta de navegación (</nav>).
<div class="header-actions">
Contenedor para otros elementos de acción en la cabecera, como el perfil de usuario.
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
Contenedor e icono para el perfil del usuario. El id sugiere que este icono podría ser interactivo (por ejemplo, para abrir un menú desplegable).
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
Define el menú desplegable del perfil (probablemente oculto por defecto). La cabecera del desplegable muestra un avatar, el nombre y el correo del usuario.
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div> </div> </div> </header>
Lista de opciones dentro del menú desplegable del perfil: "Mi Perfil", "Seguridad", "Ayuda", un separador (<hr>), y "Cerrar Sesión". Luego se cierran los contenedores y la cabecera principal (</header>).
<main class="content">
Elemento principal (<main>) de la página, con la clase content para estilos.
<section id="cuentas" class="cuentas-page-container">
Sección principal de esta página, con id="cuentas" y una clase específica cuentas-page-container para los estilos de la página de gestión de cuentas.
<div class="section-header">
<h1><ion-icon name="wallet-outline"></ion-icon> Gestión de Cuentas e Ingresos</h1>
<p class="subtitle">Administra tus cuentas financieras y registra tus ingresos.</p>
</div>
Cabecera de la sección "Cuentas", con un título principal (<h1>) que incluye un icono y un párrafo de subtítulo (<p>) que describe el propósito de la página.
<div class="cuentas-summary-actions">
Un contenedor para el resumen de cuentas y los botones de acción principales.
<div class="summary-card">
<h4>Saldo Total Consolidado</h4>
<p class="total-balance" id="totalBalanceDisplay">$0.00 <span class="currency">USD</span></p>
<span class="detail">Suma de todas tus cuentas activas.</span>
</div>
Tarjeta de resumen que muestra el "Saldo Total Consolidado". El id="totalBalanceDisplay" sugiere que este valor se actualizará dinámicamente.
<div class="actions-buttons-group">
<button id="openAddAccountModalBtn" class="neumorphic-button primary-action">
<ion-icon name="add-circle-outline"></ion-icon>
<span>Agregar Nueva Cuenta</span>
</button>
Grupo de botones de acción. El primero es "Agregar Nueva Cuenta", con un id para controlar la apertura de un modal.
<button id="openRegisterIncomeModalBtn" class="neumorphic-button secondary-action">
<ion-icon name="arrow-up-circle-outline"></ion-icon>
<span>Registrar Ingreso</span>
</button>
Botón para "Registrar Ingreso", también con un id para la funcionalidad de modal.
<button id="connectBankAccountBtn" class="neumorphic-button tertiary-action">
<ion-icon name="link-outline"></ion-icon>
<span>Conectar Cuenta Bancaria</span>
</button>
</div> </div>
Botón para "Conectar Cuenta Bancaria". Se cierran los contenedores del grupo de botones y del resumen/acciones.
<div class="section-header" style="margin-top: 40px;">
<h2><ion-icon name="list-outline"></ion-icon> Mis Cuentas</h2>
</div>
Un segundo encabezado de sección, esta vez un <h2>, para la lista de "Mis Cuentas". Tiene un margen superior aplicado mediante estilo en línea.
<div id="accountListContainer" class="account-list-grid">
Contenedor (div) donde se mostrará la lista o cuadrícula de cuentas del usuario. El id sugiere que este contenido se cargará o manipulará dinámicamente.
<div class="dashboard-card account-card example-card">
<div class="account-card-header">
<h3 class="account-name">Ej: Banco Principal (Ahorros)</h3>
<span class="account-type-badge">Cuenta Bancaria</span>
</div>
Una tarjeta de ejemplo (example-card) que muestra cómo se visualizaría una cuenta. Tiene una cabecera con el nombre de la cuenta y un distintivo del tipo de cuenta.
<div class="account-card-body">
<p class="account-balance-label">Saldo Actual:</p>
<p class="account-balance">$1,250.00 <span class="currency">USD</span></p>
<p class="account-initial-balance-label">Saldo Inicial: $1,000.00 USD</p>
</div>
Cuerpo de la tarjeta de cuenta, mostrando etiquetas y valores para el saldo actual y el saldo inicial.
<div class="account-card-actions">
<button class="action-btn view-transactions-btn"><ion-icon name="eye-outline"></ion-icon> Transacciones</button>
<button class="action-btn edit-account-btn"><ion-icon name="pencil-outline"></ion-icon> Editar</button>
<button class="action-btn delete-account-btn"><ion-icon name="trash-outline"></ion-icon> Eliminar</button>
</div>
</div>
Sección de acciones para la tarjeta de cuenta, con botones para ver transacciones, editar y eliminar la cuenta.
<p class="empty-state" id="emptyAccountListMessage">Aún no has agregado ninguna cuenta. ¡Comienza agregando una!</p>
</div> </section> </main>
Un párrafo (`<p>`) que se muestra cuando no hay cuentas (estado vacío). Luego se cierran el contenedor de la lista de cuentas, la sección `cuentas` y el elemento `main`.
<div id="addAccountModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="add-circle-outline"></ion-icon> Agregar Nueva Cuenta</h2>
<button class="close-modal-btn" id="closeAddAccountModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
Inicio de la estructura de un modal (ventana emergente) para "Agregar Nueva Cuenta". Incluye un div principal con clase modal (probablemente oculto por defecto), contenido del modal, cabecera con título y botón de cierre.
<form id="addAccountForm">
<div class="modal-body">
Formulario (<form>) para agregar una nueva cuenta, dentro del cuerpo del modal.
<div class="form-group">
<label for="accountName">Nombre de la Cuenta:</label>
<input type="text" id="accountName" name="accountName" required placeholder="Ej: Ahorros Banco X, Tarjeta Visa Gold">
</div>
Grupo de formulario para el "Nombre de la Cuenta", con una etiqueta (<label>) y un campo de entrada de texto (<input>).
<div class="form-group">
<label for="accountType">Tipo de Cuenta:</label>
<select id="accountType" name="accountType" required>
<option value="" disabled selected>Selecciona un tipo</option>
<option value="Cuenta Bancaria">Cuenta Bancaria (Ahorros, Corriente)</option>
<option value="Tarjeta de Crédito">Tarjeta de Crédito</option>
<option value="Efectivo">Efectivo</option>
<option value="Inversión">Cuenta de Inversión</option>
<option value="Billetera Electrónica">Billetera Electrónica</option>
<option value="Otra">Otra</option>
</select>
</div>
Grupo de formulario para el "Tipo de Cuenta", utilizando un elemento de selección (<select>) con varias opciones (<option>).
<div class="form-group">
<label for="initialBalance">Saldo Inicial:</label>
<input type="number" id="initialBalance" name="initialBalance" step="0.01" required placeholder="0.00">
</div>
Grupo de formulario para el "Saldo Inicial", con un campo de entrada de tipo numérico.
<div class="form-group">
<label for="accountCurrency">Moneda:</label>
<select id="accountCurrency" name="accountCurrency" required>
<option value="USD">USD - Dólar Estadounidense</option>
<option value="COP" selected>COP - Peso Colombiano</option>
<option value="EUR">EUR - Euro</option>
</select>
</div>
Grupo de formulario para seleccionar la "Moneda" de la cuenta.
<div class="form-group">
<label for="accountDescription">Descripción (Opcional):</label>
<textarea id="accountDescription" name="accountDescription" rows="3" placeholder="Ej: Cuenta principal para gastos diarios"></textarea>
</div>
</div>
Grupo de formulario para una "Descripción" opcional, utilizando un área de texto (`<textarea>`). Cierre del cuerpo del modal.
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Cuenta</button>
</div>
</form>
</div> </div>
Pie del modal, con botones para "Cancelar" y "Guardar Cuenta". Cierre del formulario, del contenido del modal y del `div` del modal "addAccountModal".
<div id="registerIncomeModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="arrow-up-circle-outline"></ion-icon> Registrar Nuevo Ingreso</h2>
<button class="close-modal-btn" id="closeRegisterIncomeModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
Inicio de un segundo modal, esta vez para "Registrar Nuevo Ingreso", con una estructura similar al anterior.
<form id="registerIncomeForm">
<div class="modal-body">
<div class="form-group">
<label for="incomeDescription">Descripción/Fuente del Ingreso:</label>
<input type="text" id="incomeDescription" name="incomeDescription" required placeholder="Ej: Salario Mayo, Venta de Artículo">
</div>
Formulario para registrar ingresos. Primer grupo para la "Descripción/Fuente del Ingreso".
<div class="form-group">
<label for="incomeAmount">Monto:</label>
<input type="number" id="incomeAmount" name="incomeAmount" step="0.01" required placeholder="0.00">
</div>
Grupo de formulario para el "Monto" del ingreso.
<div class="form-group">
<label for="incomeDate">Fecha:</label>
<input type="date" id="incomeDate" name="incomeDate" required>
</div>
Grupo de formulario para la "Fecha" del ingreso.
<div class="form-group">
<label for="incomeAccount">Cuenta de Destino:</label>
<select id="incomeAccount" name="incomeAccount" required>
<option value="" disabled selected>Selecciona una cuenta</option>
</select>
</div>
Grupo de formulario para seleccionar la "Cuenta de Destino" del ingreso. Las opciones se cargarán dinámicamente.
<div class="form-group">
<label for="incomeCategory">Categoría del Ingreso:</label>
<select id="incomeCategory" name="incomeCategory" required>
<option value="" disabled selected>Selecciona una categoría</option>
<option value="Salario">Salario</option>
<option value="Bonificación">Bonificación</option>
<option value="Ingresos Pasivos">Ingresos Pasivos (ej. rentas)</option>
<option value="Regalo">Regalo</option>
<option value="Ventas">Ventas</option>
<option value="Otro">Otro Ingreso</option>
</select>
</div>
Grupo de formulario para la "Categoría del Ingreso".
<div class="form-group form-group-checkbox">
<input type="checkbox" id="incomeIsRecurring" name="incomeIsRecurring">
<label for="incomeIsRecurring">¿Es un ingreso recurrente?</label>
</div>
Casilla de verificación (checkbox) para indicar si el ingreso es recurrente.
<div id="incomeRecurrenceOptions" class="form-group recurrence-options" style="display: none;">
<label for="incomeFrequency">Frecuencia:</label>
<select id="incomeFrequency" name="incomeFrequency">
<option value="diario">Diario</option>
<option value="semanal">Semanal</option>
<option value="quincenal">Quincenal</option>
<option value="mensual" selected>Mensual</option>
<option value="anual">Anual</option>
</select>
</div>
</div>
Opciones de recurrencia (Frecuencia) que se muestran si se marca la casilla anterior. Cierre del cuerpo del modal.
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Ingreso</button>
</div>
</form>
</div> </div>
Pie del modal de registro de ingresos, con botones para "Cancelar" y "Guardar Ingreso". Cierre del formulario y del modal.
<footer class="site-footer">
Inicio del pie de página (<footer>), similar en estructura al de dashboard.html.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
Contenedor del pie de página y su sección superior con el logo y descripción.
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
Sección de enlaces de "Navegación" en el pie de página.
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
Sección de enlaces de "Información" en el pie de página.
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
Sección de "Contacto" y redes sociales en el pie de página. Cierre de `footer-top`.
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Sección inferior del pie de página con copyright y diseñador. Cierre de `footer-container` y `footer`.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza la versión de Ionicons para navegadores antiguos (sin soporte para módulos ES).
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js, para la funcionalidad del menú de navegación.
<script src="js/cuentas.js"></script>
Enlaza el archivo JavaScript local cuentas.js, que contendrá la lógica específica para la página de gestión de cuentas (manejo de modales, listado de cuentas, etc.).
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento.cuentas.css
El siguiente bloque de código corresponde al archivo cuentas.css. Este archivo contiene las reglas de estilo personalizadas y específicas para la página de "Gestión de Cuentas e Ingresos", asegurando que todos los elementos, desde las tarjetas de resumen hasta los modales de entrada de datos, tengan la apariencia deseada y coherente con el diseño de la plataforma "FINANZAS":
cuentas.css – Estilos de Página de Cuentas: Tarjetas, Listas y Modales
/* cuentas.css */
.cuentas-page-container {
padding-bottom: 40px;
}
.cuentas-page-container .section-header {
margin-bottom: 30px;
}
.cuentas-page-container .section-header h2 {
font-size: 1.8em;
color: var(--color-text);
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-surface);
margin-bottom: 20px;
justify-content: center;
}
.cuentas-page-container .section-header h2 ion-icon {
color: var(--color-neon-accent);
}
.cuentas-summary-actions {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-bottom: 40px;
align-items: stretch;
}
.cuentas-summary-actions .summary-card {
flex: 1;
min-width: 280px;
background: linear-gradient(145deg, var(--color-surface) 0%, #16162e 100%);
padding: 25px;
border-radius: var(--border-radius-main);
box-shadow: var(--neumorphic-shadow-outset);
border: 1px solid rgba(var(--color-neon-accent-rgb), 0.1);
color: var(--color-text);
}
.summary-card h4 {
font-size: 1.3em;
color: var(--color-neon-accent);
margin-bottom: 10px;
font-weight: 600;
}
.summary-card .total-balance {
font-size: 2.2em;
font-weight: 700;
color: var(--color-text);
margin-bottom: 5px;
}
.summary-card .total-balance .currency {
font-size: 0.5em;
color: var(--color-text-muted);
margin-left: 5px;
}
.summary-card .detail {
font-size: 0.9em;
color: var(--color-text-muted);
}
.cuentas-summary-actions .actions-buttons-group {
flex: 2;
min-width: 300px;
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
justify-content: flex-start;
}
.actions-buttons-group .neumorphic-button {
padding: 15px 20px;
font-size: 0.95em;
flex-grow: 1;
max-width: calc(33.333% - 10px);
min-width: 200px;
}
.actions-buttons-group .neumorphic-button ion-icon {
font-size: 2em;
margin-bottom: 8px;
}
.account-list-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
}
.account-card {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.account-card.example-card {
opacity: 0.6;
border-style: dashed;
}
.account-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
}
.account-name {
font-size: 1.25em;
font-weight: 600;
color: var(--color-neon-accent);
}
.account-type-badge {
background-color: rgba(var(--color-neon-accent-rgb), 0.15);
color: var(--color-neon-accent);
padding: 5px 10px;
border-radius: var(--border-radius-small);
font-size: 0.8em;
font-weight: 500;
}
.account-card-body .account-balance-label,
.account-card-body .account-initial-balance-label {
font-size: 0.9em;
color: var(--color-text-muted);
margin-bottom: 2px;
}
.account-card-body .account-balance {
font-size: 1.8em;
font-weight: 700;
color: var(--color-text);
margin-bottom: 10px;
}
.account-card-body .account-balance .currency {
font-size: 0.6em;
color: var(--color-text-muted);
}
.account-card-actions {
margin-top: 20px;
display: flex;
gap: 10px;
justify-content: flex-end;
}
.account-card-actions .action-btn {
background-color: rgba(var(--color-surface-rgb), 0.8);
color: var(--color-text-muted);
border: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
padding: 8px 12px;
border-radius: var(--border-radius-small);
cursor: pointer;
transition: all var(--transition-speed) ease;
font-size: 0.85em;
display: inline-flex;
align-items: center;
gap: 5px;
}
.account-card-actions .action-btn:hover {
background-color: rgba(var(--color-neon-accent-rgb), 0.1);
color: var(--color-neon-accent);
border-color: var(--color-neon-accent);
transform: translateY(-2px);
}
.account-card-actions .action-btn ion-icon {
font-size: 1.2em;
}
.modal {
display: none; /* Oculto por defecto */
position: fixed;
z-index: 2000; /* Encima del header */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(var(--color-background-rgb), 0.7); /* Fondo oscuro semitransparente */
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
animation: fadeInModal 0.3s ease-out;
}
@keyframes fadeInModal {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
background: var(--color-surface);
margin: 8% auto;
padding: 0; /* El padding se manejará en header, body, footer del modal */
border: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
border-radius: var(--border-radius-main);
width: 90%;
max-width: 600px; /* Ancho máximo del modal */
box-shadow: 0 10px 30px rgba(0,0,0,0.5), var(--neumorphic-shadow-outset);
animation: slideInModal 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
overflow: hidden; /* Para que el borde redondeado afecte al header/footer del modal */
}
@keyframes slideInModal {
from { transform: translateY(-30px) scale(0.95); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-header {
padding: 20px 25px;
background: linear-gradient(160deg, rgba(var(--color-neon-accent-rgb), 0.08) 0%, rgba(var(--color-surface-rgb),0.1) 100%);
border-bottom: 1px solid rgba(var(--color-neon-accent-rgb), 0.15);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
font-size: 1.5em;
color: var(--color-neon-accent);
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
}
.modal-header h2 ion-icon {
font-size: 1.3em;
}
.close-modal-btn {
background: none;
border: none;
color: var(--color-text-muted);
font-size: 2em;
cursor: pointer;
padding: 5px;
line-height: 1;
transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
}
.close-modal-btn:hover {
color: var(--color-neon-accent);
transform: rotate(90deg);
}
.modal-body {
padding: 25px;
max-height: 60vh;
overflow-y: auto;
}
.modal-body::-webkit-scrollbar {
width: 8px;
}
.modal-body::-webkit-scrollbar-track {
background: rgba(var(--color-background-rgb), 0.5);
border-radius: 10px;
}
.modal-body::-webkit-scrollbar-thumb {
background-color: var(--color-neon-accent);
border-radius: 10px;
border: 2px solid transparent;
background-clip: content-box;
}
.modal-body::-webkit-scrollbar-thumb:hover {
background-color: var(--color-neon-accent-darker);
}
.modal-footer {
padding: 20px 25px;
background: rgba(var(--color-surface-rgb), 0.5);
border-top: 1px solid rgba(var(--color-neon-accent-rgb), 0.1);
display: flex;
justify-content: flex-end;
gap: 15px;
}
.modal-footer .neumorphic-button {
padding: 10px 20px;
font-size: 0.9em;
}
.modal-footer .neumorphic-button ion-icon {
display: none;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
color: var(--color-text-muted);
margin-bottom: 8px;
font-size: 0.95em;
font-weight: 500;
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 15px;
background-color: var(--color-background); /* Fondo oscuro */
border: 1px solid var(--color-surface); /* Borde sutil */
border-radius: var(--border-radius-small);
color: var(--color-text);
font-size: 1em;
transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
box-shadow: var(--neumorphic-shadow-inset);
}
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="date"]:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-neon-accent);
box-shadow: var(--neumorphic-shadow-inset), 0 0 10px rgba(var(--color-neon-accent-rgb), 0.3);
}
.form-group select {
appearance: none; /* Quita la flecha por defecto en algunos navegadores */
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300FFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px auto;
padding-right: 40px; /* Espacio para la flecha custom */
}
.form-group-checkbox {
display: flex;
align-items: center;
gap: 10px;
}
.form-group-checkbox input[type="checkbox"] {
width: auto;
height: auto;
margin-right: 8px;
accent-color: var(--color-neon-accent); /* Estilo del checkbox */
transform: scale(1.2);
box-shadow: none;
}
.form-group-checkbox label {
margin-bottom: 0;
color: var(--color-text);
font-weight: normal;
}
.recurrence-options {
padding: 15px;
border: 1px dashed var(--color-surface);
border-radius: var(--border-radius-small);
margin-top: 10px;
background-color: rgba(var(--color-background-rgb), 0.3);
}
.empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 40px 20px;
color: var(--color-text-muted);
font-size: 1.1em;
border: 2px dashed var(--color-surface);
border-radius: var(--border-radius-main);
background-color: rgba(var(--color-surface-rgb), 0.2);
}
@media (max-width: 768px) {
.cuentas-summary-actions {
flex-direction: column;
}
.actions-buttons-group .neumorphic-button {
max-width: 100%;
min-width: unset;
}
.modal-content {
margin: 5% auto;
width: 95%;
}
.account-list-grid {
grid-template-columns: 1fr;
}
}Explicación del código: cuentas.css – Estilos de Página de Cuentas: Tarjetas, Listas y Modales
/* cuentas.css */
Comentario que indica el nombre del archivo, sugiriendo que estos estilos son específicos para la página o sección de "Cuentas".
.cuentas-page-container {
Inicia la definición de estilos para los elementos HTML que tengan la clase cuentas-page-container. Este es probablemente el contenedor principal de la página de cuentas.
padding-bottom: 40px;
Añade un relleno (espacio interno) de 40 píxeles en la parte inferior del contenedor.
}
Cierra el bloque de estilos para la clase .cuentas-page-container.
.cuentas-page-container .section-header {
Define estilos para los elementos con la clase section-header que son descendientes de un elemento con la clase cuentas-page-container.
margin-bottom: 30px;
Añade un margen inferior de 30 píxeles a estos encabezados de sección, separándolos del contenido que sigue.
}
Cierra el bloque de estilos para .cuentas-page-container .section-header.
.cuentas-page-container .section-header h2 {
Define estilos para los elementos <h2> (títulos de segundo nivel) que se encuentran dentro de un .section-header, el cual a su vez está dentro de .cuentas-page-container.
font-size: 1.8em;
Establece el tamaño de la fuente del <h2> a 1.8 veces el tamaño de la fuente de su elemento padre.
color: var(--color-text);
Define el color del texto del <h2> utilizando una variable CSS llamada --color-text (probablemente el color de texto principal).
display: flex;
Establece el modo de visualización del <h2> como flex, permitiendo alinear su contenido interno (como un icono y texto) de forma flexible.
align-items: center;
Alinea los elementos hijos del <h2> (icono y texto) verticalmente al centro dentro del contenedor flex.
gap: 10px;
Crea un espacio de 10 píxeles entre los elementos hijos directos del <h2> (por ejemplo, entre un icono y el texto).
padding-bottom: 10px;
Añade un relleno inferior de 10 píxeles al <h2>.
border-bottom: 1px solid var(--color-surface);
Añade un borde inferior de 1 píxel de grosor, estilo sólido, y color definido por la variable --color-surface.
margin-bottom: 20px;
Añade un margen inferior de 20 píxeles al <h2>, separándolo del contenido siguiente.
justify-content: center;
Centra los elementos hijos del <h2> horizontalmente dentro del contenedor flex.
}
Cierra el bloque de estilos para .cuentas-page-container .section-header h2.
.cuentas-page-container .section-header h2 ion-icon {
Define estilos para los elementos ion-icon que son hijos directos de un <h2> dentro de un .section-header en la página de cuentas.
color: var(--color-neon-accent);
Establece el color de estos iconos utilizando la variable CSS --color-neon-accent.
}
Cierra el bloque de estilos para .cuentas-page-container .section-header h2 ion-icon.
.cuentas-summary-actions {
Inicia la definición de estilos para los elementos con la clase cuentas-summary-actions, que probablemente agrupa tarjetas de resumen y botones de acción.
display: flex;
Establece el modo de visualización como flex.
flex-wrap: wrap;
Permite que los elementos hijos se envuelvan en múltiples líneas si no caben en una sola.
gap: 25px;
Establece un espacio de 25 píxeles entre los elementos hijos.
margin-bottom: 40px;
Añade un margen inferior de 40 píxeles.
align-items: stretch;
Estira los elementos hijos para que tengan la misma altura dentro del contenedor flex.
}
Cierra el bloque de estilos para .cuentas-summary-actions.
.cuentas-summary-actions .summary-card {
Define estilos para los elementos con la clase summary-card que son descendientes de .cuentas-summary-actions.
flex: 1;
Permite que la tarjeta de resumen crezca y ocupe el espacio disponible de manera proporcional a otros elementos flexibles.
min-width: 280px;
Establece un ancho mínimo de 280 píxeles para la tarjeta de resumen.
background: linear-gradient(145deg, var(--color-surface) 0%, #16162e 100%);
Aplica un fondo con un gradiente lineal, que va desde el color definido por --color-surface hasta el color #16162e en un ángulo de 145 grados.
padding: 25px;
Añade un relleno interno de 25 píxeles.
border-radius: var(--border-radius-main);
Redondea las esquinas de la tarjeta utilizando la variable --border-radius-main.
box-shadow: var(--neumorphic-shadow-outset);
Aplica un efecto de sombra definido por la variable --neumorphic-shadow-outset, sugiriendo un estilo neumórfico.
border: 1px solid rgba(var(--color-neon-accent-rgb), 0.1);
Añade un borde sutil de 1 píxel, utilizando el color de acento neón con una opacidad del 10%.
color: var(--color-text);
Establece el color del texto dentro de la tarjeta usando la variable --color-text.
}
Cierra el bloque de estilos para .cuentas-summary-actions .summary-card.
.summary-card h4 {
Define estilos para los elementos <h4> (títulos de cuarto nivel) dentro de cualquier elemento con la clase summary-card.
font-size: 1.3em;
Establece el tamaño de la fuente a 1.3 veces el de su padre.
color: var(--color-neon-accent);
Establece el color del texto del <h4> al color de acento neón.
margin-bottom: 10px;
Añade un margen inferior de 10 píxeles.
font-weight: 600;
Establece el grosor de la fuente a 600 (semi-negrita).
}
Cierra el bloque de estilos para .summary-card h4.
.summary-card .total-balance {
Define estilos para los elementos con la clase total-balance dentro de una summary-card.
font-size: 2.2em;
Establece un tamaño de fuente grande (2.2 veces el de su padre) para el saldo total.
font-weight: 700;
Establece el grosor de la fuente a 700 (negrita).
color: var(--color-text);
Usa el color de texto principal.
margin-bottom: 5px;
Añade un pequeño margen inferior.
}
Cierra el bloque de estilos para .summary-card .total-balance.
.summary-card .total-balance .currency {
Define estilos para los elementos con la clase currency que están dentro de un elemento con la clase total-balance.
font-size: 0.5em;
Establece el tamaño de la fuente para el símbolo de la moneda a la mitad del tamaño de la fuente de su padre (el monto del saldo).
color: var(--color-text-muted);
Usa un color de texto atenuado para la moneda.
margin-left: 5px;
Añade un pequeño margen a la izquierda para separar la moneda del monto.
}
Cierra el bloque de estilos para .summary-card .total-balance .currency.
.summary-card .detail {
Define estilos para los elementos con la clase detail dentro de una summary-card.
font-size: 0.9em;
Establece el tamaño de la fuente a un 90% del de su padre.
color: var(--color-text-muted);
Usa un color de texto atenuado para los detalles.
}
Cierra el bloque de estilos para .summary-card .detail.
.cuentas-summary-actions .actions-buttons-group {
Define estilos para el grupo de botones de acción (actions-buttons-group) dentro de .cuentas-summary-actions.
flex: 2;
Permite que este grupo de botones crezca y ocupe el doble de espacio proporcionalmente en comparación con otros elementos flexibles con flex: 1.
min-width: 300px;
Establece un ancho mínimo de 300 píxeles.
display: flex;
Usa flexbox para la disposición interna de los botones.
flex-wrap: wrap;
Permite que los botones se envuelvan si no caben en una línea.
gap: 15px;
Establece un espacio de 15 píxeles entre los botones.
align-items: center;
Alinea los botones verticalmente al centro.
justify-content: flex-start;
Alinea los botones al inicio del contenedor.
}
Cierra el bloque de estilos para .cuentas-summary-actions .actions-buttons-group.
.actions-buttons-group .neumorphic-button {
Define estilos para los botones con clase neumorphic-button dentro del actions-buttons-group.
padding: 15px 20px;
Añade un relleno interno de 15px arriba/abajo y 20px a los lados.
font-size: 0.95em;
Establece el tamaño de la fuente a un 95% del de su padre.
flex-grow: 1;
Permite que los botones crezcan para ocupar el espacio disponible.
max-width: calc(33.333% - 10px);
Establece un ancho máximo para que aproximadamente tres botones quepan en una fila, considerando el gap.
min-width: 200px;
Establece un ancho mínimo para cada botón.
}
Cierra el bloque de estilos para .actions-buttons-group .neumorphic-button.
.actions-buttons-group .neumorphic-button ion-icon {
Define estilos para los ion-icon dentro de estos botones de acción.
font-size: 2em;
Establece un tamaño de icono grande.
margin-bottom: 8px;
Añade un margen inferior para separar el icono del texto del botón si este se dispone verticalmente.
}
Cierra el bloque de estilos para .actions-buttons-group .neumorphic-button ion-icon.
.account-list-grid {
Define estilos para el contenedor de la cuadrícula de la lista de cuentas (account-list-grid).
display: grid;
Utiliza CSS Grid para la disposición.
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
Define las columnas de la cuadrícula. repeat(auto-fit, minmax(320px, 1fr)) crea columnas responsivas que tienen un tamaño mínimo de 320px y se expanden para llenar el espacio, ajustando el número de columnas automáticamente.
gap: 25px;
Establece un espacio de 25 píxeles entre las celdas de la cuadrícula.
}
Cierra el bloque de estilos para .account-list-grid.
.account-card {
Define estilos base para las tarjetas individuales de cuenta (account-card).
display: flex;
Usa flexbox para la disposición interna de la tarjeta.
flex-direction: column;
Organiza los elementos hijos de la tarjeta en una columna (verticalmente).
justify-content: space-between;
Distribuye el espacio verticalmente entre los elementos hijos de la tarjeta.
}
Cierra el bloque de estilos para .account-card.
.account-card.example-card {
Define estilos específicos para una tarjeta de cuenta que también tiene la clase example-card.
opacity: 0.6;
Le da una opacidad del 60%, haciéndola semitransparente (probablemente para indicar que es un ejemplo).
border-style: dashed;
Establece el estilo del borde como discontinuo.
}
Cierra el bloque de estilos para .account-card.example-card.
.account-card-header {
Define estilos para la cabecera de una tarjeta de cuenta (account-card-header).
display: flex;
Usa flexbox.
justify-content: space-between;
Distribuye los elementos hijos horizontalmente, uno al inicio y otro al final.
align-items: center;
Alinea los elementos hijos verticalmente al centro.
margin-bottom: 15px;
Añade un margen inferior.
padding-bottom: 10px;
Añade un relleno inferior.
border-bottom: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
Añade un borde inferior sutil usando el color de acento neón con opacidad del 20%.
}
Cierra el bloque de estilos para .account-card-header.
.account-name {
Define estilos para el nombre de la cuenta (account-name).
font-size: 1.25em;
Establece el tamaño de la fuente.
font-weight: 600;
Establece el grosor de la fuente (semi-negrita).
color: var(--color-neon-accent);
Usa el color de acento neón para el nombre de la cuenta.
}
Cierra el bloque de estilos para .account-name.
.account-type-badge {
Define estilos para el distintivo del tipo de cuenta (account-type-badge).
background-color: rgba(var(--color-neon-accent-rgb), 0.15);
Establece un color de fondo usando el acento neón con 15% de opacidad.
color: var(--color-neon-accent);
Establece el color del texto al color de acento neón.
padding: 5px 10px;
Añade relleno interno.
border-radius: var(--border-radius-small);
Redondea las esquinas.
font-size: 0.8em;
Establece un tamaño de fuente pequeño.
font-weight: 500;
Establece un grosor de fuente medio.
}
Cierra el bloque de estilos para .account-type-badge.
.account-card-body .account-balance-label,
.account-card-body .account-initial-balance-label {
Define estilos comunes para las etiquetas de saldo (account-balance-label y account-initial-balance-label) dentro del cuerpo de la tarjeta de cuenta.
font-size: 0.9em;
Establece el tamaño de la fuente.
color: var(--color-text-muted);
Usa un color de texto atenuado.
margin-bottom: 2px;
Añade un pequeño margen inferior.
}
Cierra el bloque de estilos para las etiquetas de saldo.
.account-card-body .account-balance {
Define estilos para el monto del saldo (account-balance).
font-size: 1.8em;
Establece un tamaño de fuente grande.
font-weight: 700;
Establece el grosor de la fuente (negrita).
color: var(--color-text);
Usa el color de texto principal.
margin-bottom: 10px;
Añade un margen inferior.
}
Cierra el bloque de estilos para .account-card-body .account-balance.
.account-card-body .account-balance .currency {
Define estilos para el símbolo de la moneda (currency) dentro del saldo.
font-size: 0.6em;
Establece un tamaño de fuente más pequeño para la moneda.
color: var(--color-text-muted);
Usa un color de texto atenuado.
}
Cierra el bloque de estilos para .account-card-body .account-balance .currency.
.account-card-actions {
Define estilos para el contenedor de acciones de la tarjeta de cuenta (account-card-actions).
margin-top: 20px;
Añade un margen superior.
display: flex;
Usa flexbox.
gap: 10px;
Establece un espacio de 10px entre los botones de acción.
justify-content: flex-end;
Alinea los botones de acción a la derecha.
}
Cierra el bloque de estilos para .account-card-actions.
.account-card-actions .action-btn {
Define estilos para los botones de acción (action-btn) dentro de account-card-actions.
background-color: rgba(var(--color-surface-rgb), 0.8);
Color de fondo con opacidad.
color: var(--color-text-muted);
Color de texto atenuado.
border: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
Borde sutil con color de acento neón y opacidad.
padding: 8px 12px;
Relleno interno.
border-radius: var(--border-radius-small);
Esquinas redondeadas.
cursor: pointer;
Cambia el cursor a una mano para indicar que es clickeable.
transition: all var(--transition-speed) ease;
Aplica una transición suave a todas las propiedades animables.
font-size: 0.85em;
Tamaño de fuente.
display: inline-flex;
Permite que el botón se comporte como un elemento en línea pero con capacidades de flexbox para su contenido interno.
align-items: center;
Alinea el contenido del botón (icono y texto) verticalmente al centro.
gap: 5px;
Espacio entre el icono y el texto dentro del botón.
}
Cierra el bloque de estilos para .account-card-actions .action-btn.
.account-card-actions .action-btn:hover {
Define estilos para el estado hover (cuando el ratón está encima) de los botones de acción.
background-color: rgba(var(--color-neon-accent-rgb), 0.1);
Cambia el color de fondo a uno basado en el acento neón con opacidad.
color: var(--color-neon-accent);
Cambia el color del texto al color de acento neón.
border-color: var(--color-neon-accent);
Cambia el color del borde al color de acento neón.
transform: translateY(-2px);
Mueve ligeramente el botón hacia arriba para un efecto de elevación.
}
Cierra el bloque de estilos para .account-card-actions .action-btn:hover.
.account-card-actions .action-btn ion-icon {
Define estilos para los ion-icon dentro de los botones de acción.
font-size: 1.2em;
Establece el tamaño del icono.
}
Cierra el bloque de estilos para .account-card-actions .action-btn ion-icon.
.modal {
Define estilos base para los elementos modales (ventanas emergentes) con la clase modal.
display: none; /* Oculto por defecto */
Por defecto, el modal no se muestra. Se activará mediante JavaScript.
position: fixed;
Posiciona el modal de forma fija en relación con la ventana del navegador.
z-index: 2000; /* Encima del header */
Asegura que el modal se muestre por encima de otros elementos (como la cabecera que podría tener un z-index menor).
left: 0;
top: 0;
width: 100%;
height: 100%;
Hace que el modal ocupe toda la pantalla.
overflow: auto;
Añade barras de desplazamiento si el contenido del modal es más grande que el modal mismo.
background-color: rgba(var(--color-background-rgb), 0.7); /* Fondo oscuro semitransparente */
Establece un fondo oscuro semitransparente para el área detrás del modal.
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
Aplica un efecto de desenfoque (blur) al contenido detrás del modal para mayor énfasis en el modal. Incluye el prefijo -webkit- para compatibilidad con algunos navegadores.
animation: fadeInModal 0.3s ease-out;
Aplica una animación llamada fadeInModal de 0.3 segundos de duración con una curva de temporización ease-out.
}
Cierra el bloque de estilos para .modal.
@keyframes fadeInModal {
Define la animación fadeInModal.
from { opacity: 0; }
El estado inicial de la animación es con opacidad 0 (completamente transparente).
to { opacity: 1; }
El estado final de la animación es con opacidad 1 (completamente opaco).
}
Cierra la definición de @keyframes fadeInModal.
.modal-content {
Define estilos para el contenido principal dentro del modal (modal-content).
background: var(--color-surface);
Establece el color de fondo del contenido del modal usando la variable --color-surface.
margin: 8% auto;
Centra el modal en la pantalla, con un margen superior del 8% de la altura del viewport.
padding: 0;
Elimina el padding por defecto, ya que se gestionará en las subsecciones del modal.
border: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
Añade un borde sutil al contenido del modal.
border-radius: var(--border-radius-main);
Redondea las esquinas del contenido del modal.
width: 90%;
Establece el ancho del contenido del modal al 90% del ancho de su contenedor (que es la pantalla completa).
max-width: 600px; /* Ancho máximo del modal */
Limita el ancho máximo del modal a 600 píxeles.
box-shadow: 0 10px 30px rgba(0,0,0,0.5), var(--neumorphic-shadow-outset);
Aplica dos tipos de sombra: una sombra oscura difusa y una sombra neumórfica definida por variable.
animation: slideInModal 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
Aplica una animación llamada slideInModal de 0.4 segundos con una curva de temporización específica.
overflow: hidden; /* Para que el borde redondeado afecte al header/footer del modal */
Oculta cualquier contenido que se desborde, asegurando que el border-radius se aplique correctamente a las secciones internas como la cabecera y el pie del modal.
}
Cierra el bloque de estilos para .modal-content.
@keyframes slideInModal {
Define la animación slideInModal.
from { transform: translateY(-30px) scale(0.95); opacity: 0; }
El estado inicial de la animación es con el modal ligeramente desplazado hacia arriba, escalado un poco más pequeño y transparente.
to { transform: translateY(0) scale(1); opacity: 1; }
El estado final es con el modal en su posición normal, tamaño completo y opaco.
}
Cierra la definición de @keyframes slideInModal.
.modal-header {
Define estilos para la cabecera del modal (modal-header).
padding: 20px 25px;
Añade relleno interno.
background: linear-gradient(160deg, rgba(var(--color-neon-accent-rgb), 0.08) 0%, rgba(var(--color-surface-rgb),0.1) 100%);
Aplica un fondo con gradiente lineal sutil.
border-bottom: 1px solid rgba(var(--color-neon-accent-rgb), 0.15);
Añade un borde inferior.
display: flex;
Usa flexbox.
justify-content: space-between;
Distribuye el contenido (título y botón de cierre) a los extremos.
align-items: center;
Alinea el contenido verticalmente al centro.
}
Cierra el bloque de estilos para .modal-header.
.modal-header h2 {
Define estilos para los títulos <h2> dentro de la cabecera del modal.
font-size: 1.5em;
Tamaño de fuente.
color: var(--color-neon-accent);
Color de texto usando el acento neón.
margin: 0;
Elimina el margen por defecto del <h2>.
display: inline-flex;
Permite que el <h2> se comporte como flex container para su contenido (icono y texto).
align-items: center;
Alinea el icono y el texto del <h2> verticalmente.
gap: 10px;
Espacio entre el icono y el texto del <h2>.
}
Cierra el bloque de estilos para .modal-header h2.
.modal-header h2 ion-icon {
Define estilos para los ion-icon dentro de los <h2> de la cabecera del modal.
font-size: 1.3em;
Tamaño del icono.
}
Cierra el bloque de estilos para .modal-header h2 ion-icon.
.close-modal-btn {
Define estilos para el botón de cerrar el modal (close-modal-btn).
background: none;
border: none;
Elimina el fondo y borde por defecto del botón.
color: var(--color-text-muted);
Color del icono del botón.
font-size: 2em;
Tamaño del icono del botón de cierre.
cursor: pointer;
Cursor de mano.
padding: 5px;
Pequeño relleno.
line-height: 1;
Ajusta la altura de línea.
transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
Aplica transiciones suaves para el color y la transformación.
}
Cierra el bloque de estilos para .close-modal-btn.
.close-modal-btn:hover {
Define estilos para el estado hover del botón de cerrar modal.
color: var(--color-neon-accent);
Cambia el color del icono al color de acento neón.
transform: rotate(90deg);
Aplica una rotación de 90 grados al icono para un efecto visual.
}
Cierra el bloque de estilos para .close-modal-btn:hover.
.modal-body {
Define estilos para el cuerpo principal del modal (modal-body), donde va el contenido del formulario.
padding: 25px;
Relleno interno.
max-height: 60vh;
Establece una altura máxima del 60% de la altura del viewport.
overflow-y: auto;
Añade una barra de desplazamiento vertical si el contenido excede la altura máxima.
}
Cierra el bloque de estilos para .modal-body.
.modal-body::-webkit-scrollbar {
Define estilos para la barra de desplazamiento en navegadores WebKit (Chrome, Safari) dentro de .modal-body.
width: 8px;
Ancho de la barra de desplazamiento.
}
Cierra el bloque de estilos para .modal-body::-webkit-scrollbar.
.modal-body::-webkit-scrollbar-track {
Define estilos para el "track" (el fondo) de la barra de desplazamiento.
background: rgba(var(--color-background-rgb), 0.5);
Color de fondo semitransparente para el track.
border-radius: 10px;
Esquinas redondeadas para el track.
}
Cierra el bloque de estilos para .modal-body::-webkit-scrollbar-track.
.modal-body::-webkit-scrollbar-thumb {
Define estilos para el "thumb" (la parte móvil) de la barra de desplazamiento.
background-color: var(--color-neon-accent);
Color del thumb usando el acento neón.
border-radius: 10px;
Esquinas redondeadas para el thumb.
border: 2px solid transparent;
Borde transparente (usado con background-clip).
background-clip: content-box;
Hace que el fondo solo se aplique al área de contenido, permitiendo que el borde cree un efecto de espaciado.
}
Cierra el bloque de estilos para .modal-body::-webkit-scrollbar-thumb.
.modal-body::-webkit-scrollbar-thumb:hover {
Define estilos para el estado hover del thumb de la barra de desplazamiento.
background-color: var(--color-neon-accent-darker);
Cambia el color del thumb a una versión más oscura del acento neón.
}
Cierra el bloque de estilos para .modal-body::-webkit-scrollbar-thumb:hover.
.modal-footer {
Define estilos para el pie del modal (modal-footer), donde suelen ir los botones de acción del formulario.
padding: 20px 25px;
Relleno interno.
background: rgba(var(--color-surface-rgb), 0.5);
Color de fondo semitransparente.
border-top: 1px solid rgba(var(--color-neon-accent-rgb), 0.1);
Borde superior sutil.
display: flex;
Usa flexbox.
justify-content: flex-end;
Alinea los botones del pie del modal a la derecha.
gap: 15px;
Espacio entre los botones.
}
Cierra el bloque de estilos para .modal-footer.
.modal-footer .neumorphic-button {
Define estilos para los botones con clase neumorphic-button dentro del pie del modal.
padding: 10px 20px;
Relleno más pequeño para estos botones.
font-size: 0.9em;
Tamaño de fuente ligeramente reducido.
}
Cierra el bloque de estilos para .modal-footer .neumorphic-button.
.modal-footer .neumorphic-button ion-icon {
Define estilos para los ion-icon dentro de los botones del pie del modal.
display: none;
Oculta los iconos en los botones del pie del modal (quizás para ahorrar espacio o por decisión de diseño).
}
Cierra el bloque de estilos para .modal-footer .neumorphic-button ion-icon.
.form-group {
Define estilos base para los grupos de formulario (form-group).
margin-bottom: 20px;
Añade un margen inferior para separar los grupos de formulario.
}
Cierra el bloque de estilos para .form-group.
.form-group label {
Define estilos para las etiquetas (<label>) dentro de los grupos de formulario.
display: block;
Hace que la etiqueta ocupe todo el ancho disponible, colocando el campo de entrada debajo.
color: var(--color-text-muted);
Color de texto atenuado.
margin-bottom: 8px;
Margen inferior para separar la etiqueta del campo.
font-size: 0.95em;
Tamaño de fuente.
font-weight: 500;
Grosor de fuente medio.
}
Cierra el bloque de estilos para .form-group label.
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
Define estilos comunes para varios tipos de campos de entrada (input), elementos select y textarea dentro de un form-group.
width: 100%;
Hace que los campos ocupen todo el ancho disponible.
padding: 12px 15px;
Relleno interno.
background-color: var(--color-background); /* Fondo oscuro */
Color de fondo (comentado como oscuro).
border: 1px solid var(--color-surface); /* Borde sutil */
Borde (comentado como sutil).
border-radius: var(--border-radius-small);
Esquinas redondeadas.
color: var(--color-text);
Color del texto dentro del campo.
font-size: 1em;
Tamaño de fuente.
transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
Transiciones suaves para el color del borde y la sombra.
box-shadow: var(--neumorphic-shadow-inset);
Aplica una sombra neumórfica interior.
}
Cierra el bloque de estilos para los campos de formulario.
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="date"]:focus,
.form-group select:focus,
.form-group textarea:focus {
Define estilos para el estado :focus (cuando el campo está seleccionado) de los campos de formulario.
outline: none;
Elimina el contorno por defecto del navegador.
border-color: var(--color-neon-accent);
Cambia el color del borde al color de acento neón.
box-shadow: var(--neumorphic-shadow-inset), 0 0 10px rgba(var(--color-neon-accent-rgb), 0.3);
Mantiene la sombra interior y añade un resplandor exterior con el color de acento neón.
}
Cierra el bloque de estilos para el estado :focus de los campos.
.form-group select {
Define estilos específicos adicionales para los elementos select dentro de un form-group.
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
Elimina la apariencia por defecto del elemento select en diferentes navegadores, permitiendo un estilo personalizado para la flecha.
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300FFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
Establece una imagen de fondo personalizada (un SVG codificado como Data URL, que representa una flecha hacia abajo de color cian) para el select.
background-repeat: no-repeat;
Evita que la imagen de fondo se repita.
background-position: right 15px center;
Posiciona la flecha a la derecha, 15px desde el borde, y centrada verticalmente.
background-size: 12px auto;
Establece el tamaño de la imagen de la flecha.
padding-right: 40px; /* Espacio para la flecha custom */
Añade relleno a la derecha para asegurar que el texto no se superponga con la flecha personalizada.
}
Cierra el bloque de estilos para .form-group select.
.form-group-checkbox {
Define estilos para los grupos de formulario que contienen casillas de verificación (form-group-checkbox).
display: flex;
align-items: center;
gap: 10px;
Usa flexbox para alinear la casilla y su etiqueta en la misma línea, con un espacio entre ellas.
}
Cierra el bloque de estilos para .form-group-checkbox.
.form-group-checkbox input[type="checkbox"] {
Define estilos para las casillas de verificación (input[type="checkbox"]) dentro de estos grupos.
width: auto;
height: auto;
Permite que la casilla tenga su tamaño intrínseco.
margin-right: 8px;
Margen a la derecha de la casilla.
accent-color: var(--color-neon-accent);
Establece el color de acento para la casilla (por ejemplo, el color del "check" cuando está marcada) usando la variable CSS.
transform: scale(1.2);
Aumenta ligeramente el tamaño de la casilla.
box-shadow: none;
Elimina cualquier sombra de caja que pudiera tener por defecto o heredada.
}
Cierra el bloque de estilos para .form-group-checkbox input[type="checkbox"].
.form-group-checkbox label {
Define estilos para las etiquetas (<label>) asociadas a las casillas de verificación.
margin-bottom: 0;
Elimina el margen inferior que tienen las etiquetas de form-group por defecto.
color: var(--color-text);
Establece el color del texto de la etiqueta.
font-weight: normal;
Asegura que el grosor de la fuente sea normal.
}
Cierra el bloque de estilos para .form-group-checkbox label.
.recurrence-options {
Define estilos para el contenedor de opciones de recurrencia (recurrence-options).
padding: 15px;
Relleno interno.
border: 1px dashed var(--color-surface);
Borde discontinuo.
border-radius: var(--border-radius-small);
Esquinas redondeadas.
margin-top: 10px;
Margen superior.
background-color: rgba(var(--color-background-rgb), 0.3);
Color de fondo semitransparente.
}
Cierra el bloque de estilos para .recurrence-options.
.empty-state {
Define estilos para los mensajes de estado vacío (empty-state), que se muestran cuando no hay contenido en una lista, por ejemplo.
grid-column: 1 / -1;
Si está dentro de un CSS Grid, hace que este elemento ocupe todas las columnas.
text-align: center;
Centra el texto.
padding: 40px 20px;
Relleno interno amplio.
color: var(--color-text-muted);
Color de texto atenuado.
font-size: 1.1em;
Tamaño de fuente ligeramente más grande.
border: 2px dashed var(--color-surface);
Borde discontinuo más grueso.
border-radius: var(--border-radius-main);
Esquinas redondeadas.
background-color: rgba(var(--color-surface-rgb), 0.2);
Color de fondo semitransparente.
}
Cierra el bloque de estilos para .empty-state.
@media (max-width: 768px) {
Inicia un bloque de Media Query, que aplica los estilos anidados solo cuando el ancho de la ventana del navegador es de 768 píxeles o menos (típico para tablets y móviles).
.cuentas-summary-actions {
flex-direction: column;
}
Para pantallas pequeñas, cambia la dirección de los elementos en .cuentas-summary-actions a columna, apilándolos verticalmente.
.actions-buttons-group .neumorphic-button {
max-width: 100%;
min-width: unset;
}
Hace que los botones de acción ocupen todo el ancho disponible en pantallas pequeñas y elimina el ancho mínimo.
.modal-content {
margin: 5% auto;
width: 95%;
}
Ajusta los márgenes y el ancho del contenido del modal para pantallas más pequeñas, permitiendo que ocupe más espacio y tenga menos margen.
.account-list-grid {
grid-template-columns: 1fr;
}
Cambia la cuadrícula de la lista de cuentas para que muestre solo una columna en pantallas pequeñas, apilando las tarjetas de cuenta.
}
Cierra el bloque de @media (max-width: 768px).gastos.html
A continuación, se presenta el código fuente del archivo gastos.html. Esta página está diseñada para la "Gestión de Gastos" dentro de la plataforma FINANZAS, permitiendo a los usuarios registrar, categorizar y llevar un seguimiento detallado de todos sus egresos para un mejor control financiero:
gastos.html – Página de Gestión de Gastos: Formulario de Registro y Listado
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Mis Gastos</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/gastos.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item active"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="content">
<section id="gastos" class="gastos-page-container">
<div class="section-header">
<h1><ion-icon name="cart-outline"></ion-icon> Gestión de Gastos</h1>
<p class="subtitle">Registra y organiza tus gastos para un mejor control financiero.</p>
</div>
<div class="gastos-actions">
<button id="openAddExpenseModalBtn" class="neumorphic-button primary-action">
<ion-icon name="add-circle-outline"></ion-icon>
<span>Registrar Nuevo Gasto</span>
</button>
</div>
<h2 class="gastos-subtitle-header" style="margin-top: 40px;">
<ion-icon name="list-circle-outline"></ion-icon> Últimos Gastos Registrados
</h2>
<div id="expenseListContainer" class="expense-list">
<div class="expense-card example-card">
<div class="expense-card-main-info">
<div class="expense-icon-category">
<ion-icon name="fast-food-outline"></ion-icon> <span class="expense-category-badge">Alimentación</span>
</div>
<div class="expense-details">
<h3 class="expense-description">Almuerzo de trabajo</h3>
<p class="expense-date">Fecha: 15 Mayo, 2025</p>
<p class="expense-account">Desde: Ahorros Banco X</p>
</div>
</div>
<div class="expense-amount-actions">
<p class="expense-amount text-expense">-$15.00 <span class="currency">USD</span></p>
<div class="expense-card-actions">
<button class="action-btn view-receipt-btn" title="Ver Recibo (simulado)"><ion-icon name="document-attach-outline"></ion-icon></button>
<button class="action-btn edit-expense-btn" title="Editar Gasto"><ion-icon name="pencil-outline"></ion-icon></button>
<button class="action-btn delete-expense-btn" title="Eliminar Gasto"><ion-icon name="trash-outline"></ion-icon></button>
</div>
</div>
</div>
<p class="empty-state" id="emptyExpenseListMessage">Aún no has registrado ningún gasto. ¡Empieza ahora!</p>
</div>
</section>
</main>
<div id="addExpenseModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="receipt-outline"></ion-icon> Registrar Nuevo Gasto</h2>
<button class="close-modal-btn" id="closeAddExpenseModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
<form id="addExpenseForm">
<div class="modal-body">
<div class="form-group">
<label for="expenseDescription">Descripción del Gasto:</label>
<input type="text" id="expenseDescription" name="expenseDescription" required placeholder="Ej: Café con amigos, Compra supermercado">
</div>
<div class="form-group">
<label for="expenseAmount">Monto:</label>
<input type="number" id="expenseAmount" name="expenseAmount" step="0.01" required placeholder="0.00">
</div>
<div class="form-group">
<label for="expenseDate">Fecha del Gasto:</label>
<input type="date" id="expenseDate" name="expenseDate" required>
</div>
<div class="form-group">
<label for="expenseCategory">Categoría:</label>
<div class="category-input-group">
<select id="expenseCategory" name="expenseCategory" required>
<option value="" disabled selected>Selecciona una categoría</option>
<option value="Alimentación">Alimentación</option>
<option value="Transporte">Transporte</option>
<option value="Vivienda">Vivienda</option>
<option value="Ocio">Ocio</option>
<option value="Salud">Salud</option>
<option value="Educación">Educación</option>
<option value="Ropa y Accesorios">Ropa y Accesorios</option>
<option value="Suscripciones">Suscripciones</option>
<option value="Otros">Otros</option>
<option value="--nueva--">--- Crear Nueva Categoría ---</option>
</select>
<input type="text" id="newExpenseCategory" name="newExpenseCategory" placeholder="Nombre nueva categoría" style="display:none; margin-top:10px;">
</div>
</div>
<div class="form-group">
<label for="expenseAccountOrigin">Cuenta de Origen:</label>
<select id="expenseAccountOrigin" name="expenseAccountOrigin" required>
<option value="" disabled selected>Selecciona una cuenta</option>
</select>
</div>
<div class="form-group">
<label for="expenseReceipt">Adjuntar Recibo (Opcional):</label>
<input type="file" id="expenseReceipt" name="expenseReceipt" accept="image/*,application/pdf">
<small class="form-text text-muted">Formatos permitidos: JPG, PNG, PDF. Máx 2MB.</small>
</div>
<div class="form-group form-group-checkbox">
<input type="checkbox" id="expenseIsRecurring" name="expenseIsRecurring">
<label for="expenseIsRecurring">¿Es un gasto recurrente?</label>
</div>
<div id="expenseRecurrenceOptions" class="form-group recurrence-options" style="display: none;">
<label for="expenseFrequency">Frecuencia:</label>
<select id="expenseFrequency" name="expenseFrequency">
<option value="diario">Diario</option>
<option value="semanal">Semanal</option>
<option value="quincenal">Quincenal</option>
<option value="mensual" selected>Mensual</option>
<option value="anual">Anual</option>
</select>
</div>
<div class="form-group">
<label for="expenseNotes">Notas (Opcional):</label>
<textarea id="expenseNotes" name="expenseNotes" rows="3" placeholder="Ej: Compra para la cena del viernes, Regalo para Ana"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Gasto</button>
</div>
</form>
</div>
</div>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/gastos.js"></script> </body>
</html>Explicación del código: gastos.html – Página de Gestión de Gastos: Formulario de Registro y Listado
<!DOCTYPE html>
Declara el tipo de documento como HTML5, asegurando que el navegador lo interprete con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML, con el atributo lang="es" que indica que el idioma principal de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Contiene metainformación, enlaces a hojas de estilo y el título de la página, elementos no visibles directamente en el contenido.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, lo cual es esencial para mostrar correctamente caracteres especiales, acentos y la letra 'ñ'.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" o área visible de la página. width=device-width ajusta el ancho al del dispositivo del usuario, y initial-scale=1.0 establece el nivel de zoom inicial, crucial para un diseño responsivo.
<title>Plataforma Financiera - Mis Gastos</title>
Establece el título de la página: "Plataforma Financiera - Mis Gastos". Este título se muestra en la pestaña del navegador y es utilizado por los motores de búsqueda.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que probablemente contiene los estilos globales y base para toda la plataforma financiera.
<link rel="stylesheet" href="css/pages/gastos.css">
Enlaza una hoja de estilos específica para la página de "Gastos" (gastos.css), que contendrá los estilos particulares para esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts, con varios grosores especificados, para ser utilizada en el diseño del texto de la página. El parámetro display=swap mejora la experiencia de carga de fuentes.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, que contiene todo el contenido visible de la página web.
<header class="glassmorphic-header">
Define la cabecera principal (<header>) de la página, con la clase glassmorphic-header que sugiere un estilo visual translúcido o de "vidrio esmerilado".
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
Contenedor para el logotipo. Incluye un enlace (<a>) con el texto "FINANZAS" y la clase logo, que dirige al panel principal (dashboard.html).
<nav class="main-nav">
Sección de navegación principal (<nav>) de la aplicación.
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
Contenedor para el icono del menú "hamburguesa" (un ion-icon), utilizado para mostrar/ocultar la navegación en dispositivos móviles o pantallas pequeñas.
<ul id="nav-menu-list">
Lista desordenada (<ul>) con el id="nav-menu-list", que contiene los ítems del menú de navegación.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
Ítem de lista para el enlace "Dashboard".
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
Ítem de lista para el enlace "Cuentas".
<li><a href="gastos.html#gastos" class="nav-item active"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
Ítem de lista para el enlace "Gastos". La clase active indica que esta es la página actual o sección activa.
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
Ítem de lista para el enlace "Inversiones".
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
Ítem de lista para el enlace "Presupuestos".
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
Ítem de lista para el enlace "Reportes".
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
Ítem de lista para el enlace "Configuración".
</ul>
</nav>
Cierra la lista del menú (</ul>) y la sección de navegación principal (</nav>).
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
Contenedor para las acciones de la cabecera, como el perfil de usuario, que incluye un icono.
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
Menú desplegable del perfil, con una cabecera que muestra un avatar, nombre y correo del usuario.
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div> </div> </div> </header>
Lista de opciones en el menú desplegable: "Mi Perfil", "Seguridad", "Ayuda", un separador, y "Cerrar Sesión". Se cierran los contenedores y la cabecera principal.
<main class="content">
Elemento principal (<main>) de la página, donde reside el contenido específico de la gestión de gastos.
<section id="gastos" class="gastos-page-container">
Sección principal de esta página, con id="gastos" y la clase gastos-page-container para estilos específicos.
<div class="section-header">
<h1><ion-icon name="cart-outline"></ion-icon> Gestión de Gastos</h1>
<p class="subtitle">Registra y organiza tus gastos para un mejor control financiero.</p>
</div>
Cabecera de la sección "Gastos", con un título principal (<h1>) que incluye un icono y un subtítulo (<p>) descriptivo.
<div class="gastos-actions">
<button id="openAddExpenseModalBtn" class="neumorphic-button primary-action">
<ion-icon name="add-circle-outline"></ion-icon>
<span>Registrar Nuevo Gasto</span>
</button>
</div>
Contenedor para los botones de acción principales de la página de gastos. Incluye un botón para "Registrar Nuevo Gasto", que probablemente abre un modal.
<h2 class="gastos-subtitle-header" style="margin-top: 40px;">
<ion-icon name="list-circle-outline"></ion-icon> Últimos Gastos Registrados
</h2>
Subtítulo (<h2>) para la sección que listará los gastos recientes, con un icono y un margen superior.
<div id="expenseListContainer" class="expense-list">
Contenedor (div) destinado a mostrar la lista de gastos. El id sugiere que este contenido se podría cargar o actualizar dinámicamente.
<div class="expense-card example-card">
<div class="expense-card-main-info">
<div class="expense-icon-category">
<ion-icon name="fast-food-outline"></ion-icon> <span class="expense-category-badge">Alimentación</span>
</div>
Tarjeta de ejemplo (example-card) que muestra cómo se visualizaría un gasto individual. Esta parte define el icono y la categoría del gasto.
<div class="expense-details">
<h3 class="expense-description">Almuerzo de trabajo</h3>
<p class="expense-date">Fecha: 15 Mayo, 2025</p>
<p class="expense-account">Desde: Ahorros Banco X</p>
</div>
</div>
Contenedor para los detalles del gasto: descripción, fecha y cuenta de origen. Cierre del `div` de información principal.
<div class="expense-amount-actions">
<p class="expense-amount text-expense">-$15.00 <span class="currency">USD</span></p>
<div class="expense-card-actions">
<button class="action-btn view-receipt-btn" title="Ver Recibo (simulado)"><ion-icon name="document-attach-outline"></ion-icon></button>
<button class="action-btn edit-expense-btn" title="Editar Gasto"><ion-icon name="pencil-outline"></ion-icon></button>
<button class="action-btn delete-expense-btn" title="Eliminar Gasto"><ion-icon name="trash-outline"></ion-icon></button>
</div>
</div>
</div>
Sección que muestra el monto del gasto y los botones de acción para esa tarjeta (ver recibo, editar, eliminar). Cierre de la tarjeta de ejemplo.
<p class="empty-state" id="emptyExpenseListMessage">Aún no has registrado ningún gasto. ¡Empieza ahora!</p>
</div> </section> </main> ```
Párrafo que se muestra si no hay gastos registrados (estado vacío). Cierre del contenedor de la lista de gastos, de la sección `gastos` y del elemento `main`.
<div id="addExpenseModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="receipt-outline"></ion-icon> Registrar Nuevo Gasto</h2>
<button class="close-modal-btn" id="closeAddExpenseModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
Inicio de la estructura del modal (ventana emergente) para "Registrar Nuevo Gasto". Incluye cabecera con título y botón de cierre.
<form id="addExpenseForm">
<div class="modal-body">
Formulario (<form>) para agregar un nuevo gasto, contenido dentro del cuerpo del modal.
<div class="form-group">
<label for="expenseDescription">Descripción del Gasto:</label>
<input type="text" id="expenseDescription" name="expenseDescription" required placeholder="Ej: Café con amigos, Compra supermercado">
</div>
Grupo de formulario para la "Descripción del Gasto".
<div class="form-group">
<label for="expenseAmount">Monto:</label>
<input type="number" id="expenseAmount" name="expenseAmount" step="0.01" required placeholder="0.00">
</div>
Grupo de formulario para el "Monto" del gasto.
<div class="form-group">
<label for="expenseDate">Fecha del Gasto:</label>
<input type="date" id="expenseDate" name="expenseDate" required>
</div>
Grupo de formulario para la "Fecha del Gasto".
<div class="form-group">
<label for="expenseCategory">Categoría:</label>
<div class="category-input-group">
<select id="expenseCategory" name="expenseCategory" required>
<option value="" disabled selected>Selecciona una categoría</option>
<option value="Alimentación">Alimentación</option>
<option value="Transporte">Transporte</option>
<option value="Vivienda">Vivienda</option>
<option value="Ocio">Ocio</option>
<option value="Salud">Salud</option>
<option value="Educación">Educación</option>
<option value="Ropa y Accesorios">Ropa y Accesorios</option>
<option value="Suscripciones">Suscripciones</option>
<option value="Otros">Otros</option>
<option value="--nueva--">--- Crear Nueva Categoría ---</option>
</select>
<input type="text" id="newExpenseCategory" name="newExpenseCategory" placeholder="Nombre nueva categoría" style="display:none; margin-top:10px;">
</div>
</div>
Grupo de formulario para la "Categoría" del gasto, que incluye un select con opciones predefinidas y un campo input (oculto inicialmente) para crear una nueva categoría.
<div class="form-group">
<label for="expenseAccountOrigin">Cuenta de Origen:</label>
<select id="expenseAccountOrigin" name="expenseAccountOrigin" required>
<option value="" disabled selected>Selecciona una cuenta</option>
</select>
</div>
Grupo de formulario para seleccionar la "Cuenta de Origen" del gasto. Las opciones de cuenta se cargarán dinámicamente.
<div class="form-group">
<label for="expenseReceipt">Adjuntar Recibo (Opcional):</label>
<input type="file" id="expenseReceipt" name="expenseReceipt" accept="image/*,application/pdf">
<small class="form-text text-muted">Formatos permitidos: JPG, PNG, PDF. Máx 2MB.</small>
</div>
Grupo de formulario para "Adjuntar Recibo", con un campo de tipo file y una nota sobre formatos y tamaño.
<div class="form-group form-group-checkbox">
<input type="checkbox" id="expenseIsRecurring" name="expenseIsRecurring">
<label for="expenseIsRecurring">¿Es un gasto recurrente?</label>
</div>
Casilla de verificación para marcar si el gasto es recurrente.
<div id="expenseRecurrenceOptions" class="form-group recurrence-options" style="display: none;">
<label for="expenseFrequency">Frecuencia:</label>
<select id="expenseFrequency" name="expenseFrequency">
<option value="diario">Diario</option>
<option value="semanal">Semanal</option>
<option value="quincenal">Quincenal</option>
<option value="mensual" selected>Mensual</option>
<option value="anual">Anual</option>
</select>
</div>
Opciones de recurrencia (Frecuencia) que se muestran si se marca la casilla anterior.
<div class="form-group">
<label for="expenseNotes">Notas (Opcional):</label>
<textarea id="expenseNotes" name="expenseNotes" rows="3" placeholder="Ej: Compra para la cena del viernes, Regalo para Ana"></textarea>
</div>
</div>
Grupo de formulario para "Notas" opcionales sobre el gasto. Cierre del cuerpo del modal.
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Gasto</button>
</div>
</form>
</div> </div>
Pie del modal de registro de gastos, con botones para "Cancelar" y "Guardar Gasto". Cierre del formulario y del `div` del modal.
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
Inicio del pie de página (<footer>), con la misma estructura que en otras páginas: logo y descripción.
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
Sección de enlaces de "Navegación" en el pie de página.
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
Sección de enlaces de "Información" en el pie de página.
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
Sección de "Contacto" y redes sociales en el pie de página. Cierre de `footer-top`.
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Sección inferior del pie de página con copyright y diseñador. Cierre de `footer-container` y `footer`.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza la versión de Ionicons para navegadores antiguos (sin soporte para módulos ES).
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js, para la funcionalidad del menú de navegación principal.
<script src="js/gastos.js"></script>
Enlaza el archivo JavaScript local gastos.js, que contendrá la lógica específica para la página de gestión de gastos (manejo de modales, listado de gastos, etc.).
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.gastos.css
A continuación, se presenta el código del archivo css/pages/gastos.css. Este archivo contiene las reglas de estilo dedicadas específicamente a la página de "Gestión de Gastos", definiendo la apariencia de las tarjetas de gastos, la lista, los modales de registro y otros elementos visuales de esta sección, incluyendo ajustes para diferentes tamaños de pantalla:
FINANZAS: Estilos de la Página de Gastos (gastos.css)
/* css/pages/gastos.css */
.gastos-page-container {
padding-bottom: 40px;
}
.gastos-actions {
margin-bottom: 30px;
display: flex;
justify-content: center;
}
.gastos-actions .neumorphic-button {
padding: 15px 30px;
}
.gastos-subtitle-header {
font-size: 1.8em;
color: var(--color-text);
margin-top: 50px;
margin-bottom: 25px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-bottom: 15px;
border-bottom: 1px solid var(--color-surface);
}
.gastos-subtitle-header ion-icon {
color: var(--color-neon-accent);
font-size: 1.3em;
}
.expense-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.expense-card {
background: linear-gradient(145deg, var(--color-surface) 0%, #16162e 100%);
padding: 20px;
border-radius: var(--border-radius-main);
box-shadow: var(--neumorphic-shadow-outset);
border: 1px solid rgba(var(--color-neon-accent-rgb), 0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 15px;
transition: all var(--transition-speed) ease;
}
.expense-card:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: 0 8px 25px rgba(0,0,0,0.2), var(--neumorphic-shadow-outset);
border-color: rgba(var(--color-neon-accent-rgb), 0.3);
}
.expense-card.example-card {
opacity: 0.6;
border-style: dashed;
border-color: var(--color-surface);
}
.expense-card-main-info {
display: flex;
align-items: center;
gap: 15px;
flex-grow: 1;
min-width: 250px;
}
.expense-icon-category {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 10px;
background-color: rgba(var(--color-neon-accent-rgb), 0.05);
border-radius: var(--border-radius-small);
min-width: 80px;
}
.expense-icon-category ion-icon {
font-size: 2.5em;
color: var(--color-neon-accent);
}
.expense-category-badge {
background-color: rgba(var(--color-neon-accent-rgb), 0.15);
color: var(--color-neon-accent);
padding: 4px 8px;
border-radius: var(--border-radius-small);
font-size: 0.75em;
font-weight: 500;
white-space: nowrap;
}
.expense-details {
flex-grow: 1;
}
.expense-details .expense-description {
font-size: 1.15em;
font-weight: 600;
color: var(--color-text);
margin-bottom: 4px;
}
.expense-details .expense-date,
.expense-details .expense-account {
font-size: 0.85em;
color: var(--color-text-muted);
margin-bottom: 2px;
}
.expense-amount-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
min-width: 150px;
}
.expense-amount {
font-size: 1.5em;
font-weight: 700;
white-space: nowrap;
}
.expense-amount .currency {
font-size: 0.6em;
color: var(--color-text-muted);
}
.expense-card-actions {
display: flex;
gap: 8px;
}
.expense-card-actions .action-btn {
padding: 6px 10px;
font-size: 0.8em;
}
.expense-card-actions .action-btn ion-icon {
font-size: 1.1em;
}
.category-input-group {
display: flex;
flex-direction: column;
}
.category-input-group input[type="text"] {
}
.form-text.text-muted {
font-size: 0.8em;
display: block;
margin-top: 5px;
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--color-text-muted);
font-size: 1.1em;
border: 2px dashed var(--color-surface);
border-radius: var(--border-radius-main);
background-color: rgba(var(--color-surface-rgb), 0.2);
margin-top: 20px;
}
@media (max-width: 768px) {
.expense-card {
flex-direction: column;
align-items: stretch;
}
.expense-card-main-info {
width: 100%;
}
.expense-amount-actions {
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}
.expense-card-actions {
justify-content: flex-end;
}
}
@media (max-width: 480px) {
.gastos-subtitle-header {
font-size: 1.6em;
}
.expense-card-main-info {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.expense-icon-category {
flex-direction: row;
min-width: auto;
padding: 8px;
}
.expense-icon-category ion-icon {
font-size: 2em;
margin-right: 8px;
}
.expense-details .expense-description {
font-size: 1.1em;
}
.expense-amount {
font-size: 1.3em;
}
}Explicación del código: FINANZAS: Estilos de la Página de Gastos (gastos.css)
/* css/pages/gastos.css */
Comentario que indica la ruta y el nombre del archivo, especificando que estos estilos son para la página de "Gastos" (gastos.css) dentro de la carpeta css/pages.
.gastos-page-container {
Inicia la definición de estilos para los elementos HTML que tengan la clase gastos-page-container. Este es probablemente el contenedor principal de la página de gestión de gastos.
padding-bottom: 40px;
Añade un relleno (espacio interno) de 40 píxeles en la parte inferior del contenedor, para dar espacio antes del pie de página o el final del contenido.
}
Cierra el bloque de estilos para la clase .gastos-page-container.
.gastos-actions {
Define estilos para los elementos con la clase gastos-actions, que probablemente contienen botones o controles principales de la página de gastos.
margin-bottom: 30px;
Añade un margen inferior de 30 píxeles a este contenedor de acciones.
display: flex;
Establece el modo de visualización como flex, permitiendo una disposición flexible de los elementos hijos.
justify-content: center;
Centra los elementos hijos horizontalmente dentro del contenedor gastos-actions.
}
Cierra el bloque de estilos para .gastos-actions.
.gastos-actions .neumorphic-button {
Define estilos para los botones con clase neumorphic-button que son descendientes de un elemento con clase gastos-actions.
padding: 15px 30px;
Establece un relleno interno para estos botones: 15 píxeles arriba y abajo, y 30 píxeles a los lados, haciéndolos más grandes y clickeables.
}
Cierra el bloque de estilos para .gastos-actions .neumorphic-button.
.gastos-subtitle-header {
Define estilos para los elementos con la clase gastos-subtitle-header, usados como subtítulos dentro de la página de gastos.
font-size: 1.8em;
Establece el tamaño de la fuente a 1.8 veces el tamaño de la fuente de su elemento padre.
color: var(--color-text);
Define el color del texto del subtítulo utilizando la variable CSS --color-text.
margin-top: 50px;
Añade un margen superior de 50 píxeles, separándolo de elementos anteriores.
margin-bottom: 25px;
Añade un margen inferior de 25 píxeles.
text-align: center;
Centra el texto del subtítulo horizontalmente.
display: flex;
Establece el modo de visualización como flex para alinear el icono y el texto del subtítulo.
align-items: center;
Alinea verticalmente al centro los elementos hijos (icono y texto) del subtítulo.
justify-content: center;
Centra horizontalmente los elementos hijos (icono y texto) del subtítulo.
gap: 10px;
Crea un espacio de 10 píxeles entre el icono y el texto del subtítulo.
padding-bottom: 15px;
Añade un relleno inferior de 15 píxeles.
border-bottom: 1px solid var(--color-surface);
Añade un borde inferior de 1 píxel de grosor, estilo sólido, y color definido por la variable --color-surface.
}
Cierra el bloque de estilos para .gastos-subtitle-header.
.gastos-subtitle-header ion-icon {
Define estilos para los elementos ion-icon que son hijos directos de un .gastos-subtitle-header.
color: var(--color-neon-accent);
Establece el color de estos iconos utilizando la variable CSS --color-neon-accent.
font-size: 1.3em;
Define el tamaño de estos iconos como 1.3 veces el tamaño de la fuente de su elemento padre (.gastos-subtitle-header).
}
Cierra el bloque de estilos para .gastos-subtitle-header ion-icon.
.expense-list {
Define estilos para el contenedor de la lista de gastos (expense-list).
display: flex;
Establece el modo de visualización como flex.
flex-direction: column;
Organiza los elementos hijos (las tarjetas de gasto) en una columna, apilándolos verticalmente.
gap: 20px;
Establece un espacio de 20 píxeles entre cada tarjeta de gasto en la lista.
}
Cierra el bloque de estilos para .expense-list.
.expense-card {
Define estilos para las tarjetas individuales que muestran la información de un gasto (expense-card).
background: linear-gradient(145deg, var(--color-surface) 0%, #16162e 100%);
Aplica un fondo con un gradiente lineal, desde el color --color-surface hasta #16162e en un ángulo de 145 grados.
padding: 20px;
Añade un relleno interno de 20 píxeles a la tarjeta.
border-radius: var(--border-radius-main);
Redondea las esquinas de la tarjeta utilizando la variable --border-radius-main.
box-shadow: var(--neumorphic-shadow-outset);
Aplica un efecto de sombra definido por la variable --neumorphic-shadow-outset, contribuyendo al estilo neumórfico.
border: 1px solid rgba(var(--color-neon-accent-rgb), 0.1);
Añade un borde sutil de 1 píxel, utilizando el color de acento neón con una opacidad del 10%.
display: flex;
Usa flexbox para la disposición interna de la tarjeta.
flex-wrap: wrap;
Permite que los elementos hijos de la tarjeta se envuelvan en múltiples líneas si es necesario (útil para responsividad).
justify-content: space-between;
Distribuye el espacio horizontalmente entre los grupos principales de información y acciones dentro de la tarjeta.
align-items: center;
Alinea verticalmente al centro los grupos principales dentro de la tarjeta.
gap: 15px;
Establece un espacio de 15 píxeles entre los grupos principales dentro de la tarjeta.
transition: all var(--transition-speed) ease;
Aplica una transición suave a todas las propiedades animables cuando cambian (ej. en estado hover).
}
Cierra el bloque de estilos para .expense-card.
.expense-card:hover {
Define estilos para el estado hover (cuando el cursor del ratón está sobre) de una tarjeta de gasto.
transform: translateY(-4px) scale(1.01);
Mueve la tarjeta 4 píxeles hacia arriba y la escala ligeramente a un 101% de su tamaño, creando un efecto de elevación.
box-shadow: 0 8px 25px rgba(0,0,0,0.2), var(--neumorphic-shadow-outset);
Modifica la sombra para realzar el efecto de elevación, combinando una sombra oscura más pronunciada con la sombra neumórfica.
border-color: rgba(var(--color-neon-accent-rgb), 0.3);
Hace el color del borde ligeramente más visible usando el acento neón con 30% de opacidad.
CSS
}
Cierra el bloque de estilos para .expense-card:hover.
.expense-card.example-card {
Define estilos adicionales para una tarjeta de gasto que también tiene la clase example-card (probablemente para mostrar un ejemplo visual).
opacity: 0.6;
Reduce la opacidad al 60%, haciéndola semitransparente.
border-style: dashed;
Cambia el estilo del borde a discontinuo.
border-color: var(--color-surface);
Establece el color del borde discontinuo usando la variable --color-surface.
}
Cierra el bloque de estilos para .expense-card.example-card.
.expense-card-main-info {
Define estilos para el contenedor principal de información dentro de una tarjeta de gasto.
display: flex;
Usa flexbox.
align-items: center;
Alinea verticalmente sus elementos hijos (icono/categoría y detalles).
gap: 15px;
Establece un espacio de 15 píxeles entre el icono/categoría y los detalles.
flex-grow: 1;
Permite que este contenedor crezca para ocupar el espacio disponible si la tarjeta es flexible.
min-width: 250px;
Establece un ancho mínimo para este bloque de información.
}
Cierra el bloque de estilos para .expense-card-main-info.
.expense-icon-category {
Define estilos para el contenedor del icono y la insignia de categoría del gasto.
display: flex;
Usa flexbox.
flex-direction: column;
Apila el icono y la insignia de categoría verticalmente.
align-items: center;
Centra el icono y la insignia horizontalmente.
justify-content: center;
Centra el icono y la insignia verticalmente.
gap: 5px;
Espacio entre el icono y la insignia.
padding: 10px;
Relleno interno.
background-color: rgba(var(--color-neon-accent-rgb), 0.05);
Color de fondo muy sutil usando el acento neón con 5% de opacidad.
border-radius: var(--border-radius-small);
Esquinas redondeadas.
min-width: 80px;
Ancho mínimo para este contenedor.
}
Cierra el bloque de estilos para .expense-icon-category.
.expense-icon-category ion-icon {
Define estilos para el ion-icon dentro de .expense-icon-category.
font-size: 2.5em;
Establece un tamaño grande para el icono de categoría.
color: var(--color-neon-accent);
Usa el color de acento neón para el icono.
}
Cierra el bloque de estilos para .expense-icon-category ion-icon.
.expense-category-badge {
Define estilos para la insignia de categoría del gasto (expense-category-badge).
background-color: rgba(var(--color-neon-accent-rgb), 0.15);
Color de fondo usando el acento neón con 15% de opacidad.
color: var(--color-neon-accent);
Color del texto de la insignia.
padding: 4px 8px;
Relleno interno.
border-radius: var(--border-radius-small);
Esquinas redondeadas.
font-size: 0.75em;
Tamaño de fuente pequeño.
font-weight: 500;
Grosor de fuente medio.
white-space: nowrap;
Evita que el texto de la insignia se divida en múltiples líneas.
}
Cierra el bloque de estilos para .expense-category-badge.
.expense-details {
Define estilos para el contenedor de los detalles del gasto (descripción, fecha, cuenta).
flex-grow: 1;
Permite que este contenedor crezca para ocupar el espacio disponible junto al icono/categoría.
}
Cierra el bloque de estilos para .expense-details.
.expense-details .expense-description {
Define estilos para la descripción del gasto.
font-size: 1.15em;
Tamaño de fuente.
font-weight: 600;
Grosor de fuente (semi-negrita).
color: var(--color-text);
Color de texto principal.
margin-bottom: 4px;
Pequeño margen inferior.
}
Cierra el bloque de estilos para .expense-details .expense-description.
.expense-details .expense-date,
.expense-details .expense-account {
Define estilos comunes para la fecha y la cuenta del gasto.
font-size: 0.85em;
Tamaño de fuente más pequeño.
color: var(--color-text-muted);
Color de texto atenuado.
margin-bottom: 2px;
Pequeño margen inferior.
}
Cierra el bloque de estilos para .expense-details .expense-date y .expense-details .expense-account.
.expense-amount-actions {
Define estilos para el contenedor que agrupa el monto del gasto y los botones de acción de la tarjeta.
display: flex;
Usa flexbox.
flex-direction: column;
Apila el monto y los botones de acción verticalmente.
align-items: flex-end;
Alinea el monto y los botones a la derecha.
gap: 10px;
Espacio entre el monto y el grupo de botones.
min-width: 150px;
Ancho mínimo para este contenedor.
}
Cierra el bloque de estilos para .expense-amount-actions.
.expense-amount {
Define estilos para el monto del gasto.
font-size: 1.5em;
Tamaño de fuente grande.
font-weight: 700;
Grosor de fuente (negrita).
white-space: nowrap;
Evita que el monto se divida en múltiples líneas.
}
Cierra el bloque de estilos para .expense-amount.
.expense-amount .currency {
Define estilos para el símbolo de la moneda dentro del monto del gasto.
font-size: 0.6em;
Tamaño de fuente más pequeño para la moneda.
color: var(--color-text-muted);
Color de texto atenuado.
}
Cierra el bloque de estilos para .expense-amount .currency.
.expense-card-actions {
Define estilos para el contenedor de los botones de acción dentro de la tarjeta de gasto.
display: flex;
Usa flexbox para alinear los botones.
gap: 8px;
Espacio de 8 píxeles entre los botones de acción.
}
Cierra el bloque de estilos para .expense-card-actions.
.expense-card-actions .action-btn {
Define estilos para los botones de acción individuales (action-btn) dentro de la tarjeta de gasto.
padding: 6px 10px;
Relleno más pequeño para estos botones.
font-size: 0.8em;
Tamaño de fuente más pequeño para el texto del botón (si lo tuviera, aquí parece que son solo iconos).
}
Cierra el bloque de estilos para .expense-card-actions .action-btn.
.expense-card-actions .action-btn ion-icon {
Define estilos para los ion-icon dentro de estos botones de acción.
font-size: 1.1em;
Establece el tamaño de los iconos.
}
Cierra el bloque de estilos para .expense-card-actions .action-btn ion-icon.
.category-input-group {
Define estilos para el grupo de entrada de categoría en un formulario (probablemente en el modal de agregar gasto).
display: flex;
Usa flexbox.
flex-direction: column;
Apila los elementos hijos (como un select y un input para nueva categoría) verticalmente.
}
Cierra el bloque de estilos para .category-input-group.
.category-input-group input[type="text"] {
Estilos para un campo de texto dentro de .category-input-group (probablemente el campo para ingresar una nueva categoría). No se definen reglas específicas aquí, por lo que heredará los estilos generales de los input o se definirán más adelante.
}
Cierra el bloque (vacío) de estilos para .category-input-group input[type="text"].
.form-text.text-muted {
Define estilos para texto de ayuda o informativo dentro de un formulario que tiene ambas clases.
font-size: 0.8em;
Tamaño de fuente pequeño.
display: block;
Hace que el texto ocupe su propia línea.
margin-top: 5px;
Añade un pequeño margen superior.
}
Cierra el bloque de estilos para .form-text.text-muted.
.empty-state {
Define estilos para los mensajes de estado vacío (cuando no hay datos que mostrar).
text-align: center;
Centra el texto.
padding: 40px 20px;
Relleno interno amplio.
color: var(--color-text-muted);
Color de texto atenuado.
font-size: 1.1em;
Tamaño de fuente.
border: 2px dashed var(--color-surface);
Borde discontinuo.
border-radius: var(--border-radius-main);
Esquinas redondeadas.
background-color: rgba(var(--color-surface-rgb), 0.2);
Color de fondo semitransparente.
margin-top: 20px;
Margen superior.
}
Cierra el bloque de estilos para .empty-state.
@media (max-width: 768px) {
Inicia un bloque de Media Query que aplica los estilos anidados cuando el ancho de la ventana del navegador es de 768 píxeles o menos (diseño responsivo para tablets y móviles).
.expense-card {
flex-direction: column;
align-items: stretch;
}
En pantallas pequeñas, las tarjetas de gasto (.expense-card) apilan su contenido principal y la sección de monto/acciones verticalmente (flex-direction: column) y estiran sus ítems (align-items: stretch).
.expense-card-main-info {
width: 100%;
}
Hace que el contenedor principal de información dentro de la tarjeta de gasto ocupe todo el ancho.
.expense-amount-actions {
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}
En pantallas pequeñas, la sección de monto y acciones de la tarjeta de gasto ocupa todo el ancho, dispone sus elementos en fila (flex-direction: row), distribuye el monto y los botones a los extremos (justify-content: space-between), los centra verticalmente y añade un margen superior.
.expense-card-actions {
justify-content: flex-end;
}
Dentro de la sección de monto y acciones, los botones de acción se alinean a la derecha.
}
Cierra el bloque @media (max-width: 768px).
@media (max-width: 480px) {
Inicia otro bloque de Media Query, esta vez para pantallas aún más pequeñas, con un ancho máximo de 480 píxeles (típico para móviles).
.gastos-subtitle-header {
font-size: 1.6em;
}
Reduce el tamaño de fuente de los subtítulos de la página de gastos.
.expense-card-main-info {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
En la información principal de la tarjeta de gasto, apila los elementos (icono/categoría y detalles) verticalmente, los alinea a la izquierda (align-items: flex-start) y ajusta el espacio entre ellos.
.expense-icon-category {
flex-direction: row;
min-width: auto;
padding: 8px;
}
Para el contenedor de icono/categoría, cambia la dirección a fila (horizontal), elimina el ancho mínimo y ajusta el relleno.
.expense-icon-category ion-icon {
font-size: 2em;
margin-right: 8px;
}
Ajusta el tamaño del icono de categoría y añade un margen a su derecha.
.expense-details .expense-description {
font-size: 1.1em;
}
Ajusta el tamaño de fuente de la descripción del gasto.
.expense-amount {
font-size: 1.3em;
}
Ajusta el tamaño de fuente del monto del gasto.
}
Cierra el bloque @media (max-width: 480px).inversiones.html
A continuación, se presenta el código fuente del archivo inversiones.html. Esta sección de la plataforma "FINANZAS" está diseñada para que los usuarios puedan administrar sus activos de inversión, registrar transacciones y realizar un seguimiento del rendimiento de su portafolio de manera detallada y organizada:
FINANZAS: Código de la Página de Inversiones (inversiones.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Mis Inversiones</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/inversiones.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item active"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="content">
<section id="inversiones" class="inversiones-page-container">
<div class="section-header">
<h1><ion-icon name="analytics-outline"></ion-icon> Gestión de Inversiones</h1>
<p class="subtitle">Administra y sigue el rendimiento de tus activos de inversión.</p>
</div>
<div class="inversiones-summary-actions">
<div class="summary-card">
<h4>Valor Total del Portafolio</h4>
<p class="total-portfolio-value" id="totalPortfolioValueDisplay">$0.00 <span class="currency">USD</span></p>
<div class="portfolio-performance" id="portfolioPerformanceDisplay">
Rendimiento General: <span class="performance-value text-positive">0.00%</span>
</div>
</div>
<div class="actions-buttons-group">
<button id="openAddAssetModalBtn" class="neumorphic-button primary-action">
<ion-icon name="add-circle-outline"></ion-icon>
<span>Agregar Activo</span>
</button>
<button id="openAddTransactionModalBtn" class="neumorphic-button secondary-action">
<ion-icon name="swap-horizontal-outline"></ion-icon>
<span>Registrar Transacción</span>
</button>
</div>
</div>
<h2 class="inversiones-subtitle-header">
<ion-icon name="briefcase-outline"></ion-icon> Mis Activos de Inversión
</h2>
<div id="assetListContainer" class="asset-list-grid">
<div class="asset-card example-card">
<div class="asset-card-header">
<h3 class="asset-name">Ej: Acciones TechCorp (TCORP)</h3>
<span class="asset-type-badge">Acciones</span>
</div>
<div class="asset-card-body">
<div class="asset-info-row"><span>Cantidad:</span> <span class="asset-quantity">10</span></div>
<div class="asset-info-row"><span>Costo Adquisición:</span> <span class="asset-cost-basis">$1,000.00</span></div>
<div class="asset-info-row"><span>Valor Unitario Actual:</span> <span class="asset-current-price">$120.00</span></div>
<div class="asset-info-row"><strong>Valor Total Actual:</strong> <strong class="asset-total-value">$1,200.00</strong></div>
<div class="asset-info-row"><strong>Rendimiento:</strong> <strong class="asset-performance text-positive">+20.00% ($200.00)</strong></div>
</div>
<div class="asset-card-actions">
<button class="action-btn update-value-btn"><ion-icon name="trending-up-outline"></ion-icon> Actualizar Valor</button>
<button class="action-btn view-asset-transactions-btn"><ion-icon name="list-outline"></ion-icon> Ver Transacciones</button>
<button class="action-btn edit-asset-btn"><ion-icon name="pencil-outline"></ion-icon></button>
<button class="action-btn delete-asset-btn"><ion-icon name="trash-outline"></ion-icon></button>
</div>
</div>
<p class="empty-state" id="emptyAssetListMessage">Aún no has agregado ningún activo de inversión.</p>
</div>
</section>
</main>
<div id="addAssetModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="briefcase-add-outline"></ion-icon> Agregar Activo de Inversión</h2>
<button class="close-modal-btn" id="closeAddAssetModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
<form id="addAssetForm">
<div class="modal-body">
<div class="form-group">
<label for="assetName">Nombre del Activo:</label>
<input type="text" id="assetName" name="assetName" required placeholder="Ej: Acciones Apple, Bitcoin, Fondo Global...">
</div>
<div class="form-group">
<label for="assetType">Tipo de Activo:</label>
<select id="assetType" name="assetType" required>
<option value="" disabled selected>Selecciona un tipo</option>
<option value="Acciones">Acciones</option>
<option value="Bonos">Bonos</option>
<option value="Fondos Mutuos">Fondos Mutuos</option>
<option value="Criptomonedas">Criptomonedas</option>
<option value="Bienes Raíces">Bienes Raíces</option>
<option value="Otro">Otro</option>
</select>
</div>
<div class="form-group">
<label for="assetSymbol">Símbolo/Ticker (Opcional):</label>
<input type="text" id="assetSymbol" name="assetSymbol" placeholder="Ej: AAPL, BTC">
</div>
<div class="form-group">
<label for="assetQuantity">Cantidad (Opcional, ej. para acciones/unidades):</label>
<input type="number" id="assetQuantity" name="assetQuantity" step="any" placeholder="0">
</div>
<div class="form-group">
<label for="assetAcquisitionDate">Fecha de Adquisición:</label>
<input type="date" id="assetAcquisitionDate" name="assetAcquisitionDate" required>
</div>
<div class="form-group">
<label for="assetCostBasis">Costo Total de Adquisición:</label>
<input type="number" id="assetCostBasis" name="assetCostBasis" step="0.01" required placeholder="0.00">
</div>
<div class="form-group">
<label for="assetCurrentValue">Valor Unitario/Total Actual:</label>
<input type="number" id="assetCurrentValue" name="assetCurrentValue" step="0.01" required placeholder="0.00">
<small class="form-text text-muted">Ingresa el valor unitario si aplica cantidad, sino el valor total actual del activo.</small>
</div>
<div class="form-group">
<label for="assetCurrency">Moneda:</label>
<select id="assetCurrency" name="assetCurrency" required>
<option value="USD" selected>USD - Dólar Estadounidense</option>
<option value="COP">COP - Peso Colombiano</option>
<option value="EUR">EUR - Euro</option>
</select>
</div>
<div class="form-group">
<label for="assetNotes">Notas (Opcional):</label>
<textarea id="assetNotes" name="assetNotes" rows="2" placeholder="Ej: Plataforma de compra, estrategia..."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Activo</button>
</div>
</form>
</div>
</div>
<div id="addTransactionModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="swap-horizontal-outline"></ion-icon> Registrar Transacción de Inversión</h2>
<button class="close-modal-btn" id="closeAddTransactionModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
<form id="addTransactionForm">
<div class="modal-body">
<div class="form-group">
<label for="transactionAssetId">Activo de Inversión:</label>
<select id="transactionAssetId" name="transactionAssetId" required>
<option value="" disabled selected>Selecciona un activo</option>
</select>
</div>
<div class="form-group">
<label for="transactionType">Tipo de Transacción:</label>
<select id="transactionType" name="transactionType" required>
<option value="Compra">Compra</option>
<option value="Venta">Venta</option>
<option value="Dividendo">Dividendo Recibido</option>
<option value="Interés">Interés Recibido</option>
<option value="Ajuste">Ajuste de Valor/Cantidad</option>
</select>
</div>
<div class="form-group">
<label for="transactionDate">Fecha de Transacción:</label>
<input type="date" id="transactionDate" name="transactionDate" required>
</div>
<div class="form-group transaction-field" data-type="Compra Venta Ajuste">
<label for="transactionQuantity">Cantidad:</label>
<input type="number" id="transactionQuantity" name="transactionQuantity" step="any" placeholder="0">
</div>
<div class="form-group transaction-field" data-type="Compra Venta">
<label for="transactionPrice">Precio Unitario:</label>
<input type="number" id="transactionPrice" name="transactionPrice" step="0.01" placeholder="0.00">
</div>
<div class="form-group transaction-field" data-type="Dividendo Interés">
<label for="transactionAmount">Monto Recibido:</label>
<input type="number" id="transactionAmount" name="transactionAmount" step="0.01" placeholder="0.00">
</div>
<div class="form-group transaction-field" data-type="Ajuste">
<label for="transactionNewTotalValue">Nuevo Valor Total del Activo (Opcional):</label>
<input type="number" id="transactionNewTotalValue" name="transactionNewTotalValue" step="0.01" placeholder="0.00">
</div>
<div class="form-group">
<label for="transactionFees">Comisiones/Costos (Opcional):</label>
<input type="number" id="transactionFees" name="transactionFees" step="0.01" placeholder="0.00">
</div>
<div class="form-group">
<label for="transactionNotes">Notas (Opcional):</label>
<textarea id="transactionNotes" name="transactionNotes" rows="2"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Transacción</button>
</div>
</form>
</div>
</div>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/inversiones.js"></script> </body>
</html>Explicación del código: FINANZAS: Código de la Página de Inversiones (inversiones.html)
<!DOCTYPE html>
Declara el tipo de documento como HTML5, asegurando que el navegador interprete el código con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML, con el atributo lang="es" que indica que el idioma principal de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Contiene metainformación, enlaces a hojas de estilo y el título de la página, elementos no visibles directamente en el contenido.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, lo cual es esencial para mostrar correctamente caracteres especiales y acentos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" (área visible de la página). width=device-width ajusta el ancho al del dispositivo del usuario, y initial-scale=1.0 establece el nivel de zoom inicial, fundamental para el diseño responsivo.
<title>Plataforma Financiera - Mis Inversiones</title>
Establece el título de la página: "Plataforma Financiera - Mis Inversiones". Este título se muestra en la pestaña del navegador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que contiene los estilos globales de la plataforma.
<link rel="stylesheet" href="css/pages/inversiones.css">
Enlaza una hoja de estilos específica para la página de "Inversiones" (inversiones.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts con varios grosores para usar en la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible.
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
Define la cabecera principal con estilo "glassmorphic". Incluye el logo "FINANZAS" que enlaza al dashboard.
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
Sección de navegación principal, con un menú hamburguesa para móviles y una lista de enlaces de navegación.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
Ítem de navegación para "Dashboard".
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
Ítem de navegación para "Cuentas".
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
Ítem de navegación para "Gastos".
<li><a href="inversiones.html#inversiones" class="nav-item active"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
Ítem de navegación para "Inversiones", marcado como active indicando que es la página actual.
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
Ítem de navegación para "Presupuestos".
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
Ítem de navegación para "Reportes".
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
Ítem de navegación para "Configuración". Cierre de la lista y de la navegación principal.
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
Sección de acciones en la cabecera, conteniendo el icono del perfil de usuario.
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
Menú desplegable del perfil, con cabecera que muestra avatar, nombre y correo del usuario.
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div> </div> </div> </header>
Opciones del menú desplegable del perfil. Cierre de los contenedores y de la cabecera principal.
<main class="content">
Elemento principal (<main>) que contiene el contenido específico de la página de inversiones.
<section id="inversiones" class="inversiones-page-container">
Sección principal de esta página, con id="inversiones" y clase inversiones-page-container para estilos.
<div class="section-header">
<h1><ion-icon name="analytics-outline"></ion-icon> Gestión de Inversiones</h1>
<p class="subtitle">Administra y sigue el rendimiento de tus activos de inversión.</p>
</div>
Cabecera de la sección "Inversiones", con título principal y subtítulo descriptivo.
<div class="inversiones-summary-actions">
<div class="summary-card">
<h4>Valor Total del Portafolio</h4>
<p class="total-portfolio-value" id="totalPortfolioValueDisplay">$0.00 <span class="currency">USD</span></p>
<div class="portfolio-performance" id="portfolioPerformanceDisplay">
Rendimiento General: <span class="performance-value text-positive">0.00%</span>
</div>
</div>
Contenedor para el resumen de inversiones y botones de acción. Incluye una tarjeta de resumen con el valor total del portafolio y el rendimiento general.
<div class="actions-buttons-group">
<button id="openAddAssetModalBtn" class="neumorphic-button primary-action">
<ion-icon name="add-circle-outline"></ion-icon>
<span>Agregar Activo</span>
</button>
Grupo de botones de acción. El primero es para "Agregar Activo", que abrirá un modal.
<button id="openAddTransactionModalBtn" class="neumorphic-button secondary-action">
<ion-icon name="swap-horizontal-outline"></ion-icon>
<span>Registrar Transacción</span>
</button>
</div> </div>
Botón para "Registrar Transacción", que también abrirá un modal. Cierre de los contenedores.
<h2 class="inversiones-subtitle-header">
<ion-icon name="briefcase-outline"></ion-icon> Mis Activos de Inversión
</h2>
Subtítulo (<h2>) para la sección que lista los activos de inversión del usuario.
<div id="assetListContainer" class="asset-list-grid">
Contenedor (div) donde se mostrará la lista o cuadrícula de los activos de inversión.
<div class="asset-card example-card">
<div class="asset-card-header">
<h3 class="asset-name">Ej: Acciones TechCorp (TCORP)</h3>
<span class="asset-type-badge">Acciones</span>
</div>
Tarjeta de ejemplo que muestra cómo se visualizaría un activo. Incluye una cabecera con el nombre del activo, su símbolo (ticker) y tipo.
<div class="asset-card-body">
<div class="asset-info-row"><span>Cantidad:</span> <span class="asset-quantity">10</span></div>
<div class="asset-info-row"><span>Costo Adquisición:</span> <span class="asset-cost-basis">$1,000.00</span></div>
<div class="asset-info-row"><span>Valor Unitario Actual:</span> <span class="asset-current-price">$120.00</span></div>
<div class="asset-info-row"><strong>Valor Total Actual:</strong> <strong class="asset-total-value">$1,200.00</strong></div>
<div class="asset-info-row"><strong>Rendimiento:</strong> <strong class="asset-performance text-positive">+20.00% ($200.00)</strong></div>
</div>
Cuerpo de la tarjeta del activo, mostrando detalles como cantidad, costo de adquisición, valor actual y rendimiento.
<div class="asset-card-actions">
<button class="action-btn update-value-btn"><ion-icon name="trending-up-outline"></ion-icon> Actualizar Valor</button>
<button class="action-btn view-asset-transactions-btn"><ion-icon name="list-outline"></ion-icon> Ver Transacciones</button>
<button class="action-btn edit-asset-btn"><ion-icon name="pencil-outline"></ion-icon></button>
<button class="action-btn delete-asset-btn"><ion-icon name="trash-outline"></ion-icon></button>
</div>
</div>
Sección de acciones para la tarjeta del activo, con botones para actualizar valor, ver transacciones, editar y eliminar.
<p class="empty-state" id="emptyAssetListMessage">Aún no has agregado ningún activo de inversión.</p>
</div> </section> </main>
Párrafo que se muestra si no hay activos de inversión registrados. Cierre del contenedor de la lista de activos, la sección `inversiones` y el elemento `main`.
<div id="addAssetModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="briefcase-add-outline"></ion-icon> Agregar Activo de Inversión</h2>
<button class="close-modal-btn" id="closeAddAssetModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
Inicio del modal para "Agregar Activo de Inversión". Incluye cabecera con título y botón de cierre.
<form id="addAssetForm">
<div class="modal-body">
Formulario para agregar un nuevo activo, dentro del cuerpo del modal.
<div class="form-group">
<label for="assetName">Nombre del Activo:</label>
<input type="text" id="assetName" name="assetName" required placeholder="Ej: Acciones Apple, Bitcoin, Fondo Global...">
</div>
Campo para el "Nombre del Activo".
<div class="form-group">
<label for="assetType">Tipo de Activo:</label>
<select id="assetType" name="assetType" required>
<option value="" disabled selected>Selecciona un tipo</option>
<option value="Acciones">Acciones</option>
<option value="Bonos">Bonos</option>
<option value="Fondos Mutuos">Fondos Mutuos</option>
<option value="Criptomonedas">Criptomonedas</option>
<option value="Bienes Raíces">Bienes Raíces</option>
<option value="Otro">Otro</option>
</select>
</div>
Campo para seleccionar el "Tipo de Activo".
<div class="form-group">
<label for="assetSymbol">Símbolo/Ticker (Opcional):</label>
<input type="text" id="assetSymbol" name="assetSymbol" placeholder="Ej: AAPL, BTC">
</div>
Campo opcional para el "Símbolo/Ticker" del activo.
<div class="form-group">
<label for="assetQuantity">Cantidad (Opcional, ej. para acciones/unidades):</label>
<input type="number" id="assetQuantity" name="assetQuantity" step="any" placeholder="0">
</div>
Campo opcional para la "Cantidad" del activo.
<div class="form-group">
<label for="assetAcquisitionDate">Fecha de Adquisición:</label>
<input type="date" id="assetAcquisitionDate" name="assetAcquisitionDate" required>
</div>
Campo para la "Fecha de Adquisición" del activo.
<div class="form-group">
<label for="assetCostBasis">Costo Total de Adquisición:</label>
<input type="number" id="assetCostBasis" name="assetCostBasis" step="0.01" required placeholder="0.00">
</div>
Campo para el "Costo Total de Adquisición".
<div class="form-group">
<label for="assetCurrentValue">Valor Unitario/Total Actual:</label>
<input type="number" id="assetCurrentValue" name="assetCurrentValue" step="0.01" required placeholder="0.00">
<small class="form-text text-muted">Ingresa el valor unitario si aplica cantidad, sino el valor total actual del activo.</small>
</div>
Campo para el "Valor Unitario/Total Actual" del activo, con una nota aclaratoria.
<div class="form-group">
<label for="assetCurrency">Moneda:</label>
<select id="assetCurrency" name="assetCurrency" required>
<option value="USD" selected>USD - Dólar Estadounidense</option>
<option value="COP">COP - Peso Colombiano</option>
<option value="EUR">EUR - Euro</option>
</select>
</div>
Campo para seleccionar la "Moneda" del activo.
<div class="form-group">
<label for="assetNotes">Notas (Opcional):</label>
<textarea id="assetNotes" name="assetNotes" rows="2" placeholder="Ej: Plataforma de compra, estrategia..."></textarea>
</div>
</div>
Campo opcional para "Notas" sobre el activo. Cierre del cuerpo del modal.
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Activo</button>
</div>
</form>
</div> </div>
Pie del modal para agregar activo, con botones de "Cancelar" y "Guardar Activo". Cierre del formulario y del modal.
<div id="addTransactionModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="swap-horizontal-outline"></ion-icon> Registrar Transacción de Inversión</h2>
<button class="close-modal-btn" id="closeAddTransactionModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
Inicio del modal para "Registrar Transacción de Inversión".
<form id="addTransactionForm">
<div class="modal-body">
Formulario para agregar una nueva transacción de inversión.
<div class="form-group">
<label for="transactionAssetId">Activo de Inversión:</label>
<select id="transactionAssetId" name="transactionAssetId" required>
<option value="" disabled selected>Selecciona un activo</option>
</select>
</div>
Campo para seleccionar el "Activo de Inversión" al que pertenece la transacción.
<div class="form-group">
<label for="transactionType">Tipo de Transacción:</label>
<select id="transactionType" name="transactionType" required>
<option value="Compra">Compra</option>
<option value="Venta">Venta</option>
<option value="Dividendo">Dividendo Recibido</option>
<option value="Interés">Interés Recibido</option>
<option value="Ajuste">Ajuste de Valor/Cantidad</option>
</select>
</div>
Campo para seleccionar el "Tipo de Transacción" (Compra, Venta, etc.).
<div class="form-group">
<label for="transactionDate">Fecha de Transacción:</label>
<input type="date" id="transactionDate" name="transactionDate" required>
</div>
Campo para la "Fecha de Transacción".
<div class="form-group transaction-field" data-type="Compra Venta Ajuste">
<label for="transactionQuantity">Cantidad:</label>
<input type="number" id="transactionQuantity" name="transactionQuantity" step="any" placeholder="0">
</div>
Campo para la "Cantidad" de la transacción, relevante para tipos como Compra, Venta o Ajuste.
<div class="form-group transaction-field" data-type="Compra Venta">
<label for="transactionPrice">Precio Unitario:</label>
<input type="number" id="transactionPrice" name="transactionPrice" step="0.01" placeholder="0.00">
</div>
Campo para el "Precio Unitario", relevante para Compra o Venta.
<div class="form-group transaction-field" data-type="Dividendo Interés">
<label for="transactionAmount">Monto Recibido:</label>
<input type="number" id="transactionAmount" name="transactionAmount" step="0.01" placeholder="0.00">
</div>
Campo para el "Monto Recibido", relevante para Dividendos o Intereses.
<div class="form-group transaction-field" data-type="Ajuste">
<label for="transactionNewTotalValue">Nuevo Valor Total del Activo (Opcional):</label>
<input type="number" id="transactionNewTotalValue" name="transactionNewTotalValue" step="0.01" placeholder="0.00">
</div>
Campo opcional para el "Nuevo Valor Total del Activo", relevante para Ajustes.
<div class="form-group">
<label for="transactionFees">Comisiones/Costos (Opcional):</label>
<input type="number" id="transactionFees" name="transactionFees" step="0.01" placeholder="0.00">
</div>
Campo opcional para "Comisiones/Costos" de la transacción.
<div class="form-group">
<label for="transactionNotes">Notas (Opcional):</label>
<textarea id="transactionNotes" name="transactionNotes" rows="2"></textarea>
</div>
</div>
Campo opcional para "Notas" sobre la transacción. Cierre del cuerpo del modal.
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Transacción</button>
</div>
</form>
</div> </div>
Pie del modal para registrar transacción, con botones de "Cancelar" y "Guardar Transacción". Cierre del formulario y del modal.
<footer class="site-footer">
Inicio del pie de página (<footer>), con la misma estructura que las páginas anteriores.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
Contenido del pie de página, incluyendo logo, descripción, enlaces de navegación, información, contacto y redes sociales.
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página con copyright y créditos de diseño. Cierre del pie de página.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza Ionicons para navegadores antiguos sin soporte para módulos ES.
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js para la funcionalidad del menú.
script src="js/inversiones.js"></script>
Enlaza el archivo JavaScript local inversiones.js, que contendrá la lógica específica para la página de gestión de inversiones.
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.inversiones.css
A continuación, se presenta el código del archivo css/pages/inversiones.css. Este archivo contiene las reglas de estilo específicas para la página de "Gestión de Inversiones", definiendo la apariencia de las tarjetas de resumen, la lista de activos, los modales y otros elementos visuales, así como sus ajustes para diferentes tamaños de pantalla:
inversiones.css – Estilos de la Página de Inversiones: Tarjetas de Activos, Resumen y Cuadrícula
.inversiones-page-container {
padding-bottom: 40px;
}
.inversiones-summary-actions {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-bottom: 40px;
align-items: stretch;
}
.inversiones-summary-actions .summary-card { /* Reutiliza o adapta .summary-card de cuentas.css */
flex: 1;
min-width: 280px;
background: linear-gradient(145deg, var(--color-surface) 0%, #16162e 100%);
padding: 25px;
border-radius: var(--border-radius-main);
box-shadow: var(--neumorphic-shadow-outset);
border: 1px solid rgba(var(--color-neon-accent-rgb), 0.1);
color: var(--color-text);
}
.summary-card .total-portfolio-value {
font-size: 2.2em;
font-weight: 700;
color: var(--color-text);
margin-bottom: 8px;
}
.summary-card .total-portfolio-value .currency {
font-size: 0.5em;
color: var(--color-text-muted);
margin-left: 5px;
}
.summary-card .portfolio-performance {
font-size: 1.1em;
color: var(--color-text-muted);
}
.summary-card .portfolio-performance .performance-value {
font-weight: 600;
}
.inversiones-summary-actions .actions-buttons-group {
flex: 1.5;
min-width: 300px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
align-items: stretch;
}
.actions-buttons-group .neumorphic-button {
padding: 15px;
font-size: 0.9em;
min-height: 90px;
}
.actions-buttons-group .neumorphic-button ion-icon {
font-size: 2em;
margin-bottom: 8px;
}
.inversiones-subtitle-header {
font-size: 1.8em;
color: var(--color-text);
margin-top: 50px;
margin-bottom: 25px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-bottom: 15px;
border-bottom: 1px solid var(--color-surface);
}
.inversiones-subtitle-header ion-icon {
color: var(--color-neon-accent);
font-size: 1.3em;
}
.asset-list-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
}
.asset-card {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.asset-card.example-card {
opacity: 0.6;
border-style: dashed;
border-color: var(--color-surface);
}
.asset-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
}
.asset-name {
font-size: 1.2em;
font-weight: 600;
color: var(--color-neon-accent);
margin-right: 10px;
word-break: break-word;
}
.asset-type-badge {
background-color: rgba(var(--color-neon-accent-rgb), 0.15);
color: var(--color-neon-accent);
padding: 5px 10px;
border-radius: var(--border-radius-small);
font-size: 0.75em;
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.asset-card-body .asset-info-row {
display: flex;
justify-content: space-between;
font-size: 0.9em;
color: var(--color-text-muted);
padding: 4px 0;
border-bottom: 1px dotted rgba(var(--color-text-muted), 0.1);
}
.asset-card-body .asset-info-row:last-child {
border-bottom: none;
}
.asset-card-body .asset-info-row span:first-child {
font-weight: 500;
color: var(--color-text-muted);
}
.asset-card-body .asset-info-row span:last-child,
.asset-card-body .asset-info-row strong {
color: var(--color-text);
font-weight: 500;
}
.asset-card-body .asset-info-row strong {
font-weight: 700;
}
.asset-card-body .asset-info-row .asset-performance.text-positive,
.asset-card-body .asset-info-row .asset-performance.text-negative {
font-weight: 700;
}
.asset-card-actions {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
}
.asset-card-actions .action-btn {
padding: 8px 10px;
font-size: 0.8em;
}
.asset-card-actions .action-btn ion-icon {
font-size: 1.1em;
}
.asset-card-actions .action-btn.update-value-btn {
flex-grow: 1;
background-color: rgba(var(--color-neon-accent-rgb), 0.1);
color: var(--color-neon-accent);
}
.asset-card-actions .action-btn.update-value-btn:hover {
background-color: rgba(var(--color-neon-accent-rgb), 0.2);
}
.empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 40px 20px;
color: var(--color-text-muted);
font-size: 1.1em;
border: 2px dashed var(--color-surface);
border-radius: var(--border-radius-main);
background-color: rgba(var(--color-surface-rgb), 0.2);
margin-top: 20px;
}
.transaction-field {
/* Se mostrarán/ocultarán con JS */
}
@media (max-width: 768px) {
.inversiones-summary-actions {
flex-direction: column;
}
.actions-buttons-group {
grid-template-columns: 1fr;
}
.asset-list-grid {
grid-template-columns: 1fr;
}
}Explicación del código: inversiones.css – Estilos de la Página de Inversiones: Tarjetas de Activos, Resumen y Cuadrícula
.inversiones-page-container {
Define estilos para el contenedor principal de la página de inversiones.
padding-bottom: 40px;
Añade un relleno (espacio interno) de 40 píxeles en la parte inferior del contenedor, para dar un respiro visual al final del contenido.
}
Cierra el bloque de estilos para la clase .inversiones-page-container.
.inversiones-summary-actions {
Define estilos para un contenedor que probablemente agrupa las tarjetas de resumen de inversiones y los botones de acción principales.
display: flex;
Establece el modelo de caja flexible (flexbox) para la disposición de sus elementos hijos.
flex-wrap: wrap;
Permite que los elementos hijos se envuelvan en múltiples líneas si no caben en una sola, útil para la adaptabilidad.
gap: 25px;
Establece un espacio de 25 píxeles entre los elementos hijos directos (por ejemplo, entre la tarjeta de resumen y el grupo de botones).
margin-bottom: 40px;
Añade un margen inferior de 40 píxeles a este contenedor.
align-items: stretch;
Estira los elementos flexibles hijos para que tengan la misma altura, llenando el espacio del contenedor en el eje transversal.
}
Cierra el bloque de estilos para .inversiones-summary-actions.
.inversiones-summary-actions .summary-card { /* Reutiliza o adapta .summary-card de cuentas.css */
Define estilos para los elementos con clase summary-card que son descendientes de .inversiones-summary-actions. El comentario sugiere que esta clase puede reutilizar o adaptar estilos de un .summary-card definido en cuentas.css.
flex: 1;
Permite que la tarjeta de resumen crezca y ocupe el espacio disponible de forma proporcional dentro del contenedor flex.
min-width: 280px;
Establece un ancho mínimo de 280 píxeles para la tarjeta.
background: linear-gradient(145deg, var(--color-surface) 0%, #16162e 100%);
Aplica un fondo con un gradiente lineal, que transiciona del color --color-surface al color #16162e en un ángulo de 145 grados.
padding: 25px;
Añade un relleno interno de 25 píxeles a la tarjeta.
border-radius: var(--border-radius-main);
Redondea las esquinas de la tarjeta usando la variable CSS --border-radius-main.
box-shadow: var(--neumorphic-shadow-outset);
Aplica un efecto de sombra definido por la variable --neumorphic-shadow-outset, probablemente para un estilo neumórfico.
border: 1px solid rgba(var(--color-neon-accent-rgb), 0.1);
Añade un borde sutil de 1 píxel, utilizando el color de acento neón con una opacidad del 10%.
color: var(--color-text);
Establece el color del texto dentro de la tarjeta usando la variable --color-text.
}
Cierra el bloque de estilos para .inversiones-summary-actions .summary-card.
.summary-card .total-portfolio-value {
Define estilos para el elemento que muestra el valor total del portafolio dentro de una summary-card.
font-size: 2.2em;
Establece un tamaño de fuente grande para destacar este valor.
font-weight: 700;
Aplica un grosor de fuente de negrita (700).
color: var(--color-text);
Utiliza el color de texto principal.
margin-bottom: 8px;
Añade un pequeño margen inferior.
}
Cierra el bloque de estilos para .summary-card .total-portfolio-value.
.summary-card .total-portfolio-value .currency {
Define estilos para el símbolo de la moneda dentro del valor total del portafolio.
font-size: 0.5em;
Establece el tamaño de la fuente para la moneda a la mitad del tamaño de su elemento padre (el monto).
color: var(--color-text-muted);
Utiliza un color de texto atenuado para la moneda.
margin-left: 5px;
Añade un pequeño margen a la izquierda para separarlo del monto.
}
Cierra el bloque de estilos para .summary-card .total-portfolio-value .currency.
.summary-card .portfolio-performance {
Define estilos para el elemento que muestra el rendimiento del portafolio.
font-size: 1.1em;
Establece el tamaño de la fuente.
color: var(--color-text-muted);
Utiliza un color de texto atenuado.
}
Cierra el bloque de estilos para .summary-card .portfolio-performance.
.summary-card .portfolio-performance .performance-value {
Define estilos para el valor específico del rendimiento dentro de la sección de rendimiento.
font-weight: 600;
Aplica un grosor de fuente semi-negrita (600).
}
Cierra el bloque de estilos para .summary-card .portfolio-performance .performance-value.
.inversiones-summary-actions .actions-buttons-group {
Define estilos para el grupo de botones de acción dentro de la sección de resumen de inversiones.
flex: 1.5;
Permite que este grupo de botones crezca y ocupe 1.5 veces el espacio proporcionalmente en comparación con otros elementos flexibles con flex: 1.
min-width: 300px;
Establece un ancho mínimo de 300 píxeles.
display: grid;
Utiliza CSS Grid para la disposición interna de los botones.
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
Define columnas responsivas para los botones, cada una con un mínimo de 180px de ancho, ajustándose al espacio disponible.
gap: 15px;
Establece un espacio de 15 píxeles entre los botones en la cuadrícula.
align-items: stretch;
Estira los botones para que tengan la misma altura dentro de la cuadrícula.
}
Cierra el bloque de estilos para .inversiones-summary-actions .actions-buttons-group.
.actions-buttons-group .neumorphic-button {
Define estilos para los botones con clase neumorphic-button dentro del grupo de acciones.
padding: 15px;
Añade un relleno interno de 15 píxeles a los botones.
font-size: 0.9em;
Establece el tamaño de la fuente del texto del botón a un 90% del de su padre.
min-height: 90px;
Establece una altura mínima de 90 píxeles para los botones, asegurando una buena área de click.
}
Cierra el bloque de estilos para .actions-buttons-group .neumorphic-button.
.actions-buttons-group .neumorphic-button ion-icon {
Define estilos para los ion-icon dentro de estos botones de acción.
font-size: 2em;
Establece un tamaño de icono grande.
margin-bottom: 8px;
Añade un margen inferior, probablemente para separar el icono del texto si el botón tiene una disposición vertical de su contenido.
}
Cierra el bloque de estilos para .actions-buttons-group .neumorphic-button ion-icon.
.inversiones-subtitle-header {
Define estilos para los subtítulos dentro de la página de inversiones.
font-size: 1.8em;
Establece el tamaño de la fuente.
color: var(--color-text);
Utiliza el color de texto principal.
margin-top: 50px;
Añade un margen superior.
margin-bottom: 25px;
Añade un margen inferior.
text-align: center;
Centra el texto del subtítulo.
display: flex;
Usa flexbox para alinear el icono y el texto.
align-items: center;
Alinea verticalmente al centro el icono y el texto.
justify-content: center;
Centra horizontalmente el icono y el texto.
gap: 10px;
Espacio entre el icono y el texto.
padding-bottom: 15px;
Relleno inferior.
border-bottom: 1px solid var(--color-surface);
Borde inferior sutil.
}
Cierra el bloque de estilos para .inversiones-subtitle-header.
.inversiones-subtitle-header ion-icon {
Define estilos para los ion-icon dentro de estos subtítulos.
color: var(--color-neon-accent);
Establece el color del icono al color de acento neón.
font-size: 1.3em;
Define el tamaño del icono.
}
Cierra el bloque de estilos para .inversiones-subtitle-header ion-icon.
.asset-list-grid {
Define estilos para el contenedor de la cuadrícula que listará los activos de inversión.
display: grid;
Utiliza CSS Grid.
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
Crea columnas responsivas para los activos, con un mínimo de 350px de ancho cada una.
gap: 25px;
Espacio de 25 píxeles entre las tarjetas de activos.
}
Cierra el bloque de estilos para .asset-list-grid.
.asset-card {
Define estilos base para las tarjetas individuales de activos (asset-card).
display: flex;
Usa flexbox.
flex-direction: column;
Organiza el contenido de la tarjeta verticalmente.
justify-content: space-between;
Distribuye el espacio verticalmente entre los elementos principales de la tarjeta (cabecera, cuerpo, acciones).
}
Cierra el bloque de estilos para .asset-card.
.asset-card.example-card {
Define estilos adicionales para una tarjeta de activo que también es una tarjeta de ejemplo.
CSS
opacity: 0.6;
La hace semitransparente.
CSS
border-style: dashed;
Cambia el estilo del borde a discontinuo.
CSS
border-color: var(--color-surface);
Establece el color del borde.
CSS
}
Cierra el bloque de estilos para .asset-card.example-card.
CSS
.asset-card-header {
Define estilos para la cabecera de una tarjeta de activo.
CSS
display: flex;
Usa flexbox.
CSS
justify-content: space-between;
Coloca el nombre del activo y el tipo de activo en extremos opuestos.
CSS
align-items: flex-start;
Alinea los elementos hijos (nombre y tipo) al inicio del eje transversal (útil si tienen diferentes alturas).
CSS
margin-bottom: 15px;
Margen inferior.
CSS
padding-bottom: 10px;
Relleno inferior.
CSS
border-bottom: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
Borde inferior sutil.
CSS
}
Cierra el bloque de estilos para .asset-card-header.
CSS
.asset-name {
Define estilos para el nombre del activo.
CSS
font-size: 1.2em;
Tamaño de fuente.
CSS
font-weight: 600;
Grosor semi-negrita.
CSS
color: var(--color-neon-accent);
Color de acento neón.
CSS
margin-right: 10px;
Margen a la derecha para separar del tipo de activo si están en la misma línea visual.
CSS
word-break: break-word;
Permite que palabras largas se dividan para evitar desbordamientos.
CSS
}
Cierra el bloque de estilos para .asset-name.
CSS
.asset-type-badge {
Define estilos para la insignia que muestra el tipo de activo.
background-color: rgba(var(--color-neon-accent-rgb), 0.15);
Color de fondo semitransparente.
color: var(--color-neon-accent);
Color del texto.
padding: 5px 10px;
Relleno interno.
border-radius: var(--border-radius-small);
Esquinas redondeadas.
font-size: 0.75em;
Tamaño de fuente pequeño.
font-weight: 500;
Grosor de fuente medio.
white-space: nowrap;
Evita que el texto de la insignia se divida.
flex-shrink: 0;
Evita que la insignia se encoja si hay falta de espacio en el contenedor flex de la cabecera.
}
Cierra el bloque de estilos para .asset-type-badge.
.asset-card-body .asset-info-row {
Define estilos para las filas de información dentro del cuerpo de la tarjeta de activo.
display: flex;
Usa flexbox.
justify-content: space-between;
Coloca la etiqueta y el valor de la información en extremos opuestos de la fila.
font-size: 0.9em;
Tamaño de fuente.
color: var(--color-text-muted);
Color de texto atenuado por defecto para la fila.
padding: 4px 0;
Relleno vertical.
border-bottom: 1px dotted rgba(var(--color-text-muted), 0.1);
Borde inferior punteado y muy sutil entre filas.
}
Cierra el bloque de estilos para .asset-card-body .asset-info-row.
.asset-card-body .asset-info-row:last-child {
Selecciona la última fila de información dentro del cuerpo de la tarjeta.
border-bottom: none;
Elimina el borde inferior de la última fila para un acabado limpio.
}
Cierra el bloque de estilos para .asset-card-body .asset-info-row:last-child.
.asset-card-body .asset-info-row span:first-child {
Define estilos para el primer <span> (generalmente la etiqueta) dentro de una fila de información.
font-weight: 500;
Grosor de fuente medio.
color: var(--color-text-muted);
Asegura el color de texto atenuado para la etiqueta.
}
Cierra el bloque de estilos para .asset-card-body .asset-info-row span:first-child.
.asset-card-body .asset-info-row span:last-child,
.asset-card-body .asset-info-row strong {
Define estilos para el último <span> (generalmente el valor) o para elementos <strong> dentro de una fila de información.
color: var(--color-text);
Establece el color del texto al color principal.
font-weight: 500;
Grosor de fuente medio. (Se sobreescribirá para strong más abajo).
}
Cierra el bloque de estilos para .asset-card-body .asset-info-row span:last-child y strong.
.asset-card-body .asset-info-row strong {
Define estilos específicos para los elementos <strong> dentro de una fila de información (usado para valores destacados).
font-weight: 700;
Grosor de fuente negrita (700).
}
Cierra el bloque de estilos para .asset-card-body .asset-info-row strong.
.asset-card-body .asset-info-row .asset-performance.text-positive,
.asset-card-body .asset-info-row .asset-performance.text-negative {
Define estilos para el texto de rendimiento del activo, específicamente para las clases text-positive y text-negative (aunque los colores se definirían en state.css o similar).
font-weight: 700;
Aplica negrita al texto de rendimiento.
}
Cierra el bloque de estilos para .asset-card-body .asset-info-row .asset-performance....
.asset-card-actions {
Define estilos para el contenedor de acciones en la tarjeta de activo.
margin-top: 20px;
Margen superior.
display: flex;
Usa flexbox.
flex-wrap: wrap;
Permite que los botones se envuelvan si no caben.
gap: 8px;
Espacio entre los botones de acción.
justify-content: flex-start;
Alinea los botones al inicio del contenedor.
}
Cierra el bloque de estilos para .asset-card-actions.
.asset-card-actions .action-btn {
Define estilos para los botones de acción individuales.
padding: 8px 10px;
Relleno interno.
font-size: 0.8em;
Tamaño de fuente pequeño.
}
Cierra el bloque de estilos para .asset-card-actions .action-btn.
.asset-card-actions .action-btn ion-icon {
Define estilos para los ion-icon dentro de estos botones de acción.
font-size: 1.1em;
Tamaño del icono.
}
Cierra el bloque de estilos para .asset-card-actions .action-btn ion-icon.
.asset-card-actions .action-btn.update-value-btn {
Define estilos específicos para el botón de "Actualizar Valor".
flex-grow: 1;
Permite que este botón crezca para ocupar más espacio si es necesario.
background-color: rgba(var(--color-neon-accent-rgb), 0.1);
Color de fondo distintivo.
color: var(--color-neon-accent);
Color de texto distintivo.
}
Cierra el bloque de estilos para .asset-card-actions .action-btn.update-value-btn.
.asset-card-actions .action-btn.update-value-btn:hover {
Define estilos para el estado hover del botón "Actualizar Valor".
background-color: rgba(var(--color-neon-accent-rgb), 0.2);
Oscurece ligeramente el fondo al pasar el cursor.
}
Cierra el bloque de estilos para .asset-card-actions .action-btn.update-value-btn:hover.
.empty-state {
Define estilos para los mensajes de estado vacío (reutilizados de cuentas.css o similar).
grid-column: 1 / -1;
Si está en una cuadrícula, ocupa todas las columnas.
text-align: center;
Centra el texto.
padding: 40px 20px;
Relleno interno.
color: var(--color-text-muted);
Color de texto atenuado.
font-size: 1.1em;
Tamaño de fuente.
border: 2px dashed var(--color-surface);
Borde discontinuo.
border-radius: var(--border-radius-main);
Esquinas redondeadas.
background-color: rgba(var(--color-surface-rgb), 0.2);
Color de fondo semitransparente.
margin-top: 20px;
Margen superior.
}
Cierra el bloque de estilos para .empty-state.
.transaction-field {
/* Se mostrarán/ocultarán con JS */
}
Selector para campos de transacción, con un comentario indicando que su visibilidad es controlada por JavaScript. No se aplican estilos CSS aquí directamente para la visibilidad.
@media (max-width: 768px) {
Inicia un bloque de Media Query para pantallas con ancho máximo de 768px (tablets y móviles).
.inversiones-summary-actions {
flex-direction: column;
}
Cambia la dirección de los elementos en el resumen de acciones a columna (apilados verticalmente).
.actions-buttons-group {
grid-template-columns: 1fr;
}
Hace que los botones de acción en el grupo ocupen una sola columna.
.asset-list-grid {
grid-template-columns: 1fr;
}
Cambia la cuadrícula de la lista de activos para que muestre solo una columna, apilando las tarjetas.
}
Cierra el bloque @media (max-width: 768px).presupuestos.html
A continuación, se presenta el código fuente del archivo presupuestos.html. Esta sección de la plataforma "FINANZAS" está dedicada a la gestión de "Presupuestos y Metas", permitiendo a los usuarios planificar sus gastos, crear presupuestos por categorías y establecer objetivos de ahorro para un mejor control y planificación financiera:
FINANZAS: Código de la Página de Presupuestos y Metas (presupuestos.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Presupuestos y Metas</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/presupuestos.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item active"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="content">
<section id="presupuestos" class="presupuestos-page-container">
<div class="section-header">
<h1><ion-icon name="stats-chart-outline"></ion-icon> Presupuestos y Metas</h1>
<p class="subtitle">Planifica tus gastos y alcanza tus objetivos de ahorro.</p>
</div>
<div class="page-actions-group">
<button id="openCreateBudgetModalBtn" class="neumorphic-button primary-action">
<ion-icon name="add-circle-outline"></ion-icon>
<span>Crear Nuevo Presupuesto</span>
</button>
<button id="openSetGoalModalBtn" class="neumorphic-button secondary-action">
<ion-icon name="golf-outline"></ion-icon>
<span>Establecer Meta de Ahorro</span>
</button>
</div>
<h2 class="page-subtitle-header">
<ion-icon name="pie-chart-outline"></ion-icon> Mis Presupuestos
</h2>
<div id="budgetListContainer" class="budget-goal-list-grid">
<div class="dashboard-card budget-card example-card">
<div class="card-title"><ion-icon name="fast-food-outline"></ion-icon>Alimentación (Mayo 2025)</div>
<div class="card-content">
<p><strong>Presupuestado:</strong> <span class="budgeted-amount">$500.00</span></p>
<p><strong>Gastado:</strong> <span class="spent-amount">$350.00</span></p>
<p><strong>Restante:</strong> <span class="remaining-amount">$150.00</span></p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">70% utilizado</p>
</div>
<div class="card-actions">
<button class="action-btn edit-budget-btn"><ion-icon name="pencil-outline"></ion-icon> Editar</button>
<button class="action-btn delete-budget-btn"><ion-icon name="trash-outline"></ion-icon> Eliminar</button>
</div>
</div>
<p class="empty-state" id="emptyBudgetListMessage">No tienes presupuestos activos. ¡Crea uno para empezar!</p>
</div>
<h2 class="page-subtitle-header">
<ion-icon name="flag-outline"></ion-icon> Mis Metas de Ahorro
</h2>
<div id="goalListContainer" class="budget-goal-list-grid">
<div class="dashboard-card goal-card example-card">
<div class="card-title"><ion-icon name="airplane-outline"></ion-icon>Viaje a Europa</div>
<div class="card-content">
<p><strong>Objetivo:</strong> <span class="goal-target-amount">$5,000.00</span></p>
<p><strong>Ahorrado:</strong> <span class="goal-saved-amount">$3,500.00</span></p>
<p><strong>Restante:</strong> <span class="goal-remaining-amount">$1,500.00</span></p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">70% alcanzado</p>
<p class="goal-deadline">Fecha Límite: 31 Diciembre, 2025</p>
</div>
<div class="card-actions">
<button class="action-btn add-savings-btn"><ion-icon name="add-circle-outline"></ion-icon> Agregar Ahorro</button>
<button class="action-btn edit-goal-btn"><ion-icon name="pencil-outline"></ion-icon> Editar</button>
<button class="action-btn delete-goal-btn"><ion-icon name="trash-outline"></ion-icon> Eliminar</button>
</div>
</div>
<p class="empty-state" id="emptyGoalListMessage">No tienes metas de ahorro. ¡Define una y ve por ella!</p>
</div>
</section>
</main>
<div id="createBudgetModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="create-outline"></ion-icon> Crear Nuevo Presupuesto</h2>
<button class="close-modal-btn" id="closeCreateBudgetModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
<form id="createBudgetForm">
<div class="modal-body">
<div class="form-group">
<label for="budgetCategory">Categoría de Gasto:</label>
<select id="budgetCategory" name="budgetCategory" required>
<option value="" disabled selected>Selecciona una categoría</option>
</select>
</div>
<div class="form-group">
<label for="budgetAmount">Monto Presupuestado:</label>
<input type="number" id="budgetAmount" name="budgetAmount" step="0.01" required placeholder="0.00">
</div>
<div class="form-group">
<label for="budgetPeriod">Período:</label>
<select id="budgetPeriod" name="budgetPeriod" required>
<option value="Mensual" selected>Mensual</option>
<option value="Trimestral">Trimestral</option>
<option value="Anual">Anual</option>
<option value="Unica Vez">Única Vez (para un período específico)</option>
</select>
</div>
<div class="form-group date-range-group">
<label for="budgetStartDate">Fecha de Inicio:</label>
<input type="month" id="budgetStartDate" name="budgetStartDate" required>
</div>
<div class="form-group">
<label for="budgetCurrency">Moneda:</label>
<select id="budgetCurrency" name="budgetCurrency" required>
<option value="USD">USD</option>
<option value="COP" selected>COP</option>
<option value="EUR">EUR</option>
</select>
</div>
<div class="form-group">
<label for="budgetNotes">Notas (Opcional):</label>
<textarea id="budgetNotes" name="budgetNotes" rows="2"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Presupuesto</button>
</div>
</form>
</div>
</div>
<div id="setGoalModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="golf-outline"></ion-icon> Establecer Nueva Meta de Ahorro</h2>
<button class="close-modal-btn" id="closeSetGoalModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
<form id="setGoalForm">
<div class="modal-body">
<div class="form-group">
<label for="goalName">Nombre de la Meta:</label>
<input type="text" id="goalName" name="goalName" required placeholder="Ej: Viaje a la playa, Nuevo computador">
</div>
<div class="form-group">
<label for="goalTargetAmount">Monto Objetivo:</label>
<input type="number" id="goalTargetAmount" name="goalTargetAmount" step="0.01" required placeholder="0.00">
</div>
<div class="form-group">
<label for="goalInitialSavedAmount">Monto Ahorrado Inicialmente (Opcional):</label>
<input type="number" id="goalInitialSavedAmount" name="goalInitialSavedAmount" step="0.01" placeholder="0.00">
</div>
<div class="form-group">
<label for="goalCurrency">Moneda:</label>
<select id="goalCurrency" name="goalCurrency" required>
<option value="USD">USD</option>
<option value="COP" selected>COP</option>
<option value="EUR">EUR</option>
</select>
</div>
<div class="form-group">
<label for="goalDeadline">Fecha Límite (Opcional):</label>
<input type="date" id="goalDeadline" name="goalDeadline">
</div>
<div class="form-group">
<label for="goalAssociatedAccount">Cuenta de Ahorro Asociada (Opcional):</label>
<select id="goalAssociatedAccount" name="goalAssociatedAccount">
<option value="">Ninguna</option>
</select>
</div>
<div class="form-group">
<label for="goalNotes">Notas (Opcional):</label>
<textarea id="goalNotes" name="goalNotes" rows="2"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Meta</button>
</div>
</form>
</div>
</div>
<div id="addSavingsModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="wallet-outline"></ion-icon> Agregar Ahorro a Meta</h2>
<button class="close-modal-btn" id="closeAddSavingsModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
<form id="addSavingsForm">
<input type="hidden" id="addSavingsGoalId" name="addSavingsGoalId">
<div class="modal-body">
<h3 id="addSavingsGoalNameDisplay" style="text-align:center; color: var(--color-neon-accent); margin-bottom: 20px;"></h3>
<div class="form-group">
<label for="savingsAmount">Monto a Agregar:</label>
<input type="number" id="savingsAmount" name="savingsAmount" step="0.01" required placeholder="0.00">
</div>
<div class="form-group">
<label for="savingsDate">Fecha del Ahorro:</label>
<input type="date" id="savingsDate" name="savingsDate" required>
</div>
<div class="form-group">
<label for="savingsAccountOrigin">Cuenta de Origen (Opcional):</label>
<select id="savingsAccountOrigin" name="savingsAccountOrigin">
<option value="">Ninguna / Efectivo</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Confirmar Ahorro</button>
</div>
</form>
</div>
</div>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/presupuestos.js"></script> </body>
</html>Explicación del código: FINANZAS: Código de la Página de Presupuestos y Metas (presupuestos.html)
<!DOCTYPE html>
Declara el tipo de documento como HTML5, asegurando que el navegador lo interprete con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML, con el atributo lang="es" que indica que el idioma principal de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Contiene metainformación, enlaces a hojas de estilo y el título de la página, elementos no visibles directamente en el contenido.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, esencial para mostrar correctamente caracteres especiales, acentos y la 'ñ'.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" para un diseño responsivo, ajustando el ancho de la página al del dispositivo y estableciendo la escala inicial.
<title>Plataforma Financiera - Presupuestos y Metas</title>
Establece el título de la página: "Plataforma Financiera - Presupuestos y Metas", que se muestra en la pestaña del navegador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que contiene los estilos globales de la plataforma.
<link rel="stylesheet" href="css/pages/presupuestos.css">
Enlaza una hoja de estilos específica para la página de "Presupuestos" (presupuestos.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts con varios grosores para usar en la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible.
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
Define la cabecera principal con estilo "glassmorphic". Incluye el logo "FINANZAS" que enlaza al dashboard.
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
Sección de navegación principal, con un menú hamburguesa y una lista de enlaces de navegación.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
Ítem de navegación para "Dashboard".
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
Ítem de navegación para "Cuentas".
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
Ítem de navegación para "Gastos".
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
Ítem de navegación para "Inversiones".
<li><a href="presupuestos.html#presupuestos" class="nav-item active"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
Ítem de navegación para "Presupuestos", marcado como active indicando que es la página actual.
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
Ítem de navegación para "Reportes".
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
Ítem de navegación para "Configuración". Cierre de la lista y de la navegación principal.
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
Sección de acciones en la cabecera, conteniendo el icono del perfil de usuario.
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
Menú desplegable del perfil, con cabecera que muestra avatar, nombre y correo del usuario.
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div> </div> </div> </header>
Opciones del menú desplegable del perfil. Cierre de los contenedores y de la cabecera principal.
<main class="content">
Elemento principal (<main>) que contiene el contenido específico de la página de presupuestos y metas.
<section id="presupuestos" class="presupuestos-page-container">
Sección principal de esta página, con id="presupuestos" y clase presupuestos-page-container para estilos.
<div class="section-header">
<h1><ion-icon name="stats-chart-outline"></ion-icon> Presupuestos y Metas</h1>
<p class="subtitle">Planifica tus gastos y alcanza tus objetivos de ahorro.</p>
</div>
Cabecera de la sección "Presupuestos y Metas", con título principal y subtítulo descriptivo.
<div class="page-actions-group">
<button id="openCreateBudgetModalBtn" class="neumorphic-button primary-action">
<ion-icon name="add-circle-outline"></ion-icon>
<span>Crear Nuevo Presupuesto</span>
</button>
Grupo de botones de acción para la página. El primero es para "Crear Nuevo Presupuesto", que abrirá un modal.
<button id="openSetGoalModalBtn" class="neumorphic-button secondary-action">
<ion-icon name="golf-outline"></ion-icon>
<span>Establecer Meta de Ahorro</span>
</button>
</div>
Botón para "Establecer Meta de Ahorro", que también abrirá un modal. Cierre del grupo de acciones.
<h2 class="page-subtitle-header">
<ion-icon name="pie-chart-outline"></ion-icon> Mis Presupuestos
</h2>
Subtítulo (<h2>) para la sección que lista los presupuestos del usuario.
<div id="budgetListContainer" class="budget-goal-list-grid">
Contenedor (div) donde se mostrará la lista o cuadrícula de los presupuestos.
<div class="dashboard-card budget-card example-card">
<div class="card-title"><ion-icon name="fast-food-outline"></ion-icon>Alimentación (Mayo 2025)</div>
<div class="card-content">
<p><strong>Presupuestado:</strong> <span class="budgeted-amount">$500.00</span></p>
<p><strong>Gastado:</strong> <span class="spent-amount">$350.00</span></p>
<p><strong>Restante:</strong> <span class="remaining-amount">$150.00</span></p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">70% utilizado</p>
</div>
Tarjeta de ejemplo que muestra cómo se visualizaría un presupuesto (Alimentación). Incluye título, monto presupuestado, gastado, restante y una barra de progreso.
<div class="card-actions">
<button class="action-btn edit-budget-btn"><ion-icon name="pencil-outline"></ion-icon> Editar</button>
<button class="action-btn delete-budget-btn"><ion-icon name="trash-outline"></ion-icon> Eliminar</button>
</div>
</div>
Sección de acciones para la tarjeta del presupuesto, con botones para editar y eliminar.
<p class="empty-state" id="emptyBudgetListMessage">No tienes presupuestos activos. ¡Crea uno para empezar!</p>
</div>
Párrafo que se muestra si no hay presupuestos activos. Cierre del contenedor de la lista de presupuestos.
<h2 class="page-subtitle-header">
<ion-icon name="flag-outline"></ion-icon> Mis Metas de Ahorro
</h2>
Subtítulo (<h2>) para la sección que lista las metas de ahorro del usuario.
<div id="goalListContainer" class="budget-goal-list-grid">
Contenedor (div) donde se mostrará la lista o cuadrícula de las metas de ahorro.
<div class="dashboard-card goal-card example-card">
<div class="card-title"><ion-icon name="airplane-outline"></ion-icon>Viaje a Europa</div>
<div class="card-content">
<p><strong>Objetivo:</strong> <span class="goal-target-amount">$5,000.00</span></p>
<p><strong>Ahorrado:</strong> <span class="goal-saved-amount">$3,500.00</span></p>
<p><strong>Restante:</strong> <span class="goal-remaining-amount">$1,500.00</span></p>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="progress-label">70% alcanzado</p>
<p class="goal-deadline">Fecha Límite: 31 Diciembre, 2025</p>
</div>
Tarjeta de ejemplo que muestra cómo se visualizaría una meta de ahorro (Viaje a Europa). Incluye título, objetivo, ahorrado, restante, barra de progreso y fecha límite.
<div class="card-actions">
<button class="action-btn add-savings-btn"><ion-icon name="add-circle-outline"></ion-icon> Agregar Ahorro</button>
<button class="action-btn edit-goal-btn"><ion-icon name="pencil-outline"></ion-icon> Editar</button>
<button class="action-btn delete-goal-btn"><ion-icon name="trash-outline"></ion-icon> Eliminar</button>
</div>
</div>
Sección de acciones para la tarjeta de meta de ahorro, con botones para agregar ahorro, editar y eliminar.
<p class="empty-state" id="emptyGoalListMessage">No tienes metas de ahorro. ¡Define una y ve por ella!</p>
</div> </section> </main>
Párrafo que se muestra si no hay metas de ahorro. Cierre del contenedor de la lista de metas, la sección `presupuestos` y el elemento `main`.
<div id="createBudgetModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="create-outline"></ion-icon> Crear Nuevo Presupuesto</h2>
<button class="close-modal-btn" id="closeCreateBudgetModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
Inicio del modal para "Crear Nuevo Presupuesto". Incluye cabecera con título y botón de cierre.
<form id="createBudgetForm">
<div class="modal-body">
Formulario para crear un nuevo presupuesto, dentro del cuerpo del modal.
<div class="form-group">
<label for="budgetCategory">Categoría de Gasto:</label>
<select id="budgetCategory" name="budgetCategory" required>
<option value="" disabled selected>Selecciona una categoría</option>
</select>
</div>
Campo para seleccionar la "Categoría de Gasto" para el presupuesto (las opciones se cargarán dinámicamente).
<div class="form-group">
<label for="budgetAmount">Monto Presupuestado:</label>
<input type="number" id="budgetAmount" name="budgetAmount" step="0.01" required placeholder="0.00">
</div>
Campo para el "Monto Presupuestado".
<div class="form-group">
<label for="budgetPeriod">Período:</label>
<select id="budgetPeriod" name="budgetPeriod" required>
<option value="Mensual" selected>Mensual</option>
<option value="Trimestral">Trimestral</option>
<option value="Anual">Anual</option>
<option value="Unica Vez">Única Vez (para un período específico)</option>
</select>
</div>
Campo para seleccionar el "Período" del presupuesto.
<div class="form-group date-range-group">
<label for="budgetStartDate">Fecha de Inicio:</label>
<input type="month" id="budgetStartDate" name="budgetStartDate" required>
</div>
Campo para la "Fecha de Inicio" del presupuesto (probablemente para seleccionar mes y año).
<div class="form-group">
<label for="budgetCurrency">Moneda:</label>
<select id="budgetCurrency" name="budgetCurrency" required>
<option value="USD">USD</option>
<option value="COP" selected>COP</option>
<option value="EUR">EUR</option>
</select>
</div>
Campo para seleccionar la "Moneda" del presupuesto.
<div class="form-group">
<label for="budgetNotes">Notas (Opcional):</label>
<textarea id="budgetNotes" name="budgetNotes" rows="2"></textarea>
</div>
</div>
Campo opcional para "Notas" sobre el presupuesto. Cierre del cuerpo del modal.
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Presupuesto</button>
</div>
</form>
</div> </div>
Pie del modal para crear presupuesto, con botones "Cancelar" y "Guardar Presupuesto". Cierre del formulario y del modal.
<div id="setGoalModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="golf-outline"></ion-icon> Establecer Nueva Meta de Ahorro</h2>
<button class="close-modal-btn" id="closeSetGoalModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
Inicio del modal para "Establecer Nueva Meta de Ahorro".
<form id="setGoalForm">
<div class="modal-body">
Formulario para establecer una nueva meta de ahorro.
<div class="form-group">
<label for="goalName">Nombre de la Meta:</label>
<input type="text" id="goalName" name="goalName" required placeholder="Ej: Viaje a la playa, Nuevo computador">
</div>
Campo para el "Nombre de la Meta".
<div class="form-group">
<label for="goalTargetAmount">Monto Objetivo:</label>
<input type="number" id="goalTargetAmount" name="goalTargetAmount" step="0.01" required placeholder="0.00">
</div>
Campo para el "Monto Objetivo" de la meta.
<div class="form-group">
<label for="goalInitialSavedAmount">Monto Ahorrado Inicialmente (Opcional):</label>
<input type="number" id="goalInitialSavedAmount" name="goalInitialSavedAmount" step="0.01" placeholder="0.00">
</div>
Campo opcional para el "Monto Ahorrado Inicialmente".
<div class="form-group">
<label for="goalCurrency">Moneda:</label>
<select id="goalCurrency" name="goalCurrency" required>
<option value="USD">USD</option>
<option value="COP" selected>COP</option>
<option value="EUR">EUR</option>
</select>
</div>
Campo para seleccionar la "Moneda" de la meta.
<div class="form-group">
<label for="goalDeadline">Fecha Límite (Opcional):</label>
<input type="date" id="goalDeadline" name="goalDeadline">
</div>
Campo opcional para la "Fecha Límite" de la meta.
<div class="form-group">
<label for="goalAssociatedAccount">Cuenta de Ahorro Asociada (Opcional):</label>
<select id="goalAssociatedAccount" name="goalAssociatedAccount">
<option value="">Ninguna</option>
</select>
</div>
Campo opcional para asociar una "Cuenta de Ahorro" a la meta.
<div class="form-group">
<label for="goalNotes">Notas (Opcional):</label>
<textarea id="goalNotes" name="goalNotes" rows="2"></textarea>
</div>
</div>
Campo opcional para "Notas" sobre la meta. Cierre del cuerpo del modal.
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Guardar Meta</button>
</div>
</form>
</div> </div>
Pie del modal para establecer meta, con botones "Cancelar" y "Guardar Meta". Cierre del formulario y del modal.
<div id="addSavingsModal" class="modal">
<div class="modal-content neumorphic-modal">
<div class="modal-header">
<h2><ion-icon name="wallet-outline"></ion-icon> Agregar Ahorro a Meta</h2>
<button class="close-modal-btn" id="closeAddSavingsModalBtn"><ion-icon name="close-outline"></ion-icon></button>
</div>
Inicio del modal para "Agregar Ahorro a Meta".
<form id="addSavingsForm">
<input type="hidden" id="addSavingsGoalId" name="addSavingsGoalId">
Formulario para agregar ahorro a una meta. Incluye un campo oculto (<input type="hidden">) para el ID de la meta.
<div class="modal-body">
<h3 id="addSavingsGoalNameDisplay" style="text-align:center; color: var(--color-neon-accent); margin-bottom: 20px;"></h3>
Cuerpo del modal, que mostrará dinámicamente el nombre de la meta a la que se agrega el ahorro.
<div class="form-group">
<label for="savingsAmount">Monto a Agregar:</label>
<input type="number" id="savingsAmount" name="savingsAmount" step="0.01" required placeholder="0.00">
</div>
Campo para el "Monto a Agregar" a la meta.
<div class="form-group">
<label for="savingsDate">Fecha del Ahorro:</label>
<input type="date" id="savingsDate" name="savingsDate" required>
</div>
Campo para la "Fecha del Ahorro".
<div class="form-group">
<label for="savingsAccountOrigin">Cuenta de Origen (Opcional):</label>
<select id="savingsAccountOrigin" name="savingsAccountOrigin">
<option value="">Ninguna / Efectivo</option>
</select>
</div>
</div>
Campo opcional para la "Cuenta de Origen" del ahorro. Cierre del cuerpo del modal.
<div class="modal-footer">
<button type="button" class="neumorphic-button secondary-action close-generic-modal-btn">Cancelar</button>
<button type="submit" class="neumorphic-button primary-action">Confirmar Ahorro</button>
</div>
</form>
</div> </div>
Pie del modal para agregar ahorro, con botones "Cancelar" y "Confirmar Ahorro". Cierre del formulario y del modal.
<footer class="site-footer">
Inicio del pie de página (<footer>), con la misma estructura que las páginas anteriores.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
Contenido del pie de página, incluyendo logo, descripción, enlaces de navegación, información, contacto y redes sociales.
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página con copyright y créditos de diseño. Cierre del pie de página.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza Ionicons para navegadores antiguos sin soporte para módulos ES.
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js para la funcionalidad del menú.
<script src="js/presupuestos.js"></script>
Enlaza el archivo JavaScript local presupuestos.js, que contendrá la lógica específica para la página de presupuestos y metas.
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.Explicación del código: FINANZAS: Código de la Página de Análisis y Reportes (reportes.html)
presupuestos.css
A continuación, se presenta el código del archivo css/pages/presupuestos.css. Este archivo contiene las reglas de estilo diseñadas específicamente para la página de "Presupuestos y Metas", definiendo la apariencia de las tarjetas de presupuestos, las metas de ahorro, los grupos de acciones y otros elementos visuales, además de sus ajustes para diferentes tamaños de pantalla:
presupuestos.css – Estilos de Presupuestos y Metas: Tarjetas, Barras de Progreso y Diseño Responsivo
.presupuestos-page-container {
padding-bottom: 40px;
}
.page-actions-group {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-bottom: 40px;
}
.page-actions-group .neumorphic-button {
padding: 15px 25px;
flex-grow: 1;
max-width: 350px;
}
.page-subtitle-header {
font-size: 1.8em;
color: var(--color-text);
margin-top: 50px;
margin-bottom: 25px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-bottom: 15px;
border-bottom: 1px solid var(--color-surface);
}
.page-subtitle-header ion-icon {
color: var(--color-neon-accent);
font-size: 1.3em;
}
.budget-goal-list-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.budget-card, .goal-card {
/* Hereda estilos de .dashboard-card de modules/card.css */
/* .card-title y .card-content también heredan */
}
.budget-card.example-card,
.goal-card.example-card {
opacity: 0.6;
border-style: dashed;
border-color: var(--color-surface);
}
.budget-card .card-content p {
display: flex;
justify-content: space-between;
font-size: 0.95em;
margin-bottom: 8px;
}
.budget-card .card-content strong {
color: var(--color-text-muted);
}
.budget-card .card-content .budgeted-amount,
.budget-card .card-content .spent-amount,
.budget-card .card-content .remaining-amount {
color: var(--color-text);
font-weight: 600;
}
.budget-card .card-content .spent-amount.over-budget {
color: #ff7675;
}
.budget-card .card-content .remaining-amount.negative {
color: #ff7675;
}
.goal-card .card-content p {
display: flex;
justify-content: space-between;
font-size: 0.95em;
margin-bottom: 8px;
}
.goal-card .card-content strong {
color: var(--color-text-muted);
}
.goal-card .card-content .goal-target-amount,
.goal-card .card-content .goal-saved-amount,
.goal-card .card-content .goal-remaining-amount {
color: var(--color-text);
font-weight: 600;
}
.goal-card .card-content .goal-deadline {
font-size: 0.85em;
color: var(--color-text-muted);
text-align: right;
margin-top: 10px;
display: block;
}
.progress-bar-container .progress-bar.over-budget {
background: linear-gradient(90deg, #d63031, #ff7675);
box-shadow: 0 0 12px rgba(255, 118, 117, 0.6);
}
.card-actions {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.card-actions .action-btn {
padding: 8px 12px;
font-size: 0.85em;
}
.empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 40px 20px;
color: var(--color-text-muted);
font-size: 1.1em;
border: 2px dashed var(--color-surface);
border-radius: var(--border-radius-main);
background-color: rgba(var(--color-surface-rgb), 0.2);
margin-top: 20px;
}
#addSavingsModal #addSavingsGoalNameDisplay {
font-size: 1.3em;
font-weight: 600;
}
.form-group input[type="month"] {
/* Estilos heredados de form.css, aquí solo ajustes si son necesarios */
/* Algunos navegadores pueden requerir estilos específicos para el picker */
}
@media (max-width: 768px) {
.page-actions-group {
flex-direction: column;
}
.page-actions-group .neumorphic-button {
max-width: 100%;
}
.budget-goal-list-grid {
grid-template-columns: 1fr;
}
}Explicación del código: presupuestos.css – Estilos de Presupuestos y Metas: Tarjetas, Barras de Progreso y Diseño Responsivo
.presupuestos-page-container {
Define estilos para el contenedor principal de la página de presupuestos y metas.
padding-bottom: 40px;
Añade un relleno (espacio interno) de 40 píxeles en la parte inferior del contenedor.
}
Cierra el bloque de estilos para la clase .presupuestos-page-container.
.page-actions-group {
Define estilos para un grupo de botones de acción en la página.
display: flex;
Establece el modo de visualización como flex para una disposición flexible de los botones.
flex-wrap: wrap;
Permite que los botones se envuelvan en múltiples líneas si no caben en una sola.
gap: 20px;
Establece un espacio de 20 píxeles entre los botones.
justify-content: center;
Centra los botones horizontalmente dentro del contenedor.
margin-bottom: 40px;
Añade un margen inferior de 40 píxeles a este grupo de acciones.
}
Cierra el bloque de estilos para .page-actions-group.
.page-actions-group .neumorphic-button {
Define estilos para los botones con clase neumorphic-button dentro del .page-actions-group.
padding: 15px 25px;
Establece un relleno interno para estos botones (15px arriba/abajo, 25px a los lados).
flex-grow: 1;
Permite que los botones crezcan para ocupar el espacio disponible si hay varios en una fila.
max-width: 350px;
Establece un ancho máximo de 350 píxeles para cada botón.
}
Cierra el bloque de estilos para .page-actions-group .neumorphic-button.
.page-subtitle-header {
Define estilos para los subtítulos de sección en la página.
font-size: 1.8em;
Establece el tamaño de la fuente a 1.8 veces el tamaño de la fuente del elemento padre.
color: var(--color-text);
Define el color del texto del subtítulo utilizando la variable CSS --color-text.
margin-top: 50px;
Añade un margen superior de 50 píxeles.
margin-bottom: 25px;
Añade un margen inferior de 25 píxeles.
text-align: center;
Centra el texto del subtítulo horizontalmente.
display: flex;
Establece el modo de visualización como flex para alinear el icono y el texto del subtítulo.
align-items: center;
Alinea verticalmente al centro los elementos hijos (icono y texto) del subtítulo.
justify-content: center;
Centra horizontalmente los elementos hijos del subtítulo.
gap: 10px;
Crea un espacio de 10 píxeles entre el icono y el texto del subtítulo.
padding-bottom: 15px;
Añade un relleno inferior de 15 píxeles.
border-bottom: 1px solid var(--color-surface);
Añade un borde inferior de 1 píxel de grosor, estilo sólido, y color definido por la variable --color-surface.
}
Cierra el bloque de estilos para .page-subtitle-header.
.page-subtitle-header ion-icon {
Define estilos para los elementos ion-icon que son hijos directos de un .page-subtitle-header.
color: var(--color-neon-accent);
Establece el color de estos iconos utilizando la variable CSS --color-neon-accent.
font-size: 1.3em;
Define el tamaño de estos iconos como 1.3 veces el tamaño de la fuente de su elemento padre.
}
Cierra el bloque de estilos para .page-subtitle-header ion-icon.
.budget-goal-list-grid {
Define estilos para el contenedor de la cuadrícula que listará los presupuestos y las metas.
display: grid;
Utiliza CSS Grid para la disposición.
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
Crea columnas responsivas. Cada columna tendrá un tamaño mínimo de 320px y se expandirá para llenar el espacio, ajustando el número de columnas automáticamente.
gap: 25px;
Establece un espacio de 25 píxeles entre las tarjetas de la cuadrícula.
margin-bottom: 40px;
Añade un margen inferior al contenedor de la cuadrícula.
}
Cierra el bloque de estilos para .budget-goal-list-grid.
.budget-card, .goal-card {
/* Hereda estilos de .dashboard-card de modules/card.css */
/* .card-title y .card-content también heredan */
}
Selector para las tarjetas de presupuesto (.budget-card) y las tarjetas de meta (.goal-card). Los comentarios indican que estos elementos heredan estilos base de una clase .dashboard-card (probablemente definida en modules/card.css) y que sus sub-elementos como .card-title y .card-content también heredan estilos. No se definen estilos nuevos aquí, solo se agrupan los selectores.
.budget-card.example-card,
.goal-card.example-card {
Define estilos específicos para tarjetas de presupuesto o meta que también tienen la clase example-card.
opacity: 0.6;
Reduce la opacidad al 60%, haciéndolas semitransparentes para indicar que son ejemplos.
border-style: dashed;
Cambia el estilo del borde a discontinuo.
border-color: var(--color-surface);
Establece el color del borde discontinuo.
}
Cierra el bloque de estilos para las tarjetas de ejemplo.
.budget-card .card-content p {
Define estilos para los párrafos (<p>) dentro del contenido (.card-content) de una tarjeta de presupuesto (.budget-card).
display: flex;
Usa flexbox para la disposición del contenido del párrafo (probablemente una etiqueta y un valor).
justify-content: space-between;
Distribuye los elementos hijos del párrafo (etiqueta y valor) a los extremos.
font-size: 0.95em;
Establece el tamaño de la fuente.
margin-bottom: 8px;
Añade un margen inferior.
}
Cierra el bloque de estilos para .budget-card .card-content p.
.budget-card .card-content strong {
Define estilos para los elementos <strong> (texto en negrita) dentro del contenido de una tarjeta de presupuesto.
color: var(--color-text-muted);
Establece un color de texto atenuado para estos elementos, que probablemente se usan como etiquetas.
}
Cierra el bloque de estilos para .budget-card .card-content strong.
.budget-card .card-content .budgeted-amount,
.budget-card .card-content .spent-amount,
.budget-card .card-content .remaining-amount {
Define estilos comunes para los elementos que muestran el monto presupuestado, gastado y restante.
color: var(--color-text);
Usa el color de texto principal para estos montos.
font-weight: 600;
Aplica un grosor de fuente semi-negrita.
}
Cierra el bloque de estilos para los montos del presupuesto.
.budget-card .card-content .spent-amount.over-budget {
Define estilos para el monto gastado cuando tiene la clase adicional over-budget (presupuesto excedido).
color: #ff7675;
Establece el color a un tono rojo para indicar alerta.
}
Cierra el bloque de estilos para .budget-card .card-content .spent-amount.over-budget.
.budget-card .card-content .remaining-amount.negative {
Define estilos para el monto restante cuando tiene la clase adicional negative (saldo negativo).
color: #ff7675;
Establece el color a un tono rojo, similar al de presupuesto excedido.
}
Cierra el bloque de estilos para .budget-card .card-content .remaining-amount.negative.
.goal-card .card-content p {
Define estilos para los párrafos (<p>) dentro del contenido (.card-content) de una tarjeta de meta (.goal-card).
display: flex;
justify-content: space-between;
font-size: 0.95em;
margin-bottom: 8px;
Aplica estilos de disposición y formato similares a los párrafos de las tarjetas de presupuesto.
}
Cierra el bloque de estilos para .goal-card .card-content p.
.goal-card .card-content strong {
Define estilos para los elementos <strong> dentro del contenido de una tarjeta de meta.
color: var(--color-text-muted);
Establece un color de texto atenuado, similar a las etiquetas en las tarjetas de presupuesto.
}
Cierra el bloque de estilos para .goal-card .card-content strong.
.goal-card .card-content .goal-target-amount,
.goal-card .card-content .goal-saved-amount,
.goal-card .card-content .goal-remaining-amount {
Define estilos comunes para los elementos que muestran el monto objetivo, ahorrado y restante de una meta.
color: var(--color-text);
font-weight: 600;
Aplica el color de texto principal y un grosor semi-negrita.
}
Cierra el bloque de estilos para los montos de la meta.
.goal-card .card-content .goal-deadline {
Define estilos para el elemento que muestra la fecha límite de una meta.
font-size: 0.85em;
Tamaño de fuente más pequeño.
color: var(--color-text-muted);
Color de texto atenuado.
text-align: right;
Alinea el texto a la derecha.
margin-top: 10px;
Añade un margen superior.
display: block;
Hace que ocupe su propia línea.
}
Cierra el bloque de estilos para .goal-card .card-content .goal-deadline.
.progress-bar-container .progress-bar.over-budget {
Define estilos para una barra de progreso (.progress-bar) que también tiene la clase over-budget, dentro de un .progress-bar-container.
background: linear-gradient(90deg, #d63031, #ff7675);
Aplica un fondo con gradiente lineal en tonos rojos para indicar que se ha excedido el presupuesto.
box-shadow: 0 0 12px rgba(255, 118, 117, 0.6);
Añade una sombra de resplandor rojiza.
}
Cierra el bloque de estilos para .progress-bar-container .progress-bar.over-budget.
.card-actions {
Define estilos para el contenedor de acciones (.card-actions) que se encuentra en las tarjetas de presupuesto y meta.
margin-top: 20px;
Añade un margen superior.
display: flex;
Usa flexbox.
flex-wrap: wrap;
Permite que los botones de acción se envuelvan si no caben.
gap: 10px;
Espacio entre los botones.
justify-content: flex-end;
Alinea los botones de acción a la derecha.
}
Cierra el bloque de estilos para .card-actions.
.card-actions .action-btn {
Define estilos para los botones de acción individuales (.action-btn) dentro de .card-actions.
padding: 8px 12px;
Relleno interno.
font-size: 0.85em;
Tamaño de fuente.
}
Cierra el bloque de estilos para .card-actions .action-btn.
.empty-state {
Define estilos para los mensajes de estado vacío (cuando no hay presupuestos o metas).
grid-column: 1 / -1;
Si está en una cuadrícula, hace que ocupe todas las columnas.
text-align: center;
padding: 40px 20px;
color: var(--color-text-muted);
font-size: 1.1em;
border: 2px dashed var(--color-surface);
border-radius: var(--border-radius-main);
background-color: rgba(var(--color-surface-rgb), 0.2);
margin-top: 20px;
Aplica centrado de texto, relleno, color, tamaño de fuente, borde discontinuo, esquinas redondeadas, color de fondo semitransparente y margen superior.
}
Cierra el bloque de estilos para .empty-state.
#addSavingsModal #addSavingsGoalNameDisplay {
Define estilos para un elemento específico (#addSavingsGoalNameDisplay) dentro del modal addSavingsModal.
font-size: 1.3em;
Tamaño de fuente.
font-weight: 600;
Grosor de fuente semi-negrita.
}
Cierra el bloque de estilos para #addSavingsModal #addSavingsGoalNameDisplay.
.form-group input[type="month"] {
/* Estilos heredados de form.css, aquí solo ajustes si son necesarios */
/* Algunos navegadores pueden requerir estilos específicos para el picker */
}
Selector para campos de entrada de tipo mes (input[type="month"]). Los comentarios indican que los estilos principales se heredan de un form.css y aquí solo se harían ajustes específicos si fueran necesarios, o para estilos particulares del selector de mes en algunos navegadores. No se definen reglas específicas aquí.
@media (max-width: 768px) {
Inicia un bloque de Media Query que aplica los estilos anidados cuando el ancho de la ventana del navegador es de 768 píxeles o menos (tablets y móviles).
.page-actions-group {
flex-direction: column;
}
En pantallas pequeñas, el grupo de acciones de la página apila sus botones verticalmente.
.page-actions-group .neumorphic-button {
max-width: 100%;
}
Los botones dentro del grupo de acciones ocupan todo el ancho disponible.
.budget-goal-list-grid {
grid-template-columns: 1fr;
}
La cuadrícula de presupuestos y metas muestra solo una columna, apilando las tarjetas.
}
Cierra el bloque @media (max-width: 768px).reportes.html
A continuación, se presenta el código fuente del archivo reportes.html. Esta sección de la plataforma "FINANZAS" está dedicada al "Análisis y Reportes", ofreciendo a los usuarios herramientas para visualizar sus datos financieros mediante filtros, entender sus hábitos de consumo y exportar la información relevante:
FINANZAS: Código de la Página de Análisis y Reportes (reportes.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Reportes</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/reportes.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item active"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="content">
<section id="reportes" class="reportes-page-container">
<div class="section-header">
<h1><ion-icon name="bar-chart-outline"></ion-icon> Análisis y Reportes</h1>
<p class="subtitle">Visualiza tus datos financieros y entiende tus hábitos de consumo.</p>
</div>
<div class="filters-container neumorphic-inset-panel">
<h3 class="filters-title"><ion-icon name="filter-outline"></ion-icon> Filtros de Reporte</h3>
<form id="reportFiltersForm" class="filters-form">
<div class="form-group">
<label for="reportPeriod">Período:</label>
<select id="reportPeriod" name="reportPeriod">
<option value="current_month" selected>Este Mes</option>
<option value="last_month">Mes Pasado</option>
<option value="last_3_months">Últimos 3 Meses</option>
<option value="last_6_months">Últimos 6 Meses</option>
<option value="current_year">Este Año</option>
<option value="custom">Personalizado</option>
</select>
</div>
<div class="form-group date-range-group" id="customDateRangeGroup" style="display: none;">
<div class="date-input-container">
<label for="reportStartDate">Desde:</label>
<input type="date" id="reportStartDate" name="reportStartDate">
</div>
<div class="date-input-container">
<label for="reportEndDate">Hasta:</label>
<input type="date" id="reportEndDate" name="reportEndDate">
</div>
</div>
<div class="form-group">
<label for="reportAccount">Cuenta (Opcional):</label>
<select id="reportAccount" name="reportAccount">
<option value="all" selected>Todas las Cuentas</option>
<option value="1">Ahorros Banco X (Simulado)</option>
<option value="2">Efectivo (Simulado)</option>
</select>
</div>
<div class="form-group">
<label for="reportCategory">Categoría (Opcional):</label>
<select id="reportCategory" name="reportCategory">
<option value="all" selected>Todas las Categorías</option>
<option value="Alimentación">Alimentación</option>
<option value="Transporte">Transporte</option>
<option value="Vivienda">Vivienda</option>
</select>
</div>
<button type="submit" class="neumorphic-button primary-action apply-filters-btn">
<ion-icon name="checkmark-circle-outline"></ion-icon>Aplicar Filtros
</button>
</form>
</div>
<div class="reports-grid">
<div class="dashboard-card report-card">
<h2 class="card-title"><ion-icon name="pie-chart-outline"></ion-icon>Gastos por Categoría</h2>
<div class="card-content">
<p class="report-period-display">Período: Este Mes (Simulado)</p>
<div class="chart-placeholder">
<span>Gráfico de Gastos por Categoría</span>
</div>
<ul class="report-summary-list">
<li><span>Alimentación:</span> <span>$350.00 (45%)</span></li>
<li><span>Transporte:</span> <span>$150.00 (20%)</span></li>
<li><span>Ocio:</span> <span>$100.00 (15%)</span></li>
<li><span>Otros:</span> <span>$175.00 (20%)</span></li>
</ul>
</div>
</div>
<div class="dashboard-card report-card">
<h2 class="card-title"><ion-icon name="analytics-outline"></ion-icon>Flujo de Efectivo</h2>
<div class="card-content">
<p class="report-period-display">Período: Este Mes (Simulado)</p>
<div class="chart-placeholder">
<span>Gráfico de Ingresos vs. Gastos</span>
</div>
<ul class="report-summary-list">
<li><span>Total Ingresos:</span> <span class="text-income">$2,500.00</span></li>
<li><span>Total Gastos:</span> <span class="text-expense">$775.00</span></li>
<li><strong>Saldo Neto:</strong> <strong>$1,725.00</strong></li>
</ul>
</div>
</div>
<div class="dashboard-card report-card">
<h2 class="card-title"><ion-icon name="trending-up-outline"></ion-icon>Ingresos por Categoría</h2>
<div class="card-content">
<p class="report-period-display">Período: Este Mes (Simulado)</p>
<div class="chart-placeholder">
<span>Gráfico de Ingresos por Categoría</span>
</div>
<ul class="report-summary-list">
<li><span>Salario:</span> <span>$2,000.00 (80%)</span></li>
<li><span>Ingresos Pasivos:</span> <span>$400.00 (16%)</span></li>
<li><span>Otros:</span> <span>$100.00 (4%)</span></li>
</ul>
</div>
</div>
<div class="dashboard-card report-card">
<h2 class="card-title"><ion-icon name="bulb-outline"></ion-icon>Análisis de Hábitos (Próximamente)</h2>
<div class="card-content">
<p class="report-period-display">Período: Este Mes (Simulado)</p>
<p>Aquí se mostrarán tus principales categorías de gasto, comparaciones con períodos anteriores y consejos para mejorar tus hábitos financieros.</p>
<div class="chart-placeholder">
<span>Visualización de Patrones de Consumo</span>
</div>
</div>
</div>
</div>
<div class="export-actions page-actions-group">
<h3 class="filters-title"><ion-icon name="download-outline"></ion-icon> Exportar Datos</h3>
<button id="exportCsvBtn" class="neumorphic-button secondary-action">
<ion-icon name="document-text-outline"></ion-icon>Exportar a CSV
</button>
<button id="exportPdfBtn" class="neumorphic-button secondary-action">
<ion-icon name="reader-outline"></ion-icon>Exportar a PDF
</button>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/reportes.js"></script> </body>
</html><!DOCTYPE html>
Declara que el tipo de documento es HTML5, asegurando que el navegador interprete el código con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML. El atributo lang="es" especifica que el idioma principal del contenido de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento, que contiene metainformación, enlaces a hojas de estilo y el título de la página.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, esencial para mostrar correctamente acentos y caracteres especiales.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" para un diseño responsivo, ajustando el ancho de la página al del dispositivo y estableciendo la escala inicial.
<title>Plataforma Financiera - Reportes</title>
Establece el título de la página: "Plataforma Financiera - Reportes", que se muestra en la pestaña del navegador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que contiene los estilos globales de la plataforma.
<link rel="stylesheet" href="css/pages/reportes.css">
Enlaza una hoja de estilos específica para la página de "Reportes" (reportes.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts con varios grosores para usar en la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible de la página.
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
Define la cabecera principal con estilo "glassmorphic". Incluye el logo "FINANZAS" que enlaza al dashboard.
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
Sección de navegación principal, con un menú hamburguesa para móviles y una lista de enlaces de navegación.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
Ítem de navegación para "Dashboard".
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
Ítem de navegación para "Cuentas".
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
Ítem de navegación para "Gastos".
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
Ítem de navegación para "Inversiones".
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
Ítem de navegación para "Presupuestos".
<li><a href="reportes.html#reportes" class="nav-item active"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
Ítem de navegación para "Reportes", marcado como active indicando que es la página actual.
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
Ítem de navegación para "Configuración". Cierre de la lista y de la navegación principal.
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
Sección de acciones en la cabecera, conteniendo el icono del perfil de usuario.
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
Menú desplegable del perfil, con cabecera que muestra avatar, nombre y correo del usuario.
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div> </div> </div> </header>
Opciones del menú desplegable del perfil. Cierre de los contenedores y de la cabecera principal.
<main class="content">
Elemento principal (<main>) que contiene el contenido específico de la página de reportes.
<section id="reportes" class="reportes-page-container">
Sección principal de esta página, con id="reportes" y clase reportes-page-container para estilos.
<div class="section-header">
<h1><ion-icon name="bar-chart-outline"></ion-icon> Análisis y Reportes</h1>
<p class="subtitle">Visualiza tus datos financieros y entiende tus hábitos de consumo.</p>
</div>
Cabecera de la sección "Reportes", con título principal y subtítulo descriptivo.
<div class="filters-container neumorphic-inset-panel">
<h3 class="filters-title"><ion-icon name="filter-outline"></ion-icon> Filtros de Reporte</h3>
Contenedor para los filtros de los reportes, con un título para esta sección.
<form id="reportFiltersForm" class="filters-form">
Formulario (<form>) que agrupa los diferentes campos de filtro para los reportes.
<div class="form-group">
<label for="reportPeriod">Período:</label>
<select id="reportPeriod" name="reportPeriod">
<option value="current_month" selected>Este Mes</option>
<option value="last_month">Mes Pasado</option>
<option value="last_3_months">Últimos 3 Meses</option>
<option value="last_6_months">Últimos 6 Meses</option>
<option value="current_year">Este Año</option>
<option value="custom">Personalizado</option>
</select>
</div>
Grupo de formulario para seleccionar el "Período" del reporte, con opciones predefinidas y una opción para rango personalizado.
<div class="form-group date-range-group" id="customDateRangeGroup" style="display: none;">
<div class="date-input-container">
<label for="reportStartDate">Desde:</label>
<input type="date" id="reportStartDate" name="reportStartDate">
</div>
<div class="date-input-container">
<label for="reportEndDate">Hasta:</label>
<input type="date" id="reportEndDate" name="reportEndDate">
</div>
</div>
Grupo de formulario para el rango de fechas personalizado (Desde/Hasta), inicialmente oculto. Se mostrará si se selecciona "Personalizado" en el período.
<div class="form-group">
<label for="reportAccount">Cuenta (Opcional):</label>
<select id="reportAccount" name="reportAccount">
<option value="all" selected>Todas las Cuentas</option>
<option value="1">Ahorros Banco X (Simulado)</option>
<option value="2">Efectivo (Simulado)</option>
</select>
</div>
Grupo de formulario para filtrar por "Cuenta" (opcional), permitiendo seleccionar todas o una cuenta específica.
<div class="form-group">
<label for="reportCategory">Categoría (Opcional):</label>
<select id="reportCategory" name="reportCategory">
<option value="all" selected>Todas las Categorías</option>
<option value="Alimentación">Alimentación</option>
<option value="Transporte">Transporte</option>
<option value="Vivienda">Vivienda</option>
</select>
</div>
Grupo de formulario para filtrar por "Categoría" (opcional), permitiendo seleccionar todas o una categoría específica.
<button type="submit" class="neumorphic-button primary-action apply-filters-btn">
<ion-icon name="checkmark-circle-outline"></ion-icon>Aplicar Filtros
</button>
</form>
</div>
Botón para "Aplicar Filtros" y cierre del formulario y del contenedor de filtros.
<div class="reports-grid">
Contenedor que usará un sistema de rejilla para organizar las diferentes tarjetas de reporte.
<div class="dashboard-card report-card">
<h2 class="card-title"><ion-icon name="pie-chart-outline"></ion-icon>Gastos por Categoría</h2>
<div class="card-content">
<p class="report-period-display">Período: Este Mes (Simulado)</p>
<div class="chart-placeholder">
<span>Gráfico de Gastos por Categoría</span>
</div>
<ul class="report-summary-list">
<li><span>Alimentación:</span> <span>$350.00 (45%)</span></li>
<li><span>Transporte:</span> <span>$150.00 (20%)</span></li>
<li><span>Ocio:</span> <span>$100.00 (15%)</span></li>
<li><span>Otros:</span> <span>$175.00 (20%)</span></li>
</ul>
</div>
</div>
Tarjeta de reporte para "Gastos por Categoría". Muestra el período, un espacio para un gráfico y una lista resumen con datos simulados.
<div class="dashboard-card report-card">
<h2 class="card-title"><ion-icon name="analytics-outline"></ion-icon>Flujo de Efectivo</h2>
<div class="card-content">
<p class="report-period-display">Período: Este Mes (Simulado)</p>
<div class="chart-placeholder">
<span>Gráfico de Ingresos vs. Gastos</span>
</div>
<ul class="report-summary-list">
<li><span>Total Ingresos:</span> <span class="text-income">$2,500.00</span></li>
<li><span>Total Gastos:</span> <span class="text-expense">$775.00</span></li>
<li><strong>Saldo Neto:</strong> <strong>$1,725.00</strong></li>
</ul>
</div>
</div>
Tarjeta de reporte para "Flujo de Efectivo". Muestra el período, un espacio para un gráfico y un resumen de ingresos, gastos y saldo neto.
<div class="dashboard-card report-card">
<h2 class="card-title"><ion-icon name="trending-up-outline"></ion-icon>Ingresos por Categoría</h2>
<div class="card-content">
<p class="report-period-display">Período: Este Mes (Simulado)</p>
<div class="chart-placeholder">
<span>Gráfico de Ingresos por Categoría</span>
</div>
<ul class="report-summary-list">
<li><span>Salario:</span> <span>$2,000.00 (80%)</span></li>
<li><span>Ingresos Pasivos:</span> <span>$400.00 (16%)</span></li>
<li><span>Otros:</span> <span>$100.00 (4%)</span></li>
</ul>
</div>
</div>
Tarjeta de reporte para "Ingresos por Categoría". Muestra el período, un espacio para un gráfico y una lista resumen.
<div class="dashboard-card report-card">
<h2 class="card-title"><ion-icon name="bulb-outline"></ion-icon>Análisis de Hábitos (Próximamente)</h2>
<div class="card-content">
<p class="report-period-display">Período: Este Mes (Simulado)</p>
<p>Aquí se mostrarán tus principales categorías de gasto, comparaciones con períodos anteriores y consejos para mejorar tus hábitos financieros.</p>
<div class="chart-placeholder">
<span>Visualización de Patrones de Consumo</span>
</div>
</div>
</div>
</div>
Tarjeta de reporte para "Análisis de Hábitos", marcada como "Próximamente". Incluye una descripción y un espacio para una visualización. Cierre del contenedor de la rejilla de reportes.
<div class="export-actions page-actions-group">
<h3 class="filters-title"><ion-icon name="download-outline"></ion-icon> Exportar Datos</h3>
<button id="exportCsvBtn" class="neumorphic-button secondary-action">
<ion-icon name="document-text-outline"></ion-icon>Exportar a CSV
</button>
Sección para acciones de exportación de datos, con un título y un botón para "Exportar a CSV".
<button id="exportPdfBtn" class="neumorphic-button secondary-action">
<ion-icon name="reader-outline"></ion-icon>Exportar a PDF
</button>
</div> </section> </main>
Botón para "Exportar a PDF". Cierre del contenedor de acciones de exportación, de la sección `reportes` y del elemento `main`.
<footer class="site-footer">
Inicio del pie de página (<footer>), con una estructura similar a las otras páginas.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
Contenido del pie de página: logo, descripción, enlaces de navegación, información, contacto y redes sociales.
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página con copyright y créditos de diseño. Cierre del pie de página.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza Ionicons para navegadores antiguos sin soporte para módulos ES.
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js para la funcionalidad del menú.
<script src="js/reportes.js"></script>
Enlaza el archivo JavaScript local reportes.js, que contendrá la lógica específica para la página de reportes (manejo de filtros, generación de gráficos, etc.).
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.reportes.css
A continuación, se presenta el código del archivo css/pages/reportes.css. Este archivo contiene las reglas de estilo específicas para la página de "Análisis y Reportes", definiendo la apariencia de la sección de filtros, las tarjetas de reporte, la cuadrícula de visualización y las opciones de exportación, además de sus ajustes para diferentes tamaños de pantalla:
reportes.css – Estilos de Análisis y Reportes: Filtros, Tarjetas y Cuadrículas
.reportes-page-container {
padding-bottom: 40px;
}
.filters-container {
background: rgba(var(--color-surface-rgb), 0.5);
padding: 25px;
border-radius: var(--border-radius-main);
margin-bottom: 40px;
}
.neumorphic-inset-panel {
background: linear-gradient(145deg, rgba(var(--color-background-rgb),0.8) 0%, rgba(var(--color-surface-rgb),0.3) 100%);
box-shadow: var(--neumorphic-shadow-inset);
border: 1px solid rgba(var(--color-surface-rgb), 0.5);
}
.filters-title {
font-size: 1.5em;
color: var(--color-neon-accent);
margin-bottom: 25px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.filters-title ion-icon {
font-size: 1.2em;
}
.filters-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
align-items: end;
}
.filters-form .form-group {
margin-bottom: 0;
}
.filters-form .date-range-group {
grid-column: span 2;
display: flex;
gap: 15px;
align-items: end;
}
.filters-form .date-range-group .date-input-container {
flex: 1;
}
.filters-form .apply-filters-btn {
padding: 12px 20px;
font-size: 1em;
grid-column: 1 / -1;
margin-top: 10px;
}
.reports-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.report-card {
/* Hereda de .dashboard-card (modules/card.css) */
/* Aquí solo van las diferencias o adiciones */
}
.report-card .card-content .report-period-display {
font-size: 0.85em;
color: var(--color-text-muted);
margin-bottom: 15px;
text-align: center;
font-style: italic;
}
.report-card .chart-placeholder {
min-height: 250px;
margin-bottom: 20px;
}
.report-summary-list {
list-style: none;
padding: 0;
margin-top: 15px;
}
.report-summary-list li {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 0.95em;
color: var(--color-text-muted);
border-bottom: 1px dotted rgba(var(--color-text-muted), 0.15);
}
.report-summary-list li:last-child {
border-bottom: none;
}
.report-summary-list li span:first-child {
}
.report-summary-list li span:last-child,
.report-summary-list li strong {
color: var(--color-text);
font-weight: 600;
}
.export-actions {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid var(--color-surface);
flex-direction: column;
align-items: center;
}
.export-actions .filters-title {
margin-bottom: 20px;
}
.export-actions .neumorphic-button {
max-width: 280px;
width: 100%;
}
.export-actions .neumorphic-button:not(:last-child) {
margin-bottom: 15px;
}
@media (max-width: 768px) {
.filters-form {
grid-template-columns: 1fr;
}
.filters-form .date-range-group {
grid-column: auto;
flex-direction: column;
gap: 10px;
}
.filters-form .date-range-group .date-input-container {
width: 100%;
}
.reports-grid {
grid-template-columns: 1fr;
}
}Explicación del código: reportes.css – Estilos de Análisis y Reportes: Filtros, Tarjetas y Cuadrículas
.reportes-page-container {
Define estilos para el contenedor principal de la página de reportes.
padding-bottom: 40px;
Añade un relleno (espacio interno) de 40 píxeles en la parte inferior del contenedor.
}
Cierra el bloque de estilos para la clase .reportes-page-container.
.filters-container {
Define estilos para el contenedor que agrupa los filtros de los reportes.
background: rgba(var(--color-surface-rgb), 0.5);
Establece un color de fondo semitransparente utilizando la variable --color-surface-rgb con una opacidad del 50%.
padding: 25px;
Añade un relleno interno de 25 píxeles.
border-radius: var(--border-radius-main);
Redondea las esquinas del contenedor utilizando la variable --border-radius-main.
margin-bottom: 40px;
Añade un margen inferior de 40 píxeles.
}
Cierra el bloque de estilos para .filters-container.
.neumorphic-inset-panel {
Define estilos para un panel con efecto neumórfico de tipo "hundido" (inset).
background: linear-gradient(145deg, rgba(var(--color-background-rgb),0.8) 0%, rgba(var(--color-surface-rgb),0.3) 100%);
Aplica un fondo con gradiente lineal, usando los colores de fondo y superficie con diferentes opacidades.
box-shadow: var(--neumorphic-shadow-inset);
Aplica una sombra interior definida por la variable --neumorphic-shadow-inset.
border: 1px solid rgba(var(--color-surface-rgb), 0.5);
Añade un borde sutil utilizando el color de superficie con opacidad del 50%.
}
Cierra el bloque de estilos para .neumorphic-inset-panel.
.filters-title {
Define estilos para el título de la sección de filtros.
font-size: 1.5em;
Establece el tamaño de la fuente a 1.5 veces el de su elemento padre.
color: var(--color-neon-accent);
Utiliza el color de acento neón para el texto del título.
margin-bottom: 25px;
Añade un margen inferior.
text-align: center;
Centra el texto del título.
display: flex;
Usa flexbox para alinear el icono y el texto del título.
align-items: center;
Alinea verticalmente al centro el icono y el texto.
justify-content: center;
Centra horizontalmente el icono y el texto.
gap: 10px;
Establece un espacio de 10 píxeles entre el icono y el texto.
}
Cierra el bloque de estilos para .filters-title.
.filters-title ion-icon {
Define estilos para los ion-icon dentro del título de filtros.
font-size: 1.2em;
Establece el tamaño del icono.
}
Cierra el bloque de estilos para .filters-title ion-icon.
.filters-form {
Define estilos para el formulario de filtros.
display: grid;
Utiliza CSS Grid para la disposición de los campos del formulario.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Crea columnas responsivas para los campos, cada una con un mínimo de 200px de ancho.
gap: 20px;
Establece un espacio de 20 píxeles entre los campos del formulario.
align-items: end;
Alinea los elementos de la cuadrícula (campos del formulario) al final de su celda en el eje vertical.
}
Cierra el bloque de estilos para .filters-form.
.filters-form .form-group {
Define estilos para los grupos de formulario (.form-group) dentro del formulario de filtros.
margin-bottom: 0;
Elimina el margen inferior por defecto que podrían tener los grupos de formulario, ya que el gap del grid maneja el espaciado.
}
Cierra el bloque de estilos para .filters-form .form-group.
.filters-form .date-range-group {
Define estilos para el grupo de campos de rango de fechas dentro del formulario de filtros.
grid-column: span 2;
Hace que este grupo ocupe dos columnas en la cuadrícula del formulario.
display: flex;
Usa flexbox para la disposición interna de los campos de fecha (Desde/Hasta).
gap: 15px;
Espacio de 15 píxeles entre los campos de fecha.
align-items: end;
Alinea los campos de fecha al final en el eje vertical.
}
Cierra el bloque de estilos para .filters-form .date-range-group.
.filters-form .date-range-group .date-input-container {
Define estilos para los contenedores individuales de cada campo de fecha dentro del grupo de rango de fechas.
flex: 1;
Permite que cada contenedor de campo de fecha crezca y ocupe el espacio disponible por igual.
}
Cierra el bloque de estilos para .filters-form .date-range-group .date-input-container.
.filters-form .apply-filters-btn {
Define estilos para el botón "Aplicar Filtros" dentro del formulario.
padding: 12px 20px;
Relleno interno del botón.
font-size: 1em;
Tamaño de fuente del texto del botón.
grid-column: 1 / -1;
Hace que el botón ocupe todas las columnas de la cuadrícula del formulario.
margin-top: 10px;
Añade un margen superior al botón.
}
Cierra el bloque de estilos para .filters-form .apply-filters-btn.
.reports-grid {
Define estilos para el contenedor de la cuadrícula que mostrará las tarjetas de reporte.
display: grid;
Utiliza CSS Grid.
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
Crea columnas responsivas para las tarjetas de reporte, con un mínimo de 350px de ancho.
gap: 30px;
Espacio de 30 píxeles entre las tarjetas.
margin-bottom: 40px;
Margen inferior para el contenedor de la cuadrícula.
}
Cierra el bloque de estilos para .reports-grid.
.report-card {
/* Hereda de .dashboard-card (modules/card.css) */
/* Aquí solo van las diferencias o adiciones */
}
Selector para las tarjetas de reporte individuales. Los comentarios indican que hereda estilos base de .dashboard-card y este bloque solo contendría estilos adicionales o diferentes específicos para las tarjetas de reporte.
.report-card .card-content .report-period-display {
Define estilos para el elemento que muestra el período del reporte dentro del contenido de una tarjeta de reporte.
font-size: 0.85em;
Tamaño de fuente pequeño.
color: var(--color-text-muted);
Color de texto atenuado.
margin-bottom: 15px;
Margen inferior.
text-align: center;
Centra el texto.
font-style: italic;
Aplica estilo de fuente cursiva.
}
Cierra el bloque de estilos para .report-card .card-content .report-period-display.
.report-card .chart-placeholder {
Define estilos para el contenedor reservado para los gráficos dentro de una tarjeta de reporte.
min-height: 250px;
Establece una altura mínima de 250 píxeles para el espacio del gráfico.
margin-bottom: 20px;
Añade un margen inferior.
}
Cierra el bloque de estilos para .report-card .chart-placeholder.
.report-summary-list {
Define estilos para las listas de resumen que aparecen en las tarjetas de reporte.
list-style: none;
Elimina los marcadores de lista por defecto (viñetas, números).
padding: 0;
Elimina el relleno por defecto de la lista.
margin-top: 15px;
Añade un margen superior.
}
Cierra el bloque de estilos para .report-summary-list.
.report-summary-list li {
Define estilos para los ítems individuales (<li>) de la lista de resumen.
display: flex;
Usa flexbox para alinear la etiqueta y el valor en cada ítem.
justify-content: space-between;
Coloca la etiqueta y el valor en extremos opuestos.
padding: 8px 0;
Añade relleno vertical.
font-size: 0.95em;
Tamaño de fuente.
color: var(--color-text-muted);
Color de texto atenuado por defecto para el ítem.
border-bottom: 1px dotted rgba(var(--color-text-muted), 0.15);
Añade un borde inferior punteado y muy sutil entre ítems.
}
Cierra el bloque de estilos para .report-summary-list li.
.report-summary-list li:last-child {
Selecciona el último ítem de la lista de resumen.
border-bottom: none;
Elimina el borde inferior del último ítem para un acabado limpio.
}
Cierra el bloque de estilos para .report-summary-list li:last-child.
.report-summary-list li span:first-child {
Define estilos para el primer <span> dentro de un ítem de la lista de resumen (generalmente la etiqueta). No se definen reglas específicas aquí, por lo que heredará los estilos del li.
}
Cierra el bloque (vacío) de estilos para .report-summary-list li span:first-child.
.report-summary-list li span:last-child,
.report-summary-list li strong {
Define estilos para el último <span> (generalmente el valor) o para elementos <strong> dentro de un ítem de la lista de resumen.
color: var(--color-text);
Establece el color del texto al color principal.
font-weight: 600;
Aplica un grosor de fuente semi-negrita.
}
Cierra el bloque de estilos para .report-summary-list li span:last-child y strong.
.export-actions {
Define estilos para la sección de acciones de exportación.
margin-top: 40px;
Margen superior.
padding-top: 30px;
Relleno superior.
border-top: 1px solid var(--color-surface);
Borde superior para separar visualmente.
flex-direction: column;
Si este contenedor es flex (no especificado aquí pero podría serlo por herencia o uso general), apila sus elementos hijos verticalmente.
align-items: center;
Si es flex, centra sus elementos hijos horizontalmente.
}
Cierra el bloque de estilos para .export-actions.
.export-actions .filters-title {
Define estilos para un título (.filters-title) dentro de la sección de acciones de exportación.
margin-bottom: 20px;
Ajusta el margen inferior para este título específico.
}
Cierra el bloque de estilos para .export-actions .filters-title.
.export-actions .neumorphic-button {
Define estilos para los botones neumórficos dentro de la sección de acciones de exportación.
max-width: 280px;
Limita el ancho máximo de los botones de exportación.
width: 100%;
Hace que los botones ocupen el 100% del ancho disponible hasta su max-width.
}
Cierra el bloque de estilos para .export-actions .neumorphic-button.
.export-actions .neumorphic-button:not(:last-child) {
Selecciona todos los botones neumórficos dentro de export-actions excepto el último.
margin-bottom: 15px;
Añade un margen inferior a estos botones para separarlos si se apilan.
}
Cierra el bloque de estilos para .export-actions .neumorphic-button:not(:last-child).
@media (max-width: 768px) {
Inicia un bloque de Media Query que aplica los estilos anidados cuando el ancho de la ventana del navegador es de 768 píxeles o menos.
.filters-form {
grid-template-columns: 1fr;
}
Para pantallas pequeñas, el formulario de filtros cambia a una sola columna.
.filters-form .date-range-group {
grid-column: auto;
En el formulario de una columna, el grupo de rango de fechas ya no necesita expandirse a través de múltiples columnas.
flex-direction: column;
Apila los campos de fecha (Desde/Hasta) verticalmente.
gap: 10px;
}
Reduce el espacio entre los campos de fecha apilados. Cierra el bloque para .filters-form .date-range-group.
.filters-form .date-range-group .date-input-container {
width: 100%;
}
Hace que cada contenedor de campo de fecha ocupe todo el ancho disponible cuando están apilados.
.reports-grid {
grid-template-columns: 1fr;
}
La cuadrícula de reportes también cambia a una sola columna, apilando las tarjetas de reporte.
}
Cierra el bloque @media (max-width: 768px).configuracion.html
A continuación, se muestra el código fuente del archivo configuracion.html. Esta página es la sección de "Configuración" de la plataforma FINANZAS, donde los usuarios pueden gestionar sus preferencias de notificación, opciones de datos y privacidad, y otras configuraciones generales de la aplicación como la moneda y el tema visual:
FINANZAS: Código de la Página de Configuración (configuracion.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Configuración</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/configuracion.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item active"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="content">
<section id="configuracion" class="configuracion-page-container">
<div class="section-header">
<h1><ion-icon name="settings-outline"></ion-icon> Configuración</h1>
<p class="subtitle">Gestiona tus preferencias de la aplicación.</p>
</div>
<div class="config-sections-wrapper">
<div id="notificaciones" class="config-section neumorphic-inset-panel">
<h2 class="config-section-title"><ion-icon name="notifications-outline"></ion-icon> Preferencias de Notificación</h2>
<form id="notificationSettingsForm">
<div class="form-group form-group-checkbox">
<input type="checkbox" id="notifyTransactions" name="notifyTransactions" checked>
<label for="notifyTransactions">Transacciones Importantes</label>
</div>
<div class="form-group form-group-checkbox">
<input type="checkbox" id="notifyBudgetAlerts" name="notifyBudgetAlerts" checked>
<label for="notifyBudgetAlerts">Alertas de Presupuesto</label>
</div>
<div class="form-group form-group-checkbox">
<input type="checkbox" id="notifyPaymentReminders" name="notifyPaymentReminders">
<label for="notifyPaymentReminders">Recordatorios de Pago</label>
</div>
<div class="form-group form-group-checkbox">
<input type="checkbox" id="notifyPlatformUpdates" name="notifyPlatformUpdates" checked>
<label for="notifyPlatformUpdates">Novedades y Actualizaciones de la Plataforma</label>
</div>
<p class="text-muted"><small>Las notificaciones se enviarán dentro de la app. Las opciones de email se configurarán próximamente.</small></p>
<button type="submit" class="neumorphic-button primary-action" style="margin-top: 20px;">
<ion-icon name="save-outline"></ion-icon> Guardar Preferencias
</button>
</form>
</div>
<div id="privacidad" class="config-section neumorphic-inset-panel">
<h2 class="config-section-title"><ion-icon name="document-lock-outline"></ion-icon> Datos y Privacidad</h2>
<p>Tienes control sobre tus datos personales y financieros.</p>
<div class="data-actions-group">
<button id="exportDataBtn" class="neumorphic-button secondary-action">
<ion-icon name="cloud-download-outline"></ion-icon> Exportar Mis Datos
</button>
<button id="deleteAccountBtn" class="neumorphic-button danger-action">
<ion-icon name="trash-bin-outline"></ion-icon> Eliminar Mi Cuenta y Datos
</button>
</div>
<div class="privacy-links">
<a href="privacidad.html" class="view-all-link"><ion-icon name="shield-half-outline"></ion-icon> Ver Política de Privacidad</a>
<a href="terminos.html" class="view-all-link"><ion-icon name="document-text-outline"></ion-icon> Ver Términos de Servicio</a>
</div>
</div>
<div id="preferencias" class="config-section neumorphic-inset-panel">
<h2 class="config-section-title"><ion-icon name="options-outline"></ion-icon> Preferencias Generales</h2>
<form id="generalPreferencesForm">
<div class="form-group">
<label for="defaultCurrency">Moneda por Defecto:</label>
<select id="defaultCurrency" name="defaultCurrency">
<option value="COP">COP - Peso Colombiano</option>
<option value="USD" selected>USD - Dólar Estadounidense</option>
<option value="EUR">EUR - Euro</option>
</select>
</div>
<div class="form-group">
<label for="appTheme">Tema de la Aplicación:</label>
<select id="appTheme" name="appTheme">
<option value="dark" selected>Oscuro Neón (Actual)</option>
<option value="light" disabled>Claro (Próximamente)</option>
</select>
</div>
<button type="submit" class="neumorphic-button primary-action">
<ion-icon name="save-outline"></ion-icon> Guardar Preferencias
</button>
</form>
</div>
</div> </section>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/configuracion.js"></script> </body>
</html>Explicación del código: FINANZAS: Código de la Página de Configuración (configuracion.html)
<!DOCTYPE html>
Declara que el tipo de documento es HTML5, asegurando que el navegador interprete el código con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML. El atributo lang="es" especifica que el idioma principal del contenido de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Contiene metainformación, enlaces a hojas de estilo y el título de la página.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, esencial para mostrar correctamente caracteres especiales y acentos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" para un diseño responsivo, ajustando el ancho de la página al del dispositivo y estableciendo la escala inicial.
<title>Plataforma Financiera - Configuración</title>
Establece el título de la página: "Plataforma Financiera - Configuración", que se muestra en la pestaña del navegador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que contiene los estilos globales de la plataforma.
<link rel="stylesheet" href="css/pages/configuracion.css">
Enlaza una hoja de estilos específica para la página de "Configuración" (configuracion.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts con varios grosores para usar en la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible de la página.
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
Define la cabecera principal con estilo "glassmorphic". Incluye el logo "FINANZAS" que enlaza al dashboard.
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
Sección de navegación principal, con un menú hamburguesa para móviles y una lista de enlaces de navegación.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
Ítem de navegación para "Dashboard".
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
Ítem de navegación para "Cuentas".
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
Ítem de navegación para "Gastos".
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
Ítem de navegación para "Inversiones".
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
Ítem de navegación para "Presupuestos".
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
Ítem de navegación para "Reportes".
<li><a href="configuracion.html#configuracion" class="nav-item active"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
Ítem de navegación para "Configuración", marcado como active indicando que es la página actual. Cierre de la lista y de la navegación principal.
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
Sección de acciones en la cabecera, conteniendo el icono del perfil de usuario.
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
Menú desplegable del perfil, con cabecera que muestra avatar, nombre y correo del usuario.
<ul class="dropdown-menu-list">
<li><a href="configuracion.html#perfil" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div> </div> </div> </header>
Opciones del menú desplegable del perfil. Cierre de los contenedores y de la cabecera principal.
<main class="content">
Elemento principal (<main>) que contiene el contenido específico de la página de configuración.
<section id="configuracion" class="configuracion-page-container">
Sección principal de esta página, con id="configuracion" y clase configuracion-page-container para estilos.
<div class="section-header">
<h1><ion-icon name="settings-outline"></ion-icon> Configuración</h1>
<p class="subtitle">Gestiona tus preferencias de la aplicación.</p>
</div>
Cabecera de la sección "Configuración", con título principal y subtítulo descriptivo.
<div class="config-sections-wrapper">
Contenedor que agrupa las diferentes subsecciones de configuración.
<div id="notificaciones" class="config-section neumorphic-inset-panel">
<h2 class="config-section-title"><ion-icon name="notifications-outline"></ion-icon> Preferencias de Notificación</h2>
Primera subsección de configuración: "Preferencias de Notificación", con un título.
<form id="notificationSettingsForm">
<div class="form-group form-group-checkbox">
<input type="checkbox" id="notifyTransactions" name="notifyTransactions" checked>
<label for="notifyTransactions">Transacciones Importantes</label>
</div>
Formulario para las preferencias de notificación. Primer ítem: casilla para "Transacciones Importantes", marcada por defecto.
<div class="form-group form-group-checkbox">
<input type="checkbox" id="notifyBudgetAlerts" name="notifyBudgetAlerts" checked>
<label for="notifyBudgetAlerts">Alertas de Presupuesto</label>
</div>
Casilla para "Alertas de Presupuesto", marcada por defecto.
<div class="form-group form-group-checkbox">
<input type="checkbox" id="notifyPaymentReminders" name="notifyPaymentReminders">
<label for="notifyPaymentReminders">Recordatorios de Pago</label>
</div>
Casilla para "Recordatorios de Pago".
<div class="form-group form-group-checkbox">
<input type="checkbox" id="notifyPlatformUpdates" name="notifyPlatformUpdates" checked>
<label for="notifyPlatformUpdates">Novedades y Actualizaciones de la Plataforma</label>
</div>
Casilla para "Novedades y Actualizaciones de la Plataforma", marcada por defecto.
<p class="text-muted"><small>Las notificaciones se enviarán dentro de la app. Las opciones de email se configurarán próximamente.</small></p>
Párrafo con texto de ayuda indicando cómo se envían las notificaciones.
<button type="submit" class="neumorphic-button primary-action" style="margin-top: 20px;">
<ion-icon name="save-outline"></ion-icon> Guardar Preferencias
</button>
</form>
</div>
Botón para "Guardar Preferencias" de notificación. Cierre del formulario y de la sección de notificaciones.
<div id="privacidad" class="config-section neumorphic-inset-panel">
<h2 class="config-section-title"><ion-icon name="document-lock-outline"></ion-icon> Datos y Privacidad</h2>
<p>Tienes control sobre tus datos personales y financieros.</p>
Subsección de configuración para "Datos y Privacidad", con título y un párrafo introductorio.
<div class="data-actions-group">
<button id="exportDataBtn" class="neumorphic-button secondary-action">
<ion-icon name="cloud-download-outline"></ion-icon> Exportar Mis Datos
</button>
Grupo de botones para acciones de datos. El primero es "Exportar Mis Datos".
<button id="deleteAccountBtn" class="neumorphic-button danger-action">
<ion-icon name="trash-bin-outline"></ion-icon> Eliminar Mi Cuenta y Datos
</button>
</div>
Botón "Eliminar Mi Cuenta y Datos". Cierre del grupo de acciones de datos.
<div class="privacy-links">
<a href="privacidad.html" class="view-all-link"><ion-icon name="shield-half-outline"></ion-icon> Ver Política de Privacidad</a>
<a href="terminos.html" class="view-all-link"><ion-icon name="document-text-outline"></ion-icon> Ver Términos de Servicio</a>
</div>
</div>
Enlaces a la "Política de Privacidad" y "Términos de Servicio". Cierre de la sección de privacidad.
<div id="preferencias" class="config-section neumorphic-inset-panel">
<h2 class="config-section-title"><ion-icon name="options-outline"></ion-icon> Preferencias Generales</h2>
Subsección de configuración para "Preferencias Generales", con su título.
<form id="generalPreferencesForm">
<div class="form-group">
<label for="defaultCurrency">Moneda por Defecto:</label>
<select id="defaultCurrency" name="defaultCurrency">
<option value="COP">COP - Peso Colombiano</option>
<option value="USD" selected>USD - Dólar Estadounidense</option>
<option value="EUR">EUR - Euro</option>
</select>
</div>
Formulario para preferencias generales. Primer campo para seleccionar la "Moneda por Defecto".
<div class="form-group">
<label for="appTheme">Tema de la Aplicación:</label>
<select id="appTheme" name="appTheme">
<option value="dark" selected>Oscuro Neón (Actual)</option>
<option value="light" disabled>Claro (Próximamente)</option>
</select>
</div>
Campo para seleccionar el "Tema de la Aplicación", con una opción "Claro" marcada como deshabilitada y "Próximamente".
<button type="submit" class="neumorphic-button primary-action">
<ion-icon name="save-outline"></ion-icon> Guardar Preferencias
</button>
</form>
</div> </div> </section> </main>
Botón para "Guardar Preferencias" generales. Cierre del formulario, de la sección de preferencias, del contenedor de secciones de configuración, de la sección principal `configuracion` y del elemento `main`.
<footer class="site-footer">
Inicio del pie de página (<footer>), con una estructura similar a las otras páginas.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
Contenido del pie de página: logo, descripción, enlaces de navegación, información, contacto y redes sociales.
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página con copyright y créditos de diseño. Cierre del pie de página.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza Ionicons para navegadores antiguos sin soporte para módulos ES.
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js para la funcionalidad del menú.
<script src="js/configuracion.js"></script>
Enlaza el archivo JavaScript local configuracion.js, que contendrá la lógica específica para la página de configuración.
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.configuracion.css
A continuación, se presenta el código del archivo css/pages/configuracion.css. Este archivo es responsable de los estilos específicos de la página de "Configuración", definiendo la apariencia de las diversas secciones, formularios, interruptores de activación (toggles), y otros elementos visuales, así como su adaptación a diferentes tamaños de pantalla:
configuracion.css – Estilos de Página de Configuración: Secciones, Formularios y Toggles
.configuracion-page-container {
padding-bottom: 40px;
}
.config-sections-wrapper {
display: flex;
flex-direction: column;
gap: 30px;
}
.config-section {
padding: 25px 30px;
border-radius: var(--border-radius-main);
}
.config-section-title {
font-size: 1.6em;
color: var(--color-neon-accent);
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
display: flex;
align-items: center;
gap: 10px;
}
.config-section-title ion-icon {
font-size: 1.2em;
}
.config-section h3 {
font-size: 1.2em;
color: var(--color-text);
margin-top: 20px;
margin-bottom: 15px;
font-weight: 500;
}
.config-section h3:first-of-type {
margin-top: 0;
}
.config-section form .form-group {
margin-bottom: 20px;
}
.config-section form .neumorphic-button {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
}
.config-section form .neumorphic-button ion-icon {
font-size: 1.3em;
margin-bottom: 0;
}
.config-divider {
border: none;
height: 1px;
background-color: rgba(var(--color-text-muted), 0.15);
margin: 30px 0;
}
.toggle-switch-group {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.toggle-switch-label {
color: var(--color-text-muted);
font-size: 1em;
font-weight: 500;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-background);
border: 1px solid var(--color-surface);
box-shadow: var(--neumorphic-shadow-inset);
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 3px;
background-color: var(--color-text-muted);
box-shadow: var(--neumorphic-shadow-outset);
transition: .4s;
}
input:checked + .slider {
background-color: rgba(var(--color-neon-accent-rgb), 0.3);
border-color: var(--color-neon-accent);
}
input:focus + .slider {
box-shadow: var(--neumorphic-shadow-inset), 0 0 5px var(--color-neon-accent);
}
input:checked + .slider:before {
transform: translateX(26px);
background-color: var(--color-neon-accent);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.status-text {
font-size: 0.9em;
font-style: italic;
color: var(--color-text-muted);
}
.status-text.active {
color: var(--color-neon-accent);
font-weight: 500;
}
#notificationSettingsForm .form-group-checkbox {
margin-bottom: 15px;
}
#notificationSettingsForm .form-group-checkbox label {
font-size: 1em;
}
.data-actions-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 20px 0;
}
.data-actions-group .neumorphic-button {
flex-grow: 1;
min-width: 200px;
}
.neumorphic-button.danger-action {
background: linear-gradient(145deg, #5e2a2a, #3e1c1c);
color: #ff7675;
border-color: #ff7675;
}
.neumorphic-button.danger-action ion-icon {
color: #ff7675;
}
.neumorphic-button.danger-action:hover {
background: linear-gradient(145deg, #6e3a3a, #4e2c2c);
color: #ff4d4d;
border-color: #ff4d4d;
box-shadow: 0 0 15px rgba(255, 77, 77, 0.4), var(--neumorphic-shadow-outset);
}
.neumorphic-button.danger-action:hover ion-icon {
color: #ff4d4d;
}
.privacy-links {
margin-top: 25px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
@media (max-width: 768px) {
.config-section {
padding: 20px;
}
.config-section-title {
font-size: 1.4em;
}
.config-section h3 {
font-size: 1.1em;
}
.data-actions-group {
flex-direction: column;
}
.data-actions-group .neumorphic-button {
width: 100%;
}
}Explicación del código: configuracion.css – Estilos de Página de Configuración: Secciones, Formularios y Toggles
.configuracion-page-container {
Define estilos para el contenedor principal de la página de configuración.
padding-bottom: 40px;
Añade un relleno (espacio interno) de 40 píxeles en la parte inferior del contenedor, para dar un respiro visual al final del contenido.
}
Cierra el bloque de estilos para la clase .configuracion-page-container.
.config-sections-wrapper {
Define estilos para un contenedor que agrupa las diferentes secciones de configuración.
display: flex;
Establece el modo de visualización como flex.
flex-direction: column;
Organiza las secciones de configuración hijas en una columna, apilándolas verticalmente.
gap: 30px; /* Espacio entre secciones de configuración */
Establece un espacio de 30 píxeles entre cada sección de configuración.
}
Cierra el bloque de estilos para .config-sections-wrapper.
.config-section {
Define estilos para cada sección individual de configuración (ej. Perfil, Seguridad, Notificaciones).
padding: 25px 30px;
Añade un relleno interno: 25 píxeles arriba y abajo, y 30 píxeles a los lados.
border-radius: var(--border-radius-main);
Redondea las esquinas de la sección utilizando la variable CSS --border-radius-main.
}
Cierra el bloque de estilos para .config-section.
.config-section-title {
Define estilos para los títulos principales de cada sección de configuración (probablemente elementos <h2>).
font-size: 1.6em;
Establece el tamaño de la fuente a 1.6 veces el tamaño de la fuente de su elemento padre.
color: var(--color-neon-accent);
Define el color del texto del título utilizando la variable CSS --color-neon-accent.
margin-bottom: 25px;
Añade un margen inferior de 25 píxeles.
padding-bottom: 10px;
Añade un relleno inferior de 10 píxeles.
border-bottom: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
Añade un borde inferior sutil, utilizando el color de acento neón con una opacidad del 20%.
display: flex;
Establece el modo de visualización como flex para alinear el icono y el texto del título.
align-items: center;
Alinea verticalmente al centro los elementos hijos (icono y texto) del título.
gap: 10px;
Crea un espacio de 10 píxeles entre el icono y el texto del título.
}
Cierra el bloque de estilos para .config-section-title.
.config-section-title ion-icon {
Define estilos para los elementos ion-icon que son hijos directos de un .config-section-title.
font-size: 1.2em;
Define el tamaño de estos iconos como 1.2 veces el tamaño de la fuente de su elemento padre.
}
Cierra el bloque de estilos para .config-section-title ion-icon.
.config-section h3 {
Define estilos para los elementos <h3> (subtítulos dentro de una sección, como "Cambiar Contraseña").
font-size: 1.2em;
Establece el tamaño de la fuente.
color: var(--color-text);
Utiliza el color de texto principal.
margin-top: 20px;
Añade un margen superior.
margin-bottom: 15px;
Añade un margen inferior.
font-weight: 500;
Establece un grosor de fuente medio.
}
Cierra el bloque de estilos para .config-section h3.
.config-section h3:first-of-type {
Selecciona el primer elemento <h3> dentro de una .config-section.
margin-top: 0;
Elimina el margen superior para el primer <h3>, evitando doble espaciado si el título de la sección ya tiene margen inferior.
}
Cierra el bloque de estilos para .config-section h3:first-of-type.
.config-section form .form-group {
Define estilos para los grupos de formulario (.form-group) dentro de un formulario en una .config-section.
margin-bottom: 20px;
Asegura un margen inferior de 20 píxeles para estos grupos.
}
Cierra el bloque de estilos para .config-section form .form-group.
.config-section form .neumorphic-button {
Define estilos para los botones neumórficos dentro de los formularios de las secciones de configuración.
margin-top: 10px; /* Espacio sobre el botón de guardar de cada formulario */
Añade un margen superior, creando espacio antes del botón (ej. un botón de guardar).
display: inline-flex; /* Para que el icono y texto se alineen bien */
Usa inline-flex para que el botón se comporte en línea pero permita alinear su contenido (icono y texto) con flexbox.
align-items: center;
Alinea verticalmente el icono y el texto dentro del botón.
gap: 8px;
Espacio de 8 píxeles entre el icono y el texto del botón.
padding: 12px 20px;
Relleno interno del botón.
}
Cierra el bloque de estilos para .config-section form .neumorphic-button.
.config-section form .neumorphic-button ion-icon {
Define estilos para los ion-icon dentro de estos botones de formulario.
font-size: 1.3em; /* Ajustar icono del botón */
Establece el tamaño del icono.
margin-bottom: 0; /* Resetear margen si viene de un botón más grande */
Elimina el margen inferior que podría heredar de estilos de botones más genéricos.
}
Cierra el bloque de estilos para .config-section form .neumorphic-button ion-icon.
.config-divider {
Define estilos para un elemento que actúa como divisor horizontal (.config-divider).
border: none;
Elimina cualquier borde por defecto.
height: 1px;
Establece la altura del divisor a 1 píxel.
background-color: rgba(var(--color-text-muted), 0.15);
Establece un color de fondo sutil y semitransparente para el divisor.
margin: 30px 0;
Añade márgenes verticales de 30 píxeles arriba y abajo para separar contenido.
}
Cierra el bloque de estilos para .config-divider.
.toggle-switch-group {
Define estilos para el grupo que contiene un interruptor (toggle switch), como el de 2FA.
display: flex;
align-items: center;
gap: 15px;
Usa flexbox para alinear la etiqueta, el interruptor y el texto de estado en una línea, con espacio entre ellos.
margin-bottom: 15px;
Añade un margen inferior.
}
Cierra el bloque de estilos para .toggle-switch-group.
.toggle-switch-label {
Define estilos para la etiqueta del interruptor.
color: var(--color-text-muted);
font-size: 1em;
font-weight: 500;
Establece el color, tamaño y grosor de la fuente.
}
Cierra el bloque de estilos para .toggle-switch-label.
.switch {
Define estilos para el contenedor visual del interruptor.
position: relative;
display: inline-block;
width: 60px;
height: 34px;
Establece posicionamiento relativo, visualización en línea y dimensiones fijas para el interruptor.
}
Cierra el bloque de estilos para .switch.
.switch input {
Selecciona el elemento <input type="checkbox"> real que está dentro del .switch.
opacity: 0;
width: 0;
height: 0;
Oculta visualmente el checkbox por defecto, ya que se usará un estilo personalizado (.slider).
}
Cierra el bloque de estilos para .switch input.
.slider {
Define estilos para el elemento (<span>) que actúa como la parte visual del interruptor (el "carril").
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
Posiciona el slider para que cubra completamente el área del .switch y cambia el cursor a una mano.
background-color: var(--color-background);
border: 1px solid var(--color-surface);
box-shadow: var(--neumorphic-shadow-inset);
Establece el color de fondo, borde y sombra interior para el estado "apagado" del interruptor.
transition: .4s;
Aplica una transición suave de 0.4 segundos para los cambios de estilo (ej. al activarlo).
}
Cierra el bloque de estilos para .slider.
.slider:before {
Define estilos para el pseudo-elemento ::before del .slider, que actúa como el círculo o "perilla" del interruptor.
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 3px;
Posiciona y dimensiona la perilla dentro del carril del slider.
background-color: var(--color-text-muted);
box-shadow: var(--neumorphic-shadow-outset);
Establece el color y la sombra exterior para la perilla en estado "apagado".
transition: .4s;
Aplica una transición suave para los cambios de la perilla.
}
Cierra el bloque de estilos para .slider:before.
input:checked + .slider {
Define estilos para el .slider cuando el input (checkbox oculto) está marcado (:checked).
background-color: rgba(var(--color-neon-accent-rgb), 0.3);
border-color: var(--color-neon-accent);
Cambia el color de fondo y borde del carril al color de acento neón (con opacidad para el fondo) cuando está "encendido".
}
Cierra el bloque de estilos para input:checked + .slider.
input:focus + .slider {
Define estilos para el .slider cuando el input tiene el foco.
box-shadow: var(--neumorphic-shadow-inset), 0 0 5px var(--color-neon-accent);
Añade un resplandor de acento neón a la sombra cuando el interruptor tiene foco, mejorando la accesibilidad.
}
Cierra el bloque de estilos para input:focus + .slider.
input:checked + .slider:before {
Define estilos para la perilla (.slider:before) cuando el input está marcado.
transform: translateX(26px);
Mueve la perilla horizontalmente 26 píxeles hacia la derecha para indicar el estado "encendido".
background-color: var(--color-neon-accent);
Cambia el color de la perilla al color de acento neón.
}
Cierra el bloque de estilos para input:checked + .slider:before.
.slider.round {
Define estilos para un .slider que también tiene la clase round.
border-radius: 34px;
Hace que el carril del slider sea completamente redondeado (forma de píldora).
}
Cierra el bloque de estilos para .slider.round.
.slider.round:before {
Define estilos para la perilla de un .slider.round.
border-radius: 50%;
Hace que la perilla sea un círculo perfecto.
}
Cierra el bloque de estilos para .slider.round:before.
.status-text {
Define estilos para el texto que indica el estado del interruptor (ej. "Desactivada").
font-size: 0.9em;
font-style: italic;
color: var(--color-text-muted);
Establece el tamaño, estilo y color de la fuente.
}
Cierra el bloque de estilos para .status-text.
.status-text.active {
Define estilos para el texto de estado cuando tiene la clase active (probablemente cuando el interruptor está encendido).
color: var(--color-neon-accent);
font-weight: 500;
Cambia el color al acento neón y aplica un grosor de fuente medio.
}
Cierra el bloque de estilos para .status-text.active.
#notificationSettingsForm .form-group-checkbox {
Define estilos para los grupos de checkbox específicamente dentro del formulario de configuración de notificaciones (#notificationSettingsForm).
margin-bottom: 15px;
Ajusta el margen inferior para estos grupos.
}
Cierra el bloque de estilos para #notificationSettingsForm .form-group-checkbox.
#notificationSettingsForm .form-group-checkbox label {
Define estilos para las etiquetas de los checkboxes dentro del formulario de configuración de notificaciones.
font-size: 1em; /* Tamaño de etiqueta para checkboxes de notificación */
Asegura un tamaño de fuente específico para estas etiquetas.
}
Cierra el bloque de estilos para #notificationSettingsForm .form-group-checkbox label.
.data-actions-group {
Define estilos para el grupo de botones de acciones relacionadas con datos y privacidad.
display: flex;
flex-wrap: wrap;
gap: 15px;
Usa flexbox para alinear los botones, permitiendo que se envuelvan y con espacio entre ellos.
margin: 20px 0;
Añade márgenes verticales.
}
Cierra el bloque de estilos para .data-actions-group.
.data-actions-group .neumorphic-button {
Define estilos para los botones neumórficos dentro de este grupo.
flex-grow: 1;
Permite que los botones crezcan para ocupar el espacio disponible.
min-width: 200px;
Establece un ancho mínimo para los botones.
}
Cierra el bloque de estilos para .data-actions-group .neumorphic-button.
.neumorphic-button.danger-action {
Define estilos para un botón neumórfico que también tiene la clase danger-action (para acciones peligrosas como eliminar).
background: linear-gradient(145deg, #5e2a2a, #3e1c1c);
Aplica un fondo con gradiente en tonos rojos oscuros.
color: #ff7675; /* Rojo claro para texto */
Establece el color del texto a un rojo claro.
border-color: #ff7675; /* Borde rojo */
Establece el color del borde a rojo.
}
Cierra el bloque de estilos para .neumorphic-button.danger-action.
.neumorphic-button.danger-action ion-icon {
Define estilos para los ion-icon dentro de un botón de acción peligrosa.
color: #ff7675;
Establece el color del icono a rojo claro, igual que el texto.
}
Cierra el bloque de estilos para .neumorphic-button.danger-action ion-icon.
.neumorphic-button.danger-action:hover {
Define estilos para el estado hover de un botón de acción peligrosa.
background: linear-gradient(145deg, #6e3a3a, #4e2c2c);
Cambia el fondo a tonos rojos ligeramente diferentes.
color: #ff4d4d; /* Rojo más intenso */
Cambia el color del texto a un rojo más intenso.
border-color: #ff4d4d;
Cambia el color del borde a un rojo más intenso.
box-shadow: 0 0 15px rgba(255, 77, 77, 0.4), var(--neumorphic-shadow-outset);
Añade un resplandor rojizo a la sombra.
}
Cierra el bloque de estilos para .neumorphic-button.danger-action:hover.
.neumorphic-button.danger-action:hover ion-icon {
Define estilos para los ion-icon dentro de un botón de acción peligrosa en estado hover.
color: #ff4d4d;
Cambia el color del icono a un rojo más intenso.
}
Cierra el bloque de estilos para .neumorphic-button.danger-action:hover ion-icon.
.privacy-links {
Define estilos para el contenedor de enlaces de privacidad.
margin-top: 25px;
Añade un margen superior.
display: flex;
Usa flexbox.
flex-direction: column;
Apila los enlaces verticalmente.
align-items: flex-start;
Alinea los enlaces a la izquierda.
gap: 10px;
Espacio entre los enlaces.
}
Cierra el bloque de estilos para .privacy-links.
@media (max-width: 768px) {
Inicia un bloque de Media Query que aplica los estilos anidados cuando el ancho de la ventana del navegador es de 768 píxeles o menos (diseño responsivo).
.config-section {
padding: 20px;
}
Reduce el relleno de las secciones de configuración en pantallas más pequeñas.
.config-section-title {
font-size: 1.4em;
}
Reduce el tamaño de fuente de los títulos de sección.
.config-section h3 {
font-size: 1.1em;
}
Reduce el tamaño de fuente de los subtítulos <h3> dentro de las secciones.
.data-actions-group {
flex-direction: column;
}
Apila verticalmente los botones en el grupo de acciones de datos.
.data-actions-group .neumorphic-button {
width: 100%;
}
Hace que los botones en el grupo de acciones de datos ocupen todo el ancho disponible.
}
Cierra el bloque @media (max-width: 768px).mi_perfil.html
A continuación, se presenta el código fuente del archivo mi_perfil.html. Esta página de la plataforma "FINANZAS" corresponde a la sección "Mi Perfil", donde los usuarios pueden visualizar y actualizar su información personal, como su nombre completo y foto de
FINANZAS: Código de la Página de Mi Perfil (mi_perfil.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Mi Perfil</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/mi_perfil.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar" id="dropdownUserAvatarLarge"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
<ul class="dropdown-menu-list">
<li><a href="mi_perfil.html" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="content">
<section id="mi-perfil" class="mi-perfil-page-container">
<div class="section-header">
<h1><ion-icon name="person-circle-outline"></ion-icon> Mi Perfil</h1>
<p class="subtitle">Visualiza y actualiza tu información personal.</p>
</div>
<div class="profile-details-card neumorphic-inset-panel">
<form id="userProfileForm">
<div class="profile-avatar-section">
<img src="https://via.placeholder.com/150" alt="Avatar de Usuario" id="profileAvatarPreview" class="profile-avatar-img">
<label for="profileAvatarUpload" class="neumorphic-button secondary-action avatar-upload-btn">
<ion-icon name="cloud-upload-outline"></ion-icon> Cambiar Foto
</label>
<input type="file" id="profileAvatarUpload" name="profileAvatarUpload" accept="image/*" style="display: none;">
<p id="avatarFileName" class="avatar-file-name"></p>
</div>
<div class="profile-info-section">
<div class="form-group">
<label for="userFullName">Nombre Completo:</label>
<input type="text" id="userFullName" name="userFullName" value="Juan Felipe Orozco Cortes" required>
</div>
<div class="form-group">
<label for="userEmail">Correo Electrónico:</label>
<input type="email" id="userEmail" name="userEmail" value="juan.felipe@example.com" readonly disabled>
<small class="form-text text-muted">El correo electrónico no se puede cambiar desde aquí. Contacta a soporte para asistencia.</small>
</div>
<div class="form-group">
<label for="userJoinDate">Miembro Desde:</label>
<input type="text" id="userJoinDate" name="userJoinDate" value="Mayo 15, 2025" readonly disabled>
</div>
<button type="submit" class="neumorphic-button primary-action save-profile-btn">
<ion-icon name="save-outline"></ion-icon> Guardar Cambios
</button>
</div>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/mi_perfil.js"></script> </body>
</html>Explicación del código: FINANZAS: Código de la Página de Mi Perfil (mi_perfil.html)
<!DOCTYPE html>
Declara el tipo de documento como HTML5, asegurando que el navegador interprete el código con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML. El atributo lang="es" especifica que el idioma principal del contenido de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Contiene metainformación, enlaces a hojas de estilo y el título de la página.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, esencial para mostrar correctamente caracteres especiales y acentos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" para un diseño responsivo, ajustando el ancho de la página al del dispositivo y estableciendo la escala inicial.
<title>Plataforma Financiera - Mi Perfil</title>
Establece el título de la página: "Plataforma Financiera - Mi Perfil", que se muestra en la pestaña del navegador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que contiene los estilos globales de la plataforma.
<link rel="stylesheet" href="css/pages/mi_perfil.css">
Enlaza una hoja de estilos específica para la página de "Mi Perfil" (mi_perfil.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts con varios grosores para usar en la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible de la página.
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
Define la cabecera principal con estilo "glassmorphic". Incluye el logo "FINANZAS" que enlaza al dashboard.
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
Sección de navegación principal, con un menú hamburguesa para móviles y una lista de enlaces de navegación.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
Ítem de navegación para "Dashboard".
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
Ítem de navegación para "Cuentas".
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
Ítem de navegación para "Gastos".
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
Ítem de navegación para "Inversiones".
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
Ítem de navegación para "Presupuestos".
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
Ítem de navegación para "Reportes".
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
Ítem de navegación para "Configuración". Cierre de la lista y de la navegación principal. (Nota: en esta página, "Mi Perfil" no está en el menú principal, sino usualmente en el desplegable de usuario).
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
Sección de acciones en la cabecera, conteniendo el icono del perfil de usuario.
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar" id="dropdownUserAvatarLarge"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
Menú desplegable del perfil, con cabecera que muestra avatar, nombre y correo del usuario.
<ul class="dropdown-menu-list">
<li><a href="mi_perfil.html" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
Opción del menú desplegable para ir a "Mi Perfil". Esta sería la página actual.
<li><a href="configuracion.html#seguridad" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div> </div> </div> </header>
Otras opciones del menú desplegable del perfil. Cierre de los contenedores y de la cabecera principal.
<main class="content">
Elemento principal (<main>) que contiene el contenido específico de la página "Mi Perfil".
<section id="mi-perfil" class="mi-perfil-page-container">
Sección principal de esta página, con id="mi-perfil" y clase mi-perfil-page-container para estilos.
<div class="section-header">
<h1><ion-icon name="person-circle-outline"></ion-icon> Mi Perfil</h1>
<p class="subtitle">Visualiza y actualiza tu información personal.</p>
</div>
Cabecera de la sección "Mi Perfil", con título principal y subtítulo descriptivo.
<div class="profile-details-card neumorphic-inset-panel">
Contenedor principal para los detalles del perfil, con estilo de tarjeta y neumórfico.
<form id="userProfileForm">
Formulario (<form>) para editar la información del perfil del usuario.
<div class="profile-avatar-section">
<img src="https://via.placeholder.com/150" alt="Avatar de Usuario" id="profileAvatarPreview" class="profile-avatar-img">
Sección para el avatar del usuario. Muestra una imagen de placeholder (https://via.placeholder.com/150) como vista previa del avatar.
<label for="profileAvatarUpload" class="neumorphic-button secondary-action avatar-upload-btn">
<ion-icon name="cloud-upload-outline"></ion-icon> Cambiar Foto
</label>
Etiqueta (<label>) estilizada como un botón para "Cambiar Foto", asociada al campo de subida de archivo.
<input type="file" id="profileAvatarUpload" name="profileAvatarUpload" accept="image/*" style="display: none;">
Campo de entrada de tipo archivo (<input type="file">) para subir una nueva foto de perfil. Está oculto (style="display: none;") y se activa mediante la etiqueta anterior. accept="image/*" restringe la selección a archivos de imagen.
<p id="avatarFileName" class="avatar-file-name"></p>
</div>
Párrafo vacío (<p>) con id="avatarFileName", probablemente usado para mostrar el nombre del archivo de avatar seleccionado mediante JavaScript. Cierre de la sección del avatar.
<div class="profile-info-section">
Sección para la información textual del perfil.
<div class="form-group">
<label for="userFullName">Nombre Completo:</label>
<input type="text" id="userFullName" name="userFullName" value="Juan Felipe Orozco Cortes" required>
</div>
Grupo de formulario para el "Nombre Completo" del usuario, con un valor prellenado y marcado como obligatorio (required).
<div class="form-group">
<label for="userEmail">Correo Electrónico:</label>
<input type="email" id="userEmail" name="userEmail" value="juan.felipe@example.com" readonly disabled>
<small class="form-text text-muted">El correo electrónico no se puede cambiar desde aquí. Contacta a soporte para asistencia.</small>
</div>
Grupo de formulario para el "Correo Electrónico". El campo está marcado como readonly y disabled, indicando que no se puede editar directamente aquí, con una nota de ayuda.
<div class="form-group">
<label for="userJoinDate">Miembro Desde:</label>
<input type="text" id="userJoinDate" name="userJoinDate" value="Mayo 15, 2025" readonly disabled>
</div>
Grupo de formulario para la fecha de registro ("Miembro Desde"), también de solo lectura.
<button type="submit" class="neumorphic-button primary-action save-profile-btn">
<ion-icon name="save-outline"></ion-icon> Guardar Cambios
</button>
</div> </form>
</div> </section> </main>
Botón para "Guardar Cambios" en el perfil. Cierre de la sección de información del perfil, del formulario, de la tarjeta de detalles del perfil, de la sección principal `mi-perfil` y del elemento `main`.
<footer class="site-footer">
Inicio del pie de página (<footer>), con una estructura similar a las otras páginas.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
Contenido del pie de página: logo, descripción, enlaces de navegación, información, contacto y redes sociales.
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página con copyright y créditos de diseño. Cierre del pie de página.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza Ionicons para navegadores antiguos sin soporte para módulos ES.
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js para la funcionalidad del menú.
<script src="js/mi_perfil.js"></script>
Enlaza el archivo JavaScript local mi_perfil.js, que contendrá la lógica específica para la página "Mi Perfil" (como la subida del avatar y el guardado de cambios).
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.mi_perfil.css
A continuación, se presenta el código del archivo css/pages/mi_perfil.css. Este archivo contiene las reglas de estilo específicas para la página "Mi Perfil", definiendo la apariencia de la tarjeta de detalles del perfil, la sección del avatar, los campos de información del usuario y su adaptación a diferentes tamaños de pantalla:
mi_perfil.css – Estilos de Página Mi Perfil: Tarjeta de Detalles, Avatar y Formularios
.mi-perfil-page-container {
padding-bottom: 40px;
}
.profile-details-card {
padding: 30px 40px;
border-radius: var(--border-radius-main);
max-width: 800px;
margin: 0 auto;
}
#userProfileForm {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.profile-avatar-section {
flex: 0 0 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.profile-avatar-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--color-neon-accent);
box-shadow: 0 0 15px rgba(var(--color-neon-accent-rgb), 0.4), var(--neumorphic-shadow-outset);
margin-bottom: 10px;
}
.avatar-upload-btn {
padding: 10px 15px !important;
font-size: 0.9em !important;
width: 100%;
}
.avatar-upload-btn ion-icon {
font-size: 1.5em !important;
margin-bottom: 0 !important;
margin-right: 8px;
}
.avatar-file-name {
font-size: 0.8em;
color: var(--color-text-muted);
text-align: center;
word-break: break-all;
margin-top: 5px;
}
.profile-info-section {
flex: 1;
min-width: 300px;
}
.profile-info-section .form-group input[disabled] {
background-color: rgba(var(--color-surface-rgb), 0.5);
color: var(--color-text-muted);
cursor: not-allowed;
box-shadow: var(--neumorphic-shadow-inset);
}
.profile-info-section .form-group input[disabled]:focus {
border-color: var(--color-surface);
box-shadow: var(--neumorphic-shadow-inset);
}
.form-text.text-muted {
font-size: 0.8em;
display: block;
margin-top: 5px;
}
.save-profile-btn {
margin-top: 20px;
width: 100%;
padding: 15px !important;
}
.save-profile-btn ion-icon {
font-size: 1.5em !important;
margin-right: 8px;
margin-bottom: 0 !important;
}
@media (max-width: 768px) {
#userProfileForm {
flex-direction: column;
gap: 30px;
}
.profile-avatar-section {
flex: 0 0 auto;
width: 100%;
}
.profile-details-card {
padding: 25px;
}
}
@media (max-width: 480px) {
.profile-avatar-img {
width: 120px;
height: 120px;
}
.profile-info-section .form-group label {
font-size: 0.9em;
}
.profile-info-section .form-group input {
font-size: 0.95em;
padding: 10px 12px;
}
.save-profile-btn {
font-size: 0.95em !important;
}
}Explicación del código: mi_perfil.css – Estilos de Página Mi Perfil: Tarjeta de Detalles, Avatar y Formularios
.mi-perfil-page-container {
Define estilos para el contenedor principal de la página "Mi Perfil".
padding-bottom: 40px;
Añade un relleno (espacio interno) de 40 píxeles en la parte inferior del contenedor, para dar un respiro visual al final del contenido.
}
Cierra el bloque de estilos para la clase .mi-perfil-page-container.
.profile-details-card {
Define estilos para la tarjeta que contiene los detalles del perfil del usuario.
padding: 30px 40px;
Añade un relleno interno: 30 píxeles arriba y abajo, y 40 píxeles a los lados.
border-radius: var(--border-radius-main);
Redondea las esquinas de la tarjeta utilizando la variable CSS --border-radius-main.
max-width: 800px;
Establece un ancho máximo de 800 píxeles para la tarjeta, evitando que sea demasiado ancha en pantallas grandes.
margin: 0 auto;
Centra la tarjeta horizontalmente en la página (0 de margen vertical, auto para los márgenes horizontales).
}
Cierra el bloque de estilos para .profile-details-card.
#userProfileForm {
Define estilos para el formulario con el id="userProfileForm", que se utiliza para editar la información del perfil.
display: flex;
Establece el modo de visualización como flex para la disposición de sus elementos hijos (sección de avatar y sección de información).
flex-wrap: wrap;
Permite que los elementos hijos se envuelvan en múltiples líneas si no caben en una sola (útil para responsividad).
gap: 40px;
Establece un espacio de 40 píxeles entre los elementos hijos directos del formulario (la sección del avatar y la sección de información).
}
Cierra el bloque de estilos para #userProfileForm.
.profile-avatar-section {
Define estilos para la sección que contiene el avatar del usuario y los controles para cambiarlo.
flex: 0 0 200px;
Propiedad flexbox: no crecerá (0), no se encogerá (0), y tendrá una base de ancho de 200 píxeles.
display: flex;
Usa flexbox para la disposición interna de esta sección.
flex-direction: column;
Apila los elementos hijos (imagen del avatar, botón de cambio, nombre del archivo) verticalmente.
align-items: center;
Centra los elementos hijos horizontalmente.
gap: 15px;
Establece un espacio de 15 píxeles entre los elementos hijos.
}
Cierra el bloque de estilos para .profile-avatar-section.
.profile-avatar-img {
Define estilos para la imagen (<img>) del avatar del usuario.
width: 150px;
height: 150px;
Establece un ancho y alto fijos de 150 píxeles para la imagen del avatar.
border-radius: 50%;
Hace que la imagen sea circular al redondear sus esquinas completamente.
object-fit: cover;
Asegura que la imagen cubra completamente el área de 150x150px, recortándola si es necesario para mantener la relación de aspecto.
border: 3px solid var(--color-neon-accent);
Añade un borde de 3 píxeles de grosor, estilo sólido, y con el color de acento neón.
box-shadow: 0 0 15px rgba(var(--color-neon-accent-rgb), 0.4), var(--neumorphic-shadow-outset);
Aplica dos sombras: un resplandor con el color de acento neón y una sombra neumórfica exterior.
margin-bottom: 10px;
Añade un margen inferior de 10 píxeles.
}
Cierra el bloque de estilos para .profile-avatar-img.
.avatar-upload-btn {
Define estilos para el botón de "Cambiar Foto" (que es una etiqueta <label>).
padding: 10px 15px !important;
Establece el relleno interno. !important fuerza esta regla sobre otras que puedan aplicarse.
font-size: 0.9em !important;
Establece el tamaño de la fuente. !important fuerza la regla.
width: 100%;
Hace que el botón ocupe todo el ancho de su contenedor (.profile-avatar-section).
}
Cierra el bloque de estilos para .avatar-upload-btn.
.avatar-upload-btn ion-icon {
Define estilos para los ion-icon dentro del botón de subir avatar.
font-size: 1.5em !important;
Establece el tamaño del icono. !important fuerza la regla.
margin-bottom: 0 !important;
Elimina el margen inferior. !important fuerza la regla.
margin-right: 8px;
Añade un margen a la derecha del icono para separarlo del texto del botón.
}
Cierra el bloque de estilos para .avatar-upload-btn ion-icon.
.avatar-file-name {
Define estilos para el párrafo que muestra el nombre del archivo del avatar seleccionado.
font-size: 0.8em;
Tamaño de fuente pequeño.
color: var(--color-text-muted);
Color de texto atenuado.
text-align: center;
Centra el texto.
word-break: break-all;
Permite que nombres de archivo largos se dividan para evitar desbordamientos.
margin-top: 5px;
Añade un pequeño margen superior.
}
Cierra el bloque de estilos para .avatar-file-name.
.profile-info-section {
Define estilos para la sección que contiene los campos de información del perfil (nombre, correo, etc.).
flex: 1;
Permite que esta sección crezca para ocupar el espacio restante junto a la sección del avatar, si están en una disposición flex.
min-width: 300px;
Establece un ancho mínimo de 300 píxeles para esta sección.
}
Cierra el bloque de estilos para .profile-info-section.
.profile-info-section .form-group input[disabled] {
Define estilos para los campos de entrada (<input>) deshabilitados (disabled) dentro de un .form-group en la sección de información del perfil.
background-color: rgba(var(--color-surface-rgb), 0.5);
Establece un color de fondo semitransparente.
color: var(--color-text-muted);
Establece un color de texto atenuado para indicar que no es editable.
cursor: not-allowed;
Cambia el cursor a "no permitido" al pasar sobre el campo.
box-shadow: var(--neumorphic-shadow-inset);
Mantiene una sombra interior neumórfica.
}
Cierra el bloque de estilos para los inputs deshabilitados.
.profile-info-section .form-group input[disabled]:focus {
Define estilos para el estado :focus de los campos de entrada deshabilitados (aunque normalmente no pueden recibir foco).
border-color: var(--color-surface);
Asegura que el color del borde no cambie al color de acento al intentar enfocar.
box-shadow: var(--neumorphic-shadow-inset);
Mantiene la misma sombra interior.
}
Cierra el bloque de estilos para el estado :focus de los inputs deshabilitados.
.form-text.text-muted {
Define estilos para texto de ayuda o informativo con las clases form-text y text-muted.
font-size: 0.8em;
Tamaño de fuente pequeño.
display: block;
Hace que el texto ocupe su propia línea.
margin-top: 5px;
Añade un pequeño margen superior.
}
Cierra el bloque de estilos para .form-text.text-muted.
.save-profile-btn {
Define estilos para el botón de "Guardar Cambios" del perfil.
margin-top: 20px;
Añade un margen superior.
width: 100%;
Hace que el botón ocupe todo el ancho disponible.
padding: 15px !important;
Establece un relleno interno generoso. !important fuerza esta regla.
}
Cierra el bloque de estilos para .save-profile-btn.
.save-profile-btn ion-icon {
Define estilos para el ion-icon dentro del botón de guardar perfil.
font-size: 1.5em !important;
Establece el tamaño del icono. !important fuerza la regla.
margin-right: 8px;
Añade margen a la derecha del icono.
margin-bottom: 0 !important;
Elimina el margen inferior. !important fuerza la regla.
}
Cierra el bloque de estilos para .save-profile-btn ion-icon.
@media (max-width: 768px) {
Inicia un bloque de Media Query que aplica los estilos anidados cuando el ancho de la ventana del navegador es de 768 píxeles o menos (diseño responsivo para tablets).
#userProfileForm {
flex-direction: column;
gap: 30px;
}
En pantallas más pequeñas, el formulario de perfil apila sus secciones (avatar e información) verticalmente y ajusta el espacio entre ellas.
.profile-avatar-section {
flex: 0 0 auto;
width: 100%;
}
Ajusta la sección del avatar para que ocupe todo el ancho y su altura se determine por su contenido.
.profile-details-card {
padding: 25px;
}
Reduce el relleno de la tarjeta de detalles del perfil en pantallas más pequeñas.
}
Cierra el bloque @media (max-width: 768px).
@media (max-width: 480px) {
Inicia otro bloque de Media Query para pantallas aún más pequeñas, con un ancho máximo de 480 píxeles (típico para móviles).
.profile-avatar-img {
width: 120px;
height: 120px;
}
Reduce el tamaño de la imagen del avatar.
.profile-info-section .form-group label {
font-size: 0.9em;
}
Reduce ligeramente el tamaño de fuente de las etiquetas en la sección de información del perfil.
.profile-info-section .form-group input {
font-size: 0.95em;
padding: 10px 12px;
}
Reduce ligeramente el tamaño de fuente y el relleno de los campos de entrada.
.save-profile-btn {
font-size: 0.95em !important;
}
Ajusta el tamaño de fuente del botón de guardar perfil.
}
Cierra el bloque @media (max-width: 480px).seguridad.html
A continuación, se presenta el código fuente del archivo seguridad.html. Esta página de la plataforma "FINANZAS" está dedicada a la "Seguridad de la Cuenta", donde los usuarios pueden administrar su contraseña y configurar opciones de seguridad adicionales como la autenticación de dos factores (2FA):
FINANZAS: Código de la Página de Seguridad de la Cuenta (seguridad.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Seguridad de la Cuenta</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/seguridad.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar" id="dropdownUserAvatarLarge"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
<ul class="dropdown-menu-list">
<li><a href="mi_perfil.html" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="seguridad.html" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="content">
<section id="seguridad" class="seguridad-page-container">
<div class="section-header">
<h1><ion-icon name="shield-half-outline"></ion-icon> Seguridad de la Cuenta</h1>
<p class="subtitle">Administra tu contraseña y opciones de seguridad adicionales.</p>
</div>
<div class="config-sections-wrapper">
<div class="config-section neumorphic-inset-panel">
<h2 class="config-section-title"><ion-icon name="lock-closed-outline"></ion-icon> Cambiar Contraseña</h2>
<form id="passwordChangeForm">
<div class="form-group">
<label for="currentPassword">Contraseña Actual:</label>
<input type="password" id="currentPassword" name="currentPassword" required autocomplete="current-password">
</div>
<div class="form-group">
<label for="newPassword">Nueva Contraseña:</label>
<input type="password" id="newPassword" name="newPassword" required autocomplete="new-password">
<small class="form-text text-muted">Mínimo 8 caracteres, incluye mayúsculas, minúsculas y números.</small>
</div>
<div class="form-group">
<label for="confirmNewPassword">Confirmar Nueva Contraseña:</label>
<input type="password" id="confirmNewPassword" name="confirmNewPassword" required autocomplete="new-password">
</div>
<button type="submit" class="neumorphic-button primary-action">
<ion-icon name="key-outline"></ion-icon> Actualizar Contraseña
</button>
</form>
</div>
<div class="config-section neumorphic-inset-panel">
<h2 class="config-section-title"><ion-icon name="shield-checkmark-outline"></ion-icon> Autenticación de Dos Factores (2FA)</h2>
<p>Añade una capa extra de seguridad a tu cuenta. Al iniciar sesión, además de tu contraseña, se te pedirá un código de una aplicación de autenticación.</p>
<div class="form-group toggle-switch-group">
<label for="enable2FA" class="toggle-switch-label">Activar 2FA:</label>
<label class="switch">
<input type="checkbox" id="enable2FA" name="enable2FA">
<span class="slider round"></span>
</label>
<span id="status2FA" class="status-text">Desactivada</span>
</div>
<div id="info2FAContainer" style="margin-top: 15px;">
</div>
<p class="text-muted"><small>Si activas 2FA, se te guiará por el proceso de configuración (ej. escanear un código QR con tu app de autenticación como Google Authenticator, Authy, etc.).</small></p>
</div>
</div> </section>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/seguridad.js"></script> </body>
</html>Explicación del código: FINANZAS: Código de la Página de Seguridad de la Cuenta (seguridad.html)
<!DOCTYPE html>
Declara el tipo de documento como HTML5, asegurando que el navegador interprete el código con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML. El atributo lang="es" especifica que el idioma principal del contenido de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Contiene metainformación, enlaces a hojas de estilo y el título de la página.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, esencial para mostrar correctamente caracteres especiales y acentos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" para un diseño responsivo, ajustando el ancho de la página al del dispositivo y estableciendo la escala inicial.
<title>Plataforma Financiera - Seguridad de la Cuenta</title>
Establece el título de la página: "Plataforma Financiera - Seguridad de la Cuenta", que se muestra en la pestaña del navegador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que contiene los estilos globales de la plataforma.
<link rel="stylesheet" href="css/pages/seguridad.css">
Enlaza una hoja de estilos específica para la página de "Seguridad" (seguridad.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts con varios grosores para usar en la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible de la página.
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
Define la cabecera principal con estilo "glassmorphic". Incluye el logo "FINANZAS" que enlaza al dashboard.
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
Sección de navegación principal, con un menú hamburguesa para móviles y una lista de enlaces de navegación.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
Lista de los ítems de navegación principales. (Nota: En la página de "Seguridad", el ítem "Configuración" podría estar marcado como activo, o "Seguridad" si fuera un ítem de primer nivel).
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
Sección de acciones en la cabecera, conteniendo el icono del perfil de usuario.
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar" id="dropdownUserAvatarLarge"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
Menú desplegable del perfil, con cabecera que muestra avatar, nombre y correo del usuario.
<ul class="dropdown-menu-list">
<li><a href="mi_perfil.html" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="seguridad.html" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
Opciones del menú desplegable del perfil. "Seguridad" enlaza a esta misma página.
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div> </div> </div> </header>
Resto de opciones del menú desplegable del perfil. Cierre de los contenedores y de la cabecera principal.
<main class="content">
Elemento principal (<main>) que contiene el contenido específico de la página de seguridad.
<section id="seguridad" class="seguridad-page-container">
Sección principal de esta página, con id="seguridad" y clase seguridad-page-container para estilos.
<div class="section-header">
<h1><ion-icon name="shield-half-outline"></ion-icon> Seguridad de la Cuenta</h1>
<p class="subtitle">Administra tu contraseña y opciones de seguridad adicionales.</p>
</div>
Cabecera de la sección "Seguridad de la Cuenta", con título principal y subtítulo descriptivo.
<div class="config-sections-wrapper">
Contenedor que agrupa las diferentes subsecciones de configuración de seguridad.
<div class="config-section neumorphic-inset-panel">
<h2 class="config-section-title"><ion-icon name="lock-closed-outline"></ion-icon> Cambiar Contraseña</h2>
Primera subsección: "Cambiar Contraseña", con un título y un panel de estilo neumórfico.
<form id="passwordChangeForm">
Formulario (<form>) para que el usuario cambie su contraseña.
<div class="form-group">
<label for="currentPassword">Contraseña Actual:</label>
<input type="password" id="currentPassword" name="currentPassword" required autocomplete="current-password">
</div>
Grupo de formulario para ingresar la "Contraseña Actual". El campo es de tipo password y es obligatorio (required). autocomplete="current-password" ayuda a los gestores de contraseñas.
<div class="form-group">
<label for="newPassword">Nueva Contraseña:</label>
<input type="password" id="newPassword" name="newPassword" required autocomplete="new-password">
<small class="form-text text-muted">Mínimo 8 caracteres, incluye mayúsculas, minúsculas y números.</small>
</div>
Grupo de formulario para ingresar la "Nueva Contraseña", con requisitos de seguridad indicados en el texto de ayuda (<small>).
<div class="form-group">
<label for="confirmNewPassword">Confirmar Nueva Contraseña:</label>
<input type="password" id="confirmNewPassword" name="confirmNewPassword" required autocomplete="new-password">
</div>
Grupo de formulario para "Confirmar Nueva Contraseña".
<button type="submit" class="neumorphic-button primary-action">
<ion-icon name="key-outline"></ion-icon> Actualizar Contraseña
</button>
</form>
</div>
Botón para enviar el formulario y "Actualizar Contraseña". Cierre del formulario y de la subsección.
<div class="config-section neumorphic-inset-panel">
<h2 class="config-section-title"><ion-icon name="shield-checkmark-outline"></ion-icon> Autenticación de Dos Factores (2FA)</h2>
<p>Añade una capa extra de seguridad a tu cuenta. Al iniciar sesión, además de tu contraseña, se te pedirá un código de una aplicación de autenticación.</p>
Segunda subsección: "Autenticación de Dos Factores (2FA)", con título y un párrafo descriptivo.
<div class="form-group toggle-switch-group">
<label for="enable2FA" class="toggle-switch-label">Activar 2FA:</label>
<label class="switch">
<input type="checkbox" id="enable2FA" name="enable2FA">
<span class="slider round"></span>
</label>
<span id="status2FA" class="status-text">Desactivada</span>
</div>
Grupo de formulario con un interruptor (toggle switch) para "Activar 2FA". Incluye la etiqueta, la casilla de verificación estilizada como interruptor, y un span para mostrar el estado actual (ej. "Desactivada").
<div id="info2FAContainer" style="margin-top: 15px;">
</div>
Contenedor vacío (div) con id="info2FAContainer", probablemente para mostrar información adicional o instrucciones de configuración de 2FA mediante JavaScript.
<p class="text-muted"><small>Si activas 2FA, se te guiará por el proceso de configuración (ej. escanear un código QR con tu app de autenticación como Google Authenticator, Authy, etc.).</small></p>
</div> </div> </section> </main> ```
Párrafo con texto de ayuda sobre el proceso de configuración de 2FA. Cierre de la subsección de 2FA, del contenedor de secciones, de la sección principal `seguridad` y del elemento `main`.
<footer class="site-footer">
Inicio del pie de página (<footer>), con la misma estructura que las páginas anteriores.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
Contenido del pie de página: logo, descripción, enlaces de navegación, información, contacto y redes sociales.
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página con copyright y créditos de diseño. Cierre del pie de página.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza Ionicons para navegadores antiguos sin soporte para módulos ES.
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js para la funcionalidad del menú.
<script src="js/seguridad.js"></script>
Enlaza el archivo JavaScript local seguridad.js, que contendrá la lógica específica para la página de seguridad (como el cambio de contraseña y la activación de 2FA).
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.seguridad.css
El siguiente bloque de código pertenece al archivo css/pages/seguridad.css. Este archivo define los estilos visuales específicos para la página de "Seguridad de la Cuenta", incluyendo la apariencia de los formularios de cambio de contraseña, el interruptor de autenticación de dos factores (2FA), la lista de sesiones activas y cómo estos elementos se adaptan a diferentes tamaños de pantalla:
seguridad.css – Estilos de Página de Seguridad: Formularios, Toggles 2FA y Sesiones
.seguridad-page-container {
padding-bottom: 40px;
}
.config-sections-wrapper {
display: flex;
flex-direction: column;
gap: 30px;
}
.config-section {
padding: 25px 30px;
border-radius: var(--border-radius-main);
}
.config-section-title {
font-size: 1.6em;
color: var(--color-neon-accent);
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
display: flex;
align-items: center;
gap: 10px;
}
.config-section-title ion-icon {
font-size: 1.2em;
}
#passwordChangeForm .form-group {
margin-bottom: 20px;
}
#passwordChangeForm .neumorphic-button {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
}
#passwordChangeForm .neumorphic-button ion-icon {
font-size: 1.3em;
margin-bottom: 0;
}
.toggle-switch-group {
display: flex;
align-items: center;
gap: 15px;
margin: 20px 0;
}
.toggle-switch-label {
color: var(--color-text-muted);
font-size: 1em;
font-weight: 500;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
flex-shrink: 0;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-background);
border: 1px solid var(--color-surface);
box-shadow: var(--neumorphic-shadow-inset);
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 3px;
background-color: var(--color-text-muted);
box-shadow: var(--neumorphic-shadow-outset);
transition: .4s;
}
input:checked + .slider {
background-color: rgba(var(--color-neon-accent-rgb), 0.3);
border-color: var(--color-neon-accent);
}
input:focus + .slider {
box-shadow: var(--neumorphic-shadow-inset), 0 0 5px var(--color-neon-accent);
}
input:checked + .slider:before {
transform: translateX(26px);
background-color: var(--color-neon-accent);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.status-text {
font-size: 0.9em;
font-style: italic;
color: var(--color-text-muted);
}
.status-text.active {
color: var(--color-neon-accent);
font-weight: 500;
}
#info2FAContainer p {
margin-bottom: 10px;
}
#info2FAContainer .neumorphic-button {
font-size: 0.9em;
padding: 10px 15px;
}
.sessions-list {
list-style: none;
padding: 0;
margin: 20px 0;
}
.sessions-list li {
background-color: rgba(var(--color-surface-rgb), 0.3);
padding: 15px;
border-radius: var(--border-radius-small);
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9em;
color: var(--color-text-muted);
border: 1px solid var(--color-surface);
}
.sessions-list li span {
flex-grow: 1;
margin-right: 15px;
}
.action-btn.danger-action-btn-inline {
background-color: transparent;
color: #ff7675; /* Rojo */
border: 1px solid #ff7675;
padding: 6px 10px;
border-radius: var(--border-radius-small);
font-size: 0.85em;
transition: all var(--transition-speed) ease;
}
.action-btn.danger-action-btn-inline:hover {
background-color: rgba(255, 118, 117, 0.15);
color: #ff4d4d;
border-color: #ff4d4d;
}
@media (max-width: 768px) {
.config-section {
padding: 20px;
}
.config-section-title {
font-size: 1.4em;
}
.sessions-list li {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.sessions-list li .action-btn.danger-action-btn-inline {
align-self: flex-end;
}
}Explicación del código: seguridad.css – Estilos de Página de Seguridad: Formularios, Toggles 2FA y Sesiones
.seguridad-page-container {
Define estilos para el contenedor principal de la página de seguridad.
padding-bottom: 40px;
Añade un relleno (espacio interno) de 40 píxeles en la parte inferior del contenedor.
}
Cierra el bloque de estilos para la clase .seguridad-page-container.
.config-sections-wrapper { /* Si no está en un CSS global o de layout */
Define estilos para un contenedor que agrupa las diferentes secciones de configuración de seguridad. El comentario indica que estos estilos podrían ser globales o específicos de layout si no se definen aquí.
display: flex;
Establece el modo de visualización como flex.
flex-direction: column;
Organiza las secciones de configuración hijas en una columna, apilándolas verticalmente.
gap: 30px;
Establece un espacio de 30 píxeles entre cada sección de configuración.
}
Cierra el bloque de estilos para .config-sections-wrapper.
.config-section { /* Si no está en un CSS global o de layout */
Define estilos para cada sección individual de configuración (ej. Cambiar Contraseña, 2FA). El comentario reitera que podría ser un estilo global.
padding: 25px 30px;
Añade un relleno interno: 25 píxeles arriba y abajo, y 30 píxeles a los lados.
border-radius: var(--border-radius-main);
Redondea las esquinas de la sección utilizando la variable CSS --border-radius-main.
}
Cierra el bloque de estilos para .config-section.
.config-section-title {
Define estilos para los títulos principales de cada sección de configuración (probablemente elementos <h2>).
font-size: 1.6em;
Establece el tamaño de la fuente a 1.6 veces el de su padre.
color: var(--color-neon-accent);
Define el color del texto del título usando la variable CSS --color-neon-accent.
margin-bottom: 25px;
Añade un margen inferior.
padding-bottom: 10px;
Añade un relleno inferior.
border-bottom: 1px solid rgba(var(--color-neon-accent-rgb), 0.2);
Añade un borde inferior sutil, usando el color de acento neón con opacidad del 20%.
display: flex;
Usa flexbox para alinear el icono y el texto del título.
align-items: center;
Alinea verticalmente al centro el icono y el texto.
gap: 10px;
Crea un espacio de 10 píxeles entre el icono y el texto.
}
Cierra el bloque de estilos para .config-section-title.
.config-section-title ion-icon {
Define estilos para los ion-icon dentro de un .config-section-title.
font-size: 1.2em;
Establece el tamaño del icono.
}
Cierra el bloque de estilos para .config-section-title ion-icon.
#passwordChangeForm .form-group {
Define estilos para los grupos de formulario (.form-group) dentro del formulario con id="passwordChangeForm".
margin-bottom: 20px;
Asegura un margen inferior de 20 píxeles para estos grupos.
}
Cierra el bloque de estilos para #passwordChangeForm .form-group.
#passwordChangeForm .neumorphic-button {
Define estilos para los botones neumórficos dentro del formulario de cambio de contraseña.
margin-top: 10px;
Añade un margen superior, creando espacio antes del botón.
display: inline-flex;
Usa inline-flex para alinear su contenido (icono y texto) y comportarse en línea.
align-items: center;
Alinea verticalmente el icono y el texto dentro del botón.
gap: 8px;
Espacio de 8 píxeles entre el icono y el texto del botón.
padding: 12px 20px;
Relleno interno del botón.
}
Cierra el bloque de estilos para #passwordChangeForm .neumorphic-button.
#passwordChangeForm .neumorphic-button ion-icon {
Define estilos para los ion-icon dentro de los botones del formulario de cambio de contraseña.
font-size: 1.3em;
Establece el tamaño del icono.
margin-bottom: 0;
Elimina el margen inferior que podría heredar.
}
Cierra el bloque de estilos para #passwordChangeForm .neumorphic-button ion-icon.
.toggle-switch-group {
Define estilos para el grupo que contiene un interruptor (toggle switch).
display: flex;
align-items: center;
gap: 15px;
Usa flexbox para alinear la etiqueta, el interruptor y el texto de estado en una línea, con espacio entre ellos.
margin: 20px 0; /* Más espacio vertical */
Añade márgenes verticales de 20 píxeles.
}
Cierra el bloque de estilos para .toggle-switch-group.
.toggle-switch-label {
Define estilos para la etiqueta del interruptor.
color: var(--color-text-muted);
font-size: 1em;
font-weight: 500;
Establece el color, tamaño y grosor de la fuente.
}
Cierra el bloque de estilos para .toggle-switch-label.
.switch {
Define estilos para el contenedor visual del interruptor.
position: relative;
display: inline-block;
width: 60px;
height: 34px;
Establece posicionamiento relativo, visualización en línea y dimensiones fijas.
flex-shrink: 0;
Evita que el interruptor se encoja si el espacio es limitado en un contenedor flex.
}
Cierra el bloque de estilos para .switch.
.switch input {
Selecciona el elemento <input type="checkbox"> real dentro del .switch.
opacity: 0;
width: 0;
height: 0;
Oculta visualmente el checkbox por defecto, ya que se usará un estilo personalizado (.slider).
}
Cierra el bloque de estilos para .switch input.
.slider {
Define estilos para el elemento que actúa como la parte visual del interruptor (el "carril").
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
Posiciona el slider para que cubra el área del .switch y cambia el cursor.
background-color: var(--color-background);
border: 1px solid var(--color-surface);
box-shadow: var(--neumorphic-shadow-inset);
Establece el fondo, borde y sombra interior para el estado "apagado".
transition: .4s;
Aplica una transición suave de 0.4 segundos para los cambios de estilo.
}
Cierra el bloque de estilos para .slider.
.slider:before {
Define estilos para el pseudo-elemento ::before del .slider (la "perilla").
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 3px;
Posiciona y dimensiona la perilla.
background-color: var(--color-text-muted);
box-shadow: var(--neumorphic-shadow-outset);
Establece el color y sombra para la perilla en estado "apagado".
transition: .4s;
Aplica una transición suave a la perilla.
}
Cierra el bloque de estilos para .slider:before.
input:checked + .slider {
Estilos para el .slider cuando el checkbox está marcado.
background-color: rgba(var(--color-neon-accent-rgb), 0.3);
border-color: var(--color-neon-accent);
Cambia el fondo y borde del carril al color de acento neón.
}
Cierra el bloque de estilos para input:checked + .slider.
input:focus + .slider {
Estilos para el .slider cuando el checkbox tiene foco.
box-shadow: var(--neumorphic-shadow-inset), 0 0 5px var(--color-neon-accent);
Añade un resplandor de acento neón a la sombra para indicar foco.
}
Cierra el bloque de estilos para input:focus + .slider.
input:checked + .slider:before {
Estilos para la perilla (.slider:before) cuando el checkbox está marcado.
transform: translateX(26px);
Mueve la perilla 26 píxeles a la derecha (estado "encendido").
background-color: var(--color-neon-accent);
Cambia el color de la perilla al color de acento neón.
}
Cierra el bloque de estilos para input:checked + .slider:before.
.slider.round {
Estilos para un .slider con la clase adicional round.
border-radius: 34px;
Hace que el carril sea completamente redondeado.
}
Cierra el bloque de estilos para .slider.round.
.slider.round:before {
Estilos para la perilla de un .slider.round.
border-radius: 50%;
Hace que la perilla sea un círculo.
}
Cierra el bloque de estilos para .slider.round:before.
.status-text {
Estilos para el texto que indica el estado del interruptor.
font-size: 0.9em;
font-style: italic;
color: var(--color-text-muted);
Define tamaño, estilo cursiva y color.
}
Cierra el bloque de estilos para .status-text.
.status-text.active {
Estilos para el texto de estado cuando tiene la clase active.
color: var(--color-neon-accent);
font-weight: 500;
Cambia el color al acento neón y aplica grosor medio.
}
Cierra el bloque de estilos para .status-text.active.
#info2FAContainer p {
Estilos para los párrafos dentro del contenedor #info2FAContainer (información de 2FA).
margin-bottom: 10px;
Añade margen inferior a los párrafos.
}
Cierra el bloque de estilos para #info2FAContainer p.
#info2FAContainer .neumorphic-button {
Estilos para botones neumórficos dentro de #info2FAContainer.
font-size: 0.9em;
padding: 10px 15px;
Ajusta el tamaño de fuente y el relleno de estos botones.
}
Cierra el bloque de estilos para #info2FAContainer .neumorphic-button.
.sessions-list {
Define estilos para la lista de sesiones (sessions-list).
list-style: none;
padding: 0;
margin: 20px 0;
Elimina estilos de lista por defecto, quita el relleno y añade márgenes verticales.
}
Cierra el bloque de estilos para .sessions-list.
.sessions-list li {
Define estilos para los ítems (<li>) de la lista de sesiones.
background-color: rgba(var(--color-surface-rgb), 0.3);
padding: 15px;
Relleno interno.
border-radius: var(--border-radius-small);
Esquinas redondeadas.
margin-bottom: 10px;
Margen inferior para separar ítems.
display: flex;
justify-content: space-between;
align-items: center;
Usa flexbox para alinear la información de la sesión y el botón de acción.
font-size: 0.9em;
color: var(--color-text-muted);
Tamaño de fuente y color de texto.
border: 1px solid var(--color-surface);
Borde sutil.
}
Cierra el bloque de estilos para .sessions-list li.
.sessions-list li span {
Define estilos para los <span> dentro de los ítems de la lista de sesiones.
flex-grow: 1;
Permite que el span (que contiene la información de la sesión) crezca y ocupe el espacio disponible.
margin-right: 15px;
Margen a la derecha para separarlo del botón de acción.
}
Cierra el bloque de estilos para .sessions-list li span.
.action-btn.danger-action-btn-inline { /* Botón de cerrar sesión en línea */
Define estilos para un botón de acción en línea (action-btn) que también es una acción peligrosa (danger-action-btn-inline).
background-color: transparent;
Fondo transparente.
color: #ff7675; /* Rojo */
Color de texto rojo.
border: 1px solid #ff7675;
Borde rojo.
padding: 6px 10px;
Relleno.
border-radius: var(--border-radius-small);
Esquinas redondeadas.
font-size: 0.85em;
Tamaño de fuente.
transition: all var(--transition-speed) ease;
Transición suave para todos los cambios.
}
Cierra el bloque de estilos para .action-btn.danger-action-btn-inline.
.action-btn.danger-action-btn-inline:hover {
Define estilos para el estado hover de este botón de acción peligrosa en línea.
background-color: rgba(255, 118, 117, 0.15);
Cambia el fondo a un rojo semitransparente.
color: #ff4d4d;
Cambia el color del texto a un rojo más intenso.
border-color: #ff4d4d;
Cambia el color del borde a un rojo más intenso.
}
Cierra el bloque de estilos para .action-btn.danger-action-btn-inline:hover.
@media (max-width: 768px) {
Inicia un bloque de Media Query para pantallas con ancho máximo de 768px.
.config-section {
padding: 20px;
}
Reduce el relleno de las secciones de configuración en pantallas más pequeñas.
.config-section-title {
font-size: 1.4em;
}
Reduce el tamaño de fuente de los títulos de sección.
.sessions-list li {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
En pantallas pequeñas, los ítems de la lista de sesiones apilan su contenido verticalmente, lo alinean al inicio y ajustan el espacio.
.sessions-list li .action-btn.danger-action-btn-inline {
align-self: flex-end;
}
Alinea el botón de acción peligrosa en línea a la derecha dentro del ítem de sesión apilado.
}
Cierra el bloque @media (max-width: 768px).ayuda.html
A continuación, se presenta el código fuente del archivo ayuda.html. Esta página de la plataforma "FINANZAS" funciona como el "Centro de Ayuda", donde los usuarios pueden encontrar respuestas a preguntas frecuentes, buscar información y contactar a soporte para resolver sus dudas:
FINANZAS: Código del Centro de Ayuda (ayuda.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Centro de Ayuda</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/ayuda.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar" id="dropdownUserAvatarLarge"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
<ul class="dropdown-menu-list">
<li><a href="mi_perfil.html" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="seguridad.html" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="content">
<section id="ayuda" class="ayuda-page-container">
<div class="section-header">
<h1><ion-icon name="help-buoy-outline"></ion-icon> Centro de Ayuda</h1>
<p class="subtitle">Encuentra respuestas a tus preguntas y aprende a sacar el máximo provecho de la plataforma.</p>
</div>
<div class="search-help-container neumorphic-inset-panel">
<form id="helpSearchForm">
<div class="form-group">
<label for="helpSearchQuery" class="sr-only">Buscar en la ayuda...</label>
<input type="search" id="helpSearchQuery" name="helpSearchQuery" placeholder="Escribe tu pregunta o palabra clave...">
</div>
<button type="submit" class="neumorphic-button primary-action">
<ion-icon name="search-outline"></ion-icon> Buscar
</button>
</form>
</div>
<div class="faq-section">
<h2 class="faq-main-title"><ion-icon name="list-circle-outline"></ion-icon> Preguntas Frecuentes</h2>
<div class="faq-category">
<h3 class="faq-category-title" id="faq-cuentas"><ion-icon name="wallet-outline"></ion-icon> Gestión de Cuentas e Ingresos</h3>
<details class="faq-item">
<summary class="faq-question">¿Cómo agrego una nueva cuenta financiera?</summary>
<p class="faq-answer">Para agregar una nueva cuenta, ve a la sección "Cuentas" desde el menú de navegación principal. Luego, haz clic en el botón "Agregar Nueva Cuenta". Completa el formulario con los detalles de tu cuenta, como el nombre, tipo de cuenta, saldo inicial y moneda. Finalmente, haz clic en "Guardar Cuenta".</p>
</details>
<details class="faq-item">
<summary class="faq-question">¿Puedo sincronizar mis cuentas bancarias automáticamente?</summary>
<p class="faq-answer">Sí, ofrecemos la opción de vincular de forma segura tus cuentas bancarias para la sincronización automática de transacciones. Busca el botón "Conectar Cuenta Bancaria" en la sección "Cuentas". Este proceso requiere tu consentimiento explícito y utiliza protocolos de seguridad estándar de la industria.</p>
</details>
<details class="faq-item">
<summary class="faq-question">¿Cómo registro un ingreso recurrente?</summary>
<p class="faq-answer">Al registrar un ingreso (manual o automáticamente), tendrás la opción de marcarlo como "recurrente". Si lo haces, podrás especificar la frecuencia (ej. mensual, quincenal) y el sistema lo registrará automáticamente en los períodos futuros según tu configuración.</p>
</details>
</div>
<div class="faq-category">
<h3 class="faq-category-title" id="faq-gastos"><ion-icon name="cart-outline"></ion-icon> Gestión de Gastos</h3>
<details class="faq-item">
<summary class="faq-question">¿Cómo creo una categoría de gasto personalizada?</summary>
<p class="faq-answer">Al registrar un nuevo gasto, en el campo "Categoría", encontrarás una opción para "Crear Nueva Categoría". También puedes gestionar tus categorías personalizadas desde la sección de "Configuración" de la aplicación.</p>
</details>
<details class="faq-item">
<summary class="faq-question">¿Puedo adjuntar recibos a mis gastos?</summary>
<p class="faq-answer">¡Sí! Al registrar o editar un gasto, verás una opción para "Adjuntar Recibo". Puedes subir imágenes (JPG, PNG) o archivos PDF como comprobantes de tus transacciones.</p>
</details>
</div>
<div class="faq-category">
<h3 class="faq-category-title" id="faq-seguridad"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad y Privacidad</h3>
<details class="faq-item">
<summary class="faq-question">¿Cómo cambio mi contraseña?</summary>
<p class="faq-answer">Puedes cambiar tu contraseña desde la sección "Seguridad", accesible a través del menú desplegable de tu perfil o desde la página general de "Configuración". Necesitarás ingresar tu contraseña actual y luego la nueva contraseña dos veces.</p>
</details>
<details class="faq-item">
<summary class="faq-question">¿Qué es la Autenticación de Dos Factores (2FA) y cómo la activo?</summary>
<p class="faq-answer">La 2FA añade una capa extra de seguridad. Además de tu contraseña, necesitarás un código de una aplicación de autenticación (como Google Authenticator o Authy) para iniciar sesión. Puedes activar y configurar 2FA desde la sección "Seguridad".</p>
</details>
<details class="faq-item">
<summary class="faq-question">¿Cómo se protegen mis datos financieros?</summary>
<p class="faq-answer">Nos tomamos la seguridad muy en serio. Toda tu información financiera sensible se encripta tanto en tránsito (usando SSL/TLS) como en reposo (almacenada en nuestros servidores). Las contraseñas se guardan utilizando técnicas de hashing robustas. Para más detalles, consulta nuestra <a href="privacidad.html" class="inline-link">Política de Privacidad</a>.</p>
</details>
</div>
</div>
<div class="contact-support-section neumorphic-inset-panel">
<h3 class="contact-support-title"><ion-icon name="mail-unread-outline"></ion-icon> ¿No encontraste lo que buscabas?</h3>
<p>Si tienes otras preguntas o necesitas asistencia personalizada, no dudes en contactarnos.</p>
<a href="mailto:info@finanzasplatform.com" class="neumorphic-button primary-action">
<ion-icon name="send-outline"></ion-icon> Contactar a Soporte
</a>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
<li><a href="reportes.html#reportes">Reportes</a></li>
<li><a href="configuracion.html#configuracion">Configuración</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/ayuda.js"></script> </body>
</html>Explicación del código: FINANZAS: Código del Centro de Ayuda (ayuda.html)
<!DOCTYPE html>
Declara el tipo de documento como HTML5, asegurando que el navegador interprete el código con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML. El atributo lang="es" especifica que el idioma principal del contenido de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Contiene metainformación, enlaces a hojas de estilo y el título de la página.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, esencial para mostrar correctamente caracteres especiales y acentos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" para un diseño responsivo, ajustando el ancho de la página al del dispositivo y estableciendo la escala inicial.
<title>Plataforma Financiera - Centro de Ayuda</title>
Establece el título de la página: "Plataforma Financiera - Centro de Ayuda", que se muestra en la pestaña del navegador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que contiene los estilos globales de la plataforma.
<link rel="stylesheet" href="css/pages/ayuda.css">
Enlaza una hoja de estilos específica para la página del "Centro de Ayuda" (ayuda.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts con varios grosores para usar en la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible de la página.
<header class="glassmorphic-header">
<div class="logo-container">
<a href="dashboard.html#dashboard" class="logo">FINANZAS</a>
</div>
Define la cabecera principal con estilo "glassmorphic". Incluye el logo "FINANZAS" que enlaza al dashboard.
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
Sección de navegación principal, con un menú hamburguesa para móviles y una lista de enlaces de navegación.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
Lista de los ítems de navegación principales.
<div class="header-actions">
<div class="user-profile-container">
<div class="user-profile-icon" id="userProfileIconContainer">
<ion-icon name="person-circle-outline"></ion-icon>
</div>
Sección de acciones en la cabecera, conteniendo el icono del perfil de usuario.
<div class="profile-dropdown" id="profileDropdownMenu">
<div class="dropdown-header">
<ion-icon name="person-circle" class="profile-avatar" id="dropdownUserAvatarLarge"></ion-icon>
<h3 id="dropdownUserName">Juan Felipe</h3>
<p id="dropdownUserEmail">juan.felipe@example.com</p>
</div>
Menú desplegable del perfil, con cabecera que muestra avatar, nombre y correo del usuario.
<ul class="dropdown-menu-list">
<li><a href="mi_perfil.html" class="dropdown-item"><ion-icon name="person-outline"></ion-icon> Mi Perfil</a></li>
<li><a href="seguridad.html" class="dropdown-item"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad</a></li>
<li><a href="ayuda.html" class="dropdown-item"><ion-icon name="help-circle-outline"></ion-icon> Ayuda</a></li>
Opciones del menú desplegable del perfil. "Ayuda" enlaza a esta misma página.
<li><hr class="dropdown-divider"></li>
<li><a href="#logout" id="logoutButton" class="dropdown-item logout-item"><ion-icon name="log-out-outline"></ion-icon> Cerrar Sesión</a></li>
</ul>
</div> </div> </div> </header>
Separador y opción de "Cerrar Sesión". Cierre de los contenedores y de la cabecera principal.
<main class="content">
Elemento principal (<main>) que contiene el contenido específico de la página del centro de ayuda.
<section id="ayuda" class="ayuda-page-container">
Sección principal de esta página, con id="ayuda" y clase ayuda-page-container para estilos.
<div class="section-header">
<h1><ion-icon name="help-buoy-outline"></ion-icon> Centro de Ayuda</h1>
<p class="subtitle">Encuentra respuestas a tus preguntas y aprende a sacar el máximo provecho de la plataforma.</p>
</div>
Cabecera de la sección "Centro de Ayuda", con título principal y subtítulo descriptivo.
<div class="search-help-container neumorphic-inset-panel">
<form id="helpSearchForm">
<div class="form-group">
<label for="helpSearchQuery" class="sr-only">Buscar en la ayuda...</label>
<input type="search" id="helpSearchQuery" name="helpSearchQuery" placeholder="Escribe tu pregunta o palabra clave...">
</div>
Contenedor para la barra de búsqueda de ayuda, con estilo neumórfico. Incluye un formulario con un campo de búsqueda. La etiqueta <label> está oculta visualmente (sr-only) pero disponible para lectores de pantalla.
<button type="submit" class="neumorphic-button primary-action">
<ion-icon name="search-outline"></ion-icon> Buscar
</button>
</form>
</div>
Botón para enviar el formulario de búsqueda. Cierre del formulario y del contenedor de búsqueda.
<div class="faq-section">
<h2 class="faq-main-title"><ion-icon name="list-circle-outline"></ion-icon> Preguntas Frecuentes</h2>
Sección para las Preguntas Frecuentes (FAQ), con un título principal.
<div class="faq-category">
<h3 class="faq-category-title" id="faq-cuentas"><ion-icon name="wallet-outline"></ion-icon> Gestión de Cuentas e Ingresos</h3>
Primera categoría de FAQs: "Gestión de Cuentas e Ingresos", con su título.
<details class="faq-item">
<summary class="faq-question">¿Cómo agrego una nueva cuenta financiera?</summary>
<p class="faq-answer">Para agregar una nueva cuenta, ve a la sección "Cuentas" desde el menú de navegación principal. Luego, haz clic en el botón "Agregar Nueva Cuenta". Completa el formulario con los detalles de tu cuenta, como el nombre, tipo de cuenta, saldo inicial y moneda. Finalmente, haz clic en "Guardar Cuenta".</p>
</details>
Primer ítem de FAQ, utilizando el elemento <details> para contenido expandible/colapsable. <summary> contiene la pregunta y <p> la respuesta.
<details class="faq-item">
<summary class="faq-question">¿Puedo sincronizar mis cuentas bancarias automáticamente?</summary>
<p class="faq-answer">Sí, ofrecemos la opción de vincular de forma segura tus cuentas bancarias para la sincronización automática de transacciones. Busca el botón "Conectar Cuenta Bancaria" en la sección "Cuentas". Este proceso requiere tu consentimiento explícito y utiliza protocolos de seguridad estándar de la industria.</p>
</details>
Segundo ítem de FAQ sobre sincronización de cuentas.
<details class="faq-item">
<summary class="faq-question">¿Cómo registro un ingreso recurrente?</summary>
<p class="faq-answer">Al registrar un ingreso (manual o automáticamente), tendrás la opción de marcarlo como "recurrente". Si lo haces, podrás especificar la frecuencia (ej. mensual, quincenal) y el sistema lo registrará automáticamente en los períodos futuros según tu configuración.</p>
</details>
</div>
Tercer ítem de FAQ sobre ingresos recurrentes. Cierre de la categoría de FAQs de Cuentas.
<div class="faq-category">
<h3 class="faq-category-title" id="faq-gastos"><ion-icon name="cart-outline"></ion-icon> Gestión de Gastos</h3>
Segunda categoría de FAQs: "Gestión de Gastos", con su título.
<details class="faq-item">
<summary class="faq-question">¿Cómo creo una categoría de gasto personalizada?</summary>
<p class="faq-answer">Al registrar un nuevo gasto, en el campo "Categoría", encontrarás una opción para "Crear Nueva Categoría". También puedes gestionar tus categorías personalizadas desde la sección de "Configuración" de la aplicación.</p>
</details>
Primer ítem de FAQ en la categoría de Gastos, sobre categorías personalizadas.
<details class="faq-item">
<summary class="faq-question">¿Puedo adjuntar recibos a mis gastos?</summary>
<p class="faq-answer">¡Sí! Al registrar o editar un gasto, verás una opción para "Adjuntar Recibo". Puedes subir imágenes (JPG, PNG) o archivos PDF como comprobantes de tus transacciones.</p>
</details>
</div>
Segundo ítem de FAQ sobre adjuntar recibos. Cierre de la categoría de FAQs de Gastos.
<div class="faq-category">
<h3 class="faq-category-title" id="faq-seguridad"><ion-icon name="shield-checkmark-outline"></ion-icon> Seguridad y Privacidad</h3>
Tercera categoría de FAQs: "Seguridad y Privacidad", con su título.
<details class="faq-item">
<summary class="faq-question">¿Cómo cambio mi contraseña?</summary>
<p class="faq-answer">Puedes cambiar tu contraseña desde la sección "Seguridad", accesible a través del menú desplegable de tu perfil o desde la página general de "Configuración". Necesitarás ingresar tu contraseña actual y luego la nueva contraseña dos veces.</p>
</details>
Primer ítem de FAQ en la categoría de Seguridad, sobre cambio de contraseña.
<details class="faq-item">
<summary class="faq-question">¿Qué es la Autenticación de Dos Factores (2FA) y cómo la activo?</summary>
<p class="faq-answer">La 2FA añade una capa extra de seguridad. Además de tu contraseña, necesitarás un código de una aplicación de autenticación (como Google Authenticator o Authy) para iniciar sesión. Puedes activar y configurar 2FA desde la sección "Seguridad".</p>
</details>
Segundo ítem de FAQ sobre Autenticación de Dos Factores (2FA).
<details class="faq-item">
<summary class="faq-question">¿Cómo se protegen mis datos financieros?</summary>
<p class="faq-answer">Nos tomamos la seguridad muy en serio. Toda tu información financiera sensible se encripta tanto en tránsito (usando SSL/TLS) como en reposo (almacenada en nuestros servidores). Las contraseñas se guardan utilizando técnicas de hashing robustas. Para más detalles, consulta nuestra <a href="privacidad.html" class="inline-link">Política de Privacidad</a>.</p>
</details>
</div> </div>
Tercer ítem de FAQ sobre protección de datos, con un enlace a la Política de Privacidad. Cierre de la categoría de Seguridad y de la sección de FAQs.
<div class="contact-support-section neumorphic-inset-panel">
<h3 class="contact-support-title"><ion-icon name="mail-unread-outline"></ion-icon> ¿No encontraste lo que buscabas?</h3>
<p>Si tienes otras preguntas o necesitas asistencia personalizada, no dudes en contactarnos.</p>
<a href="mailto:info@finanzasplatform.com" class="neumorphic-button primary-action">
<ion-icon name="send-outline"></ion-icon> Contactar a Soporte
</a>
</div>
</section> </main>
Sección para contactar a soporte si el usuario no encontró respuestas, con un título, párrafo y un botón que es un enlace `mailto`. Cierre de la sección `ayuda` y del `main`.
<footer class="site-footer">
Inicio del pie de página (<footer>), con una estructura similar a las otras páginas.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="dashboard.html#dashboard" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="cuentas.html#cuentas">Cuentas</a></li>
<li><a href="gastos.html#gastos">Gastos</a></li>
<li><a href="inversiones.html#inversiones">Inversiones</a></li>
<li><a href="presupuestos.html#presupuestos">Presupuestos</a></li>
<li><a href="reportes.html#reportes">Reportes</a></li>
<li><a href="configuracion.html#configuracion">Configuración</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="acerca.html">Acerca del Proyecto</a></li>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
<li><a href="seguridad.html">Seguridad</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
<p><ion-icon name="call-outline"></ion-icon> Próximamente</p>
<div class="footer-social">
<a href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
Contenido del pie de página: logo, descripción, enlaces de navegación, información, contacto y redes sociales.
<div class="footer-bottom">
<p>© 2025 FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página con copyright y créditos de diseño. Cierre del pie de página.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza Ionicons para navegadores antiguos sin soporte para módulos ES.
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js para la funcionalidad del menú.
<script src="js/ayuda.js"></script>
Enlaza el archivo JavaScript local ayuda.js, que contendrá la lógica específica para la página del centro de ayuda (como el buscador o la interactividad de los FAQs).
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.ayuda.css
El siguiente bloque de código corresponde al archivo css/pages/ayuda.css. Este archivo define los estilos visuales específicos para la página del "Centro de Ayuda", incluyendo la barra de búsqueda, la sección de preguntas frecuentes (FAQ) con su interactividad, y el área de contacto para soporte, además de los ajustes responsivos necesarios:
ayuda.css – Estilos del Centro de Ayuda: Búsqueda, FAQs Interactivas y Soporte
.ayuda-page-container {
padding-bottom: 40px;
}
.search-help-container {
padding: 30px 35px;
border-radius: var(--border-radius-main);
margin-bottom: 50px;
}
#helpSearchForm {
display: flex;
gap: 8px;
align-items: stretch;
}
#helpSearchForm .form-group {
flex-grow: 1;
margin-bottom: 0;
display: flex;
}
#helpSearchForm input[type="search"] {
width: 100%;
height: 100%;
padding: 20px 22px;
font-size: 1.2em;
border-radius: var(--border-radius-small);
}
#helpSearchForm .neumorphic-button {
flex-shrink: 0;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 20px 28px;
gap: 12px;
font-size: 1.2em;
border-radius: var(--border-radius-small);
}
#helpSearchForm .neumorphic-button ion-icon {
font-size: 1.4em;
margin-bottom: 0;
}
#helpSearchForm input[type="search"]:focus {
}
.faq-section {
margin-bottom: 40px;
}
.faq-main-title {
font-size: 1.8em;
color: var(--color-text);
margin-bottom: 25px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-bottom: 15px;
border-bottom: 1px solid var(--color-surface);
}
.faq-main-title ion-icon {
color: var(--color-neon-accent);
font-size: 1.3em;
}
.faq-category {
margin-bottom: 30px;
}
.faq-category-title {
font-size: 1.4em;
color: var(--color-neon-accent);
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 1px dashed rgba(var(--color-neon-accent-rgb), 0.3);
display: flex;
align-items: center;
gap: 10px;
}
.faq-category-title ion-icon {
font-size: 1.2em;
}
.faq-item {
background-color: rgba(var(--color-surface-rgb), 0.4);
border: 1px solid var(--color-surface);
border-radius: var(--border-radius-small);
margin-bottom: 10px;
transition: box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
}
.faq-item[open] {
box-shadow: 0 0 15px rgba(var(--color-neon-accent-rgb), 0.2), var(--neumorphic-shadow-outset);
border-left: 3px solid var(--color-neon-accent);
border-color: rgba(var(--color-neon-accent-rgb), 0.7);
}
.faq-item summary {
padding: 15px 20px;
font-size: 1.1em;
font-weight: 500;
color: var(--color-text);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
border-radius: var(--border-radius-small);
}
.faq-item[open] summary {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:hover {
background-color: rgba(var(--color-neon-accent-rgb), 0.08);
color: var(--color-neon-accent);
}
.faq-item summary::after {
content: '+';
font-size: 1.5em;
color: var(--color-neon-accent);
transition: transform 0.3s ease, color var(--transition-speed) ease;
}
.faq-item summary:hover::after {
color: var(--color-neon-accent-darker);
}
.faq-item[open] summary::after {
content: '−';
transform: rotate(180deg);
}
.faq-answer {
padding: 15px 20px 20px 23px;
font-size: 0.95em;
color: var(--color-text-muted);
line-height: 1.7;
background-color: rgba(var(--color-background-rgb), 0.2);
border-bottom-left-radius: var(--border-radius-small);
border-bottom-right-radius: var(--border-radius-small);
}
.faq-item[open] .faq-answer {
margin-top:0;
padding-top: 20px;
}
.faq-answer p {
margin-bottom: 10px;
}
.faq-answer p:last-child {
margin-bottom: 0;
}
.faq-answer .inline-link {
color: var(--color-neon-accent);
text-decoration: underline;
font-weight: 500;
transition: color var(--transition-speed) ease, text-shadow var(--transition-speed) ease;
}
.faq-answer .inline-link:hover {
color: var(--color-neon-accent-darker);
text-decoration: none;
text-shadow: 0 0 6px rgba(var(--color-neon-accent-rgb), 0.7);
}
.contact-support-section {
padding: 30px;
border-radius: var(--border-radius-main);
text-align: center;
}
.contact-support-title {
font-size: 1.5em;
color: var(--color-neon-accent);
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.contact-support-section p {
color: var(--color-text-muted);
margin-bottom: 25px;
font-size: 1.05em;
}
.contact-support-section .neumorphic-button {
padding: 12px 25px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.contact-support-section .neumorphic-button ion-icon {
font-size: 1.3em;
margin-bottom: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 768px) {
.search-help-container {
padding: 25px 20px;
}
#helpSearchForm {
flex-direction: column;
align-items: stretch;
gap: 15px;
}
#helpSearchForm input[type="search"] {
font-size: 1.1em;
padding: 18px 20px;
width: 100%;
}
#helpSearchForm .neumorphic-button {
width: 100%;
font-size: 1.1em;
padding-top: 18px;
padding-bottom: 18px;
gap: 10px;
}
#helpSearchForm .neumorphic-button ion-icon {
font-size: 1.3em;
}
.faq-main-title {
font-size: 1.6em;
}
.faq-category-title {
font-size: 1.3em;
}
.contact-support-title {
font-size: 1.4em;
}
.faq-item summary {
font-size: 1em;
padding: 12px 15px;
}
.faq-answer {
padding: 15px 15px 15px 18px;
}
}
@media (max-width: 480px) {
.search-help-container {
padding: 20px 15px;
}
#helpSearchForm input[type="search"] {
font-size: 1.05em;
padding: 16px 18px;
}
#helpSearchForm .neumorphic-button {
font-size: 1.05em;
padding-top: 16px;
padding-bottom: 16px;
gap: 8px;
}
#helpSearchForm .neumorphic-button ion-icon {
font-size: 1.3em;
}
}Explicación del código: ayuda.css – Estilos del Centro de Ayuda: Búsqueda, FAQs Interactivas y Soporte
.ayuda-page-container {
Define estilos para el contenedor principal de la página del Centro de Ayuda.
padding-bottom: 40px;
Añade un relleno (espacio interno) de 40 píxeles en la parte inferior del contenedor, para dar espacio visual al final del contenido.
}
Cierra el bloque de estilos para la clase .ayuda-page-container.
.search-help-container {
Define estilos para el contenedor de la barra de búsqueda de ayuda.
padding: 30px 35px;
Añade un relleno interno: 30 píxeles arriba y abajo, y 35 píxeles a los lados.
border-radius: var(--border-radius-main);
Redondea las esquinas del contenedor utilizando la variable CSS --border-radius-main.
margin-bottom: 50px;
Añade un margen inferior de 50 píxeles, separándolo de la sección de FAQs.
}
Cierra el bloque de estilos para .search-help-container. (Nota: Este contenedor también tiene la clase neumorphic-inset-panel aplicada en el HTML, cuyos estilos se definirían en otro lugar o se heredarían).
#helpSearchForm {
Define estilos para el formulario de búsqueda con el id="helpSearchForm".
display: flex;
Establece el modo de visualización como flex para alinear el campo de búsqueda y el botón.
gap: 8px;
Establece un espacio de 8 píxeles entre el campo de búsqueda y el botón.
align-items: stretch;
Estira los elementos hijos (campo y botón) para que tengan la misma altura.
}
Cierra el bloque de estilos para #helpSearchForm.
#helpSearchForm .form-group {
Define estilos para los elementos con clase form-group dentro del formulario de búsqueda.
flex-grow: 1;
Permite que el grupo de formulario (que contiene el input de búsqueda) crezca y ocupe el espacio disponible.
margin-bottom: 0;
Elimina el margen inferior, ya que el espaciado se maneja con gap en el formulario.
display: flex;
Establece flex para el form-group mismo, para que el input dentro pueda ocupar toda la altura (si height: 100% se usa en el input).
}
Cierra el bloque de estilos para #helpSearchForm .form-group.
#helpSearchForm input[type="search"] {
Define estilos para el campo de entrada de tipo search dentro del formulario de búsqueda.
width: 100%;
Hace que el campo de búsqueda ocupe todo el ancho de su contenedor (.form-group).
height: 100%;
Hace que el campo de búsqueda ocupe toda la altura de su contenedor (.form-group).
padding: 20px 22px;
Añade un relleno interno generoso para un área de texto cómoda.
font-size: 1.2em;
Establece un tamaño de fuente ligeramente más grande.
border-radius: var(--border-radius-small);
Redondea las esquinas del campo de búsqueda.
}
Cierra el bloque de estilos para #helpSearchForm input[type="search"].
#helpSearchForm .neumorphic-button {
Define estilos para el botón neumórfico de búsqueda dentro del formulario.
flex-shrink: 0;
Evita que el botón se encoja si el espacio es limitado.
flex-direction: row;
Asegura que el contenido del botón (icono y texto) se disponga en fila (aunque los botones neumórficos ya podrían tener esto por defecto).
align-items: center;
Alinea verticalmente el icono y el texto dentro del botón.
justify-content: center;
Centra horizontalmente el icono y el texto dentro del botón.
padding: 20px 28px;
Añade relleno al botón.
gap: 12px;
Establece un espacio de 12 píxeles entre el icono y el texto del botón.
font-size: 1.2em;
Establece el tamaño de fuente del texto del botón.
border-radius: var(--border-radius-small);
Redondea las esquinas del botón.
}
Cierra el bloque de estilos para #helpSearchForm .neumorphic-button.
#helpSearchForm .neumorphic-button ion-icon {
Define estilos para los ion-icon dentro del botón de búsqueda.
font-size: 1.4em;
Establece el tamaño del icono.
margin-bottom: 0;
Elimina cualquier margen inferior que el icono pudiera tener por defecto.
}
Cierra el bloque de estilos para #helpSearchForm .neumorphic-button ion-icon.
#helpSearchForm input[type="search"]:focus {
Estilos para el estado :focus del campo de búsqueda. No se definen reglas específicas aquí, por lo que heredará los estilos de foco de los inputs generales o se definirán en otro lugar.
}
Cierra el bloque (vacío) de estilos para #helpSearchForm input[type="search"]:focus.
.faq-section {
Define estilos para la sección de Preguntas Frecuentes (FAQ).
margin-bottom: 40px;
Añade un margen inferior de 40 píxeles.
}
Cierra el bloque de estilos para .faq-section.
.faq-main-title {
Define estilos para el título principal de la sección de FAQs.
font-size: 1.8em;
color: var(--color-text);
margin-bottom: 25px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-bottom: 15px;
border-bottom: 1px solid var(--color-surface);
Establece tamaño de fuente, color, márgenes, alineación de texto, y usa flexbox para alinear un icono con el texto del título, además de un borde inferior.
}
Cierra el bloque de estilos para .faq-main-title.
.faq-main-title ion-icon {
Define estilos para los ion-icon dentro del título principal de FAQs.
color: var(--color-neon-accent);
font-size: 1.3em;
Establece el color y tamaño del icono.
}
Cierra el bloque de estilos para .faq-main-title ion-icon.
.faq-category {
Define estilos para cada contenedor de categoría de FAQs.
margin-bottom: 30px;
Añade un margen inferior para separar las categorías.
}
Cierra el bloque de estilos para .faq-category.
.faq-category-title {
Define estilos para el título de cada categoría de FAQ.
font-size: 1.4em;
color: var(--color-neon-accent);
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 1px dashed rgba(var(--color-neon-accent-rgb), 0.3);
display: flex;
align-items: center;
gap: 10px;
Establece tamaño de fuente, color de acento, márgenes, y un borde inferior discontinuo, usando flexbox para alinear un icono con el texto del título.
}
Cierra el bloque de estilos para .faq-category-title.
.faq-category-title ion-icon {
Define estilos para los ion-icon dentro del título de categoría de FAQ.
font-size: 1.2em;
Establece el tamaño del icono.
}
Cierra el bloque de estilos para .faq-category-title ion-icon.
.faq-item {
Define estilos para cada ítem individual de FAQ (que usa la etiqueta <details>).
background-color: rgba(var(--color-surface-rgb), 0.4);
Color de fondo semitransparente.
border: 1px solid var(--color-surface);
Borde sutil.
border-radius: var(--border-radius-small);
Esquinas redondeadas.
margin-bottom: 10px;
Margen inferior para separar los ítems.
transition: box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
Aplica transiciones suaves para la sombra y el color del borde.
}
Cierra el bloque de estilos para .faq-item.
.faq-item[open] {
Define estilos para un ítem de FAQ cuando está abierto (el elemento <details> tiene el atributo open).
box-shadow: 0 0 15px rgba(var(--color-neon-accent-rgb), 0.2), var(--neumorphic-shadow-outset);
Aplica una sombra más pronunciada con un resplandor de acento neón.
border-left: 3px solid var(--color-neon-accent);
Añade un borde izquierdo de color de acento neón para destacarlo.
border-color: rgba(var(--color-neon-accent-rgb), 0.7);
Hace el borde general más visible con el color de acento neón.
}
Cierra el bloque de estilos para .faq-item[open].
.faq-item summary {
Define estilos para el elemento <summary> (la pregunta visible del FAQ).
padding: 15px 20px;
font-size: 1.1em;
font-weight: 500;
color: var(--color-text);
cursor: pointer;
Establece relleno, tamaño de fuente, grosor, color y cambia el cursor a una mano para indicar que es clickeable.
list-style: none; /* Elimina el marcador por defecto del <summary> */
Oculta el marcador de detalles (flecha) por defecto del navegador.
display: flex;
justify-content: space-between;
align-items: center;
Usa flexbox para alinear el texto de la pregunta y el marcador personalizado (que se añadirá con ::after).
transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
Transiciones suaves para el color de fondo y texto al interactuar.
border-radius: var(--border-radius-small);
Redondea las esquinas (esto se ajustará cuando el ítem esté abierto).
}
Cierra el bloque de estilos para .faq-item summary.
.faq-item[open] summary {
Define estilos para el <summary> de un ítem de FAQ abierto.
border-top-left-radius: 0;
border-bottom-left-radius: 0;
Elimina el redondeo de las esquinas izquierdas del summary cuando el ítem está abierto, para que encaje con el border-left del .faq-item[open].
}
Cierra el bloque de estilos para .faq-item[open] summary.
.faq-item summary::-webkit-details-marker {
Selecciona el pseudo-elemento del marcador de detalles en navegadores WebKit.
display: none;
Lo oculta, ya que se usará un marcador personalizado.
}
Cierra el bloque de estilos para .faq-item summary::-webkit-details-marker.
.faq-item summary:hover {
Define estilos para el estado hover del <summary>.
background-color: rgba(var(--color-neon-accent-rgb), 0.08);
color: var(--color-neon-accent);
Cambia ligeramente el color de fondo y el color del texto al color de acento neón.
}
Cierra el bloque de estilos para .faq-item summary:hover.
.faq-item summary::after {
Crea un pseudo-elemento ::after para el <summary>, que actuará como un marcador personalizado (+/-).
content: '+';
Establece el contenido del marcador como un signo '+'.
font-size: 1.5em;
color: var(--color-neon-accent);
Establece el tamaño y color del marcador.
transition: transform 0.3s ease, color var(--transition-speed) ease;
Aplica transiciones para la transformación (rotación) y el color.
}
Cierra el bloque de estilos para .faq-item summary::after.
.faq-item summary:hover::after {
Define estilos para el marcador ::after cuando el <summary> está en estado hover.
color: var(--color-neon-accent-darker);
Cambia el color del marcador a una versión más oscura del acento neón.
}
Cierra el bloque de estilos para .faq-item summary:hover::after.
.faq-item[open] summary::after {
Define estilos para el marcador ::after cuando el ítem de FAQ está abierto.
content: '−'; /* Cambia el contenido a un signo menos (o guion largo) */
transform: rotate(180deg); /* Rota el marcador (aunque con el cambio de contenido, la rotación podría ser innecesaria o diferente) */
Cambia el contenido a un signo menos '−' (U+2212) e intenta rotarlo. La rotación podría no ser necesaria si el carácter ya indica "abierto".
}
Cierra el bloque de estilos para .faq-item[open] summary::after.
.faq-answer {
Define estilos para el contenido de la respuesta del FAQ (el contenido dentro de <details> que no es <summary>).
padding: 15px 20px 20px 23px; /* Ajuste de padding, quizás para alinear con el summary */
font-size: 0.95em;
color: var(--color-text-muted);
line-height: 1.7; /* Altura de línea para mejor legibilidad */
background-color: rgba(var(--color-background-rgb), 0.2);
border-bottom-left-radius: var(--border-radius-small);
border-bottom-right-radius: var(--border-radius-small);
Establece relleno, tamaño de fuente, color, altura de línea, color de fondo y redondea las esquinas inferiores.
}
Cierra el bloque de estilos para .faq-answer.
.faq-item[open] .faq-answer {
Define estilos adicionales para la respuesta cuando el ítem de FAQ está abierto.
margin-top:0;
padding-top: 20px;
Elimina el margen superior y ajusta el relleno superior.
}
Cierra el bloque de estilos para .faq-item[open] .faq-answer.
.faq-answer p {
Define estilos para los párrafos dentro de una respuesta de FAQ.
margin-bottom: 10px;
Añade margen inferior a los párrafos.
}
Cierra el bloque de estilos para .faq-answer p.
.faq-answer p:last-child {
Selecciona el último párrafo dentro de una respuesta de FAQ.
margin-bottom: 0;
Elimina el margen inferior del último párrafo.
}
Cierra el bloque de estilos para .faq-answer p:last-child.
.faq-answer .inline-link {
Define estilos para los enlaces en línea (.inline-link) dentro de una respuesta de FAQ.
color: var(--color-neon-accent);
text-decoration: underline;
font-weight: 500;
transition: color var(--transition-speed) ease, text-shadow var(--transition-speed) ease;
Establece el color, subraya el texto, aplica un grosor medio y transiciones suaves.
}
Cierra el bloque de estilos para .faq-answer .inline-link.
.faq-answer .inline-link:hover {
Define estilos para el estado hover de los enlaces en línea.
color: var(--color-neon-accent-darker);
text-decoration: none; /* Quita el subrayado */
text-shadow: 0 0 6px rgba(var(--color-neon-accent-rgb), 0.7); /* Añade un resplandor */
Cambia el color, quita el subrayado y añade una sombra de texto para un efecto de resplandor.
}
Cierra el bloque de estilos para .faq-answer .inline-link:hover.
.contact-support-section {
Define estilos para la sección de contacto con soporte.
padding: 30px;
border-radius: var(--border-radius-main);
text-align: center; /* Centra el contenido */
Establece relleno, esquinas redondeadas y centrado de texto. (Nota: este contenedor también tiene la clase neumorphic-inset-panel en el HTML).
}
Cierra el bloque de estilos para .contact-support-section.
.contact-support-title {
Define estilos para el título de la sección de contacto.
font-size: 1.5em;
color: var(--color-neon-accent);
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
Establece tamaño de fuente, color, margen y usa flexbox para alinear un icono con el texto del título.
}
Cierra el bloque de estilos para .contact-support-title.
.contact-support-section p {
Define estilos para el párrafo dentro de la sección de contacto.
color: var(--color-text-muted);
margin-bottom: 25px;
font-size: 1.05em;
Establece color, margen y tamaño de fuente.
}
Cierra el bloque de estilos para .contact-support-section p.
.contact-support-section .neumorphic-button {
Define estilos para el botón neumórfico dentro de la sección de contacto.
padding: 12px 25px;
display: inline-flex;
align-items: center;
gap: 10px;
Establece relleno y usa inline-flex para alinear el icono y el texto del botón con un espacio entre ellos.
}
Cierra el bloque de estilos para .contact-support-section .neumorphic-button.
.contact-support-section .neumorphic-button ion-icon {
Define estilos para los ion-icon dentro del botón de contacto.
font-size: 1.3em;
margin-bottom: 0;
Establece el tamaño del icono y elimina el margen inferior.
}
Cierra el bloque de estilos para .contact-support-section .neumorphic-button ion-icon.
.sr-only {
Define una clase de utilidad para ocultar contenido visualmente pero mantenerlo accesible para lectores de pantalla (sr = screen reader).
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
Conjunto de propiedades estándar para ocultar un elemento de forma accesible.
}
Cierra el bloque de estilos para .sr-only.
@media (max-width: 768px) {
Inicia un bloque de Media Query para pantallas con ancho máximo de 768px (tablets).
.search-help-container {
padding: 25px 20px;
}
Reduce el relleno del contenedor de búsqueda.
#helpSearchForm {
flex-direction: column;
align-items: stretch;
gap: 15px;
}
Apila verticalmente los elementos del formulario de búsqueda y los estira al ancho completo, ajustando el espacio.
#helpSearchForm input[type="search"] {
font-size: 1.1em;
padding: 18px 20px;
width: 100%; /* Asegura que ocupe todo el ancho si no lo hacía antes */
}
Ajusta el tamaño de fuente y relleno del campo de búsqueda, y asegura que ocupe todo el ancho.
#helpSearchForm .neumorphic-button {
width: 100%;
font-size: 1.1em;
padding-top: 18px;
padding-bottom: 18px;
gap: 10px;
}
Hace que el botón de búsqueda ocupe todo el ancho y ajusta su tamaño de fuente, relleno y espaciado interno.
#helpSearchForm .neumorphic-button ion-icon {
font-size: 1.3em;
}
Ajusta el tamaño del icono en el botón de búsqueda.
.faq-main-title {
font-size: 1.6em;
}
Reduce el tamaño de fuente del título principal de FAQs.
.faq-category-title {
font-size: 1.3em;
}
Reduce el tamaño de fuente de los títulos de categoría de FAQ.
.contact-support-title {
font-size: 1.4em;
}
Reduce el tamaño de fuente del título de la sección de contacto.
.faq-item summary {
font-size: 1em;
padding: 12px 15px;
}
Ajusta el tamaño de fuente y relleno de las preguntas de FAQ.
.faq-answer {
padding: 15px 15px 15px 18px;
}
Ajusta el relleno de las respuestas de FAQ.
}
Cierra el bloque @media (max-width: 768px).
@media (max-width: 480px) {
Inicia otro bloque de Media Query para pantallas aún más pequeñas, con un ancho máximo de 480 píxeles (móviles).
.search-help-container {
padding: 20px 15px;
}
Reduce aún más el relleno del contenedor de búsqueda.
#helpSearchForm input[type="search"] {
font-size: 1.05em;
padding: 16px 18px;
}
Ajusta el tamaño de fuente y relleno del campo de búsqueda para móviles.
#helpSearchForm .neumorphic-button {
font-size: 1.05em;
padding-top: 16px;
padding-bottom: 16px;
gap: 8px;
}
Ajusta el tamaño de fuente, relleno y espaciado interno del botón de búsqueda para móviles.
#helpSearchForm .neumorphic-button ion-icon {
font-size: 1.3em;
}
Mantiene o ajusta el tamaño del icono en el botón de búsqueda.
}
Cierra el bloque @media (max-width: 480px).login.html
A continuación, se presenta el código fuente del archivo login.html. Esta página es crucial para la plataforma "FINANZAS", ya que proporciona la interfaz para que los usuarios inicien sesión de forma segura en sus cuentas, con opciones para recordar sus datos y recuperar la contraseña si es necesario:
FINANZAS: Código de la Página de Inicio de Sesión (login.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Iniciar Sesión</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/login.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="index.html" class="logo">FINANZAS</a> </div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<a href="registrarse.html" class="neumorphic-button auth-header-btn">Crear Cuenta</a>
</div>
</header>
<main class="content login-page-container">
<div class="login-form-wrapper neumorphic-inset-panel">
<div class="form-header">
<ion-icon name="log-in-outline"></ion-icon>
<h2>Bienvenido de Nuevo</h2>
<p>Ingresa tus credenciales para acceder a tu cuenta.</p>
</div>
<form id="loginForm">
<div id="loginErrorMessage" class="error-message" style="display: none;"></div>
<div class="form-group">
<label for="loginEmail">Correo Electrónico:</label>
<input type="email" id="loginEmail" name="loginEmail" required placeholder="tu@email.com" autocomplete="email">
</div>
<div class="form-group">
<label for="loginPassword">Contraseña:</label>
<input type="password" id="loginPassword" name="loginPassword" required placeholder="Tu contraseña" autocomplete="current-password">
</div>
<div class="form-group form-options">
<div class="form-group-checkbox">
<input type="checkbox" id="rememberMe" name="rememberMe">
<label for="rememberMe">Recordarme</label>
</div>
<a href="recuperar-contrasena.html" class="form-link">¿Olvidaste tu contraseña?</a>
</div>
<button type="submit" class="neumorphic-button primary-action login-submit-btn">
<ion-icon name="enter-outline"></ion-icon> Iniciar Sesión
</button>
</form>
<div class="form-footer-links">
<p>¿No tienes una cuenta? <a href="registrarse.html" class="form-link">Regístrate aquí</a></p>
</div>
</div>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="index.html" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="acerca.html">Acerca de</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="currentYear"></span> FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/login.js"></script> </body>
</html>Explicación del código: FINANZAS: Código de la Página de Inicio de Sesión (login.html)
<!DOCTYPE html>
Declara el tipo de documento como HTML5, asegurando que el navegador interprete el código con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML. El atributo lang="es" especifica que el idioma principal del contenido de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Contiene metainformación, enlaces a hojas de estilo y el título de la página.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, esencial para mostrar correctamente caracteres especiales y acentos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" para un diseño responsivo, ajustando el ancho de la página al del dispositivo y estableciendo la escala inicial.
<title>Plataforma Financiera - Iniciar Sesión</title>
Establece el título de la página: "Plataforma Financiera - Iniciar Sesión", que se muestra en la pestaña del navegador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que contiene los estilos globales de la plataforma.
<link rel="stylesheet" href="css/pages/login.css">
Enlaza una hoja de estilos específica para la página de "Iniciar Sesión" (login.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts con varios grosores para usar en la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible de la página.
<header class="glassmorphic-header">
<div class="logo-container">
<a href="index.html" class="logo">FINANZAS</a> </div>
Define la cabecera principal con estilo "glassmorphic". Incluye el logo "FINANZAS" que enlaza a index.html (página principal para usuarios no autenticados).
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
Sección de navegación principal. Aunque se define una lista completa, en una página de login, esta podría estar oculta o simplificada para usuarios no autenticados.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
Lista de los ítems de navegación principales, que normalmente serían accesibles después de iniciar sesión.
<div class="header-actions">
<a href="registrarse.html" class="neumorphic-button auth-header-btn">Crear Cuenta</a>
</div>
</header>
Sección de acciones en la cabecera. Para la página de login, muestra un botón/enlace para "Crear Cuenta". Cierre de la cabecera.
<main class="content login-page-container">
Elemento principal (<main>) de la página, con clases para estilos generales de contenido y específicos de la página de login.
<div class="login-form-wrapper neumorphic-inset-panel">
Contenedor principal para el formulario de inicio de sesión, con estilos de panel neumórfico hundido.
<div class="form-header">
<ion-icon name="log-in-outline"></ion-icon>
<h2>Bienvenido de Nuevo</h2>
<p>Ingresa tus credenciales para acceder a tu cuenta.</p>
</div>
Cabecera del formulario, con un icono, un título de bienvenida y un párrafo instructivo.
<form id="loginForm">
Formulario (<form>) para el inicio de sesión del usuario.
<div id="loginErrorMessage" class="error-message" style="display: none;"></div>
Contenedor (div) para mostrar mensajes de error relacionados con el login, inicialmente oculto.
<div class="form-group">
<label for="loginEmail">Correo Electrónico:</label>
<input type="email" id="loginEmail" name="loginEmail" required placeholder="tu@email.com" autocomplete="email">
</div>
Grupo de formulario para el "Correo Electrónico". El campo de entrada es de tipo email, obligatorio y con un placeholder. autocomplete="email" ayuda al navegador a autocompletar.
<div class="form-group">
<label for="loginPassword">Contraseña:</label>
<input type="password" id="loginPassword" name="loginPassword" required placeholder="Tu contraseña" autocomplete="current-password">
</div>
Grupo de formulario para la "Contraseña". El campo es de tipo password, obligatorio y con placeholder. autocomplete="current-password" ayuda a los gestores de contraseñas.
<div class="form-group form-options">
<div class="form-group-checkbox">
<input type="checkbox" id="rememberMe" name="rememberMe">
<label for="rememberMe">Recordarme</label>
</div>
Grupo de formulario para opciones adicionales. Incluye una casilla de verificación para "Recordarme".
<a href="recuperar-contrasena.html" class="form-link">¿Olvidaste tu contraseña?</a>
</div>
Enlace para recuperar la contraseña, dentro del grupo de opciones del formulario.
<button type="submit" class="neumorphic-button primary-action login-submit-btn">
<ion-icon name="enter-outline"></ion-icon> Iniciar Sesión
</button>
</form>
Botón para enviar el formulario e "Iniciar Sesión", con un icono. Cierre del formulario.
<div class="form-footer-links">
<p>¿No tienes una cuenta? <a href="registrarse.html" class="form-link">Regístrate aquí</a></p>
</div>
</div> </main>
Pie del formulario con un enlace para que los nuevos usuarios se registren. Cierre del contenedor del formulario y del elemento `main`.
<footer class="site-footer">
Inicio del pie de página (<footer>), con una estructura que puede ser simplificada para páginas de autenticación.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="index.html" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
Contenedor del pie de página y su sección superior con el logo (enlazando a index.html) y descripción.
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="acerca.html">Acerca de</a></li>
</ul>
</div>
Sección de enlaces de "Navegación" en el pie de página, posiblemente simplificada para usuarios no autenticados.
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
</ul>
</div>
Sección de enlaces de "Información" en el pie de página.
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
</div>
</div>
Sección de "Contacto" en el pie de página. Cierre de `footer-top`.
<div class="footer-bottom">
<p>© <span id="currentYear"></span> FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página con copyright (el año se insertará dinámicamente mediante el `span` con `id="currentYear"`) y créditos de diseño. Cierre del pie de página.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza Ionicons para navegadores antiguos sin soporte para módulos ES.
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js, para la funcionalidad del menú (aunque su comportamiento puede ser diferente en la página de login).
<script src="js/login.js"></script>
Enlaza el archivo JavaScript local login.js, que contendrá la lógica específica para el proceso de inicio de sesión (validación del formulario, comunicación con el backend, etc.).
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.login.css
El siguiente bloque de código pertenece al archivo css/pages/login.css. Este archivo define los estilos visuales específicos para la página de "Iniciar Sesión", incluyendo la disposición del contenedor principal, el formulario de acceso, los mensajes de error y los enlaces, además de los ajustes responsivos necesarios:
login.css – Estilos de Página de Inicio de Sesión: Formulario, Contenedor y Adaptabilidad
.login-page-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--header-height) - 180px);
padding-top: 40px;
padding-bottom: 40px;
}
.login-form-wrapper {
padding: 30px 40px;
border-radius: var(--border-radius-main);
width: 100%;
max-width: 480px;
text-align: center;
}
.form-header {
margin-bottom: 30px;
}
.form-header ion-icon {
font-size: 3.5em;
color: var(--color-neon-accent);
margin-bottom: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}
.form-header h2 {
font-size: 1.8em;
color: var(--color-text);
margin-bottom: 8px;
font-weight: 600;
}
.form-header p {
font-size: 0.95em;
color: var(--color-text-muted);
}
#loginForm .form-group {
margin-bottom: 20px;
text-align: left;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
font-size: 0.9em;
}
.form-options .form-group-checkbox label {
font-weight: normal;
font-size: 1em;
}
.form-link {
color: var(--color-neon-accent);
text-decoration: none;
transition: color var(--transition-speed) ease;
}
.form-link:hover {
color: var(--color-neon-accent-darker);
text-decoration: underline;
}
.login-submit-btn {
width: 100%;
padding: 15px !important;
font-size: 1.1em !important;
margin-top: 10px;
}
.login-submit-btn ion-icon {
font-size: 1.3em !important;
margin-right: 8px;
margin-bottom: 0 !important;
}
.error-message {
background-color: rgba(255, 118, 117, 0.15);
color: #ff4d4d;
border: 1px solid #ff4d4d;
padding: 12px 15px;
border-radius: var(--border-radius-small);
margin-bottom: 20px;
font-size: 0.9em;
text-align: left;
}
.form-footer-links {
margin-top: 30px;
font-size: 0.9em;
color: var(--color-text-muted);
}
.auth-header-btn {
padding: 8px 15px !important;
font-size: 0.9em !important;
}
.auth-header-btn ion-icon {
display: none;
}
@media (max-width: 480px) {
.login-form-wrapper {
padding: 25px;
}
.form-header h2 {
font-size: 1.6em;
}
.form-options {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}Explicación del código: login.css – Estilos de Página de Inicio de Sesión: Formulario, Contenedor y Adaptabilidad
.login-page-container {
Define estilos para el contenedor principal de la página de inicio de sesión.
display: flex;
Establece el modo de visualización como flex, permitiendo una disposición flexible de sus elementos hijos (probablemente el formulario de login).
flex-direction: column;
Organiza los elementos hijos en una columna, apilándolos verticalmente.
align-items: center;
Centra los elementos hijos horizontalmente dentro del contenedor.
justify-content: center;
Centra los elementos hijos verticalmente dentro del contenedor.
min-height: calc(100vh - var(--header-height) - 180px); /* 180px es una altura aproximada del footer, ajustar */
Establece una altura mínima para el contenedor. 100vh representa el 100% de la altura de la ventana gráfica. Se resta la altura de la cabecera (definida por la variable --header-height) y una altura aproximada del pie de página (180px, que según el comentario se debe ajustar) para intentar centrar el formulario verticalmente en el espacio visible.
padding-top: 40px; /* Espacio desde el header */
Añade un relleno superior de 40 píxeles, creando espacio debajo de la cabecera.
padding-bottom: 40px; /* Espacio antes del footer */
Añade un relleno inferior de 40 píxeles, creando espacio antes del pie de página.
}
Cierra el bloque de estilos para la clase .login-page-container.
.login-form-wrapper {
Define estilos para el contenedor que envuelve el formulario de inicio de sesión.
padding: 30px 40px;
Añade un relleno interno: 30 píxeles arriba y abajo, y 40 píxeles a los lados.
border-radius: var(--border-radius-main);
Redondea las esquinas del contenedor del formulario utilizando la variable CSS --border-radius-main.
width: 100%;
Hace que el contenedor del formulario ocupe el 100% del ancho de su padre.
max-width: 480px; /* Ancho máximo del formulario */
Establece un ancho máximo de 480 píxeles para el contenedor del formulario, evitando que sea demasiado ancho en pantallas grandes.
text-align: center; /* Centra el .form-header y .form-footer-links */
Centra el texto y los elementos en línea (como el .form-header y .form-footer-links si son bloques en línea o se comportan como tal) dentro del contenedor del formulario.
}
Cierra el bloque de estilos para .login-form-wrapper.
.form-header {
Define estilos para la cabecera del formulario de inicio de sesión.
margin-bottom: 30px;
Añade un margen inferior de 30 píxeles, separándolo de los campos del formulario.
}
Cierra el bloque de estilos para .form-header.
.form-header ion-icon {
Define estilos para los ion-icon dentro de la cabecera del formulario.
font-size: 3.5em;
Establece un tamaño de fuente grande para el icono.
color: var(--color-neon-accent);
Utiliza el color de acento neón para el icono.
margin-bottom: 10px;
Añade un margen inferior al icono.
display: block; /* Para centrar el icono */
margin-left: auto;
margin-right: auto;
Convierte el icono en un elemento de bloque y usa márgenes automáticos a izquierda y derecha para centrarlo horizontalmente.
}
Cierra el bloque de estilos para .form-header ion-icon.
.form-header h2 {
Define estilos para el título <h2> (ej. "Bienvenido de Nuevo") dentro de la cabecera del formulario.
font-size: 1.8em;
Establece el tamaño de la fuente.
color: var(--color-text);
Utiliza el color de texto principal.
margin-bottom: 8px;
Añade un pequeño margen inferior.
font-weight: 600;
Aplica un grosor de fuente semi-negrita.
}
Cierra el bloque de estilos para .form-header h2.
.form-header p {
Define estilos para el párrafo descriptivo dentro de la cabecera del formulario.
font-size: 0.95em;
Establece el tamaño de la fuente.
color: var(--color-text-muted);
Utiliza un color de texto atenuado.
}
Cierra el bloque de estilos para .form-header p.
#loginForm .form-group {
Define estilos para los grupos de formulario (.form-group) específicamente dentro del formulario con id="loginForm".
margin-bottom: 20px;
Añade un margen inferior para separar los campos.
text-align: left;
Alinea el texto (incluyendo las etiquetas <label>) a la izquierda dentro de cada grupo de formulario.
}
Cierra el bloque de estilos para #loginForm .form-group.
.form-options {
Define estilos para el contenedor de opciones del formulario (como "Recordarme" y "¿Olvidaste tu contraseña?").
display: flex;
justify-content: space-between;
align-items: center;
Usa flexbox para alinear los elementos en una fila, con espacio entre ellos y centrados verticalmente.
margin-bottom: 25px;
Añade un margen inferior.
font-size: 0.9em;
Establece un tamaño de fuente base para el texto dentro de estas opciones.
}
Cierra el bloque de estilos para .form-options.
.form-options .form-group-checkbox label {
Define estilos específicos para las etiquetas (<label>) de los checkboxes dentro de .form-options.
font-weight: normal; /* Resetear si es necesario */
Asegura que el grosor de la fuente sea normal, reseteando cualquier negrita heredada.
font-size: 1em; /* Relativo al .form-options font-size */
Hace que el tamaño de la fuente de la etiqueta sea igual al de su contenedor padre (.form-options).
}
Cierra el bloque de estilos para .form-options .form-group-checkbox label.
.form-link {
Define estilos para los enlaces dentro del formulario (ej. "¿Olvidaste tu contraseña?").
color: var(--color-neon-accent);
Utiliza el color de acento neón para el texto del enlace.
text-decoration: none;
Elimina el subrayado por defecto de los enlaces.
transition: color var(--transition-speed) ease;
Aplica una transición suave al color del enlace cuando cambia (ej. en hover).
}
Cierra el bloque de estilos para .form-link.
.form-link:hover {
Define estilos para el estado hover (cuando el cursor está encima) de los enlaces del formulario.
color: var(--color-neon-accent-darker);
Cambia el color del enlace a una versión más oscura del acento neón.
text-decoration: underline;
Añade un subrayado al pasar el cursor.
}
Cierra el bloque de estilos para .form-link:hover.
.login-submit-btn {
Define estilos para el botón principal de envío del formulario de login.
width: 100%; /* Botón ocupa todo el ancho */
Hace que el botón ocupe todo el ancho disponible.
padding: 15px !important; /* Padding más grande para el botón principal */
Establece un relleno interno generoso. !important fuerza esta regla sobre otras.
font-size: 1.1em !important;
Establece un tamaño de fuente ligeramente mayor. !important fuerza la regla.
margin-top: 10px;
Añade un margen superior.
}
Cierra el bloque de estilos para .login-submit-btn.
.login-submit-btn ion-icon {
Define estilos para el ion-icon dentro del botón de inicio de sesión.
font-size: 1.3em !important; /* Ajustar tamaño del icono */
Establece el tamaño del icono. !important fuerza la regla.
margin-right: 8px;
Añade margen a la derecha del icono para separarlo del texto.
margin-bottom: 0 !important;
Elimina el margen inferior. !important fuerza la regla.
}
Cierra el bloque de estilos para .login-submit-btn ion-icon.
.error-message {
Define estilos para los mensajes de error que puedan aparecer en el formulario.
background-color: rgba(255, 118, 117, 0.15); /* Fondo rojo claro */
Establece un color de fondo rojo claro y semitransparente.
color: #ff4d4d; /* Texto rojo */
Establece el color del texto a un tono rojo.
border: 1px solid #ff4d4d;
Añade un borde de color rojo.
padding: 12px 15px;
Relleno interno.
border-radius: var(--border-radius-small);
Esquinas redondeadas.
margin-bottom: 20px;
Margen inferior para separarlo del resto del formulario.
font-size: 0.9em;
Tamaño de fuente.
text-align: left;
Alinea el texto del mensaje de error a la izquierda.
}
Cierra el bloque de estilos para .error-message.
.form-footer-links {
Define estilos para el contenedor de enlaces al pie del formulario (ej. "¿No tienes una cuenta?").
margin-top: 30px;
Añade un margen superior.
font-size: 0.9em;
Establece el tamaño de la fuente.
color: var(--color-text-muted);
Utiliza un color de texto atenuado.
}
Cierra el bloque de estilos para .form-footer-links.
.auth-header-btn {
Define estilos para los botones de autenticación en la cabecera.
padding: 8px 15px !important;
Establece un relleno más pequeño para estos botones. !important fuerza la regla.
font-size: 0.9em !important;
Establece un tamaño de fuente más pequeño. !important fuerza la regla.
}
Cierra el bloque de estilos para .auth-header-btn.
.auth-header-btn ion-icon { /* Si se añade icono */
Define estilos para los ion-icon si se añadieran a estos botones de cabecera.
display: none;
Oculta los iconos en estos botones (actualmente el botón "Crear Cuenta" en login.html no tiene icono).
}
Cierra el bloque de estilos para .auth-header-btn ion-icon.
@media (max-width: 480px) {
Inicia un bloque de Media Query que aplica los estilos anidados cuando el ancho de la ventana del navegador es de 480 píxeles o menos (típico para móviles).
.login-form-wrapper {
padding: 25px;
}
Reduce el relleno del contenedor del formulario de login en pantallas pequeñas.
.form-header h2 {
font-size: 1.6em;
}
Reduce el tamaño de fuente del título en la cabecera del formulario.
.form-options {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
En pantallas pequeñas, las opciones del formulario (Recordarme, Olvidaste contraseña) se apilan verticalmente (flex-direction: column), se alinean a la izquierda (align-items: flex-start) y se ajusta el espacio entre ellas.
}
Cierra el bloque @media (max-width: 480px).registrarse.html
A continuación, se presenta el código fuente del archivo registrarse.html. Esta página es fundamental en la plataforma "FINANZAS", ya que ofrece a los nuevos usuarios el formulario para crear su cuenta personal y comenzar a gestionar sus finanzas:
FINANZAS: Código de la Página de Creación de Cuenta (registrarse.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Crear Cuenta</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/registrarse.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="index.html" class="logo">FINANZAS</a> </div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<a href="login.html" class="neumorphic-button auth-header-btn">Iniciar Sesión</a>
</div>
</header>
<main class="content registrarse-page-container">
<div class="registrarse-form-wrapper neumorphic-inset-panel">
<div class="form-header">
<ion-icon name="person-add-outline"></ion-icon>
<h2>Crea tu Cuenta</h2>
<p>Comienza a tomar el control de tus finanzas hoy mismo.</p>
</div>
<form id="registerForm">
<div id="registerErrorMessage" class="error-message" style="display: none;"></div>
<div id="registerSuccessMessage" class="success-message" style="display: none;"></div>
<div class="form-group">
<label for="registerFullName">Nombre Completo:</label>
<input type="text" id="registerFullName" name="registerFullName" required placeholder="Tu nombre completo" autocomplete="name">
</div>
<div class="form-group">
<label for="registerEmail">Correo Electrónico:</label>
<input type="email" id="registerEmail" name="registerEmail" required placeholder="tu@email.com" autocomplete="email">
</div>
<div class="form-group">
<label for="registerPassword">Contraseña:</label>
<input type="password" id="registerPassword" name="registerPassword" required placeholder="Crea una contraseña segura" autocomplete="new-password">
<small class="form-text text-muted">Mínimo 8 caracteres, incluye mayúsculas, minúsculas y números.</small>
</div>
<div class="form-group">
<label for="registerConfirmPassword">Confirmar Contraseña:</label>
<input type="password" id="registerConfirmPassword" name="registerConfirmPassword" required placeholder="Confirma tu contraseña" autocomplete="new-password">
</div>
<div class="form-group form-group-checkbox">
<input type="checkbox" id="agreeTerms" name="agreeTerms" required>
<label for="agreeTerms">Acepto los <a href="terminos.html" class="form-link" target="_blank">Términos de Servicio</a> y la <a href="privacidad.html" class="form-link" target="_blank">Política de Privacidad</a>.</label>
</div>
<button type="submit" class="neumorphic-button primary-action register-submit-btn">
<ion-icon name="checkmark-done-outline"></ion-icon> Crear Cuenta
</button>
</form>
<div class="form-footer-links">
<p>¿Ya tienes una cuenta? <a href="login.html" class="form-link">Inicia Sesión aquí</a></p>
</div>
</div>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="index.html" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="acerca.html">Acerca de</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="currentYearRegister"></span> FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/registrarse.js"></script> </body>
</html>Explicación del código: FINANZAS: Código de la Página de Creación de Cuenta (registrarse.html)
<!DOCTYPE html>
Declara el tipo de documento como HTML5, asegurando que el navegador interprete el código con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML. El atributo lang="es" especifica que el idioma principal del contenido de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Contiene metainformación, enlaces a hojas de estilo y el título de la página.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, esencial para mostrar correctamente caracteres especiales y acentos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" para un diseño responsivo, ajustando el ancho de la página al del dispositivo y estableciendo la escala inicial.
<title>Plataforma Financiera - Crear Cuenta</title>
Establece el título de la página: "Plataforma Financiera - Crear Cuenta", que se muestra en la pestaña del navegador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que contiene los estilos globales de la plataforma.
<link rel="stylesheet" href="css/pages/registrarse.css">
Enlaza una hoja de estilos específica para la página de "Crear Cuenta" (registrarse.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts con varios grosores para usar en la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible de la página.
<header class="glassmorphic-header">
<div class="logo-container">
<a href="index.html" class="logo">FINANZAS</a> </div>
Define la cabecera principal con estilo "glassmorphic". Incluye el logo "FINANZAS" que enlaza a index.html (página principal para usuarios no autenticados).
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
Sección de navegación principal. Aunque se define una lista completa, en una página de registro, esta podría estar oculta o simplificada.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
Lista de los ítems de navegación principales, que normalmente serían accesibles después de iniciar sesión.
<div class="header-actions">
<a href="login.html" class="neumorphic-button auth-header-btn">Iniciar Sesión</a>
</div>
</header>
Sección de acciones en la cabecera. Para la página de registro, muestra un botón/enlace para "Iniciar Sesión" (para usuarios que ya tienen cuenta). Cierre de la cabecera.
<main class="content registrarse-page-container">
Elemento principal (<main>) de la página, con clases para estilos generales de contenido y específicos de la página de registro.
<div class="registrarse-form-wrapper neumorphic-inset-panel">
Contenedor principal para el formulario de registro, con estilos de panel neumórfico hundido.
<div class="form-header">
<ion-icon name="person-add-outline"></ion-icon>
<h2>Crea tu Cuenta</h2>
<p>Comienza a tomar el control de tus finanzas hoy mismo.</p>
</div>
Cabecera del formulario, con un icono, un título principal y un párrafo motivacional.
<form id="registerForm">
Formulario (<form>) para el registro de nuevos usuarios.
<div id="registerErrorMessage" class="error-message" style="display: none;"></div>
Contenedor (div) para mostrar mensajes de error relacionados con el registro, inicialmente oculto.
<div id="registerSuccessMessage" class="success-message" style="display: none;"></div>
Contenedor (div) para mostrar mensajes de éxito tras el registro, inicialmente oculto.
<div class="form-group">
<label for="registerFullName">Nombre Completo:</label>
<input type="text" id="registerFullName" name="registerFullName" required placeholder="Tu nombre completo" autocomplete="name">
</div>
Grupo de formulario para el "Nombre Completo". El campo de entrada es de tipo text, obligatorio (required) y con un placeholder. autocomplete="name" ayuda al navegador a autocompletar.
<div class="form-group">
<label for="registerEmail">Correo Electrónico:</label>
<input type="email" id="registerEmail" name="registerEmail" required placeholder="tu@email.com" autocomplete="email">
</div>
Grupo de formulario para el "Correo Electrónico". El campo es de tipo email, obligatorio y con placeholder. autocomplete="email" ayuda al autocompletado.
<div class="form-group">
<label for="registerPassword">Contraseña:</label>
<input type="password" id="registerPassword" name="registerPassword" required placeholder="Crea una contraseña segura" autocomplete="new-password">
<small class="form-text text-muted">Mínimo 8 caracteres, incluye mayúsculas, minúsculas y números.</small>
</div>
Grupo de formulario para la "Contraseña". El campo es de tipo password, obligatorio y con placeholder. autocomplete="new-password" sugiere al navegador que es un campo para una nueva contraseña. Se incluye un texto de ayuda (<small>) con los requisitos de la contraseña.
<div class="form-group">
<label for="registerConfirmPassword">Confirmar Contraseña:</label>
<input type="password" id="registerConfirmPassword" name="registerConfirmPassword" required placeholder="Confirma tu contraseña" autocomplete="new-password">
</div>
Grupo de formulario para "Confirmar Contraseña".
<div class="form-group form-group-checkbox">
<input type="checkbox" id="agreeTerms" name="agreeTerms" required>
<label for="agreeTerms">Acepto los <a href="terminos.html" class="form-link" target="_blank">Términos de Servicio</a> y la <a href="privacidad.html" class="form-link" target="_blank">Política de Privacidad</a>.</label>
</div>
Grupo de formulario con una casilla de verificación (checkbox) obligatoria para aceptar los "Términos de Servicio" y la "Política de Privacidad", con enlaces a dichos documentos.
<button type="submit" class="neumorphic-button primary-action register-submit-btn">
<ion-icon name="checkmark-done-outline"></ion-icon> Crear Cuenta
</button>
</form>
Botón para enviar el formulario y "Crear Cuenta", con un icono. Cierre del formulario.
<div class="form-footer-links">
<p>¿Ya tienes una cuenta? <a href="login.html" class="form-link">Inicia Sesión aquí</a></p>
</div>
</div> </main>
Pie del formulario con un enlace para que los usuarios que ya tienen cuenta inicien sesión. Cierre del contenedor del formulario y del elemento `main`.
<footer class="site-footer">
Inicio del pie de página (<footer>), con una estructura que puede ser simplificada para páginas de autenticación.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="index.html" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
Contenedor del pie de página y su sección superior con el logo (enlazando a index.html) y descripción.
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="acerca.html">Acerca de</a></li>
</ul>
</div>
Sección de enlaces de "Navegación" en el pie de página, simplificada.
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
</ul>
</div>
Sección de enlaces de "Información" en el pie de página.
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
</div>
</div>
Sección de "Contacto" en el pie de página. Cierre de `footer-top`.
<div class="footer-bottom">
<p>© <span id="currentYearRegister"></span> FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página con copyright (el año se insertará con el `span` `id="currentYearRegister"`) y créditos de diseño. Cierre del pie de página.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza Ionicons para navegadores antiguos sin soporte para módulos ES.
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js, para la funcionalidad del menú.
<script src="js/registrarse.js"></script>
Enlaza el archivo JavaScript local registrarse.js, que contendrá la lógica específica para el proceso de creación de cuenta.
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.registrarse.css
El siguiente bloque de código pertenece al archivo css/pages/registrarse.css. Este archivo define los estilos visuales específicos para la página de "Crear Cuenta", incluyendo la disposición del contenedor principal, el formulario de registro, los mensajes de estado y otros elementos de la interfaz, así como sus ajustes responsivos:
registrarse.css – Estilos de Página de Registro: Formulario, Contenedor y Mensajes
.registrarse-page-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--header-height) - 180px);
padding-top: 30px;
padding-bottom: 40px;
}
.registrarse-form-wrapper {
padding: 30px 40px;
border-radius: var(--border-radius-main);
width: 100%;
max-width: 520px;
text-align: center;
}
.registrarse-form-wrapper .form-header {
margin-bottom: 30px;
}
.registrarse-form-wrapper .form-header ion-icon {
font-size: 3.5em;
color: var(--color-neon-accent);
margin-bottom: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}
.registrarse-form-wrapper .form-header h2 {
font-size: 1.8em;
color: var(--color-text);
margin-bottom: 8px;
font-weight: 600;
}
.registrarse-form-wrapper .form-header p {
font-size: 0.95em;
color: var(--color-text-muted);
}
#registerForm .form-group {
margin-bottom: 18px;
text-align: left;
}
#registerForm .form-group-checkbox label {
font-size: 0.9em;
font-weight: normal;
color: var(--color-text-muted);
}
#registerForm .form-group-checkbox label a.form-link {
font-size: 1em;
}
.register-submit-btn {
width: 100%;
padding: 15px !important;
font-size: 1.1em !important;
margin-top: 20px;
}
.register-submit-btn ion-icon {
font-size: 1.3em !important;
margin-right: 8px;
margin-bottom: 0 !important;
}
.error-message, .success-message {
padding: 12px 15px;
border-radius: var(--border-radius-small);
margin-bottom: 20px;
font-size: 0.9em;
text-align: left;
}
.error-message {
background-color: rgba(255, 118, 117, 0.15);
color: #ff4d4d;
border: 1px solid #ff4d4d;
}
.success-message {
background-color: rgba(85, 239, 196, 0.15);
color: #00b894;
border: 1px solid #00b894;
}
.registrarse-form-wrapper .form-footer-links {
margin-top: 30px;
font-size: 0.9em;
color: var(--color-text-muted);
}
.form-link {
color: var(--color-neon-accent);
text-decoration: none;
transition: color var(--transition-speed) ease;
}
.form-link:hover {
color: var(--color-neon-accent-darker);
text-decoration: underline;
}
.auth-header-btn {
padding: 8px 15px !important;
font-size: 0.9em !important;
}
.auth-header-btn ion-icon {
display: none;
}
@media (max-width: 480px) {
.registrarse-form-wrapper {
padding: 25px;
}
.registrarse-form-wrapper .form-header h2 {
font-size: 1.6em;
}
}Explicación del código: registrarse.css – Estilos de Página de Registro: Formulario, Contenedor y Mensajes
.registrarse-page-container {
Define estilos para el contenedor principal de la página de registro.
display: flex;
Establece el modo de visualización como flex, permitiendo una disposición flexible de sus elementos hijos.
flex-direction: column;
Organiza los elementos hijos en una columna, apilándolos verticalmente.
align-items: center;
Centra los elementos hijos horizontalmente dentro del contenedor.
justify-content: center;
Centra los elementos hijos verticalmente dentro del contenedor.
min-height: calc(100vh - var(--header-height) - 180px);
Establece una altura mínima para el contenedor. 100vh es el 100% de la altura de la ventana gráfica; se resta la altura de la cabecera (--header-height) y una altura aproximada del pie de página (180px) para centrar el formulario en el espacio visible.
padding-top: 30px;
Añade un relleno superior de 30 píxeles, creando espacio debajo de la cabecera.
padding-bottom: 40px;
Añade un relleno inferior de 40 píxeles, creando espacio antes del pie de página.
}
Cierra el bloque de estilos para la clase .registrarse-page-container.
.registrarse-form-wrapper {
Define estilos para el contenedor que envuelve el formulario de registro.
padding: 30px 40px;
Añade un relleno interno: 30 píxeles arriba y abajo, y 40 píxeles a los lados.
border-radius: var(--border-radius-main);
Redondea las esquinas del contenedor del formulario utilizando la variable CSS --border-radius-main.
width: 100%;
Hace que el contenedor del formulario ocupe el 100% del ancho de su padre.
max-width: 520px;
Establece un ancho máximo de 520 píxeles para el contenedor del formulario.
text-align: center;
Centra el texto y los elementos en línea (como el .form-header y .form-footer-links) dentro del contenedor.
}
Cierra el bloque de estilos para .registrarse-form-wrapper. (Nota: Este contenedor también tiene la clase neumorphic-inset-panel aplicada en el HTML).
.registrarse-form-wrapper .form-header {
Define estilos para la cabecera (.form-header) dentro del contenedor del formulario de registro.
margin-bottom: 30px;
Añade un margen inferior de 30 píxeles, separándolo de los campos del formulario.
}
Cierra el bloque de estilos para .registrarse-form-wrapper .form-header.
.registrarse-form-wrapper .form-header ion-icon {
Define estilos para los ion-icon dentro de la cabecera del formulario de registro.
font-size: 3.5em;
Establece un tamaño de fuente grande para el icono.
color: var(--color-neon-accent);
Utiliza el color de acento neón para el icono.
margin-bottom: 10px;
Añade un margen inferior al icono.
display: block;
margin-left: auto;
margin-right: auto;
Convierte el icono en un elemento de bloque y usa márgenes automáticos a izquierda y derecha para centrarlo horizontalmente.
}
Cierra el bloque de estilos para .registrarse-form-wrapper .form-header ion-icon.
.registrarse-form-wrapper .form-header h2 {
Define estilos para el título <h2> (ej. "Crea tu Cuenta") dentro de la cabecera del formulario.
font-size: 1.8em;
color: var(--color-text);
margin-bottom: 8px;
font-weight: 600;
Establece tamaño de fuente, color de texto principal, margen inferior y grosor de fuente semi-negrita.
}
Cierra el bloque de estilos para .registrarse-form-wrapper .form-header h2.
.registrarse-form-wrapper .form-header p {
Define estilos para el párrafo descriptivo dentro de la cabecera del formulario.
font-size: 0.95em;
color: var(--color-text-muted);
Establece el tamaño de la fuente y utiliza un color de texto atenuado.
}
Cierra el bloque de estilos para .registrarse-form-wrapper .form-header p.
#registerForm .form-group {
Define estilos para los grupos de formulario (.form-group) específicamente dentro del formulario con id="registerForm".
margin-bottom: 18px;
Añade un margen inferior para separar los campos.
text-align: left;
Alinea el texto (incluyendo las etiquetas <label>) a la izquierda dentro de cada grupo de formulario.
}
Cierra el bloque de estilos para #registerForm .form-group.
#registerForm .form-group-checkbox label {
Define estilos para las etiquetas (<label>) de los checkboxes dentro del formulario de registro.
font-size: 0.9em;
font-weight: normal;
color: var(--color-text-muted);
Establece tamaño de fuente, grosor normal y color de texto atenuado.
}
Cierra el bloque de estilos para #registerForm .form-group-checkbox label.
#registerForm .form-group-checkbox label a.form-link {
Define estilos para los enlaces (<a> con clase form-link) dentro de las etiquetas de los checkboxes en el formulario de registro.
font-size: 1em;
Hace que el tamaño de la fuente del enlace sea igual al de su etiqueta padre.
}
Cierra el bloque de estilos para #registerForm .form-group-checkbox label a.form-link.
.register-submit-btn {
Define estilos para el botón principal de envío del formulario de registro.
width: 100%;
Hace que el botón ocupe todo el ancho disponible.
padding: 15px !important;
Establece un relleno interno generoso. !important fuerza esta regla sobre otras.
font-size: 1.1em !important;
Establece un tamaño de fuente ligeramente mayor. !important fuerza la regla.
margin-top: 20px;
Añade un margen superior.
}
Cierra el bloque de estilos para .register-submit-btn.
.register-submit-btn ion-icon {
Define estilos para el ion-icon dentro del botón de registro.
font-size: 1.3em !important;
margin-right: 8px;
margin-bottom: 0 !important;
Establece el tamaño del icono, un margen a su derecha, y elimina el margen inferior. !important fuerza las reglas.
}
Cierra el bloque de estilos para .register-submit-btn ion-icon.
.error-message, .success-message {
Define estilos comunes para los mensajes de error y de éxito.
padding: 12px 15px;
border-radius: var(--border-radius-small);
margin-bottom: 20px;
font-size: 0.9em;
text-align: left;
Establece relleno, esquinas redondeadas, margen inferior, tamaño de fuente y alineación de texto a la izquierda.
}
Cierra el bloque de estilos comunes para .error-message y .success-message.
.error-message {
Define estilos específicos para los mensajes de error.
background-color: rgba(255, 118, 117, 0.15);
color: #ff4d4d;
border: 1px solid #ff4d4d;
Establece un fondo rojo claro semitransparente, texto rojo y borde rojo.
}
Cierra el bloque de estilos para .error-message.
.success-message {
Define estilos específicos para los mensajes de éxito.
background-color: rgba(85, 239, 196, 0.15);
color: #00b894;
border: 1px solid #00b894;
Establece un fondo verde claro semitransparente, texto verde y borde verde.
}
Cierra el bloque de estilos para .success-message.
.registrarse-form-wrapper .form-footer-links {
Define estilos para el contenedor de enlaces al pie del formulario de registro.
margin-top: 30px;
font-size: 0.9em;
color: var(--color-text-muted);
Añade margen superior, y establece tamaño de fuente y color de texto.
}
Cierra el bloque de estilos para .registrarse-form-wrapper .form-footer-links.
.form-link {
Define estilos generales para los enlaces de formulario (reutilizados también en login.css).
color: var(--color-neon-accent);
text-decoration: none;
transition: color var(--transition-speed) ease;
Establece el color de acento neón, quita el subrayado y aplica una transición suave al color.
}
Cierra el bloque de estilos para .form-link.
.form-link:hover {
Define estilos para el estado hover de los enlaces de formulario.
color: var(--color-neon-accent-darker);
text-decoration: underline;
Cambia el color a una versión más oscura del acento neón y añade un subrayado.
}
Cierra el bloque de estilos para .form-link:hover.
.auth-header-btn {
Define estilos para los botones de autenticación en la cabecera (reutilizados de login.css).
padding: 8px 15px !important;
font-size: 0.9em !important;
Establece relleno y tamaño de fuente más pequeños para estos botones. !important fuerza las reglas.
}
Cierra el bloque de estilos para .auth-header-btn.
.auth-header-btn ion-icon {
Define estilos para los ion-icon si se usaran dentro de estos botones de cabecera.
display: none;
Oculta los iconos en estos botones.
}
Cierra el bloque de estilos para .auth-header-btn ion-icon.
@media (max-width: 480px) {
Inicia un bloque de Media Query que aplica los estilos anidados cuando el ancho de la ventana del navegador es de 480 píxeles o menos (típico para móviles).
.registrarse-form-wrapper {
padding: 25px;
}
Reduce el relleno del contenedor del formulario de registro en pantallas pequeñas.
.registrarse-form-wrapper .form-header h2 {
font-size: 1.6em;
}
Reduce el tamaño de fuente del título en la cabecera del formulario.
}
Cierra el bloque @media (max-width: 480px).recuperar-contrasena.html
A continuación, se presenta el código fuente del archivo recuperar-contrasena.html. Esta página de la plataforma "FINANZAS" está diseñada para ayudar a los usuarios que han olvidado su contraseña, guiándolos a través del proceso para solicitar un enlace de recuperación a su correo electrónico:
FINANZAS: Código de la Página de Recuperación de Contraseña (recuperar-contrasena.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma Financiera - Recuperar Contraseña</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/pages/recuperar-contrasena.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="glassmorphic-header">
<div class="logo-container">
<a href="index.html" class="logo">FINANZAS</a>
</div>
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
<div class="header-actions">
<a href="login.html" class="neumorphic-button auth-header-btn">Iniciar Sesión</a>
<a href="registrarse.html" class="neumorphic-button auth-header-btn" style="margin-left: 10px;">Crear Cuenta</a>
</div>
</header>
<main class="content recuperar-page-container">
<div class="recuperar-form-wrapper neumorphic-inset-panel">
<div class="form-header">
<ion-icon name="keypad-outline"></ion-icon>
<h2>Recuperar Contraseña</h2>
<p>Ingresa tu correo electrónico asociado a tu cuenta. Te enviaremos un enlace para restablecer tu contraseña.</p>
</div>
<form id="recoverPasswordForm">
<div id="recoverErrorMessage" class="error-message" style="display: none;"></div>
<div id="recoverSuccessMessage" class="success-message" style="display: none;"></div>
<div class="form-group">
<label for="recoverEmail">Correo Electrónico:</label>
<input type="email" id="recoverEmail" name="recoverEmail" required placeholder="tu@email.com" autocomplete="email">
</div>
<button type="submit" class="neumorphic-button primary-action recover-submit-btn">
<ion-icon name="send-outline"></ion-icon> Enviar Enlace de Recuperación
</button>
</form>
<div class="form-footer-links">
<p><a href="login.html" class="form-link"><ion-icon name="arrow-back-circle-outline"></ion-icon> Volver a Iniciar Sesión</a></p>
</div>
</div>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="index.html" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="acerca.html">Acerca de</a></li>
</ul>
</div>
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="currentYearRecover"></span> FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="js/navigation.js"></script> <script src="js/recuperar-contrasena.js"></script> </body>
</html>Explicación del código: FINANZAS: Código de la Página de Recuperación de Contraseña (recuperar-contrasena.html)
<!DOCTYPE html>
Declara el tipo de documento como HTML5, asegurando que el navegador interprete el código con los estándares más actuales y compatibles.
<html lang="es">
Elemento raíz del documento HTML. El atributo lang="es" especifica que el idioma principal del contenido de la página es español.
<head>
Inicia la sección de cabecera (<head>) del documento. Contiene metainformación, enlaces a hojas de estilo y el título de la página.
<meta charset="UTF-8">
Define la codificación de caracteres del documento como UTF-8, esencial para mostrar correctamente caracteres especiales y acentos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el "viewport" para un diseño responsivo, ajustando el ancho de la página al del dispositivo y estableciendo la escala inicial.
<title>Plataforma Financiera - Recuperar Contraseña</title>
Establece el título de la página: "Plataforma Financiera - Recuperar Contraseña", que se muestra en la pestaña del navegador.
<link rel="stylesheet" href="css/style.css">
Enlaza la hoja de estilos principal (style.css), que contiene los estilos globales de la plataforma.
<link rel="stylesheet" href="css/pages/recuperar-contrasena.css">
Enlaza una hoja de estilos específica para la página de "Recuperar Contraseña" (recuperar-contrasena.css), aplicando estilos particulares a esta sección.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Importa la familia de fuentes "Poppins" desde Google Fonts con varios grosores para usar en la página.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible de la página.
<header class="glassmorphic-header">
<div class="logo-container">
<a href="index.html" class="logo">FINANZAS</a>
</div>
Define la cabecera principal con estilo "glassmorphic". Incluye el logo "FINANZAS" que enlaza a index.html (página principal para usuarios no autenticados).
<nav class="main-nav">
<div class="hamburger-menu">
<ion-icon name="menu-outline"></ion-icon>
</div>
<ul id="nav-menu-list">
Sección de navegación principal. Aunque se define una lista completa, en una página de recuperación de contraseña, esta podría estar oculta o simplificada.
<li><a href="dashboard.html#dashboard" class="nav-item"><ion-icon name="grid-outline"></ion-icon><span>Dashboard</span></a></li>
<li><a href="cuentas.html#cuentas" class="nav-item"><ion-icon name="wallet-outline"></ion-icon><span>Cuentas</span></a></li>
<li><a href="gastos.html#gastos" class="nav-item"><ion-icon name="cart-outline"></ion-icon><span>Gastos</span></a></li>
<li><a href="inversiones.html#inversiones" class="nav-item"><ion-icon name="analytics-outline"></ion-icon><span>Inversiones</span></a></li>
<li><a href="presupuestos.html#presupuestos" class="nav-item"><ion-icon name="stats-chart-outline"></ion-icon><span>Presupuestos</span></a></li>
<li><a href="reportes.html#reportes" class="nav-item"><ion-icon name="document-text-outline"></ion-icon><span>Reportes</span></a></li>
<li><a href="configuracion.html#configuracion" class="nav-item"><ion-icon name="settings-outline"></ion-icon><span>Configuración</span></a></li>
</ul>
</nav>
Lista de los ítems de navegación principales, que normalmente serían accesibles después de iniciar sesión.
<div class="header-actions">
<a href="login.html" class="neumorphic-button auth-header-btn">Iniciar Sesión</a>
<a href="registrarse.html" class="neumorphic-button auth-header-btn" style="margin-left: 10px;">Crear Cuenta</a>
</div>
</header>
Sección de acciones en la cabecera. Para la página de recuperación de contraseña, muestra botones/enlaces para "Iniciar Sesión" y "Crear Cuenta". Cierre de la cabecera.
<main class="content recuperar-page-container">
Elemento principal (<main>) de la página, con clases para estilos generales de contenido y específicos de la página de recuperación de contraseña.
<div class="recuperar-form-wrapper neumorphic-inset-panel">
Contenedor principal para el formulario de recuperación, con estilos de panel neumórfico hundido.
<div class="form-header">
<ion-icon name="keypad-outline"></ion-icon>
<h2>Recuperar Contraseña</h2>
<p>Ingresa tu correo electrónico asociado a tu cuenta. Te enviaremos un enlace para restablecer tu contraseña.</p>
</div>
Cabecera del formulario, con un icono, un título principal y un párrafo instructivo.
<form id="recoverPasswordForm">
Formulario (<form>) para el proceso de recuperación de contraseña.
<div id="recoverErrorMessage" class="error-message" style="display: none;"></div>
Contenedor (div) para mostrar mensajes de error relacionados con la recuperación, inicialmente oculto.
<div id="recoverSuccessMessage" class="success-message" style="display: none;"></div>
Contenedor (div) para mostrar mensajes de éxito (ej. enlace enviado), inicialmente oculto.
<div class="form-group">
<label for="recoverEmail">Correo Electrónico:</label>
<input type="email" id="recoverEmail" name="recoverEmail" required placeholder="tu@email.com" autocomplete="email">
</div>
Grupo de formulario para ingresar el "Correo Electrónico" del usuario. El campo es de tipo email, obligatorio (required) y con un placeholder. autocomplete="email" ayuda al navegador a autocompletar.
<button type="submit" class="neumorphic-button primary-action recover-submit-btn">
<ion-icon name="send-outline"></ion-icon> Enviar Enlace de Recuperación
</button>
</form>
Botón para enviar el formulario y solicitar el enlace de recuperación, con un icono. Cierre del formulario.
<div class="form-footer-links">
<p><a href="login.html" class="form-link"><ion-icon name="arrow-back-circle-outline"></ion-icon> Volver a Iniciar Sesión</a></p>
</div>
</div> </main>
Pie del formulario con un enlace para que los usuarios vuelvan a la página de inicio de sesión. Cierre del contenedor del formulario y del elemento `main`.
<footer class="site-footer">
Inicio del pie de página (<footer>), con una estructura que puede ser simplificada para páginas de autenticación.
<div class="footer-container">
<div class="footer-top">
<div class="footer-about">
<a href="index.html" class="footer-logo">FINANZAS</a>
<p>Tu plataforma de gestión financiera personal, diseñada para ayudarte a tomar el control de tus ingresos, gastos e inversiones de forma inteligente.</p>
</div>
Contenedor del pie de página y su sección superior con el logo (enlazando a index.html) y descripción.
<div class="footer-links-section">
<h4>Navegación</h4>
<ul>
<li><a href="dashboard.html#dashboard">Dashboard</a></li>
<li><a href="acerca.html">Acerca de</a></li>
</ul>
</div>
Sección de enlaces de "Navegación" en el pie de página, simplificada.
<div class="footer-links-section">
<h4>Información</h4>
<ul>
<li><a href="privacidad.html">Política de Privacidad</a></li>
<li><a href="terminos.html">Términos de Servicio</a></li>
<li><a href="ayuda.html">Centro de Ayuda</a></li>
</ul>
</div>
Sección de enlaces de "Información" en el pie de página.
<div class="footer-contact">
<h4>Contacto</h4>
<p><ion-icon name="mail-outline"></ion-icon> info@finanzasplatform.com</p>
</div>
</div>
Sección de "Contacto" en el pie de página. Cierre de `footer-top`.
<div class="footer-bottom">
<p>© <span id="currentYearRecover"></span> FINANZAS | Plataforma de Gestión Financiera. Todos los derechos reservados.</p>
<p>Diseñado por Juan Felipe Orozco Cortes.</p>
</div>
</div> </footer>
Parte inferior del pie de página con copyright (el año se insertará con el `span` `id="currentYearRecover"`) y créditos de diseño. Cierre del pie de página.
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
Enlaza la biblioteca de iconos Ionicons (versión módulo ES) desde un CDN.
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Enlaza Ionicons para navegadores antiguos sin soporte para módulos ES.
<script src="js/navigation.js"></script>
Enlaza el archivo JavaScript local navigation.js, para la funcionalidad del menú.
<script src="js/recuperar-contrasena.js"></script>
Enlaza el archivo JavaScript local recuperar-contrasena.js, que contendrá la lógica específica para el proceso de recuperación de contraseña.
</body>
</html>
Cierre de la etiqueta <body> y de la etiqueta raíz <html>, finalizando el documento HTML.recuperar-contrasena.css
El siguiente bloque de código pertenece al archivo css/pages/recuperar-contrasena.css. Este archivo define los estilos visuales específicos para la página de "Recuperar Contraseña", incluyendo la disposición del contenedor principal, el formulario de solicitud, los mensajes informativos y los enlaces, además de sus ajustes para diferentes tamaños de pantalla:
recuperar-contrasena.css – Estilos de Recuperación de Contraseña: Formulario y Mensajes
.recuperar-page-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--header-height) - 180px);
padding-top: 40px;
padding-bottom: 40px;
}
.recuperar-form-wrapper {
padding: 30px 40px;
border-radius: var(--border-radius-main);
width: 100%;
max-width: 480px;
text-align: center;
}
.recuperar-form-wrapper .form-header {
margin-bottom: 30px;
}
.recuperar-form-wrapper .form-header ion-icon {
font-size: 3.5em;
color: var(--color-neon-accent);
margin-bottom: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}
.recuperar-form-wrapper .form-header h2 {
font-size: 1.8em;
color: var(--color-text);
margin-bottom: 8px;
font-weight: 600;
}
.recuperar-form-wrapper .form-header p {
font-size: 0.95em;
color: var(--color-text-muted);
line-height: 1.5;
}
#recoverPasswordForm .form-group {
margin-bottom: 25px;
text-align: left;
}
.recover-submit-btn {
width: 100%;
padding: 15px !important;
font-size: 1.1em !important;
margin-top: 10px;
}
.recover-submit-btn ion-icon {
font-size: 1.3em !important;
margin-right: 8px;
margin-bottom: 0 !important;
}
.error-message, .success-message {
padding: 12px 15px;
border-radius: var(--border-radius-small);
margin-bottom: 20px;
font-size: 0.9em;
text-align: left;
}
.error-message {
background-color: rgba(255, 118, 117, 0.15);
color: #ff4d4d;
border: 1px solid #ff4d4d;
}
.success-message {
background-color: rgba(var(--color-neon-accent-rgb), 0.1);
color: var(--color-neon-accent);
border: 1px solid var(--color-neon-accent);
}
.recuperar-form-wrapper .form-footer-links {
margin-top: 30px;
font-size: 0.9em;
}
.recuperar-form-wrapper .form-footer-links a {
display: inline-flex;
align-items: center;
gap: 5px;
}
.form-link {
color: var(--color-neon-accent);
text-decoration: none;
transition: color var(--transition-speed) ease;
}
.form-link:hover {
color: var(--color-neon-accent-darker);
text-decoration: underline;
}
.auth-header-btn {
padding: 8px 15px !important;
font-size: 0.9em !important;
}
.auth-header-btn ion-icon {
display: none;
}
@media (max-width: 480px) {
.recuperar-form-wrapper {
padding: 25px;
}
.recuperar-form-wrapper .form-header h2 {
font-size: 1.6em;
}
}Explicación del código: recuperar-contrasena.css – Estilos de Recuperación de Contraseña: Formulario y Mensajes
.recuperar-page-container {
Define estilos para el contenedor principal de la página de recuperación de contraseña.
display: flex;
Establece el modo de visualización como flex, permitiendo una disposición flexible de sus elementos hijos.
flex-direction: column;
Organiza los elementos hijos en una columna, apilándolos verticalmente.
align-items: center;
Centra los elementos hijos horizontalmente dentro del contenedor.
justify-content: center;
Centra los elementos hijos verticalmente dentro del contenedor.
min-height: calc(100vh - var(--header-height) - 180px);
Establece una altura mínima para el contenedor. 100vh es el 100% de la altura de la ventana gráfica; se resta la altura de la cabecera (--header-height) y una altura aproximada del pie de página (180px) para centrar el formulario en el espacio visible.
padding-top: 40px;
Añade un relleno superior de 40 píxeles, creando espacio debajo de la cabecera.
padding-bottom: 40px;
Añade un relleno inferior de 40 píxeles, creando espacio antes del pie de página.
}
Cierra el bloque de estilos para la clase .recuperar-page-container.
.recuperar-form-wrapper {
Define estilos para el contenedor que envuelve el formulario de recuperación de contraseña.
padding: 30px 40px;
Añade un relleno interno: 30 píxeles arriba y abajo, y 40 píxeles a los lados.
border-radius: var(--border-radius-main);
Redondea las esquinas del contenedor del formulario utilizando la variable CSS --border-radius-main.
width: 100%;
Hace que el contenedor del formulario ocupe el 100% del ancho de su padre.
max-width: 480px;
Establece un ancho máximo de 480 píxeles para el contenedor del formulario.
text-align: center;
Centra el texto y los elementos en línea (como el .form-header y .form-footer-links) dentro del contenedor.
}
Cierra el bloque de estilos para .recuperar-form-wrapper. (Nota: Este contenedor también tiene la clase neumorphic-inset-panel aplicada en el HTML).
.recuperar-form-wrapper .form-header {
Define estilos para la cabecera (.form-header) dentro del contenedor del formulario de recuperación.
margin-bottom: 30px;
Añade un margen inferior de 30 píxeles, separándolo de los campos del formulario.
}
Cierra el bloque de estilos para .recuperar-form-wrapper .form-header.
.recuperar-form-wrapper .form-header ion-icon {
Define estilos para los ion-icon dentro de la cabecera del formulario de recuperación.
font-size: 3.5em;
Establece un tamaño de fuente grande para el icono.
color: var(--color-neon-accent);
Utiliza el color de acento neón para el icono.
margin-bottom: 10px;
Añade un margen inferior al icono.
display: block;
margin-left: auto;
margin-right: auto;
Convierte el icono en un elemento de bloque y usa márgenes automáticos a izquierda y derecha para centrarlo horizontalmente.
}
Cierra el bloque de estilos para .recuperar-form-wrapper .form-header ion-icon.
.recuperar-form-wrapper .form-header h2 {
Define estilos para el título <h2> (ej. "Recuperar Contraseña") dentro de la cabecera del formulario.
font-size: 1.8em;
color: var(--color-text);
margin-bottom: 8px;
font-weight: 600;
Establece tamaño de fuente, color de texto principal, margen inferior y grosor de fuente semi-negrita.
}
Cierra el bloque de estilos para .recuperar-form-wrapper .form-header h2.
.recuperar-form-wrapper .form-header p {
Define estilos para el párrafo descriptivo dentro de la cabecera del formulario.
font-size: 0.95em;
color: var(--color-text-muted);
line-height: 1.5;
Establece el tamaño de la fuente, utiliza un color de texto atenuado y ajusta la altura de línea para mejor legibilidad.
}
Cierra el bloque de estilos para .recuperar-form-wrapper .form-header p.
#recoverPasswordForm .form-group {
Define estilos para los grupos de formulario (.form-group) específicamente dentro del formulario con id="recoverPasswordForm".
margin-bottom: 25px;
Añade un margen inferior para separar los campos.
text-align: left;
Alinea el texto (incluyendo las etiquetas <label>) a la izquierda dentro de cada grupo de formulario.
}
Cierra el bloque de estilos para #recoverPasswordForm .form-group.
.recover-submit-btn {
Define estilos para el botón principal de envío del formulario de recuperación.
width: 100%;
Hace que el botón ocupe todo el ancho disponible.
padding: 15px !important;
Establece un relleno interno generoso. !important fuerza esta regla sobre otras.
font-size: 1.1em !important;
Establece un tamaño de fuente ligeramente mayor. !important fuerza la regla.
margin-top: 10px;
Añade un margen superior.
}
Cierra el bloque de estilos para .recover-submit-btn.
.recover-submit-btn ion-icon {
Define estilos para el ion-icon dentro del botón de enviar enlace de recuperación.
font-size: 1.3em !important;
margin-right: 8px;
margin-bottom: 0 !important;
Establece el tamaño del icono, un margen a su derecha, y elimina el margen inferior. !important fuerza las reglas.
}
Cierra el bloque de estilos para .recover-submit-btn ion-icon.
.error-message, .success-message {
Define estilos comunes para los mensajes de error y de éxito.
padding: 12px 15px;
border-radius: var(--border-radius-small);
margin-bottom: 20px;
font-size: 0.9em;
text-align: left;
Establece relleno, esquinas redondeadas, margen inferior, tamaño de fuente y alineación de texto a la izquierda.
}
Cierra el bloque de estilos comunes para .error-message y .success-message.
.error-message {
Define estilos específicos para los mensajes de error.
background-color: rgba(255, 118, 117, 0.15);
color: #ff4d4d;
border: 1px solid #ff4d4d;
Establece un fondo rojo claro semitransparente, texto rojo y borde rojo.
}
Cierra el bloque de estilos para .error-message.
.success-message {
Define estilos específicos para los mensajes de éxito.
background-color: rgba(var(--color-neon-accent-rgb), 0.1);
color: var(--color-neon-accent);
border: 1px solid var(--color-neon-accent);
Establece un fondo semitransparente con el color de acento neón, texto del mismo color y borde del mismo color.
}
Cierra el bloque de estilos para .success-message.
.recuperar-form-wrapper .form-footer-links {
Define estilos para el contenedor de enlaces al pie del formulario de recuperación.
margin-top: 30px;
font-size: 0.9em;
Añade margen superior y establece el tamaño de la fuente. (El color es heredado o definido en otra regla general para .form-footer-links).
}
Cierra el bloque de estilos para .recuperar-form-wrapper .form-footer-links.
.recuperar-form-wrapper .form-footer-links a {
Define estilos para los enlaces (<a>) dentro del pie del formulario de recuperación.
display: inline-flex;
align-items: center;
gap: 5px;
Usa inline-flex para alinear un icono (si lo tuviera) con el texto del enlace, con un espacio de 5px entre ellos.
}
Cierra el bloque de estilos para .recuperar-form-wrapper .form-footer-links a.
.form-link {
Define estilos generales para los enlaces de formulario (reutilizados también en otras páginas de autenticación).
color: var(--color-neon-accent);
text-decoration: none;
transition: color var(--transition-speed) ease;
Establece el color de acento neón, quita el subrayado y aplica una transición suave al color.
}
Cierra el bloque de estilos para .form-link.
.form-link:hover {
Define estilos para el estado hover de los enlaces de formulario.
color: var(--color-neon-accent-darker);
text-decoration: underline;
Cambia el color a una versión más oscura del acento neón y añade un subrayado.
}
Cierra el bloque de estilos para .form-link:hover.
.auth-header-btn {
Define estilos para los botones de autenticación en la cabecera (reutilizados).
padding: 8px 15px !important;
font-size: 0.9em !important;
Establece relleno y tamaño de fuente más pequeños para estos botones. !important fuerza las reglas.
}
Cierra el bloque de estilos para .auth-header-btn.
.auth-header-btn ion-icon {
Define estilos para los ion-icon si se usaran dentro de estos botones de cabecera.
display: none;
Oculta los iconos en estos botones.
}
Cierra el bloque de estilos para .auth-header-btn ion-icon.
@media (max-width: 480px) {
Inicia un bloque de Media Query que aplica los estilos anidados cuando el ancho de la ventana del navegador es de 480 píxeles o menos (típico para móviles).
.recuperar-form-wrapper {
padding: 25px;
}
Reduce el relleno del contenedor del formulario de recuperación en pantallas pequeñas.
.recuperar-form-wrapper .form-header h2 {
font-size: 1.6em;
}
Reduce el tamaño de fuente del título en la cabecera del formulario.
}
Cierra el bloque @media (max-width: 480px).Estás viendo solo el 60% del contenido. Hazte Premium para acceder al tutorial completo.
Comentarios y valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!