:root {
    --fondo: #f4f4f4;
    --tarjeta: #ffffff;
    --texto: #222222;
    --texto-secundario: #666666;
    --borde: #dddddd;
    --rojo: #c40000;
    --dorado: #d4af37;
    --negro: #111111;
}

body.modo-oscuro {
    --fondo: #121212;
    --tarjeta: #1e1e1e;
    --texto: #ffffff;
    --texto-secundario: #cccccc;
    --borde: #444444;
    --rojo: #ff3333;
    --dorado: #f1c40f;
    --negro: #000000;
}

body {
    background-color: var(--fondo) !important;
    color: var(--texto) !important;
    transition: background-color 0.3s, color 0.3s;
}

.card,
.tarjeta,
.contenedor,
.panel,
table,
form {
    background-color: var(--tarjeta);
    color: var(--texto);
}

input,
select,
textarea {
    background-color: var(--tarjeta) !important;
    color: var(--texto) !important;
    border: 1px solid var(--borde) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--texto-secundario);
}

table {
    border-color: var(--borde);
}

th {
    background-color: var(--negro) !important;
    color: white !important;
}

td {
    color: var(--texto) !important;
    border-color: var(--borde) !important;
}

a {
    transition: color 0.3s;
}

body.modo-oscuro .sidebar,
body.modo-oscuro .menu,
body.modo-oscuro nav {
    background-color: #000000 !important;
}

body.modo-oscuro .sidebar a,
body.modo-oscuro .menu a,
body.modo-oscuro nav a {
    color: #ffffff !important;
}

button,
.btn {
    cursor: pointer;
    transition: 0.3s;
}

button:hover,
.btn:hover {
    transform: translateY(-2px);
}