:root {
    --sidebar-bg: #fff;
    --sidebar-hover: #F8F9FB;
    --text-color: #053875;
    --accent-color: #0d6efd;
    --toggle-bg: #ced4da;
    --income-color: #198754;
    --expense-color: #dc3545;
}

.ribbon-bg {
    background-color: var(--text-color) !important;
}

body {
    background-color: #f8f9fa; /* Ajustado para coincidir con --sidebar-hover */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color); /* Usar azul marino oscuro como color de texto principal */
}

.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: var(--sidebar-bg); /* Fondo blanco consistente con la barra lateral */
}

.card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    overflow: hidden;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.btn-primary {
    background-color: var(--accent-color); /* Azul brillante */
    border-color: var(--accent-color);
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: #0a58ca; /* Variación más oscura de --accent-color */
    border-color: #0a58ca;
    transform: translateY(-1px);
}

.btn-outline-secondary {
    border-radius: 8px;
    border-color: var(--toggle-bg); /* Gris medio */
    color: var(--text-color); /* Azul marino oscuro */
}

.btn-outline-secondary:hover {
    background-color: var(--sidebar-hover); /* Gris muy claro */
    border-color: var(--accent-color); /* Azul brillante */
    color: var(--accent-color);
}

/* Botón para categoría y subcategoría del formulario de gastos */
.btn-expensive {
    background-color: var(--sidebar-bg); /* Blanco */
    border-color: var(--toggle-bg); /* Gris medio */
    color: var(--text-color); /* Azul marino oscuro */
}

.btn-expensive:hover {
    border-color: var(--expense-color); /* Rojo para gastos */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Sombra con rojo */
}

.btn-expensive:active,
.btn-expensive:focus {
    border-color: var(--expense-color) !important; /* Rojo */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Botón para categoría y subcategoría del formulario de ingresos */
.btn-income {
    background-color: var(--sidebar-bg); /* Blanco */
    border-color: var(--toggle-bg); /* Gris medio */
    color: var(--text-color); /* Azul marino oscuro */
}

.btn-income:hover {
    border-color: var(--income-color) !important; /* Verde para ingresos */
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

.btn-income:active,
.btn-income:focus {
    border-color: var(--income-color) !important; /* Verde */
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--toggle-bg); /* Gris medio */
    padding: 12px;
}

.form-control:focus {
    border-color: var(--accent-color); /* Azul brillante */
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); /* Sombra con azul */
}

.property-card {
    transition: transform 0.2s;
}

.property-card:hover {
    transform: translateY(-4px);
}

#map {
    height: 300px;
    border-radius: 8px;
    margin-top: 10px;
}



/*old style*/
/*body {*/
/*    background-color: #F7F7F7;*/
/*    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
/*    color: #222;*/
/*}*/

/*.navbar {*/
/*    box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
/*}*/

/*.card {*/
/*    border-radius: 12px;*/
/*    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
/*    border: none;*/
/*    overflow: hidden;*/
/*}*/

/*.card-img-top {*/
/*    height: 200px;*/
/*    object-fit: cover;*/
/*}*/

/*.btn-primary {*/
/*    background-color: #FF5A5F;*/
/*    border-color: #FF5A5F;*/
/*    border-radius: 8px;*/
/*    padding: 10px 20px;*/
/*    font-weight: 500;*/
/*}*/

/*.btn-primary:hover {*/
/*    background-color: #E64C50;*/
/*    border-color: #E64C50;*/
/*    transform: translateY(-1px);*/
/*}*/

/*.btn-outline-secondary {*/
/*    border-radius: 8px;*/
/*    border-color: #D3D3D3;*/
/*    color: #666;*/
/*}*/

/*.btn-outline-secondary:hover {*/
/*    background-color: #F7F7F7;*/
/*    border-color: #FF5A5F;*/
/*    color: #FF5A5F;*/
/*}*/



/*boton para categoria y subcategoria del formulario de gastos*/
/*.btn-expensive {*/
/*    background-color: #fff;*/
/*    border-color: #D3D3D3;*/
/*    color: #222;*/
/*}*/

/*.btn-expensive:hover {*/
/*    border-color: #FF5A5F;*/
/*    box-shadow: 0 0 0 0.2rem rgba(255, 90, 95, 0.25);*/
/*}*/

/*.btn-expensive:active,*/
/*.btn-expensive:focus {*/
/*    border-color: #FF5A5F !important;*/
/*    box-shadow: 0 0 0 0.2rem rgba(255, 90, 95, 0.25) !important;*/
/*}*/
/*boton para categoria y subcategoria del formulario de gastos*/



/*boton para categoria y subcategoria del formulario de ingresos*/
/*.btn-income {*/
/*    background-color: #fff;*/
/*    border-color: #D3D3D3;*/
/*    color: #222;*/
/*}*/

/*.btn-income:hover {*/
/*    border-color: #60ff5a !important;*/
/*    box-shadow: 0 0 0 0.2rem rgba(96, 255, 90, 0.25) !important;*/
/*}*/

/*.btn-income:active,*/
/*.btn-income:focus {*/
/*    border-color: #60ff5a !important;*/
/*    box-shadow: 0 0 0 0.2rem rgba(96, 255, 90, 0.25) !important;*/
/*}*/
/*boton para categoria y subcategoria del formulario de ingresos*/



/*.form-control, .form-select {*/
/*    border-radius: 8px;*/
/*    border: 1px solid #D3D3D3;*/
/*    padding: 12px;*/
/*}*/

/*.form-control:focus {*/
/*    border-color: #FF5A5F;*/
/*    box-shadow: 0 0 0 0.2rem rgba(255, 90, 95, 0.25);*/
/*}*/

/*.property-card {*/
/*    transition: transform 0.2s;*/
/*}*/

/*.property-card:hover {*/
/*    transform: translateY(-4px);*/
/*}*/

/*#map {*/
/*    height: 300px;*/
/*    border-radius: 8px;*/
/*    margin-top: 10px;*/
/*}*/