/* Reset y estilos base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   SISTEMA DE TEMAS
   ============================================ */

/* ============================================
   TEMA PRO (Clásico - por defecto)
   Accesibilidad WCAG AA verificada:
   - Texto normal: mínimo 4.5:1
   - Texto grande: mínimo 3:1
   - Componentes UI: mínimo 3:1
   ============================================ */
:root {
    /* Colores principales - Verificados para contraste AA */
    --primary-color: #2c3e50; /* Azul oscuro - buen contraste con blanco */
    --primary-dark: #1a252f; /* Azul más oscuro para hover */
    --primary-light: #34495e; /* Azul más claro para estados activos */
    --secondary-color: #2980b9; /* Azul más oscuro para mejor contraste */
    --accent-color: #c0392b; /* Rojo más oscuro para mejor contraste */
    --success-color: #27ae60; /* Verde oscuro - buen contraste */
    --warning-color: #d68910; /* Naranja más oscuro para mejor contraste */
    --error-color: #c0392b; /* Rojo oscuro - buen contraste */
    
    /* Colores de fondo */
    --background-color: #f5f5f5; /* Gris muy claro */
    --card-background: #ffffff; /* Blanco puro */
    --header-bg: #2c3e50; /* Azul oscuro - contraste 12.6:1 con blanco */
    --footer-bg: #2c3e50; /* Azul oscuro - contraste 12.6:1 con blanco */
    
    /* Colores de texto - Verificados para contraste AA */
    --text-color: #1a1a1a; /* Casi negro - contraste 16.6:1 sobre blanco, 10.5:1 sobre #f5f5f5 */
    --text-light: #4a4a4a; /* Gris oscuro - contraste 7.1:1 sobre blanco, 4.5:1 sobre #f5f5f5 (cumple AA) */
    --text-on-primary: #ffffff; /* Blanco - contraste 12.6:1 sobre #2c3e50 */
    
    /* Colores de borde */
    --border-color: #cccccc; /* Gris medio */
    --border-focus: #2980b9; /* Azul para focus - buen contraste */
    
    /* Colores de hover */
    --hover-color: #2471a3; /* Azul más oscuro para hover */
    --hover-bg: rgba(255, 255, 255, 0.15);
    
    /* Colores de botones - Ajustados para mejor contraste */
    /* Botones primarios: verde sólido con texto blanco */
    --btn-primary-bg: #27ae60; /* Verde sólido - contraste 4.5:1 con blanco */
    --btn-primary-border: #27ae60;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #229954; /* Verde más oscuro */
    --btn-primary-hover-border: #229954;
    
    /* Botones secundarios: fondo semitransparente con texto blanco sobre header oscuro */
    --btn-secondary-bg: rgba(255, 255, 255, 0.2); /* Más opaco para mejor contraste */
    --btn-secondary-border: rgba(255, 255, 255, 0.3);
    --btn-secondary-text: #ffffff;
    --btn-secondary-hover-bg: rgba(255, 255, 255, 0.3);
    --btn-secondary-hover-border: rgba(255, 255, 255, 0.4);
    
    /* Botones de peligro: rojo sólido con texto blanco */
    --btn-danger-bg: #c0392b; /* Rojo oscuro - contraste 4.5:1 con blanco */
    --btn-danger-border: #c0392b;
    --btn-danger-text: #ffffff;
    --btn-danger-hover-bg: #a93226; /* Rojo más oscuro */
    --btn-danger-hover-border: #a93226;
    
    /* Colores de estado - Verificados para contraste AA */
    --success-bg: #d4edda;
    --success-text: #155724; /* Verde muy oscuro - contraste 7.1:1 sobre #d4edda */
    --success-border: #c3e6cb;
    --error-bg: #f8d7da;
    --error-text: #721c24; /* Rojo muy oscuro - contraste 7.1:1 sobre #f8d7da */
    --error-border: #f5c6cb;
    --error-input-bg: #fee;
    --error-input-border: #fcc;
    --error-input-text: #721c24; /* Rojo oscuro - contraste 4.5:1 sobre #fee */
    
    /* Sombras */
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-dropdown: 0 8px 16px rgba(0, 0, 0, 0.2);
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.7);
    
    /* Avatar */
    --avatar-bg: rgba(255, 255, 255, 0.25); /* Más opaco para mejor contraste */
    --avatar-border: rgba(255, 255, 255, 0.4);
    --avatar-hover: rgba(255, 255, 255, 0.35);
    
    /* Input cancel */
    --input-cancel-bg: #b0b0b0; /* Gris más oscuro para mejor contraste */
    
    /* Botones de estado */
    --btn-incomplete-bg: rgba(192, 57, 43, 0.15); /* Más opaco */
    --btn-incomplete-hover: #c0392b;
    --btn-incomplete-active-bg: #27ae60;
    --btn-incomplete-active-hover: #229954;
    --btn-delete-bg: #c0392b;
    --btn-delete-hover: #a93226;
    --btn-delete-border: #c0392b;
    --btn-delete-text: #c0392b; /* Para botones ghost sobre fondo claro */
    
    /* Radius */
    --radius-base: 6px;
    --radius-small: 4px;
    --radius-large: 8px;
    
    /* Tipografía */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* Tema PRE (se activa con clase .theme-new en el html) */
