/* $This file is distributed under the terms of the license in LICENSE$ */

/* ==========================================================================
   menupage-browse.css
   Estilos específicos de menupage-browse.ftl (listado de clases + A-Z).
   Basado en wilma.css, aislado bajo #browse-by para no afectar otras vistas.
   ========================================================================== */

#browse-by {
    --browse-red: #e2001b;
    --browse-navy: #0e304e;
    --browse-muted: #5e6363;
    --browse-border: #e7e9ec;
}

#browse-by .row {
    padding: 0 !important;
}

/* ------------------------------------------------------------------------
   LADO IZQUIERDO — Tabs de clases (Profesores e investigadores, ...)
   ------------------------------------------------------------------------ */

#browse-classes {
    background-color: #fff;
    border: 1px solid var(--browse-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    overflow: hidden;
}

#browse-classes li.list-group-item {
    margin: 0 !important;
    border: none;
    border-bottom: 1px solid var(--browse-border);
    padding: 12px 16px;
    transition: background-color .2s ease-in-out;
}

#browse-classes li.list-group-item:last-child {
    border-bottom: none;
}

#browse-classes li.list-group-item:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}

#browse-classes li.list-group-item.selected,
#browse-classes li.list-group-item a.selected {
    background-color: #f8f9fa;
    font-weight: bold;
}

#browse-classes li.list-group-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: auto;
    text-decoration: none;
    color: var(--browse-navy);
    font-weight: 500;
    font-size: 1rem;
}

/* Icono circular/redondeado a la izquierda de cada clase */
.browse-class-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 10px;
}

.browse-class-icon svg {
    width: 22px;
    height: 22px;
}

.browse-class-icon.icon-people {
    background-color: #fbe3e6;
    color: var(--browse-red);
}

.browse-class-icon.icon-admin {
    background-color: #e7e8f6;
    color: var(--browse-navy);
}

.browse-class-icon.icon-default {
    background-color: #eef1f4;
    color: var(--browse-muted);
}

/* Etiqueta de la clase, ocupa el espacio central */
.browse-class-label {
    flex: 1 1 auto;
    line-height: 1.2;
}

/* Badge rojo con el número de elementos */
ul#browse-classes li a span.browse-class-count {
    flex: 0 0 auto;
    width: auto;
    min-width: 40px;
    font-size: .85rem !important;
    font-weight: 700;
    color: #fff !important;
    background-color: var(--browse-red) !important;
    border-radius: 7px;
    padding: 4px 10px;
    text-align: center;
}

/* ------------------------------------------------------------------------
   LADO DERECHO — Selector alfabético A-Z
   ------------------------------------------------------------------------ */

nav#alpha-browse-container {
    background-color: #fff !important;
    border: 1px solid var(--browse-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    float: unset !important;
    width: 100%;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px !important;
}

nav#alpha-browse-container .selected-class {
    margin: 0;
}

ul#alpha-browse-individuals {
    background-color: transparent !important;
    float: unset !important;
    width: auto !important;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0;
    padding: 0;
}

ul#alpha-browse-individuals li.list-inline-item {
    margin: 0;
}

/* Todas las entradas (Todo + letras) comparten exactamente el mismo
   tamaño/peso por defecto; sólo `.selected` cambia de color */
nav#alpha-browse-container li a {
    display: inline-block;
    font-weight: 500;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: var(--browse-navy) !important;
    margin: 2px 10px;
    padding-bottom: 4px;
    text-transform: capitalize;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    vertical-align: baseline;
}

ul#alpha-browse-individuals li.list-inline-item:first-child a {
    margin-left: 0;
}

/* Único indicador rojo: el elemento realmente activo (clase que Vitro
   alterna vía JS al hacer click). Ninguna regla debe fijarlo por posición. */
nav#alpha-browse-container li a.selected,
nav#alpha-browse-container li a[aria-current="true"] {
    font-weight: 700;
    color: var(--browse-red) !important;
    border-bottom-color: var(--browse-red);
}

nav#alpha-browse-container li a:hover {
    color: var(--browse-red) !important;
}

/* ------------------------------------------------------------------------
   Paginación numérica bajo el selector A-Z (marcado generado en runtime)
   Se apoya en las clases ya usadas por Vitro (.pagination.menupage) para
   heredar este estilo si el bloque de paginación llega por otro medio.
   NOTA: el texto "Página" ya viene en el marcado generado por Vitro —
   aquí sólo se da formato, no se debe volver a inyectar el texto.
   ------------------------------------------------------------------------ */

.pagination.menupage {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 4px;
    background-color: #fff;
    border: 1px solid var(--browse-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    padding: 12px 20px;
    margin: 0;
    list-style: none;
}

.pagination.menupage,
.pagination.menupage * {
    font-size: 14px;
}

.pagination.menupage li {
    list-style: none;
    margin: 0;
}

/* Etiqueta "Página" que ya trae el marcado (texto suelto, span, strong...) */
.pagination.menupage > span:first-child,
.pagination.menupage > strong:first-child,
.pagination.menupage .pageLabel {
    font-weight: 600;
    color: var(--browse-navy);
    margin-right: 6px;
}

.pagination.menupage li a,
.pagination.menupage a.page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    color: var(--browse-navy) !important;
    text-decoration: none;
    box-shadow: none !important;
}

.pagination.menupage li a:hover,
.pagination.menupage a.page-link:hover {
    background: #f1f2ee !important;
}

/* Página actual: cubre las variantes de marcado más comunes
   (li.selected/.active/.current, a.selected/.active, aria-current) */
.pagination.menupage li.selected a,
.pagination.menupage li.active a,
.pagination.menupage li.current a,
.pagination.menupage a.selected,
.pagination.menupage a.active,
.pagination.menupage a.current,
.pagination.menupage a[aria-current="page"] {
    background-color: var(--browse-red) !important;
    color: #fff !important;
    font-weight: 700;
}

/* Flecha "siguiente" (rel="next", .next o texto ›/») */
.pagination.menupage li.next a,
.pagination.menupage a.next,
.pagination.menupage a[rel="next"] {
    border: 1px solid var(--browse-red) !important;
    color: var(--browse-red) !important;
    border-radius: 50% !important;
    width: 26px;
    min-width: 26px;
}