body.dark-mode .container img#logoINMA {
    filter: brightness(1.1) contrast(1.1);
}
@font-face {
    font-family: "Maven Pro";
    src: url("fonts/MavenPro-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

:root {
  --main-bg-color: #f7f7f7;
  --bg-color: #ffffff;
  --text-color: #000000;
  --header-bg: #f0f0f0;
  --footer-bg: #007fa3;
  --footer-text-color: #ffffff;
  --footer-link-color: #ffd700;
  --main-border-color: #ddd;
}

body.dark-mode {
  --main-bg-color: #121212;
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --header-bg: #1e1e1e;
  --footer-bg: #1e1e1e;
  --footer-text-color: #e0e0e0;
  --footer-link-color: #ffd700;
  --main-border-color: #333;
}

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

body.dark-mode {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

header {
  background-color: var(--header-bg);
  color: var(--text-color);
}

footer {
  background-color: var(--footer-bg);
  color: var(--footer-text-color);
}

footer a {
  color: var(--footer-link-color);
}

.dark-mode-toggle {
  background: #007fa3;
  color: var(--text-color);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
  padding: 0;
  margin: 0;
}

body.login-page .dark-mode-toggle {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    z-index: 10;
}

body.login-page .dark-mode-toggle svg {
    width: 28px;
    height: 28px;
    transform: none;
}

body.investigador-page .dark-mode-toggle {
    width: 50px;
    height: 50px;
}

body.investigador-page .dark-mode-toggle svg {
    width: 20px;
    height: 20px;
}

body.dark-mode .logout-icon {
    color: white;
}

body:not(.dark-mode) .logout-icon {
    color: #222;
}

body {
    background-color: #f4f4f4;
    color: #222;
    font-family: sans-serif;
    margin: 0;
    padding: 0px;
}

/* Dark Mode general */
body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Tablas */
table.hoja-tiempo-visual th,
table.hoja-tiempo-visual td {
    border: 1px solid #ccc;
    padding: 6px;
}

body.dark-mode table.hoja-tiempo-visual th,
body.dark-mode table.hoja-tiempo-visual td {
    border-color: #444;
}

body.dark-mode table.hoja-tiempo-visual td {
    background-color: #333;
}

body.dark-mode table.hoja-tiempo-visual td[style*="background:#e6ffe6;"] {
    background-color: #295429 !important;
    color: #cceac1;
}

body.dark-mode table.hoja-tiempo-visual tr[style*="background:#f0f0f0;"] td {
    background-color: #3a3a3a !important;
    color: #fff;
}

body.dark-mode table.hoja-tiempo-visual td[style*="background:#f9f9f9;"] {
    background-color: #444 !important;
    color: #eee;
}

.nombre-dia {
    color: #666;
}

body.dark-mode .nombre-dia {
    color: #bbb;
}

body.dark-mode table.hoja-tiempo-visual th {
    background-color: #2e2e2e;
    color: #e0e0e0;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
}

.mis-horas-container {
    max-width: auto;
    margin: 0 auto;
    padding: 20px;
}

.error {
  color: white;
  background-color: #f44336;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  text-align: center;
  transition: opacity 0.3s ease-out;
}

/* Dark Mode for calendario.css */
body.dark-mode .home-page {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body.dark-mode .page-title {
    color: #00a8e0;
}

body.dark-mode #week-selector button {
    background-color: #005f7a;
    color: #e0e0e0;
}

body.dark-mode #week-selector button:hover {
    background-color: #007FA3;
}

body.dark-mode #current-week {
    color: #e0e0e0;
}

body.dark-mode .day-btn {
    background-color: #2c2c2c;
    color: #e0e0e0;
    border-color: #444;
}

body.dark-mode .day-btn:hover {
    background-color: #383838;
    border-color: #00a8e0;
}

body.dark-mode .day-btn.selected {
    background-color: #00a8e0;
    color: #121212;
    border-color: #007FA3;
}

body.dark-mode #reserves-container {
    background-color: #2c2c2c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode #current-day-header {
    color: #00a8e0;
}

body.dark-mode .reserve_space.free {
    background-color: #1a3a4a;
    color: #99d9f2;
    border-color: #2c5a7a;
}

body.dark-mode .reserve_space.free:hover {
    background-color: #2c5a7a;
    border-color: #00a8e0;
}

body.dark-mode .reserve_space.filled {
    background-color: #5a2d2d;
    color: #f5c6cb;
    border-color: #721c24;
}

    body.dark-mode .reserve_space.filled.aprobada {
        background-color: #5a2d2d;
        color: #f5c6cb;
        border-color: #721c24;
    }

    body.dark-mode .reserve_space.filled.pendiente {
        background-color: #4d3a1a;
        color: #ffd59e;
        border-color: #b85c00;
    }

body.dark-mode .reserve_space.no_reservable {
    background-color: #383838;
    color: #888;
    border-color: #555;
}

/* Dark Mode for reserve.css */
body.dark-mode .container-reserve {
    background-color: #1e1e1e;
    color: #e0e0e0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode h1 {
    color: #00a8e0;
}

body.dark-mode .container-reserve > p > a {
    color: #00a8e0;
}

body.dark-mode .container-reserve > p > a:hover {
    color: #99d9f2;
}

body.dark-mode .form-group label {
    color: #e0e0e0;
}

body.dark-mode .form-control {
    background-color: #2c2c2c;
    color: #e0e0e0;
    border-color: #444;
}

body.dark-mode .form-control:focus {
    border-color: #00a8e0;
    box-shadow: 0 0 5px rgba(0, 168, 224, 0.3);
}

body.dark-mode input[readonly].form-control {
    background-color: #383838;
}

body.dark-mode .btn-primary {
    background-color: #005f7a;
    color: #e0e0e0;
}

body.dark-mode .btn-primary:hover {
    background-color: #007FA3;
}

body.dark-mode .projects-table {
  background-color: #1e1e1e;
  border-color: #333;
}

body.dark-mode .projects-table th, body.dark-mode .projects-table td {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #333;
}

body.dark-mode .projects-table tr:nth-child(even) {
  background-color: #1e1e1e;
}

body.dark-mode .admin-container {
  background-color: #121212 !important;
}

body.dark-mode .page-header {
  background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%) !important;
  color: #ffffff;
}

body.dark-mode .projects-section {
  background-color: #121212 !important;
}

body.dark-mode .table-container {
  background-color: #121212 !important;
}

body.dark-mode .empty-state {
  background-color: #121212 !important;
  color: #ffffff;
}