/* Estilos generales */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Animación para las tarjetas */
@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.card {
    animation: slideIn 0.3s ease-out forwards;
    opacity: 0;
    animation-delay: calc(var(--order) * 50ms);
    border: 1px solid #e5e7eb; 
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.card:not(.card-coming-soon):hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.gradient-bg {
     background: linear-gradient(135deg, #4F46E5, #7C3AED);
}

/* Estilo base de los botones de pestaña (para desktop y móvil si se reutiliza la clase) */
.tab-button {
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border-radius: 0.375rem; /* rounded-md */
    transition: all 0.2s ease;
    font-weight: 500; /* font-medium */
    border: 1px solid transparent; 
    border-bottom: none; 
    white-space: nowrap; 
}

/* Ajuste de padding para pestañas en pantallas más pequeñas si se usa el mismo .tab-button en desktop */
@media (max-width: 1023px) { /* lg breakpoint, ajustar si es necesario */
    #desktopNav .tab-button { /* Solo afecta a los botones de pestaña en la nav de escritorio */
        padding: 0.5rem 0.75rem; /* Un poco menos de padding horizontal */
    }
}


#desktopNav .tab-button:not(.tab-active) { /* Para pestañas de desktop inactivas */
     color: #C7D2FE; 
}
#desktopNav .tab-button:not(.tab-active):hover { /* Para pestañas de desktop inactivas hover */
     background-color: rgba(255, 255, 255, 0.1); 
     color: #FFFFFF; 
 }
#desktopNav .tab-button.tab-active { /* Para pestañas de desktop activas */
    background-color: rgba(255, 255, 255, 0.15); 
    color: #FFFFFF; 
    font-weight: 600; 
    border-color: rgba(255, 255, 255, 0.3); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}
#desktopNav .tab-button.tab-active::after {
    content: none;
 }


/* Estilos para los botones dentro del menú móvil */
.mobile-menu-button {
    display: block;
    width: 100%;
    max-width: 300px; 
    margin-left: auto;
    margin-right: auto;
    padding: 0.85rem 1rem; /* py-3.5 px-4 */
    text-align: center;
    font-size: 1.125rem; /* text-lg */
    border-radius: 0.375rem; /* rounded-md */
    color: #E0E7FF; /* indigo-100 o similar */
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
}
.mobile-menu-button:hover, .mobile-menu-button.tab-active-mobile {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-weight: 600;
}

.search-input-container { 
    position: relative;
    width: 100%; 
 }
.search-input:focus {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.4); 
}

.search-input-icon {
     color: #9CA3AF; 
     transition: color 0.2s ease; 
     pointer-events: none; 
}
.search-input-container input:focus ~ .search-input-icon { 
    color: #6366F1;
}
.clear-search-btn {
    position: absolute;
    right: 0.75rem; 
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF; 
    cursor: pointer;
    display: none; 
    transition: color 0.2s ease;
}
.clear-search-btn:hover {
    color: #6B7280; 
}
.search-input-container input:not(:placeholder-shown) ~ .clear-search-btn { 
    display: inline-block;
}

/* Estilos para el botón de favorito en la tarjeta */
.favorite-btn {
    transition: color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    color: #d1d5db; /* Gris claro - Color base no favorito */
}
.favorite-btn:hover {
    transform: scale(1.2); 
}
.favorite-btn.is-favorite {
     color: #fbbf24; /* Amarillo (Tailwind's yellow-500) - Color para favorito */
}


/* Clases para controlar la visibilidad y animación del menú móvil */
#mobileMenu.menu-open {
    opacity: 1;
    pointer-events: auto;
}

.content-area { display: flex; flex-grow: 1; transition: width 0.4s ease-in-out; }
.main-content { transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out; width: 100%; opacity: 1; }
.pdf-viewer { transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out; width: 0; opacity: 0; overflow: hidden; }
.cards-visible .main-content { width: 100%; opacity: 1; }
.cards-visible .pdf-viewer { width: 0; opacity: 0; }
.pdf-visible .main-content { width: 0; opacity: 0; }
.pdf-visible .pdf-viewer { width: 100%; opacity: 1; }