.
* Los enlaces de autor tienen z-index mayor y son independientemente focusables.
*/
.mp-card-link {
color: inherit;
text-decoration: none;
}
.mp-card-link::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: var(--mp-radius);
}
/* Anillo de foco visible en el enlace del título */
.mp-card-link:focus {
outline: none;
}
.mp-card-link:focus::before {
outline: 3px solid var(--mp-color-primary);
outline-offset: 2px;
}
.mp-libro-portada {
position: relative;
background: var(--mp-color-bg);
padding-top: 140%;
overflow: hidden;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
margin-right: 0;
margin-bottom: 15px;
border-radius: 4px;
}
.mp-libro-portada img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.mp-libro-portada-placeholder {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #fff3e6 0%, #ffe0cc 100%);
}
.mp-libro-portada-placeholder span {
font-size: 3rem;
font-weight: 700;
color: var(--mp-color-primary);
text-transform: uppercase;
}
.mp-badge {
position: absolute;
top: 8px; right: 8px;
padding: 2px 8px;
border-radius: 9999px;
font-size: 11px;
font-weight: 600;
color: #fff;
letter-spacing: .3px;
}
.mp-badge--libre { background: var(--mp-color-libre); }
.mp-badge--registrado { background: var(--mp-color-registrado); }
.mp-badge--externo { background: var(--mp-color-externo); }
.mp-libro-info {
padding: 12px;
}
.mp-libro-titulo {
font-size: 14px;
font-weight: 600;
margin: 0 0 6px;
line-height: 1.3;
color: var(--mp-color-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mp-libro-autor,
.mp-libro-area,
.mp-libro-anio {
font-size: 12px;
color: var(--mp-color-muted);
margin: 2px 0;
}
.mp-libro-autor { font-style: italic; }
/* El enlace del autor queda encima del overlay del enlace de título */
.mp-autor-link {
position: relative;
z-index: 1;
color: var(--mp-color-primary);
text-decoration: none;
}
.mp-autor-link:hover { text-decoration: underline; }
.mp-autor-link:focus {
outline: 2px solid var(--mp-color-primary);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================================================
Vista lista (tabla)
============================================================ */
.mp-lista-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.mp-lista-table th {
text-align: left;
padding: 10px 12px;
background: var(--mp-color-bg);
border-bottom: 2px solid var(--mp-color-border);
font-weight: 600;
color: var(--mp-color-text);
}
.mp-lista-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--mp-color-border);
color: var(--mp-color-text);
vertical-align: middle;
}
.mp-lista-table tr:hover td {
background: var(--mp-color-bg);
}
/* ============================================================
Estado de carga / sin resultados
============================================================ */
.mp-sin-resultados {
grid-column: 1 / -1;
text-align: center;
color: var(--mp-color-muted);
padding: 40px 0;
}
.mp-cargando {
text-align: center;
padding: 20px;
color: var(--mp-color-muted);
}
.mp-spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid var(--mp-color-border);
border-top-color: var(--mp-color-primary);
border-radius: 50%;
animation: mp-spin .6s linear infinite;
vertical-align: middle;
margin-right: 6px;
}
@keyframes mp-spin {
to { transform: rotate(360deg); }
}
/* ============================================================
Paginación
============================================================ */
#mp-paginacion {
margin-top: 32px;
}
.mp-paginacion {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
flex-wrap: wrap;
}
.mp-pag-btn {
min-width: 40px;
height: 40px;
padding: 0 10px;
border: 1px solid var(--mp-color-border);
border-radius: var(--mp-radius);
background: #fff;
color: var(--mp-color-text);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.mp-pag-btn:hover:not(:disabled) {
border-color: var(--mp-color-primary);
color: var(--mp-color-primary);
background: #fff3e6;
}
.mp-pag-btn:focus {
outline: 2px solid var(--mp-color-primary);
outline-offset: 2px;
}
.mp-pag-btn--activo {
background: var(--mp-color-primary);
border-color: var(--mp-color-primary);
color: #fff;
cursor: default;
}
.mp-pag-btn--activo:hover {
background: var(--mp-color-primary);
color: #fff;
}
.mp-pag-btn--nav {
font-size: 18px;
font-weight: 400;
color: var(--mp-color-muted);
}
.mp-pag-ellipsis {
min-width: 32px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--mp-color-muted);
font-size: 14px;
user-select: none;
}
/* ============================================================
Breadcrumb (Yoast SEO)
============================================================ */
.mp-breadcrumb-wrap {
margin-bottom: 16px;
font-size: 13px;
font-family: "Open Sans", sans-serif;
}
/* Yoast genera .breadcrumb-trail como wrapper raíz */
.mp-breadcrumb-wrap .breadcrumb-trail,
.mp-biblioteca-wrap .breadcrumb-trail {
display: block;
color: #666;
line-height: 1.6;
}
.mp-breadcrumb-wrap .breadcrumb-trail a,
.mp-biblioteca-wrap .breadcrumb-trail a {
color: #FF7200 !important;
text-decoration: none !important;
}
.mp-breadcrumb-wrap .breadcrumb-trail a:hover,
.mp-biblioteca-wrap .breadcrumb-trail a:hover {
text-decoration: underline !important;
}
/* El último item (página actual) no tiene enlace */
.mp-breadcrumb-wrap .breadcrumb_last,
.mp-biblioteca-wrap .breadcrumb_last,
.mp-single-libro-wrap .breadcrumb_last strong {
color: var( --e-global-color-secondary );
}
/* Compatibilidad con la child theme: el breadcrumb se pone en un sin clase */
.mp-biblioteca-wrap > div > .breadcrumb-trail {
display: block;
font-size: 13px;
font-family: "Open Sans", sans-serif;
color: #666;
margin-bottom: 16px;
line-height: 1.6;
}
.mp-biblioteca-wrap > div > .breadcrumb-trail a {
color: #FF7200 !important;
text-decoration: none !important;
}
.mp-biblioteca-wrap > div > .breadcrumb-trail a:hover {
text-decoration: underline !important;
}
/* ============================================================
Single libro
============================================================ */
.mp-single-libro-wrap {
max-width: 1100px;
margin: 0 auto;
padding: 32px 16px;
font-family: "Open Sans", sans-serif;
}
.mp-single-libro-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
margin-bottom: 48px;
}
@media (max-width: 680px) {
.mp-single-libro-layout {
grid-template-columns: 1fr;
}
}
.mp-single-portada-img {
width: 100%;
height: auto;
border-radius: var(--mp-radius);
box-shadow: var(--mp-shadow-hover);
display: block;
}
.mp-single-portada-placeholder {
width: 100%;
padding-top: 140%;
position: relative;
background: linear-gradient(135deg, #fff3e6 0%, #ffe0cc 100%);
border-radius: var(--mp-radius);
overflow: hidden;
}
.mp-single-portada-placeholder span {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 700;
color: var(--mp-color-primary);
}
.mp-single-titulo {
font-size: 1.75rem;
font-weight: 700;
color: var(--mp-color-text);
margin: 0 0 20px;
line-height: 1.2;
}
.mp-single-meta {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 16px;
margin: 0 0 20px;
font-size: 14px;
}
.mp-single-meta dt {
color: var(--mp-color-muted);
font-weight: 600;
white-space: nowrap;
}
.mp-single-meta dd {
color: var(--mp-color-text);
margin: 0;
}
.mp-single-meta dd a {
color: var(--mp-color-primary);
text-decoration: none;
}
.mp-single-descripcion {
font-size: 14px;
line-height: 1.7;
color: var(--mp-color-text);
margin-bottom: 24px;
border-left: 3px solid var(--mp-color-border);
padding-left: 16px;
}
/* Botones de acción */
.mp-single-acciones {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mp-btn {
display: inline-block;
padding: 12px 22px;
border-radius: var(--mp-radius);
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
border: none;
transition: opacity .2s, transform .1s;
line-height: 1;
}
.mp-btn:hover {
opacity: .88;
transform: translateY(-1px);
}
.mp-btn--descarga { background: var(--mp-color-primary); color: #fff; }
.mp-btn--lectura { background: var(--mp-color-accent); color: #fff; }
.mp-btn--externo { background: var(--mp-color-externo); color: #fff; }
.mp-btn--login { background: #333; color: #fff; }
.mp-btn--secondary { background: transparent; border: 2px solid var(--mp-color-accent); color: var(--mp-color-accent); padding: 10px 20px; }
.mp-btn--compra { background: var(--mp-color-compra); color: #fff; }
/* Libros relacionados */
.mp-relacionados {
border-top: 1px solid var(--mp-color-border);
padding-top: 32px;
}
.mp-relacionados-titulo {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 20px;
color: var(--mp-color-text);
}
.mp-grid--relacionados {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
.mp-grid--relacionados {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.mp-grid--relacionados {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
Modal visor PDF
============================================================ */
.mp-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
}
.mp-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.6);
}
.mp-modal-contenido {
position: relative;
width: 90vw;
height: 90vh;
background: #fff;
border-radius: var(--mp-radius);
overflow: hidden;
display: flex;
flex-direction: column;
}
.mp-modal-cerrar {
position: absolute;
top: 10px; right: 12px;
background: #fff;
border: none;
border-radius: 50%;
width: 32px; height: 32px;
font-size: 20px;
cursor: pointer;
z-index: 1;
line-height: 1;
box-shadow: var(--mp-shadow);
display: flex;
align-items: center;
justify-content: center;
}
#mp-visor-iframe {
flex: 1;
width: 100%;
height: 100%;
border: none;
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 600px) {
.mp-grid {
grid-template-columns: repeat(2, 1fr);
}
.mp-biblioteca-toolbar {
flex-wrap: wrap;
}
#mp-busqueda-libro {
flex: 1 1 100%;
order: -1;
}
.mp-btn-toolbar--primary {
flex: 1;
}
.mp-filtros-panel {
flex-direction: column;
align-items: stretch;
}
.mp-filtro-campo {
min-width: 0;
width: 100%;
}
}