/* 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);
}

.encabezado .firma img {
    width: auto;
}

/* La firma de la UCR trae márgenes transparentes (el dibujo ocupa ~58 % de su alto): para que se vea del tamaño del identificador del
   CCP necesita más alto, y el encabezado crece con ella. */
.encabezado .firma-ucr img {
    height: 96px;
}

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

@media (max-width: 575.98px) {
    .encabezado .firma-ucr img {
        height: 72px;
    }

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

.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;
}