/* === ReadFy Book Details Modal Styles === */

:root {
    --card-bg-browse: #fff;
    --text-primary-browse: #2d3748;
    --text-secondary-browse: #4a5568;
    --border-radius-main: 12px;
    --color-primario: #5867dd;
    --color-acento: #34d399;
    --color-link-hover: #4338ca; /* Un púrpura más oscuro para hover */
    --color-terciario: #79829c; /* Para texto sutil */
    --color-borde: #e2e8f0; /* Para bordes */
}

.modal-content-book {
    background-color: var(--card-bg-browse);
    margin: auto;
    padding: 1.5rem;
    border-radius: var(--border-radius-main);
    width: 100%;
    box-sizing: border-box;
    max-width: 800px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    position: relative;
    animation: slideDownModal .4s ease-out;
    max-height: 90vh;
    overflow-y: auto;
}

/* --- Layout para Móvil (por defecto) --- */
.modal-book-details-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
}

.modal-book-cover-wrapper {
    width: 170px;
    flex-shrink: 0;
}

.modal-book-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
}

.modal-book-info {
    display: flex;
    flex-direction: column;
    width: 100%;
}


.modal-book-info h3 {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 1rem 0;
}

/* --- Estilos para Autor Clicable (sin cambios) --- */
#modal-book-author {
    display: none; /* Oculto en móvil */
    font-size: 1rem;
    color: var(--text-secondary-browse);
    margin-bottom: 1.5rem;
}
.mobile-author {
    display: inline; /* Visible en móvil */
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-secondary-browse);
}
.author-link,
.author-name {
    font-weight: 600;
    color: var(--text-secondary-browse); /* Color base */
}
.author-link {
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    text-decoration-line: underline;
    text-decoration-color: transparent; /* Subrayado invisible por defecto */
    text-underline-offset: 3px;
    color: var(--color-primario); /* Color de enlace */
}
.author-link:hover {
    color: var(--color-link-hover); /* Color más oscuro al pasar el ratón */
    text-decoration-color: var(--color-link-hover); /* Mostrar subrayado al pasar el ratón */
}

.modal-book-info p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

#modal-book-summary, #modal-book-phrase {
    text-align: left; /* Asegurar alineación izquierda en móvil también */
}


.modal-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center; /* Centrado en móvil */
    margin-bottom: 1.5rem;
}

.modal-tag {
    background-color: #eef2ff;
    color: var(--color-primario);
    padding: .4rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: .85rem;
}

/* --- INICIO: Estilos para Info Editorial con Logo --- */
.publisher-info {
    font-size: 0.9rem;
    color: var(--color-terciario);
    margin-top: 1.5rem; /* Espacio arriba */
    padding-top: 1rem; /* Espacio interno superior */
    border-top: 1px solid var(--color-borde); /* Línea divisoria sutil */
    text-align: left; /* Alineado a la izquierda */
    display: flex; /* Usar flex para alinear logo y texto */
    align-items: center; /* Alinear verticalmente */
    gap: 0.5rem; /* Espacio entre logo y texto */
}

.publisher-logo {
    height: 20px; /* Altura fija para el logo */
    width: auto; /* Ancho automático para mantener proporción */
    max-width: 100px; /* Ancho máximo por si acaso */
    object-fit: contain; /* Asegura que el logo no se deforme */
    vertical-align: middle; /* Mejor alineación con el texto */
}

.publisher-name {
    font-weight: 600;
}

.publisher-link {
    font-weight: 600;
    color: var(--color-terciario); /* Color sutil */
    text-decoration: none;
    border-bottom: 1px dotted var(--color-terciario); /* Subrayado punteado */
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.publisher-link:hover {
    color: var(--color-primario);
    border-bottom-color: var(--color-primario);
}
/* --- FIN: Estilos para Info Editorial con Logo --- */

.modal-footer-book {
    display: flex;
    flex-direction: column; /* Apilado en móvil por defecto */
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.modal-footer-book > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem; /* Padding base */
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Estilo para el botón de Agregar (principal) */
#modal-add-to-collection-btn {
    background: linear-gradient(45deg, #4338ca, #6d28d9);
    color: white;
    border: none;
    box-shadow: 0 5px 15px -5px rgba(99, 102, 241, 0.5);
}

#modal-add-to-collection-btn:hover {
    transform: scale(1.03) translateY(-2px);
    box-shadow: 0 8px 20px -5px rgba(99, 102, 241, 0.4);
}

/* Estilo para el botón de Comprar (secundario) */
.btn-purchase {
    background-color: transparent;
    color: var(--color-primario);
    border: 2px solid #c7d2fe;
    padding: 0.8rem 1.5rem; /* Más pequeño */
    font-size: 1rem; /* Más pequeño */
}

.btn-purchase:hover {
    background-color: #eef2ff;
    border-color: var(--color-primario);
}


/* --- Layout para Escritorio (768px y más) --- */
@media (min-width: 768px) {
    .modal-content-book {
        padding: 2.5rem;
    }

    .modal-book-details-layout {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 2.5rem;
        align-items: flex-start;
        text-align: left;
    }

    .modal-book-cover-wrapper {
        width: 100%;
    }

    .modal-book-info h3 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    #modal-book-author {
        display: block; /* Visible en escritorio */
    }
    .mobile-author {
        display: none; /* Oculto en escritorio */
    }

    .modal-tags-container {
        justify-content: flex-start; /* Alineado a la izquierda en escritorio */
    }

    /* --- INICIO: Ajuste para Info Editorial en Escritorio --- */
    .publisher-info {
        text-align: left; /* Asegurar alineación izquierda */
        /* justify-content: flex-start;  Asegura alineación a la izquierda si usas flex */
    }
    /* --- FIN: Ajuste para Info Editorial en Escritorio --- */

    .modal-footer-book {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
        align-items: center;
    }

    .modal-footer-book > button:only-child {
        grid-column: 1 / -1;
    }
}