/* COLORES BASE */
:root {
    --color-gris: #F2EFE7;
    --color-oscuro: #006A71;
    --color-claro: #9ACBD0;
    --color-turquesa: #48A6A7;
    --color-coral: #fe6f61;
}

/* Reset & Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

/* GENERAL */
body {
    background-color: var(--color-gris);
    color: var(--color-oscuro);
    font-family: "Comic Relief", sans-serif;
    margin: 0;
    padding: 0;
}

/* Headings */
h1, h2, h3, h4, h5 {
    font-family: "Courgette", cursive;
    text-decoration: underline;
    color: var(--color-oscuro);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.container-fluid {
    margin: 2rem !important;
}

/* NAVBAR */
.navbar {
    background-color: var(--color-oscuro);
    padding: 5px !important;
}

.navbar a, .navbar button {
    color: var(--color-claro);
    padding: 1rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30%;
    transition: background-color 0.3s;
}

.navbar a:hover {
    background-color: var(--color-claro);
    color: var(--color-turquesa);
    text-decoration: none;
}

/* FLASHES */
.flashes {
    color: var(--color-coral);
}

/* CARD */
.card-transparente {
    background-color: rgba(154, 203, 208, 0.5) !important;
}
.lista-tarjeta, .lista-tarjeta-total {
    background-color: transparent !important;
}

/* BOTONES */
.btn-primary {
    background-color: var(--color-oscuro) !important;
    color: var(--color-claro) !important;
    font-size: 1rem !important;
    border: none !important;
    transition: background-color 0.3s;
}
.btn-primary:hover {
    background-color: var(--color-claro) !important;
    color: var(--color-oscuro) !important;
}

/* FORMULARIOS */
.form-select, select {
    min-width: 180px;
}
.form-control, .form-select {
    border-radius: 0.25rem;
}

form.d-flex.flex-wrap.justify-content-center.gap-3 {
    margin-bottom: 1rem !important;
    gap: 1.5rem !important;
}
.d-flex.align-items-center.gap-2 label {
    font-weight: 500 !important;
    white-space: nowrap !important;
}
.d-flex.align-items-center.gap-2 select {
    margin-left: 0.5rem;
}

/* TABLAS */
.container-fluid table {
    width: 80%;
    border-collapse: collapse;
}
th, td {
    color: var(--color-oscuro);
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    text-align: center !important;
    vertical-align: middle;
}
th {
    background-color: var(--color-claro);
}
td {
    background-color: transparent;
}
.cantidad-gasto {
    color: var(--color-coral);
}
.cantidad-ingreso {
    color: #198754;
}

.table a:hover {
    border-radius: 30%;
    padding: 5px;
    text-decoration: none;
    background-color: var(--color-claro);
    color: var(--color-turquesa);
}

/* Canvas */
canvas {
    width: 100% !important;
    max-width: 800px;
    margin: 1rem auto;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: 1px solid var(--color-oscuro);
}