/* Variables globales para el modo claro */
:root {
    --text-color: #3e2723;
    --background-color: #fdf6ef;
    --background-color-secondary: #f5e9dc;
    --card-background: rgba(255, 248, 240, 0.95);
    --card-border: rgba(255, 255, 255, 0.4);
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    --hover-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    --gradient: linear-gradient(135deg, #4e342e 0%, #6d4c41 100%);
    --transition: all 0.3s ease;
}

body.dark-mode {
    --text-color: #fcebd3;
    --background-color: #3b2f2f;
    --background-color-secondary: #2e1f1f;
    --card-background: rgba(59, 47, 47, 0.95);
    --card-border: rgba(255, 255, 255, 0.1);
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    --hover-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.dark-mode-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    background-color: #5d4037;
    color: #fffaf0;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.dark-mode-toggle:hover {
    background-color: #4e342e;
    transform: scale(1.1);
}

body {
    transition: var(--transition);
}

body.dark-mode .book-card {
    background: var(--card-background);
    border-color: var(--card-border);
}

body.dark-mode .book-info {
    background: var(--card-background);
}

body.dark-mode .book-actions {
    border-top-color: var(--card-border);
}

body.dark-mode .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
}

body.dark-mode .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode {
    background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color-secondary) 100%);
}