:root {
     --primary-color: #5f6368;
     --light-bg: #f8f9fa;
     --header-bg: #ffffff;
     --border-color: #dadce0;
     --text-color: #202124;
 }

 html,
 body {
     height: 100%;
     margin: 0;
     padding: 0;
 }

 body {
     background-color: var(--light-bg);
     color: var(--text-color);
     display: flex;
     flex-direction: column;
 }

 body.dark-mode {
     --light-bg: #121212;
     --header-bg: #1e1e1e;
     --border-color: #3f3f3f;
     --text-color: #e8eaed;
     background-color: var(--light-bg);
     color: var(--text-color);
 }

 body.dark-mode .card {
     background-color: var(--header-bg);
 }

 body.dark-mode textarea,
 body.dark-mode .form-control,
 body.dark-mode .form-select {
     background-color: #2c2c2c;
     color: var(--text-color);
     border-color: var(--border-color) !important;
 }

 body.dark-mode audio {
     background-color: #2c2c2c;
 }

 header {
     background-color: var(--header-bg);
     border-bottom: 1px solid var(--border-color);
     position: sticky;
     top: 0;
     z-index: 100;
 }

 header .navbar-brand {
     font-size: 24px;
     font-weight: 600;
     color: var(--text-color) !important;
 }

 header nav a {
     color: var(--primary-color) !important;
     font-size: 14px;
     margin-left: 30px;
     transition: color 0.3s;
 }

 header nav a:hover {
     color: var(--text-color) !important;
 }

 .main-container {
     flex: 1;
     padding: 40px 0;
 }

 .card {
     border: 1px solid var(--border-color) !important;
     background-color: var(--header-bg);
 }

 .btn-primary {
     background-color: #4285f4;
     border-color: #4285f4;
 }

 .btn-primary:hover {
     background-color: #3367d6;
     border-color: #3367d6;
 }

 .form-control,
 .form-select,
 textarea {
     border-color: var(--border-color) !important;
     font-size: 15px;
     background-color: var(--header-bg);
     color: var(--text-color);
 }

 .form-control:focus,
 .form-select:focus,
 textarea:focus {
     border-color: #4285f4 !important;
     box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.15);
     background-color: var(--header-bg);
     color: var(--text-color);
 }

 label.form-label {
     color: var(--text-color);
     font-weight: 500;
 }

 footer {
     background-color: var(--header-bg);
     border-top: 1px solid var(--border-color);
     text-align: center;
     padding: 20px 0;
     margin-top: auto;
 }

 footer a {
     color: var(--primary-color);
     text-decoration: none;
     font-size: 14px;
 }

 footer a:hover {
     color: var(--text-color);
 }

 .dark-mode-toggle {
     cursor: pointer;
     font-size: 20px;
     transition: transform 0.3s;
 }

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

 h1,
 h2 {
     color: var(--text-color);
 }

 .text-muted {
     color: var(--primary-color) !important;
 }
/* Menú hamburguesa visible */
.navbar-toggler {
    border-color: var(--primary-color) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235f6368' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e8eaed' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
 
::placeholder {
    color: var(--primary-color) !important;
    opacity: 1 !important;
}