html.theme-new {
    /* Colores principales - Tema moderno y elegante */
    --primary-color: #2563eb; /* Azul moderno con buen contraste */
    --primary-dark: #1e40af; /* Para hover */
    --primary-light: #3b82f6; /* Para estados activos */
    --secondary-color: #64748b; /* Gris azulado para secundarios */
    --accent-color: #0f3460;
    --success-color: #059669;
    --warning-color: #d97706;
    --error-color: #dc2626;
    
    /* Colores de fondo */
    --background-color: #ffffff;
    --card-background: #ffffff;
    --header-bg: #ffffff;
    --footer-bg: #f8fafc; /* Gris muy claro, tendencia actual */
    
    /* Colores de texto */
    --text-color: #0f172a; /* Casi negro para máximo contraste */
    --text-light: #475569;
    --text-on-primary: #ffffff;
    --text-on-light: #0f172a;
    
    /* Colores de borde */
    --border-color: #e2e8f0;
    --border-focus: #2563eb;
    
    /* Colores de hover */
    --hover-color: #1e40af;
    --hover-bg: rgba(37, 99, 235, 0.05);
    
    /* Botones primarios */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-border: var(--primary-color);
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: var(--primary-dark);
    --btn-primary-hover-border: var(--primary-dark);
    
    /* Botones primarios invertidos (para fondos claros donde no hay contraste) */
    --btn-primary-inverted-bg: #ffffff;
    --btn-primary-inverted-border: var(--primary-color);
    --btn-primary-inverted-text: var(--primary-color);
    --btn-primary-inverted-hover-bg: var(--primary-color);
    --btn-primary-inverted-hover-text: #ffffff;
    
    /* Botones secundarios (ghost) */
    --btn-secondary-bg: transparent;
    --btn-secondary-border: var(--primary-color);
    --btn-secondary-text: var(--primary-color);
    --btn-secondary-hover-bg: var(--hover-bg);
    --btn-secondary-hover-border: var(--primary-dark);
    --btn-secondary-hover-text: var(--primary-dark);
    
    /* Botones secundarios invertidos */
    --btn-secondary-inverted-bg: transparent;
    --btn-secondary-inverted-border: #ffffff;
    --btn-secondary-inverted-text: #ffffff;
    --btn-secondary-inverted-hover-bg: rgba(255, 255, 255, 0.1);
    
    /* Botones de dropdown/select */
    --btn-dropdown-bg: var(--btn-secondary-bg);
    --btn-dropdown-border: var(--btn-secondary-border);
    --btn-dropdown-text: var(--btn-secondary-text);
    --btn-dropdown-hover-bg: var(--btn-secondary-hover-bg);
    
    /* Botones de peligro */
    --btn-danger-bg: var(--error-color);
    --btn-danger-border: var(--error-color);
    --btn-danger-text: #ffffff;
    --btn-danger-hover-bg: #b91c1c;
    
    /* Colores de estado */
    --success-bg: #d1fae5;
    --success-text: #065f46;
    --success-border: #6ee7b7;
    --error-bg: #fee2e2;
    --error-text: #991b1b;
    --error-border: #fca5a5;
    --error-input-bg: #fef2f2;
    --error-input-border: #fecaca;
    --error-input-text: #dc2626;
    
    /* Sombras sutiles con tono del primario (oscuro, poco saturado) */
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-hover: 0 4px 6px rgba(15, 23, 42, 0.1), 0 2px 4px rgba(15, 23, 42, 0.08);
    --shadow-modal: 0 10px 15px rgba(15, 23, 42, 0.15), 0 4px 6px rgba(15, 23, 42, 0.1);
    --shadow-dropdown: 0 4px 6px rgba(15, 23, 42, 0.1), 0 2px 4px rgba(15, 23, 42, 0.08);
    
    /* Overlay */
    --overlay-bg: rgba(15, 23, 42, 0.6);
    
    /* Avatar */
    --avatar-bg: #f1f5f9;
    --avatar-border: #e2e8f0;
    --avatar-hover: #e2e8f0;
    
    /* Input cancel */
    --input-cancel-bg: #cbd5e1;
    
    /* Botones de estado */
    --btn-incomplete-bg: rgba(220, 38, 38, 0.1);
    --btn-incomplete-hover: #dc2626;
    --btn-incomplete-active-bg: #059669;
    --btn-incomplete-active-hover: #047857;
    --btn-delete-bg: #dc2626;
    --btn-delete-hover: #b91c1c;
    --btn-delete-border: #dc2626;
    --btn-delete-text: #dc2626;
    
    /* Radius */
    --radius-base: 12px;
    --radius-small: 8px;
    --radius-large: 16px;
    
    /* Tipografía */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* Importar tipografía Inter si está disponible */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    flex: 1;
}

/* Header */
header {
    background-color: var(--header-bg);
    color: var(--text-on-primary);
    padding: 0;
    margin-bottom: 16px;
    width: 100%;
    box-shadow: var(--shadow);
    border-bottom: 1px solid var(--border-color);
    overflow: visible !important; /* NUNCA scroll en el header - los dropdowns salen fuera */
    position: relative;
    z-index: 1000; /* Base z-index para el header */
}

header .header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    overflow: visible !important; /* NUNCA scroll - los dropdowns salen fuera */
    position: relative;
}

header .header-content > .logo {
    flex: 0 0 auto;
    margin-right: auto;
    text-decoration: none;
    color: var(--text-on-primary);
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
}

/* Mobile (hasta 768px): Solo mostrar "B" */
/* Mobile: Solo mostrar "B" (detecta dispositivos táctiles independientemente de resolución) */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
    header .header-content > .logo {
        min-width: 40px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        text-indent: -9999px; /* Ocultar texto original moviéndolo fuera de la vista */
        font-size: 0; /* Asegurar que no se vea */
    }

    header .header-content > .logo::before {
        content: 'B';
        font-size: 1.5rem;
        font-weight: 700;
        display: inline-block;
        color: inherit;
        line-height: 1;
        text-indent: 0; /* Resetear text-indent para el ::before */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Desktop: Solo mostrar "Biblioteca de Libros" (dispositivos con hover y puntero fino) */
@media (hover: hover) and (pointer: fine) {
    header .header-content > .logo {
        font-size: var(--font-size-xl, 1.25rem);
        width: auto;
        height: auto;
        min-width: auto;
        overflow: visible;
        text-indent: 0; /* Mostrar texto original */
    }

    header .header-content > .logo::before {
        display: none !important; /* Ocultar "B" */
        content: none !important;
    }
}

header .header-content > .logo:hover {
    opacity: 0.8;
}

header .header-content > div {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0; /* Evitar overflow */
    overflow: visible; /* Permitir que los dropdowns se muestren */
    position: relative; /* Para que los dropdowns con position: absolute se posicionen correctamente */
}

/* Título de página (h1 en el main, no en el header) */
.page-title {
    font-family: 'Cantata One', serif;
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    margin-bottom: 20px;
    color: var(--text-color);
}

/* Tema PRO: Header con fondo oscuro - texto blanco para contraste AA */
:root:not(.theme-new) header {
    background-color: var(--header-bg); /* #2c3e50 */
    color: var(--text-on-primary); /* #ffffff - contraste 12.6:1 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:root:not(.theme-new) header .logo {
    color: var(--text-on-primary); /* #ffffff - contraste 12.6:1 */
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold, 600);
}

/* Tema PRE: Header específico */
html.theme-new header {
    background-color: #ffffff;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

html.theme-new header .logo {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Botones del header - Base común */
.btn-back,
.btn-add-book,
.btn-login,
.btn-logout,
.btn-dropdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    height: 44px;
    padding: 12px 16px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-base, 12px);
    transition: all 0.2s ease;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    font-family: inherit;
    cursor: pointer;
    line-height: 1.5;
    box-sizing: border-box;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
}

/* Iconos Material en botones */
.btn-back .material-icons,
.btn-dropdown .material-icons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-dropdown .material-icons {
    margin-left: 2px;
    transition: transform 0.2s ease;
    color: inherit;
}

/* Tema PRO: Iconos en botones del header */
:root:not(.theme-new) .btn-dropdown .material-icons,
:root:not(.theme-new) .btn-back .material-icons {
    color: var(--text-on-primary);
}

