:root {
    /* Modo claro */
    --color-primary: #000c18;
    --color-background: #ffffff;
    --color-secondary: #e8f0f9;
    --color-accent: #1a3c66;
    --color-text: #0d2847;
    --color-heading: #000000; /* Color para h1 en modo claro */

    /* Modo oscuro */
    --color-dark-background: #0f1c2d;
    --color-dark-secondary: #162942;
    --color-dark-accent: #284366;
    --color-dark-text: #b8c5d9;

    /* Común */
    --color-hover: #64ffda;
}

/* Añade al principio del archivo, justo después de :root */
[data-theme="dark"] {
    --color-background: #0f1c2d;
    --color-secondary: #162942;
    --color-accent: #284366;
    --color-text: #b8c5d9;
    --color-heading: #ffffff; /* Color para h1 en modo oscuro */
}

body {
    font-family: "Glegoo", serif;
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Añade la animación del botón */
.theme-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--color-dark-text);
    transition: transform 0.3s ease, color 0.3s ease;
    margin-left: 1rem;
}

.theme-toggle:hover {
    color: var(--color-hover);
    transform: rotate(45deg);
}

.theme-toggle i {
    font-size: 1.2rem;
}

td,
th {
    color: black;
}

.navbar {
    background-color: var(--color-primary);
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand,
.nav-link {
    color: var(--color-dark-text) !important;
    transition: color 0.3s ease;
}

.navbar-brand:hover,
.nav-link:hover {
    color: var(--color-hover) !important;
}

.container {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    background-color: var(--color-secondary);
    padding: 2rem;
}

.btn-logout {
    background-color: var(--color-accent);
    color: var(--color-dark-text);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background-color: var(--color-hover);
    color: var(
        --color-primary
    ) !important; /* Cambia a un color diferente del fondo */
}

.user-greeting {
    display: flex;
    align-items: center;
}

.user-icon {
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

.navbar-toggler {
    border-color: var(--color-dark-text);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23e6f1ff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.exclusive-icon {
    color: #0abde3; /* Color vibrante para el ícono */
    font-weight: bold;
}

.exclusive-icon:hover {
    color: #10ac84; /* Color al pasar el ratón */
    text-shadow: 0 0 10px rgba(16, 172, 132, 0.8);
}