/* static/biblioteca/css/biblioteca.css
   La estructura propia de la biblioteca: encabezado, zona de cuenta, contenido y pie. Los colores salen de tema.css. */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-blanco);
}

#contenido {
    flex: 1 0 auto;
}

#contenido:focus {
    outline: none;
}

/* ===============================
   ENCABEZADO
   =============================== */
.encabezado {
    background: var(--color-principal);
    box-shadow: var(--sombra-suave);
}

/* Del mismo tamaño que en el encabezado del portal, en todos los anchos. La firma de la UCR es la misma imagen (60 px, con márgenes
   transparentes). El identificador del CCP de la biblioteca no trae márgenes: a 35 px el dibujo mide lo mismo que en el portal. */
.encabezado .firma img {
    width: auto;
}

.encabezado .firma-ucr img {
    height: 60px;
}

.encabezado .firma-ccp img {
    height: 35px;
}

.encabezado .bienvenida,
.encabezado .bienvenida a {
    color: var(--color-blanco);
}

.encabezado .bienvenida a {
    text-decoration: none;
}

.encabezado .bienvenida a:hover,
.encabezado .bienvenida a:focus {
    text-decoration: underline;
}

/* Los botones redondos de la zona de cuenta: accesibilidad, notificaciones, ingresar y salir. */
.cuenta-btn {
    color: var(--color-principal-oscuro);
    background: var(--color-blanco);
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cuenta-btn:hover,
.cuenta-btn:focus,
.cuenta-btn:active,
.cuenta-btn.show {
    color: var(--color-terciario);
    background: var(--color-blanco);
}

/* ===============================
   MENSAJES
   =============================== */
.mensajes .alert:last-child {
    margin-bottom: 0;
}

/* ===============================
   FORMULARIOS DE CUENTA
   =============================== */
.tarjeta-cuenta {
    max-width: 28rem;
    border: 0;
    box-shadow: var(--sombra-suave);
}

.tarjeta-cuenta .card-header {
    background: var(--color-suave);
    border-bottom: 3px solid var(--color-principal);
}

/* ===============================
   PIE
   =============================== */
/* Fondo negro con el bloque de secciones un tono más claro, como el portal. */
.pie {
    background: var(--color-pie);
    color: var(--color-blanco);
}

.pie .pie-secciones {
    background: var(--color-pie-secciones);
}

.pie a {
    color: var(--color-blanco);
    text-decoration: none;
}

.pie a:hover,
.pie a:focus {
    color: var(--color-terciario);
    text-decoration: underline;
}

.pie h2 {
    color: var(--color-blanco);
}

.pie li .bi {
    margin-right: .5rem;
}

.pie .firma-pie {
    height: 50px;
    width: auto;
}

@media print {
    header.encabezado,
    footer.pie,
    .mensajes {
        display: none !important;
    }
}

/* ===============================
   BARRA DE LA BIBLIOTECA (debajo del encabezado, como la barra de las apps del portal)
   =============================== */
.barra-biblioteca {
    background: var(--color-principal-claro);
}

.barra-biblioteca a {
    color: var(--color-principal-oscuro);
    text-decoration: none;
}

.barra-biblioteca .barra-nombre {
    color: var(--color-principal-oscuro);
    font-weight: 700;
}

.barra-biblioteca .barra-enlace {
    padding: .4rem .75rem;
    border-radius: .4rem;
    font-weight: 500;
}

.barra-biblioteca .barra-enlace:hover,
.barra-biblioteca .barra-enlace:focus,
.barra-biblioteca .barra-enlace.activo {
    background: var(--color-blanco);
    color: var(--color-principal-oscuro);
}

/* ===============================
   PORTADA Y CATÁLOGO
   =============================== */
.portada {
    background: var(--color-fondo);
}

.portada .buscador {
    margin-bottom: .75rem !important;
}

.tarjeta-tipo {
    color: var(--color-texto);
    border-left: 4px solid var(--color-principal);
}

.tarjeta-tipo:hover,
.tarjeta-tipo:focus {
    border-left-color: var(--color-terciario);
    background: var(--color-suave);
}

.resultados .resultado + .resultado {
    border-top: 1px solid var(--bs-border-color);
}

.resultados .resultado h2 a {
    text-decoration: none;
}

.resultados .resultado h2 a:hover,
.resultados .resultado h2 a:focus {
    text-decoration: underline;
}

.faceta .card-header {
    background: var(--color-suave);
}

.faceta .list-group-item {
    font-size: .875rem;
}

.filtro-activo {
    font-weight: 500;
    color: var(--color-texto);
}

/* El buscador es lo principal de la biblioteca: se distingue con una franja del color principal y una sombra suave, sin colores
   llamativos. */
.buscador {
    border: 1px solid var(--bs-border-color);
    border-top: 4px solid var(--color-principal);
    box-shadow: var(--sombra-suave);
}

.buscador .card-header {
    background: var(--color-blanco);
    border-bottom: 1px solid var(--bs-border-color);
}

.buscador .card-header h2 {
    color: var(--color-principal-oscuro);
}

.buscador .card-header .bi {
    color: var(--color-principal);
}

.buscador .input-group-lg .form-control:focus {
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* La tabla de publicaciones: los encabezados son enlaces que ordenan (como en Flask). */
.tabla-publicaciones thead th {
    background: var(--color-principal);
    white-space: nowrap;
}

.tabla-publicaciones thead th a {
    color: var(--color-blanco);
    text-decoration: none;
    display: block;
}

.tabla-publicaciones thead th a:hover,
.tabla-publicaciones thead th a:focus {
    color: var(--color-terciario-claro);
}

.tabla-publicaciones thead th .flecha {
    opacity: .6;
    font-size: .8em;
}

.tabla-publicaciones thead th.activa .flecha {
    opacity: 1;
}

.tabla-publicaciones .col-titulo {
    min-width: 18rem;
}

.tabla-publicaciones .col-autores {
    min-width: 12rem;
    font-size: .875rem;
}

.tabla-publicaciones .col-anio,
.tabla-publicaciones .col-visitas {
    white-space: nowrap;
}

.metadatos th {
    width: 14rem;
    color: var(--color-principal-oscuro);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .metadatos th {
        width: auto;
        white-space: normal;
    }
}

/* ===============================
   PÁGINAS DE UNA PUBLICACIÓN: el contenido va en «hojas» blancas con borde y sombra sobre un fondo suave (como en el original)
   =============================== */
body.fondo-suave {
    background: var(--color-fondo);
}

.hoja {
    background: var(--color-blanco);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
    padding: 1.25rem;
}

@media (min-width: 992px) {
    .hoja {
        padding: 2rem;
    }

    .hoja-lateral {
        padding: 1.5rem;
    }
}

.hoja .titulo-publicacion {
    color: var(--color-principal-oscuro);
    padding-bottom: .75rem;
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--color-principal);
}

.hoja .titulo-seccion {
    color: var(--color-principal-oscuro);
    padding-bottom: .35rem;
    margin-bottom: .75rem;
    border-bottom: 2px solid var(--color-principal);
}

.hoja .resumen {
    text-align: justify;
    hyphens: auto;
}

/* ===============================
   GESTIÓN
   =============================== */
.barra-biblioteca .btn.barra-enlace {
    color: var(--color-principal-oscuro);
    text-decoration: none;
    border: 0;
}

.menu-gestion .dropdown-header {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.tabla-gestion thead th {
    background: var(--color-suave);
    white-space: nowrap;
}

.tabla-gestion thead th a {
    color: var(--color-principal-oscuro);
    text-decoration: none;
}

.formulario-gestion {
    max-width: 52rem;
}

.formulario-publicacion legend {
    float: none;
}

/* El selector de autores y temas (js/selector_multiple.js) */
.selector-multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    cursor: text;
    min-height: calc(1.5em + .75rem + 2px);
}

.selector-multiple:focus-within {
    border-color: var(--color-principal-claro);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.selector-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.selector-etiqueta {
    display: inline-flex;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-texto);
    white-space: normal;
    text-align: left;
}

.selector-etiqueta .btn-close {
    font-size: .6rem;
}

.selector-entrada {
    flex: 1 1 12rem;
    min-width: 8rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-texto);
}