/* Tema PRE: Iconos en botones del header */
html.theme-new .btn-dropdown .material-icons,
html.theme-new .btn-back .material-icons {
    color: var(--text-color);
}

/* Rotar chevron cuando el dropdown está abierto */
.dropdown-gestion .btn-dropdown[aria-expanded="true"] .material-icons,
.dropdown-gestion:has(.dropdown-content.show) .btn-dropdown .material-icons {
    transform: rotate(180deg);
}

/* Accesibilidad: Focus visible */
.btn-back:focus-visible,
.btn-add-book:focus-visible,
.btn-login:focus-visible,
.btn-logout:focus-visible,
.btn-dropdown:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Botón primario - Tema PRE */
html.theme-new .btn-add-book {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
    font-weight: var(--font-weight-semibold, 600);
    font-size: 0; /* Ocultar texto original */
}

html.theme-new .btn-add-book::before {
    content: 'Nuevo libro';
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    display: inline-block;
}

html.theme-new .btn-add-book:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

html.theme-new .btn-add-book:active {
    transform: translateY(0);
}

/* Botón secundario (ghost) - Tema PRE */
html.theme-new .btn-back,
html.theme-new .btn-dropdown {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

html.theme-new .btn-back:hover,
html.theme-new .btn-dropdown:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

/* Botón de peligro - Tema PRE */
html.theme-new .btn-login {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
}

html.theme-new .btn-login:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

html.theme-new .btn-login {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
}

html.theme-new .btn-login:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

html.theme-new .btn-logout {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-border);
    color: var(--btn-danger-text);
}

html.theme-new .btn-logout:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

/* Estilos del tema PRO - Botones con buen contraste AA */
.btn-dropdown {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
    font-weight: var(--font-weight-medium, 500);
}

.btn-dropdown:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-dropdown:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.btn-add-book {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
    font-weight: var(--font-weight-semibold, 600);
    font-size: 0; /* Ocultar texto original */
}

/* Cambiar texto del botón a "Nuevo libro" en todas las resoluciones */
.btn-add-book::before {
    content: 'Nuevo libro';
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    display: inline-block;
}

.btn-add-book:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-add-book:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.btn-logout {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-border);
    color: var(--btn-danger-text);
    font-weight: var(--font-weight-medium, 500);
}

.btn-logout:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-logout:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.btn-back {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

.btn-back:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-back:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

/* Dropdown de gestión */
.dropdown-gestion {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: fixed; /* Fixed para evitar scroll en el header */
    background-color: var(--card-background);
    min-width: 200px;
    box-shadow: var(--shadow-dropdown);
    z-index: 10003; /* Por encima de todo, incluyendo modales */
    border-radius: var(--radius-base, 12px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    /* Posición será calculada por JavaScript antes de mostrar */
    visibility: hidden; /* Ocultar hasta que tenga posición correcta */
    opacity: 0; /* Ocultar hasta que tenga posición correcta */
}

/* Tema PRE: Dropdown específico */
html.theme-new .dropdown-content {
    border-radius: var(--radius-base);
}

.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--background-color);
}

.dropdown-gestion:hover .dropdown-content,
.dropdown-content.show {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Footer */
footer {
    background-color: var(--footer-bg);
    color: var(--text-on-primary);
    padding: 0;
    margin-top: auto;
    width: 100%;
    border-top: 1px solid var(--border-color);
}

footer .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    text-align: center;
}

footer p {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-on-primary);
    font-weight: var(--font-weight-normal, 400);
}

/* Tema PRO: Footer con fondo oscuro - texto blanco para contraste AA */
:root:not(.theme-new) footer {
    background-color: var(--footer-bg); /* #2c3e50 */
    color: var(--text-on-primary); /* #ffffff - contraste 12.6:1 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

:root:not(.theme-new) footer p {
    color: var(--text-on-primary); /* #ffffff - contraste 12.6:1 */
    opacity: 0.9; /* Ligeramente más suave pero mantiene contraste AA */
}

/* Tema PRE: Footer específico */
html.theme-new footer {
    background-color: #f8fafc;
    color: var(--text-light);
    border-top: 1px solid var(--border-color);
}

html.theme-new footer .footer-content {
    padding: 12px 24px;
}

html.theme-new footer p {
    color: var(--text-light);
}

/* Modal de login */
.modal-login {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}

.modal-login-content {
    background-color: var(--card-background);
    margin: 10% auto;
    padding: 40px;
    border-radius: var(--radius-large, 16px);
    width: 90%;
    max-width: 400px;
    box-shadow: var(--shadow-modal);
    animation: modalFadeIn 0.3s ease;
    position: relative;
    z-index: 10001;
    border: 1px solid var(--border-color);
}

