/* Estilos Personalizados */
body {
    /* Aquí integramos la imagen y el gradiente original */
    background-image: 
        linear-gradient(135deg, rgba(13, 110, 253, 0.8), rgba(10, 88, 202, 0.8)), /* Capa azul semitransparente */
        url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_bp-V0nit-oy2rsujmbI2S27aYXLhTdjhHQ&s'); /* Tu imagen */
    
    background-blend-mode: overlay; /* Mezcla la imagen con el color azul */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* La imagen se queda fija al hacer scroll */
    
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- LOGO EN EL MENÚ --- */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background-color: white; /* Fondo blanco para que resalte */
    padding: 2px;
}

/* --- TARJETAS --- */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 15px;
    /* Opcional: Un poco de fondo blanco semitransparente para que resalte sobre la foto */
    background-color: rgba(255, 255, 255, 0.95); 
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* --- TÍTULO PRINCIPAL --- */
.header-gradient {
    background: linear-gradient(45deg, #0d6efd, #0dcaf0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- TARJETA DE BALANCE --- */
.balance-card {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: white;
    border: none;
}

/* --- ITEMS DE TRANSACCIÓN --- */
.transaction-item {
    border-left: 5px solid transparent;
    transition: background 0.2s;
}

.transaction-item:hover {
    background-color: #f8f9fa;
}

.transaction-item.ingreso { 
    border-left-color: #198754; 
}

.transaction-item.gasto { 
    border-left-color: #dc3545; 
}

/* --- BOTÓN DE ELIMINAR --- */
.btn-delete {
    opacity: 0;
    transition: opacity 0.2s;
}

.list-group-item:hover .btn-delete {
    opacity: 1;
}
.dia-calendario{
border:1px solid #ddd;
border-radius:10px;
padding:10px;
text-align:center;
cursor:pointer;
background:white;
}

.dia-calendario:hover{
background:#f1f3f5;
}

.dia-con-gasto{
background:#ffe5e5;
border-color:#dc3545;
}

.dia-con-ingreso{
background:#e6fff2;
border-color:#198754;
}
.dia-calendario{
border:1px solid #dee2e6;
border-radius:10px;
padding:10px;
text-align:center;
cursor:pointer;
background:white;
height:70px;
position:relative;
font-weight:500;
flex: 0 0 calc(100% / 7);
}

.dia-calendario:hover{
background:#f8f9fa;
}

.punto{
width:8px;
height:8px;
border-radius:50%;
position:absolute;
bottom:8px;
left:50%;
transform:translateX(-50%);
}

.punto-gasto{
background:#dc3545;
}

.punto-ingreso{
background:#198754;
}
.card {
    border-radius: 15px;
}

.progress {
    border-radius: 10px;
}

.progress-bar {
    transition: width 0.5s ease;
}