.selector-sugerencias {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    box-shadow: var(--sombra-suave);
    background: var(--color-blanco);
    max-height: 16rem;
    overflow-y: auto;
    margin: .25rem 0 0;
}

.selector-opcion,
.selector-vacio {
    padding: .4rem .75rem;
}

.selector-opcion {
    cursor: pointer;
}

.selector-opcion.activa,
.selector-opcion:hover {
    background: var(--color-suave);
}

.selector-crear {
    color: var(--color-principal);
    font-weight: 500;
    border-top: 1px solid var(--bs-border-color);
}

/* ===============================
   NOTIFICACIONES (la campana del encabezado tiene fondo claro, como la del portal)
   =============================== */
.panel-notificaciones {
    min-width: 22rem;
    max-width: calc(100vw - 1rem);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-blanco);
    color: var(--color-texto);
}

.notificacion-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    width: 100%;
    padding: .6rem 1rem;
    border: 0;
    background: transparent;
    color: var(--color-texto);
    text-align: left;
}

.notificacion-item:hover,
.notificacion-item:focus {
    background: var(--color-suave);
}

.notificacion-item.no-leida {
    font-weight: 600;
}

.notificacion-item .punto {
    flex: 0 0 auto;
    width: .6rem;
    height: .6rem;
    margin-top: .45rem;
    border-radius: 50%;
}

.punto-info { background: var(--color-principal); }
.punto-exito { background: var(--color-exito); }
.punto-aviso { background: var(--color-terciario); }
.punto-error { background: var(--color-error); }

.texto-con-saltos {
    white-space: pre-line;
}

/* Una línea fija del buscador (viene de una categoría): se ve el nombre, no se edita; se quita con su «x». */
.linea-fija-valor {
    background: var(--color-suave);
    border-left: 3px solid var(--color-principal);
}

/* La bitácora de una corrida de cosecha: texto fijo, con barra propia para que no estire la página. */
.bitacora {
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    background: var(--color-suave);
}

/* La franja del sitio de pruebas (SITIO_DE_PRUEBAS): imposible de confundir con el sitio real. */
.aviso-pruebas {
    background: repeating-linear-gradient(-45deg, var(--color-terciario), var(--color-terciario) 12px, var(--color-terciario-claro) 12px, var(--color-terciario-claro) 24px);
    color: var(--color-texto);
    font-weight: 600;
    text-align: center;
    padding: .35rem 1rem;
}