/* Tema PRE: Modal específico */
html.theme-new .modal-login-content {
    border-radius: var(--radius-large);
    padding: 32px;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-login-content h2 {
    margin-bottom: 25px;
    color: var(--primary-color);
    text-align: center;
}

.login-form-modal {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-form-modal .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-form-modal .form-group label {
    font-weight: 600;
    color: var(--text-color);
}

.login-form-modal .form-group input {
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    font-size: 1rem;
    transition: border-color 0.3s;
    box-sizing: border-box;
    line-height: 1.5;
    overflow: visible;
    min-height: 44px;
}

.login-form-modal .form-group input:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.error-message-login {
    padding: 12px;
    background-color: var(--error-input-bg);
    border: 1px solid var(--error-input-border);
    border-radius: 4px;
    color: var(--error-input-text);
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: none;
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 10002;
    width: 100%;
    box-sizing: border-box;
}

.error-message-login.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Avatar de usuario */
.avatar-usuario {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    border: 2px solid var(--avatar-border);
    overflow: hidden;
}

.avatar-usuario .material-icons {
    font-size: 28px;
    color: inherit;
    line-height: 1;
}

.avatar-usuario:hover {
    background-color: var(--avatar-hover);
    transform: scale(1.1);
    cursor: pointer;
}

/* Tema PRO: Avatar con icono blanco */
:root:not(.theme-new) .avatar-usuario .material-icons {
    color: var(--text-on-primary);
}

/* Tema PRE: Avatar con icono oscuro */
html.theme-new .avatar-usuario {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
}

html.theme-new .avatar-usuario .material-icons {
    color: var(--text-color);
}

/* Dropdown de usuario */
#usuarioInfo {
    position: relative;
}

.dropdown-usuario {
    display: none;
    position: fixed; /* Fixed para evitar scroll en el header */
    background-color: var(--card-background);
    min-width: 220px;
    box-shadow: var(--shadow-dropdown);
    z-index: 10003; /* Por encima de todo, incluyendo modales */
    border-radius: var(--radius-base, 12px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    /* Posición será calculada por JavaScript antes de mostrar */
    visibility: hidden; /* Ocultar hasta que tenga posición correcta */
    opacity: 0; /* Ocultar hasta que tenga posición correcta */
}

.dropdown-usuario a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-usuario a:last-child {
    border-bottom: none;
}

.dropdown-usuario a:hover {
    background-color: var(--background-color);
}

.dropdown-usuario a.dropdown-logout {
    color: var(--error-color, #c0392b);
    font-weight: var(--font-weight-medium, 500);
}

.dropdown-usuario a.dropdown-logout:hover {
    background-color: rgba(192, 57, 43, 0.1);
}

html.theme-new .dropdown-usuario {
    border-radius: var(--radius-base);
}

/* Sección de ajustes */
.ajustes-section {
    margin-bottom: 20px;
}

.ajustes-section h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 1.2rem;
}

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    max-width: 400px;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background-color: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.toast-error {
    background-color: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

.modal-login-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.btn-login-modal {
    flex: 1;
    padding: 12px 16px;
    background-color: var(--btn-primary-bg);
    border: 1px solid var(--btn-primary-border);
    color: var(--btn-primary-text);
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-login-modal:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-login-modal:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.btn-login-modal:active {
    transform: translateY(0);
}

.btn-login-modal:disabled {
    background-color: var(--border-color);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-cancel-login {
    flex: 1;
    padding: 12px 16px;
    background-color: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--btn-secondary-text);
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-cancel-login:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-cancel-login:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

/* Formulario de búsqueda */
.search-section {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: var(--radius-base, 12px);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}

/* Tema PRE: Ajustes específicos */
html.theme-new .search-section {
    padding: 24px;
    border-radius: var(--radius-base);
}

.search-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

/* Autocompletado */
.autocomplete-wrapper {
    position: relative;
}

/* Wrapper para selectores con icono chevron */
.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-wrapper .material-icons {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 20px;
    color: var(--text-light);
    z-index: 1;
}

.autocomplete-wrapper input,
.form-group select,
.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-base, 1rem);
    font-family: inherit;
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    background-color: var(--card-background);
    color: var(--text-color);
    line-height: 1.5;
    overflow: visible;
}

/* Select con padding extra para el icono */
.form-group select {
    padding-right: 40px;
    padding-top: 12px;
    padding-bottom: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    line-height: 1.5;
    overflow: visible;
}

/* Tema PRE: Inputs específicos */
html.theme-new .autocomplete-wrapper input,
html.theme-new .form-group select,
html.theme-new .form-group input[type="text"],
html.theme-new .form-group input[type="password"] {
    border-radius: var(--radius-base);
    border-width: 1px;
}

html.theme-new .autocomplete-wrapper input:focus,
html.theme-new .form-group select:focus,
html.theme-new .form-group input[type="text"]:focus,
html.theme-new .form-group input[type="password"]:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Input inline con botón */
.input-with-button {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.input-with-button .input-inline {
    flex: 1;
    min-height: 44px;
    margin: 0;
    padding: 12px 14px;
    line-height: 1.5;
    overflow: visible;
}

.input-with-button .btn-inline {
    min-height: 44px;
    height: auto;
    padding: 12px 20px;
    white-space: nowrap;
    margin: 0;
    align-self: center;
    flex-shrink: 0;
}

/* Asegurar que los botones inline mantengan los estilos hover Material 3 */
.input-with-button .btn-inline.btn-primary:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08) !important;
}

.input-with-button .btn-inline.btn-primary:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12) !important;
}

.input-with-button .btn-inline.btn-secondary:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08) !important;
}

.input-with-button .btn-inline.btn-secondary:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12) !important;
}

.autocomplete-wrapper input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* Accesibilidad: Focus visible para inputs */
.autocomplete-wrapper input:focus-visible,
.form-group select:focus-visible,
.form-group input[type="text"]:focus-visible,
.form-group input[type="password"]:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-base, 12px) var(--radius-base, 12px);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: var(--shadow-dropdown);
    margin-top: -1px;
}

/* Tema PRE: Ajuste de radius para sugerencias */
html.theme-new .autocomplete-suggestions {
    border-radius: 0 0 var(--radius-base) var(--radius-base);
}

.autocomplete-suggestions.show {
    display: block;
}

.autocomplete-suggestion {
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid var(--border-color);
}

.autocomplete-suggestion:last-child {
    border-bottom: none;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion[aria-selected="true"] {
    background-color: var(--background-color);
}

/* Filtro seleccionado */
.selected-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: var(--background-color);
    border-radius: 4px;
    margin-top: 8px;
}

.selected-filter span {
    flex: 1;
    font-weight: 500;
}

.selected-filter button {
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: background-color 0.3s;
}

.selected-filter button:hover {
    background-color: var(--error-color);
}

