/* ======================================
   Sistema de Finanzas — Custom Styles
   Premium dark theme with glassmorphism
   Emerald/Green palette
   ====================================== */

/* === CSS Custom Properties === */
:root {
    --primary-400: #34d399;
    --primary-500: #10b981;
    --primary-600: #059669;
    --primary-700: #047857;
    --accent-400: #a78bfa;
    --accent-500: #8b5cf6;
    --income-color: #34d399;
    --income-bg: rgba(52, 211, 153, 0.15);
    --income-border: rgba(52, 211, 153, 0.3);
    --expense-color: #fb7185;
    --expense-bg: rgba(251, 113, 133, 0.15);
    --expense-border: rgba(251, 113, 133, 0.3);
    --glass-bg: rgba(30, 41, 59, 0.5);
    --glass-bg-hover: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(148, 163, 184, 0.1);
    --glass-border-hover: rgba(16, 185, 129, 0.3);
}

/* === Glassmorphism Card === */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.glass-card-static {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
}

/* === Glassmorphism Navbar === */
.glass-nav {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
}

/* === Glassmorphism Input === */
.glass-input {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.75rem;
    color: #f1f5f9;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    width: 100%;
    font-size: 0.95rem;
}

.glass-input:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    background: rgba(30, 41, 59, 0.8);
}

.glass-input::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

/* === Glass Textarea === */
.glass-textarea {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.75rem;
    color: #f1f5f9;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    width: 100%;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 80px;
}

.glass-textarea:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    background: rgba(30, 41, 59, 0.8);
}

/* === Glass Select === */
.glass-select {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.75rem;
    color: #f1f5f9;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    width: 100%;
    font-size: 0.95rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

.glass-select:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.glass-select option {
    background: #1e293b;
    color: #f1f5f9;
}

/* === Buttons === */
.btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-secondary {
    background: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-secondary:hover {
    background: rgba(71, 85, 105, 0.8);
    border-color: rgba(148, 163, 184, 0.4);
}

.btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
}

/* === Type Toggle === */
.type-toggle {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.type-toggle label {
    flex: 1;
    text-align: center;
    padding: 0.65rem 1.25rem;
    border-radius: 0.6rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    color: #94a3b8;
}

.type-toggle input[type="radio"] {
    display: none;
}

.type-toggle input[value="ingreso"]:checked + label {
    background: var(--income-bg);
    color: var(--income-color);
    border: 1px solid var(--income-border);
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.15);
}

.type-toggle input[value="gasto"]:checked + label {
    background: var(--expense-bg);
    color: var(--expense-color);
    border: 1px solid var(--expense-border);
    box-shadow: 0 0 15px rgba(251, 113, 133, 0.15);
}

/* === Animations === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }
}

@keyframes countUp {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

.animate-slide-down {
    animation: slideDown 0.3s ease-out forwards;
}

.animate-count-up {
    animation: countUp 0.4s ease-out forwards;
}

/* Stagger animation delays for cards */
.stagger-1 { animation-delay: 0.05s; opacity: 0; }
.stagger-2 { animation-delay: 0.1s; opacity: 0; }
.stagger-3 { animation-delay: 0.15s; opacity: 0; }
.stagger-4 { animation-delay: 0.2s; opacity: 0; }

/* === Glass Table === */
.glass-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.glass-table thead th {
    background: rgba(15, 23, 42, 0.6);
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.glass-table thead th:first-child {
    border-radius: 0.75rem 0 0 0;
}

.glass-table thead th:last-child {
    border-radius: 0 0.75rem 0 0;
}

.glass-table tbody tr {
    transition: all 0.2s ease;
}

.glass-table tbody tr:hover {
    background: rgba(16, 185, 129, 0.05);
}

.glass-table tbody td {
    padding: 0.875rem 1rem;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    font-size: 0.9rem;
}

/* === Badges === */
.badge-income {
    background: var(--income-bg);
    color: var(--income-color);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--income-border);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.badge-expense {
    background: var(--expense-bg);
    color: var(--expense-color);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--expense-border);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.badge-category {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid rgba(99, 102, 241, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.badge-account {
    background: rgba(56, 189, 248, 0.15);
    color: #7dd3fc;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid rgba(56, 189, 248, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* === Amount Display === */
.amount-income {
    color: var(--income-color);
    font-weight: 700;
}

.amount-expense {
    color: var(--expense-color);
    font-weight: 700;
}

/* === Toast Notification === */
.toast {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 500;
    animation: slideDown 0.3s ease-out, fadeIn 0.3s ease-out;
    max-width: 400px;
}

.toast-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
    backdrop-filter: blur(12px);
}

.toast-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    backdrop-filter: blur(12px);
}

/* === Custom Scrollbar === */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* === Modal Overlay === */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.modal-content {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1.5rem;
    padding: 2rem;
    max-width: 28rem;
    width: 90%;
    animation: fadeInUp 0.3s ease-out;
}

/* === Stat Card Glow === */
.stat-glow-emerald {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.08);
}
.stat-glow-blue {
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.08);
}
.stat-glow-rose {
    box-shadow: 0 0 30px rgba(244, 63, 94, 0.08);
}
.stat-glow-violet {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.08);
}
.stat-glow-amber {
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.08);
}