/* Botón de búsqueda */
.btn-search {
    padding: 12px 20px;
    background-color: var(--secondary-color);
    color: #ffffff;
    border: 1px solid var(--secondary-color);
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: center;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-search:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-search:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

/* Tema PRO: Botón de búsqueda con buen contraste */
:root:not(.theme-new) .btn-search {
    background-color: var(--secondary-color); /* #2980b9 - contraste 4.5:1 con blanco */
    color: #ffffff;
    border-color: var(--secondary-color);
}

:root:not(.theme-new) .btn-search:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-search:active {
    transform: translateY(0);
}

.btn-search:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Tema PRE: Botón de búsqueda como primario */
html.theme-new .btn-search {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
}

html.theme-new .btn-search:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-search:active {
    transform: translateY(1px);
}

/* Sección de resultados */
.results-section {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.results-section h2 {
    margin-bottom: 20px;
    color: var(--primary-color);
}

/* Control de ordenación */
.ordenacion-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.ordenacion-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.ordenacion-label {
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
}

.segmented-control {
    display: flex;
    background-color: var(--background-color);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    flex-wrap: wrap;
}

.segmented-control-item {
    flex: 1;
    min-width: 120px;
    padding: 10px 16px;
    background-color: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.segmented-control-item:hover {
    background-color: rgba(52, 152, 219, 0.1);
}

.segmented-control-item[aria-selected="true"],
.segmented-control-item.active {
    background-color: var(--secondary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

.segmented-control-item[aria-selected="true"]:hover,
.segmented-control-item.active:hover {
    background-color: var(--hover-color);
}

/* Botón de libros incompletos */
.btn-libros-incompletos {
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: #ffffff;
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-base, 6px);
    font-size: var(--font-size-sm, 0.9rem);
    font-weight: var(--font-weight-semibold, 600);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: var(--shadow);
    min-height: 40px;
    box-sizing: border-box;
}

/* Tema PRO: Botón de libros incompletos con buen contraste */
:root:not(.theme-new) .btn-libros-incompletos {
    background-color: var(--accent-color); /* #c0392b - contraste 4.5:1 con blanco */
    color: #ffffff;
    border-color: var(--accent-color);
}

:root:not(.theme-new) .btn-libros-incompletos:hover {
    background-color: var(--btn-incomplete-hover); /* #c0392b - contraste 4.5:1 con blanco */
    border-color: var(--btn-incomplete-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-libros-incompletos:active {
    transform: translateY(0);
}

.btn-libros-incompletos.active {
    background-color: var(--btn-incomplete-active-bg); /* #27ae60 - contraste 4.5:1 con blanco */
    border-color: var(--btn-incomplete-active-bg);
    color: #ffffff;
    box-shadow: var(--shadow);
}

.btn-libros-incompletos.active:hover {
    background-color: var(--btn-incomplete-active-hover); /* #229954 - contraste 4.5:1 con blanco */
    border-color: var(--btn-incomplete-active-hover);
}

.btn-libros-incompletos:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Botonera alfabética */
.alfabeto-container {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* Botón toggle para mobile */
.alfabeto-toggle {
    display: none; /* Oculto por defecto (solo visible en mobile) */
}

.alfabeto-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.btn-alfabeto {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    background-color: var(--background-color);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-alfabeto:hover {
    background-color: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

.btn-alfabeto:active {
    transform: translateY(0);
}

.btn-alfabeto.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-alfabeto.active {
    background-color: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

/* Sección de gestión */
.buscador-gestion {
    margin-bottom: 20px;
}

.input-buscador {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-background);
    color: var(--text-color);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.input-buscador:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.input-buscador::placeholder {
    color: var(--text-light);
}

.gestion-section {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: var(--radius-base, 12px);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

/* Tema PRE: Sección de gestión */
html.theme-new .gestion-section {
    padding: 24px;
    border-radius: var(--radius-base);
}

.gestion-container {
    margin-top: 20px;
}

.gestion-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    transition: all 0.2s ease;
}

.gestion-item:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-hover);
}

.gestion-item:focus-within {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Tema PRE: Items de gestión */
html.theme-new .gestion-item {
    border-radius: var(--radius-base);
    border-width: 1px;
}

.gestion-item-content {
    flex: 1;
}

.gestion-item-nombre {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
}

.btn-edit-item {
    padding: 8px 12px;
    background-color: transparent;
    border: 1px solid var(--secondary-color);
    border-radius: var(--radius-small, 8px);
    color: var(--secondary-color);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    font-family: inherit;
    min-height: 36px;
}

/* Tema PRO: Botones de edición con buen contraste */
:root:not(.theme-new) .btn-edit-item {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

:root:not(.theme-new) .btn-edit-item:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

:root:not(.theme-new) .btn-edit-item:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.btn-delete-item {
    padding: 8px 12px;
    background-color: transparent;
    border: 1px solid var(--btn-delete-border);
    border-radius: var(--radius-small, 8px);
    color: var(--btn-delete-text);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    font-family: inherit;
    min-height: 36px;
}

.btn-delete-item:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-delete-item:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.btn-edit-item:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-edit-item:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.btn-edit-item:focus-visible,
.btn-delete-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Tema PRE: Botones de edición/eliminación */
html.theme-new .btn-edit-item {
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

html.theme-new .btn-edit-item:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.results-container {
    display: grid;
    gap: 20px;
}

.result-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    background-color: var(--card-background);
    position: relative;
}

.result-item:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.result-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.result-thumbnail {
    width: 120px;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-small, 8px);
    background-color: var(--background-color);
}

.result-thumbnail-placeholder {
    width: 120px;
    height: 180px;
    border-radius: var(--radius-small, 8px);
    background-color: #e0e0e0;
    flex-shrink: 0;
}

/* Tema oscuro: placeholder más oscuro */
@media (prefers-color-scheme: dark) {
    .result-thumbnail-placeholder {
        background-color: #3a3a3a;
    }
}

/* Tema PRE: Cards de resultados */
html.theme-new .result-item {
    border-radius: var(--radius-base);
    border-width: 1px;
}

html.theme-new .result-thumbnail {
    border-radius: var(--radius-small);
}

html.theme-new .result-thumbnail-placeholder {
    border-radius: var(--radius-small);
}

.result-thumbnail[src=""],
.result-thumbnail:not([src]) {
    display: none;
}

.result-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.result-author {
    font-size: 1.1rem;
    color: var(--text-light);
    font-weight: 500;
}

.result-genre {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--background-color);
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-color);
    width: fit-content;
    border: 1px solid var(--border-color);
}

/* Tema PRE: Badge de género */
html.theme-new .result-genre {
    border-radius: var(--radius-base);
    background-color: #f1f5f9;
    border-color: var(--border-color);
}

.result-synopsis {
    color: var(--text-light);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal, 400);
    font-size: var(--font-size-base, 1rem);
}

/* Selector de prioridad para libros pendientes */
.prioridad-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    padding: 8px;
    cursor: default;
}

.prioridad-select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    background-color: var(--card-background);
    color: var(--text-color);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 32px;
    min-width: 60px;
    transition: all 0.2s ease;
}

.prioridad-select:hover {
    border-color: var(--primary-color);
    background-color: var(--background-color);
}

.prioridad-select:focus {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-color: var(--primary-color);
}

.prioridad-select option {
    background-color: var(--card-background);
    color: var(--text-color);
    padding: 8px;
}

.no-results {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
    font-size: 1.1rem;
}

/* Paginación */
.paginacion-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.btn-paginacion {
    padding: 8px 16px;
    background-color: var(--secondary-color);
    color: #ffffff;
    border: 1px solid var(--secondary-color);
    border-radius: var(--radius-small, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
    box-sizing: border-box;
}

/* Tema PRO: Botón de paginación con buen contraste */
:root:not(.theme-new) .btn-paginacion {
    background-color: var(--secondary-color); /* #2980b9 - contraste 4.5:1 con blanco */
    color: #ffffff;
    border-color: var(--secondary-color);
}

:root:not(.theme-new) .btn-paginacion:hover:not(:disabled) {
    background-color: var(--hover-color); /* #2471a3 - contraste 4.5:1 con blanco */
    border-color: var(--hover-color);
}

.btn-paginacion:hover:not(:disabled) {
    background-color: var(--hover-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-paginacion:disabled {
    background-color: var(--border-color);
    color: var(--text-color); /* Mejor contraste que text-light */
    cursor: not-allowed;
    opacity: 0.6;
}

/* Tema PRO: Botón deshabilitado con buen contraste */
:root:not(.theme-new) .btn-paginacion:disabled {
    background-color: #e0e0e0; /* Gris más claro para mejor contraste */
    color: #666666; /* Gris oscuro - contraste 4.5:1 sobre #e0e0e0 */
    border-color: #e0e0e0;
}

.paginacion-paginas {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-pagina-numero {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    background-color: var(--card-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-pagina-numero:hover {
    background-color: var(--background-color);
    border-color: var(--secondary-color);
    transform: translateY(-1px);
}

.btn-pagina-numero.pagina-actual {
    background-color: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
    font-weight: 700;
    cursor: default;
}

.btn-pagina-numero.pagina-actual:hover {
    transform: none;
    background-color: var(--secondary-color);
}

.paginacion-ellipsis {
    padding: 0 4px;
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 600;
    user-select: none;
}

/* Vista de detalle */
.detalle-section {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.detalle-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
}

.portada-container {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.detalle-portada {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--shadow-hover);
    display: block;
}

.portada-placeholder {
    width: 100%;
    max-width: 300px;
    min-height: 400px;
    background-color: var(--background-color);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 1.1rem;
}

.portada-placeholder p {
    margin: 0;
}

.btn-edit-portada {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.portada-container:hover .btn-edit-portada:not(:disabled) {
    opacity: 1;
}

.btn-edit-portada:disabled {
    opacity: 0;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-edit-portada:hover:not(:disabled) {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-edit-portada:active:not(:disabled) {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
}

.btn-edit-portada svg {
    width: 20px;
    height: 20px;
    stroke: var(--secondary-color);
    transition: stroke 0.3s;
}

.btn-edit-portada:hover svg {
    stroke: white;
}

.detalle-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detalle-titulo {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.detalle-autor {
    font-size: 1.3rem;
    color: var(--text-light);
    font-weight: 500;
}

.detalle-genero {
    display: inline-block;
    padding: 6px 16px;
    background-color: var(--background-color);
    border-radius: 16px;
    font-size: 1rem;
    color: var(--text-color);
    width: fit-content;
}

.detalle-sinopsis {
    font-size: var(--font-size-base, 1rem);
    line-height: 1.6;
    color: var(--text-color);
    margin-top: 10px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal, 400);
}

/* Campos editables */
.editable-field {
    position: relative;
}

.field-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.btn-edit {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--text-light);
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
}

.btn-edit:hover {
    background-color: var(--background-color);
    color: var(--secondary-color);
}

.btn-edit svg {
    width: 16px;
    height: 16px;
}

.edit-controls {
    margin-top: 10px;
}

.edit-input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.3s;
    box-sizing: border-box;
    line-height: 1.5;
    overflow: visible;
}

.edit-input:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.edit-input-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    min-height: 60px;
    line-height: 1.5;
    overflow: visible;
}

.edit-input-sinopsis {
    font-size: 1.1rem;
    line-height: 1.8;
    min-height: 200px;
    overflow: visible;
}

.edit-select {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-base, 1rem);
    font-family: inherit;
    background-color: var(--card-background);
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    appearance: none;
    line-height: 1.5;
    overflow: visible;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    box-sizing: border-box;
}

.edit-select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.edit-select:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Wrapper para edit-select también necesita el icono */
.edit-controls .select-wrapper {
    width: 100%;
}

.edit-controls .select-wrapper .material-icons {
    right: 12px;
}

.edit-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: flex-end;
}

.btn-save,
.btn-cancel {
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* btn-save es primario */
.btn-save {
    background-color: var(--btn-primary-bg);
    border: 1px solid var(--btn-primary-border);
    color: var(--btn-primary-text);
}

.btn-save:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-save:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

/* btn-cancel es secundario */
.btn-cancel {
    background-color: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

.btn-cancel:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-cancel:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

#mensajeEdicion {
    margin-bottom: 20px;
    padding: 12px 20px;
    border-radius: 4px;
    font-weight: 500;
}

/* Botón eliminar libro - ahora en el contenedor de acciones */
.btn-eliminar-libro {
    padding: 12px 24px;
    background-color: var(--btn-danger-bg);
    border: 1px solid var(--btn-danger-border);
    color: var(--btn-danger-text);
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow);
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.btn-eliminar-libro:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08), var(--shadow-hover);
}

.btn-eliminar-libro:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.btn-eliminar-libro:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.btn-eliminar-libro svg {
    width: 20px;
    height: 20px;
}

/* Modal de confirmación */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content h3 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.modal-content .form-group {
    margin-bottom: 20px;
}

.modal-content .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color);
}

.modal-content .form-group input[type="text"],
.modal-content .form-group input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s;
    line-height: 1.5;
    overflow: visible;
    min-height: 44px;
}

.modal-content .form-group input[type="text"]:focus,
.modal-content .form-group input[type="password"]:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.modal-content p {
    margin: 0 0 25px 0;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 1rem;
}

/* Contenedor de acciones en detalle */
.detalle-acciones {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.btn-modal-confirmar,
.btn-modal-cancelar {
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* btn-modal-confirmar es primario (o peligro si es para eliminar) */
.btn-modal-confirmar {
    background-color: var(--btn-danger-bg);
    border: 1px solid var(--btn-danger-border);
    color: var(--btn-danger-text);
}

.btn-modal-confirmar:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-modal-confirmar:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

/* btn-modal-cancelar es secundario */
.btn-modal-cancelar {
    background-color: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

.btn-modal-cancelar:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-modal-cancelar:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.detalle-premios {
    padding: 15px;
    background-color: var(--background-color);
    border-radius: 4px;
    border-left: 4px solid var(--secondary-color);
}

.detalle-premios h3 {
    margin-bottom: 8px;
    color: var(--primary-color);
}

/* Loading y errores */
.loading,
.error {
    text-align: center;
    padding: 40px;
    font-size: 1.1rem;
}

.error {
    color: var(--accent-color);
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    header .logo {
        font-size: 1.5rem;
    }

    .search-section,
    .results-section,
    .detalle-section {
        padding: 20px;
    }

    .result-item {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
        text-align: center;
    }

    .result-thumbnail {
        width: 100%;
        max-width: 150px;
        height: auto;
        aspect-ratio: 2/3;
        margin: 0 auto;
    }
    
    .result-thumbnail-placeholder {
        width: 100%;
        max-width: 150px;
        height: auto;
        aspect-ratio: 2/3;
        margin: 0 auto;
    }

    .result-info {
        text-align: left;
    }

    .detalle-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .portada-container {
        max-width: 200px;
        margin: 0 auto;
    }

    .detalle-portada {
        max-width: 200px;
    }

    .portada-placeholder {
        max-width: 200px;
        min-height: 300px;
    }

    .btn-edit-portada {
        opacity: 1; /* Siempre visible en móvil */
    }

    .detalle-titulo {
        font-size: 1.5rem;
    }

    .edit-input-titulo {
        font-size: 1.2rem;
    }

    .edit-buttons {
        flex-direction: column;
    }

    .btn-save,
    .btn-cancel {
        width: 100%;
    }

    .detalle-acciones {
        flex-direction: column;
        align-items: stretch;
    }
    
    .detalle-acciones .btn-primary,
    .detalle-acciones .btn-secondary,
    .detalle-acciones .btn-eliminar-libro {
        width: 100%;
    }

    .modal-content {
        padding: 20px;
        max-width: 90%;
    }

    .modal-buttons {
        flex-direction: column;
    }

    .btn-modal-confirmar,
    .btn-modal-cancelar {
        width: 100%;
    }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible para accesibilidad */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Botones secundarios */
.btn-secondary {
    padding: 8px 16px;
    background-color: var(--background-color);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 8px;
}

.btn-secondary:hover {
    background-color: var(--border-color);
    border-color: var(--secondary-color);
}

/* Botón primario general */
.btn-primary {
    padding: 12px 20px;
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 1px solid var(--btn-primary-border);
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    font-family: inherit;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

/* Material 3 hover: overlay oscuro sobre el color base */
.btn-primary:hover {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-primary:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Tema PRO: Botón primario específico */
:root:not(.theme-new) .btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
}

:root:not(.theme-new) .btn-primary:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

/* Tema PRE: Botón primario */
html.theme-new .btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
}

html.theme-new .btn-primary:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

/* Botón secundario general */
.btn-secondary {
    padding: 12px 20px;
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    font-family: inherit;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

/* Material 3 hover: overlay oscuro sobre el color base */
.btn-secondary:hover {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.btn-secondary:active {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.btn-secondary:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Tema PRO: Botón secundario específico */
:root:not(.theme-new) .btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

:root:not(.theme-new) .btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    border-color: var(--btn-secondary-hover-border);
}

/* Tema PRE: Botón secundario */
html.theme-new .btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

html.theme-new .btn-secondary:hover {
    /* Material 3 hover: overlay oscuro */
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

/* Resultados de Google Books */
.google-results-container {
    display: grid;
    gap: 15px;
}

.google-result-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 15px;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s;
    cursor: pointer;
    background-color: var(--card-background);
}

.google-result-item:hover {
    border-color: var(--secondary-color);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.google-result-thumbnail {
    width: 100px;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--background-color);
}

.google-result-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.google-result-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
}

.google-result-author {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 500;
}

.google-result-synopsis {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* Formulario de libro */
.book-form-section {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-top: 30px;
}

.book-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.book-preview {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    padding: 20px;
    background-color: var(--background-color);
    border-radius: 8px;
    margin-bottom: 20px;
}

.preview-portada {
    width: 150px;
    height: auto;
    border-radius: 4px;
    box-shadow: var(--shadow);
}

.preview-info h3 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.preview-info p {
    color: var(--text-light);
    margin-bottom: 8px;
}

.preview-sinopsis {
    font-size: 0.95rem;
    line-height: 1.6;
    max-height: 150px;
    overflow-y: auto;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--border-color);
    justify-content: flex-end;
}

/* Mensajes */
.message {
    padding: 15px 20px;
    border-radius: 4px;
    margin: 20px 0;
    font-weight: 500;
}

.message-success {
    background-color: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.message-error {
    background-color: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

/* Switch de tema */
.theme-switch-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
}

.theme-switch-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-on-primary);
    opacity: 0.9;
    white-space: nowrap;
    font-weight: var(--font-weight-medium, 500);
}

/* Tema PRO: Switch con texto blanco sobre header oscuro */
:root:not(.theme-new) .theme-switch-label {
    color: var(--text-on-primary); /* #ffffff - contraste 12.6:1 */
}

:root:not(.theme-new) .theme-switch-container > div > span:first-child,
:root:not(.theme-new) .theme-switch-container > div > span:last-child {
    color: var(--text-on-primary); /* #ffffff - contraste 12.6:1 */
    opacity: 0.8;
}

:root:not(.theme-new) .theme-switch-container > div > span.active {
    opacity: 1;
    font-weight: var(--font-weight-semibold, 600);
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.2s ease;
    border-radius: 24px;
}

.theme-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-switch input:checked + .theme-switch-slider {
    background-color: var(--primary-color);
}

.theme-switch input:checked + .theme-switch-slider:before {
    transform: translateX(24px);
}

.theme-switch:hover .theme-switch-slider {
    background-color: #94a3b8;
}

.theme-switch input:checked:hover + .theme-switch-slider {
    background-color: var(--primary-dark);
}

.theme-switch input:focus-visible + .theme-switch-slider {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Tema PRE: Switch en header blanco */
html.theme-new .theme-switch-container {
    margin-right: 12px;
}

html.theme-new .theme-switch-label {
    color: var(--text-color);
}

html.theme-new .theme-switch-container > div > span:first-child,
html.theme-new .theme-switch-container > div > span:last-child {
    color: var(--text-color);
    opacity: 0.6;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    transition: all 0.2s ease;
    user-select: none;
    cursor: pointer;
}

html.theme-new .theme-switch-container > div > span:first-child {
    margin-right: 4px;
}

html.theme-new .theme-switch-container > div > span:last-child {
    margin-left: 4px;
}

/* Estado activo para las etiquetas */
html.theme-new .theme-switch-container > div > span.active {
    opacity: 1;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--primary-color);
}

/* Responsive para mobile (hasta 768px) */
@media (max-width: 768px) {
    /* Header: NUNCA scroll - los dropdowns salen fuera */
    header {
        overflow: visible !important; /* NUNCA scroll en el header */
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    header .header-content {
        padding: 16px;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible !important; /* NUNCA scroll - los dropdowns salen fuera */
    }

    /* h1 más pequeño en mobile (máximo 20px) */
    .page-title {
        font-size: 20px !important;
    }

    /* Reducir gap entre inputs del buscador (4px menos) */
    .search-form {
        gap: 16px; /* Era 20px, ahora 16px (4px menos) */
    }

    /* Botón de buscar fill al padre */
    .btn-search {
        width: 100%;
        box-sizing: border-box;
    }

    /* Separación de 12px entre input de género y botón de buscar */
    .search-section > div[style*="display: flex"] {
        margin-top: 12px !important;
        width: 100%;
        box-sizing: border-box;
    }

    .search-section form + div {
        margin-top: 12px !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* En añadir.html: elementos de search-section en vertical y fill al padre */
    .search-section .input-with-button {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .search-section .input-with-button .input-inline {
        width: 100%;
        box-sizing: border-box;
    }

    .search-section .input-with-button .btn-inline {
        width: 100%;
        box-sizing: border-box;
    }

    /* Cambiar texto del botón "Volver a la búsqueda" por "Volver" en mobile */
    .btn-back span:not(.material-icons) {
        display: none;
    }

    .btn-back::after {
        content: 'Volver';
    }

    /* Ordenación: convertir segmented en select y apilar verticalmente */
    .ordenacion-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ordenacion-left {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .ordenacion-label {
        width: 100%;
    }

    /* Ocultar segmented control en mobile */
    .segmented-control {
        display: none !important;
    }

    /* Mostrar select de ordenación en mobile */
    .ordenacion-select {
        display: block !important;
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-base, 12px);
        font-size: var(--font-size-sm, 0.875rem);
        font-weight: var(--font-weight-medium, 500);
        font-family: inherit;
        background-color: var(--card-background);
        color: var(--text-color);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px;
        padding-right: 36px;
        box-sizing: border-box;
    }

    .ordenacion-select:focus {
        outline: 2px solid var(--border-focus);
        outline-offset: 2px;
    }

    /* Botón de incompletos fill al padre */
    .btn-libros-incompletos {
        width: 100%;
        box-sizing: border-box;
    }

    /* Alfabeto colapsable en mobile */
    .alfabeto-toggle {
        display: flex !important;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background-color: var(--card-background);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-base, 12px);
        font-size: var(--font-size-sm, 0.875rem);
        font-weight: var(--font-weight-medium, 500);
        color: var(--text-color);
        cursor: pointer;
        margin-bottom: 12px;
        box-sizing: border-box;
        transition: all 0.2s ease;
    }

    .alfabeto-toggle:hover {
        background-color: var(--hover-bg);
        border-color: var(--border-focus);
    }

    .alfabeto-toggle-icon {
        transition: transform 0.2s ease;
        font-size: 20px;
    }

    .alfabeto-toggle[aria-expanded="true"] .alfabeto-toggle-icon {
        transform: rotate(180deg);
    }

    .alfabeto-buttons {
        display: none; /* Oculto por defecto en mobile */
    }

    .alfabeto-container[data-expanded="true"] .alfabeto-buttons {
        display: flex; /* Mostrar cuando está expandido */
    }
}

/* Ocultar select de ordenación en desktop */
@media (min-width: 769px) {
    .ordenacion-select {
        display: none !important;
    }
}

/* Responsive para mobile (hasta 768px) - continuación */
@media (max-width: 768px) {
    /* Ocultar switch en mobile */
    .theme-switch-container {
        display: none !important;
    }

    /* Botones a la derecha del logo en mobile */
    header .header-content > div {
        flex-direction: row;
        width: auto;
        margin-left: auto;
        margin-top: 0;
        gap: 8px;
        flex: 0 0 auto;
        min-width: 0;
        box-sizing: border-box;
        overflow: visible !important; /* Permitir que los dropdowns se muestren */
        position: relative !important; /* Para que los dropdowns con position: absolute se posicionen correctamente */
    }

    .dropdown-gestion {
        width: auto;
        box-sizing: border-box;
    }

    .btn-dropdown {
        width: auto;
        justify-content: center;
        box-sizing: border-box;
        padding: 8px 12px;
    }

    /* Ocultar iconos en mobile */
    .btn-dropdown .material-icons {
        display: none !important;
    }

    /* Ajustar botón añadir libro en mobile */
    .btn-add-book {
        width: auto;
        justify-content: center;
        box-sizing: border-box;
        padding: 8px 12px;
    }

    .btn-login {
        width: auto;
        box-sizing: border-box;
        padding: 8px 12px;
    }

    /* Ajustar dropdown para que no se salga */
    .dropdown-content {
        max-width: calc(100vw - 32px);
        box-sizing: border-box;
        z-index: 10003 !important; /* Asegurar z-index alto en mobile */
    }

    /* Asegurar z-index del dropdown de usuario en mobile */
    .dropdown-usuario {
        z-index: 10003 !important; /* Por encima de todo */
        max-width: calc(100vw - 32px);
        box-sizing: border-box;
    }

    /* Ajustar avatar de usuario */
    #usuarioInfo {
        width: auto;
        justify-content: center;
    }
}

/* Responsive para página añadir */
@media (max-width: 768px) {
    .book-preview {
        grid-template-columns: 1fr;
    }

    .preview-portada {
        max-width: 150px;
        margin: 0 auto;
    }

    .google-result-item {
        grid-template-columns: 80px 1fr;
    }

    .google-result-thumbnail {
        width: 80px;
        height: 120px;
    }
}

/* Estilos para información de usuario en cards */
.result-usuario-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.badge-estado {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-base, 12px);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    text-align: center;
}

.badge-leido {
    background-color: #4caf50;
    color: white;
}

.badge-pendiente {
    background-color: #ff9800;
    color: white;
}

.result-valoracion {
    font-size: var(--font-size-base, 1rem);
    line-height: 1;
}

/* Estilos para sección de lectura en detalle */
.lectura-section {
    background-color: var(--card-background);
    padding: 24px;
    border-radius: var(--radius-base, 12px);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}

.lectura-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--text-color);
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
}

.lectura-estados {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.btn-lectura-estado {
    padding: 10px 20px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-base, 12px);
    background-color: var(--card-background);
    color: var(--text-color);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-lectura-estado::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.08);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn-lectura-estado:hover::before {
    opacity: 1;
}

.btn-lectura-estado:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-lectura-estado:active {
    transform: translateY(0);
}

.btn-lectura-estado.active {
    background-color: var(--primary-color);
    color: var(--text-on-primary, #ffffff);
    border-color: var(--primary-color);
    font-weight: var(--font-weight-semibold, 600);
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.2);
}

.btn-lectura-estado.active::before {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.btn-lectura-estado.active:hover::before {
    background-color: rgba(255, 255, 255, 0.15);
}

html.theme-new .btn-lectura-estado.active {
    background-color: var(--primary-color);
    color: var(--text-on-primary, #ffffff);
}

.lectura-valoracion {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.lectura-valoracion label {
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-color);
}

/* Link para eliminar estado de lectura */
.link-eliminar-estado {
    color: #dc3545;
    text-decoration: none;
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
    padding: 5px 0;
}

.link-eliminar-estado:hover {
    color: #c82333;
    text-decoration: underline;
}

.link-eliminar-estado:active {
    color: #bd2130;
}

html.theme-new .link-eliminar-estado {
    color: #dc3545;
}

html.theme-new .link-eliminar-estado:hover {
    color: #c82333;
}

.estrellas-container {
    display: flex;
    gap: 5px;
}

.estrella {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: transform 0.2s ease;
}

.estrella:hover {
    transform: scale(1.2);
}

.estrella.activa {
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
}

.detalle-usuario-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.detalle-valoracion {
    font-size: var(--font-size-lg, 1.125rem);
    line-height: 1;
}