/* === Chart Container === */
.chart-container {
    position: relative;
    padding: 1.25rem;
}

/* === Empty State === */
.empty-state {
    padding: 3rem;
    text-align: center;
}

.empty-state svg {
    width: 5rem;
    height: 5rem;
    color: #475569;
    margin: 0 auto 1rem;
}

.empty-state h3 {
    color: #94a3b8;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* === Category Emoji === */
.category-emoji {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

/* === Account Icon === */
.account-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.account-icon-efectivo { background: rgba(52, 211, 153, 0.15); }
.account-icon-banco { background: rgba(56, 189, 248, 0.15); }
.account-icon-tarjeta { background: rgba(167, 139, 250, 0.15); }
.account-icon-inversion { background: rgba(251, 191, 36, 0.15); }

/* === Form Label === */
.form-label {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.375rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === Responsive Grid for Dashboard Charts === */
@media (max-width: 768px) {
    .chart-container canvas {
        max-height: 250px;
    }
}

/* ==========================================================================
   Micro-interacciones
   --------------------------------------------------------------------------
   El sistema ya animaba la entrada de cada página, pero después quedaba
   quieto: nada respondía al mouse, al tacto ni al scroll. Esto agrega la
   capa de reacción, que es la que hace que se sienta vivo.

   Todo se apaga entero más abajo cuando el sistema pide menos movimiento.
   ========================================================================== */

/* --- Tarjetas: se levantan y el borde se enciende al pasar por encima --- */
.glass-card {
    will-change: transform;
}

.glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.35);
}

.glass-card:active {
    transform: translateY(-1px);
    transition-duration: 0.08s;
}

/* --- Botones: rebote sutil al presionar --- */
.btn-primary,
.btn-secondary,
.btn-danger {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                background 0.25s ease,
                border-color 0.25s ease;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover {
    transform: translateY(-2px);
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

/* El ícono del botón acompaña el gesto. */
.btn-primary svg,
.btn-secondary svg,
.btn-danger svg {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-primary:hover svg,
.btn-secondary:hover svg,
.btn-danger:hover svg {
    transform: scale(1.15);
}

/* --- Íconos de cuenta y categoría: giro corto al hover de la tarjeta --- */
.account-icon,
.category-emoji {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-card:hover .account-icon,
.glass-card:hover .category-emoji {
    transform: scale(1.12) rotate(-6deg);
}

/* --- Campos: el foco crece apenas, para que se note dónde estás --- */
.glass-input,
.glass-select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.glass-input:focus,
.glass-select:focus {
    transform: scale(1.01);
}

/* --- Filas de tabla: realce al recorrerlas --- */
tbody tr {
    transition: background-color 0.18s ease;
}

tbody tr:hover {
    background-color: rgba(51, 65, 85, 0.35);
}

/* --- Badges: laten apenas al hover de su fila --- */
.badge-account {
    transition: transform 0.2s ease;
}

tbody tr:hover .badge-account {
    transform: scale(1.05);
}

/* --- Reveal al hacer scroll (lo aplica AOS con data-aos) ---
   AOS deja los elementos en opacity:0 hasta revelarlos con JavaScript. Si su
   script no carga, esas secciones quedarían invisibles para siempre: es
   exactamente el modo de falla por el que este proyecto dejó de usar CDN.
   El layout marca <html class="sin-aos"> cuando la librería no está, y acá se
   fuerza todo a visible. */
.sin-aos [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* --- Conteo animado de los importes del panel --- */
@keyframes contador-entrada {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.contador {
    display: inline-block;
    animation: contador-entrada 0.4s ease-out both;
    font-variant-numeric: tabular-nums;
}

/* --- Mensajes flash: entran deslizando y respiran una vez --- */
@keyframes flash-entrada {
    0%   { opacity: 0; transform: translateY(-12px) scale(0.98); }
    60%  { transform: translateY(2px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.flash-mensaje {
    animation: flash-entrada 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* --- Enlaces de navegación: subrayado que crece desde el centro --- */
nav a {
    position: relative;
}

/* ==========================================================================
   Accesibilidad: respetar a quien pide menos movimiento
   --------------------------------------------------------------------------
   Antes no había nada de esto y todas las animaciones corrían siempre. Para
   alguien con sensibilidad vestibular, una interfaz que se mueve sola puede
   provocar mareo real. Con la preferencia activada todo queda instantáneo,
   sin perder ninguna funcionalidad.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Sin desplazamientos ni escalas: sólo el estado final. */
    .glass-card:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-danger:hover,
    .btn-primary:active,
    .btn-secondary:active,
    .btn-danger:active,
    .glass-input:focus,
    .glass-select:focus,
    .glass-card:hover .account-icon,
    .glass-card:hover .category-emoji,
    tbody tr:hover .badge-account {
        transform: none;
    }

    /* AOS deja los elementos invisibles hasta que entran en pantalla: sin
       animación hay que forzarlos a visibles o la página queda en blanco. */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}