/* == TOKENS == */

:root {
  /* Core brand */
  --brand-primary:        #002f87; /* azul oscuro: h1-h6, enlaces importantes */
  --brand-secondary:      #114da6; /* azul medio: enlaces de texto, fondos rellenos */
  --brand-text:           #0a0e14;
  --brand-white:          #ffffff;
  --brand-on-primary:     #ffffff;
  --brand-bg:             #ffffff;
  --brand-bg-subtle:      #f7f7f7;

  /* Enlaces */
  --brand-link:           #114da6;
  --brand-link-strong:    #002f87;
  --brand-link-hover:     #363d47;

  /* Controles rellenos (botones, tabs, paginación, dropdown activo) */
  --brand-fill-bg:        #114da6;
  --brand-fill-bg-hover:  #002f87;
  --brand-fill-color:     #ffffff;

  /* Botón secundario */
  --brand-secondary-btn-bg:       #0a0e14;
  --brand-secondary-btn-bg-hover: #363d47;

  /* Header */
  --brand-header-bg:         #fbfbfb;
  --brand-header-link:       #010c22;
  --brand-header-link-hover: rgba(29, 29, 27, 0.7);
  --brand-header-rule-light: #9cb9ea;
  --brand-header-rule-dark:  #377dbe;

  /* Nav-links tipo botón */
  --brand-navlink-bg:          #f7f7f7;
  --brand-navlink-color:       #114da6;
  --brand-navlink-hover-bg:    #2652b6;
  --brand-navlink-hover-color: #ffffff;

  /* Semánticos */
  --brand-danger:   #ad1519;
  --brand-warning:  #5e1503;
  --brand-info:     #010c22;
  --brand-disabled: #696e75;

  /* Tipografía */
  --font-base:    "Open Sans";
  --font-heading: "Mulish";

  /* Forma */
  --border-radius:      8px;
  --border-radius-pill: 100px;

  /* Footer */
  --brand-footer-bg:          #363d47;
  --brand-footer-color:       #ffffff;
  --brand-footer-link-hover:  rgba(255, 255, 255, 0.7);
  --brand-footer-rule:        rgba(255, 255, 255, 0.25);
  --brand-footer-icon-border: rgba(255, 255, 255, 0.5);

  /* Logo */
  --nav-logo-h: 75px;
  --nav-logo-w: 420px;

  /* Hero (home) */
  --brand-hero-bg:     #f6fcff;
  --brand-hero-border: #d0ddf5;

  /* Buscador unificado (home + header) */
  --brand-search-border: #c9d4e8;
}

/* == BOOTSTRAP MAP == */

:root {
  --bs-primary:          var(--brand-secondary);
  --bs-primary-rgb:      17, 77, 166;
  --bs-link-color:       var(--brand-link);
  --bs-link-hover-color: var(--brand-link-hover);
  --bs-body-color:       var(--brand-text);
  --bs-body-bg:          var(--brand-bg);
  --bs-body-font-family: var(--font-base), "Noto Sans", sans-serif;
  --bs-border-radius:    var(--border-radius);
  --bs-danger:           var(--brand-danger);
  --bs-danger-rgb:       173, 21, 25;
  --bs-warning:          var(--brand-warning);
  --bs-warning-rgb:      94, 21, 3;
  --bs-info:             var(--brand-info);
  --bs-info-rgb:         1, 12, 34;
}

/* FA Brands — brands.scss no está incluido en compiled.css de VuFind 11.
   Se declara el font-face apuntando al woff2 ya presente en el tema padre,
   y se definen solo los 5 iconos usados en el footer. */

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../../bootstrap5/css/vendor/font-awesome/webfonts/fa-brands-400.woff2') format('woff2');
}

.fa-brands,
.fab {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-whatsapp::before    { content: '\f232'; }
.fa-x-twitter::before   { content: '\e61b'; }
.fa-youtube::before     { content: '\f167'; }
.fa-linkedin-in::before { content: '\f0e1'; }
.fa-facebook-f::before  { content: '\f39e'; }

/* == BASE == */

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSansVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSansVF-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Mulish";
  src: url("fonts/MulishVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mulish";
  src: url("fonts/MulishVF-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

html,
body {
  font-family: var(--font-base), "Noto Sans", sans-serif;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading), sans-serif;
  color: var(--brand-primary);
}

.modal-title,
thead th {
  font-family: var(--font-heading), sans-serif;
}

/* Encabezados de grupos de faceta */
#search-sidebar .facet-group .facet-title,
#search-sidebar .facet-group h3 {
  font-family: var(--font-heading), sans-serif;
}

/* == LAYOUT == */

/* Sticky footer */
body > .main {
  flex: 1;
  margin-bottom: 3rem;
}

/* Logo */
header .navbar-brand {
  background: url(../images/logo.png) no-repeat left center / auto 100%;
  height: var(--nav-logo-h);
  width: var(--nav-logo-w);
  max-width: 100%;
  font-size: 0; /* oculta el texto "VuFind" */
  display: block;
  margin: 20px 0;
}

/* Header background */
header.hidden-print {
  background-color: var(--brand-header-bg);
  margin-bottom: 0;
}

/* Borde inferior bicolor INSST — debajo del staticpages-nav para que visualmente
   forme parte del bloque de cabecera */
nav.staticpages-nav {
  border-bottom: .8rem solid transparent;
  border-image: linear-gradient(to left,
    var(--brand-header-rule-light) 0 25%,
    var(--brand-header-rule-dark)  25% 75%,
    var(--brand-header-rule-light) 75%) 1;
  background-color: var(--brand-header-bg);
}

/* Enlaces del staticpages-nav */
.staticpages-nav-list a {
  color: #010c22;
  text-decoration: none;
  background: none !important;
  background-color: transparent !important;
}

.staticpages-nav-list a:hover,
.staticpages-nav-list a:focus {
  text-decoration: underline;
  opacity: .7;
  color: #1d1d1b !important;
}

/* Fallback: si no hay staticpages-nav en la página, el borde va en el header */
header.hidden-print:not(:has(+ nav.staticpages-nav)) {
  border-bottom: .8rem solid transparent;
  border-image: linear-gradient(to left,
    var(--brand-header-rule-light) 0 25%,
    var(--brand-header-rule-dark)  25% 75%,
    var(--brand-header-rule-light) 75%) 1;
}

header.hidden-print .nav-link,
.banner .navbar-nav .nav-link .fa {
  color: var(--brand-header-link);
}

.banner .navbar-nav .nav-link:hover .fa {
  color: var(--brand-header-link-hover);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

header.hidden-print .nav-link:hover,
header.hidden-print .nav-link:focus,
header.hidden-print .nav-link:active,
header.hidden-print .nav-link:visited,
.banner .navbar-nav .nav-link.active,
.banner .navbar-nav .nav-link.show {
  color: var(--brand-header-link-hover);
}

/* Searchbox container (todas las páginas excepto home) */
.search.container.navbar {
  background-color: var(--brand-header-bg);
  border-bottom: 1px solid var(--brand-hero-border);
}

/* Centra el formulario y añade padding vertical */
.search.container.navbar > .searchbox {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding: 0.75rem var(--bs-gutter-x, 1.5rem);
}

/* Formulario en el header: flex row — inputs ocupan el espacio, enlace queda a la derecha */
.search.container.navbar #searchForm {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Bloque integrado: input + selector de tipo + botón en una sola fila */
.search.container.navbar #searchForm .searchForm-inputs {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--brand-search-border);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 47, 135, .07);
  overflow: hidden;
  gap: 0;
}

.search.container.navbar #searchForm .searchForm-inputs:focus-within {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 2px rgba(17, 77, 166, .15);
}

.search.container.navbar #searchForm .searchForm-inputs .searchForm-query {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.search.container.navbar #searchForm .searchForm-inputs .searchForm-query input.form-control {
  flex: 1;
  border: 0;
  box-shadow: none;
  width: 100%;
  max-width: none;
}

.search.container.navbar #searchForm .searchForm-inputs .searchForm-query input.form-control:focus {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.search.container.navbar #searchForm .searchForm-inputs #searchForm_type.form-select {
  background-color: transparent;
  color: var(--brand-text);
  flex-shrink: 0;
  border: 0;
  border-left: 1px solid #e2e8ee;
  border-radius: 0;
  box-shadow: none;
  width: auto;
  max-width: none;
  align-self: center;
}

.search.container.navbar #searchForm .searchForm-inputs .btn-primary {
  flex-shrink: 0;
  border-radius: 0;
  align-self: stretch;
}

/* Enlace búsqueda avanzada en el header: a la derecha del bloque, como enlace plano */
.search.container.navbar #searchForm .advanced-search-link.btn-link {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Breadcrumb */
.breadcrumb {
  background-color: var(--brand-white);
  margin-bottom: 1rem;
  padding: 1rem 0;
}

/* Home — #content a ancho completo para que el hero vaya de borde a borde */
body.template-dir-search.template-name-home #content {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Banda hero */
.searchHomeContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--brand-hero-bg);
  border-bottom: 1px solid var(--brand-hero-border);
  padding: 3.5rem 1.5rem;
  text-align: center;
}

/* Título de marca encima del formulario */
.insst-hero-title {
  margin-bottom: 2rem;
}

.insst-hero-heading {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--brand-primary);
  margin: 0;
}

/* Formulario centrado dentro del hero */
.searchHomeContent #searchForm {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Anula max-width que Bootstrap aplica a inputs en sm+ */
.searchHomeContent #searchForm .form-control,
.searchHomeContent #searchForm .form-select {
  max-width: none;
}

.staticpages-nav-list {
  flex-direction: row-reverse;
}

/* == COMPONENTES == */

/* Radios globales */
.btn,
.card,
.modal-content {
  border-radius: var(--border-radius);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
.form-control,
select {
  border-radius: 4px;
}

/* Enlace búsqueda avanzada — estilo base: enlace plano, sin botón */
.advanced-search-link.btn-link {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: .875rem;
  color: var(--brand-secondary);
  text-decoration: none;
  transition: color .15s ease-in-out;
}

.advanced-search-link.btn-link:hover,
.advanced-search-link.btn-link:focus,
.advanced-search-link.btn-link:active {
  background: none;
  color: var(--brand-link-hover);
  text-decoration: underline;
}

/* Botón primario */
.btn-primary,
.btn-primary:visited {
  background-color: var(--brand-fill-bg);
  border-color: var(--brand-fill-bg);
  color: var(--brand-fill-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--brand-fill-bg-hover);
  border-color: var(--brand-fill-bg-hover);
  color: var(--brand-fill-color);
  box-shadow: 0 0 0 1px var(--brand-fill-bg);
}

.btn-primary:not(:disabled, .disabled):active:focus,
.btn-primary .btn-primary:not(:disabled, .disabled).active:focus {
  box-shadow: 0 0 0 0.2rem var(--brand-fill-bg);
}

/* Botón secundario */
.btn-secondary,
.btn-secondary:visited {
  background-color: var(--brand-secondary-btn-bg);
  background-image: none;
  border-color: var(--brand-secondary-btn-bg);
  color: var(--brand-white);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--brand-secondary-btn-bg-hover);
  background-image: none;
  border-color: var(--brand-secondary-btn-bg-hover);
  color: var(--brand-white);
}

/* Estado activo de btn-toggle */
.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
  color: var(--brand-link-hover);
}

/* Enlace-botón */
.btn-link {
  color: var(--brand-link);
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link:visited {
  color: var(--brand-link-hover);
}

/* Enlaces */
a {
  color: var(--brand-link);
}

a:hover,
a:focus,
a:active {
  color: var(--brand-link-hover);
}

.breadcrumb a {
  color: var(--brand-link-strong);
}

.breadcrumb a:hover,
.breadcrumb a:focus,
.breadcrumb a:active {
  color: var(--brand-link-hover);
  text-decoration: none;
}

/* Iconos de acciones (toolbar del registro) */
.action-toolbar a i.fa,
.action-toolbar a i.fa-solid,
.action-toolbar button i.fa,
.action-toolbar button i.fa-solid {
  color: inherit;
}

.action-toolbar a:hover,
.action-toolbar button:hover {
  color: var(--brand-link-hover);
}

.action-toolbar a:hover i.fa,
.action-toolbar a:hover i.fa-solid,
.action-toolbar button:hover i.fa,
.action-toolbar button:hover i.fa-solid {
  color: var(--brand-link-hover);
}

/* Pestañas */
.nav-tabs .nav-link {
  background-color: var(--brand-fill-bg);
  color: var(--brand-fill-color);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.nav-tabs .nav-link.active {
  background-color: var(--brand-bg);
  color: var(--brand-fill-bg);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:active {
  background-color: var(--brand-fill-bg-hover);
  color: var(--brand-fill-color);
}

.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:active {
  background-color: var(--brand-bg);
  color: var(--brand-fill-bg);
}

/* Dropdown */
.dropdown-menu .dropdown-item {
  color: var(--brand-link);
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: var(--brand-fill-bg);
  color: var(--brand-fill-color);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--brand-fill-bg-hover);
  color: var(--brand-fill-color);
}

/* Selector de idioma en el header */
li.language .nav-link.dropdown-toggle {
  color: #010c22;
  background: none;
  border: none;
  padding-left: 0;
  padding-right: 0;
  text-decoration: none;
}

li.language .nav-link.dropdown-toggle:hover,
li.language .nav-link.dropdown-toggle:focus,
li.language .nav-link.dropdown-toggle.show {
  color: #010c22;
  background: none;
  border: none;
  opacity: .7;
  text-decoration: underline;
  outline: none;
}

li.language .dropdown-menu {
  min-width: auto;
  padding: .25rem 0;
  border: 1px solid var(--brand-search-border);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 47, 135, .08);
}

li.language .dropdown-item {
  font-size: .82rem;
  color: var(--brand-link);
  padding: .4rem 1rem;
}

li.language .dropdown-item:hover,
li.language .dropdown-item:focus {
  background-color: var(--brand-hero-bg);
  color: var(--brand-secondary);
}

li.language .dropdown-item.active,
li.language .dropdown-item:active {
  background-color: var(--brand-fill-bg);
  color: var(--brand-fill-color);
  font-weight: 700;
}

/* Paginación — estilo pill */
.pagination {
  display: flex;
  gap: 5px;
  --bs-pagination-bg:                  var(--brand-white);
  --bs-pagination-color:               var(--brand-link);
  --bs-pagination-border-color:        transparent;
  --bs-pagination-hover-bg:            var(--brand-fill-bg-hover);
  --bs-pagination-hover-border-color:  transparent;
  --bs-pagination-hover-color:         var(--brand-fill-color);
  --bs-pagination-active-bg:           var(--brand-fill-bg);
  --bs-pagination-active-color:        var(--brand-fill-color);
  --bs-pagination-active-border-color: transparent;
  --bs-pagination-focus-color:         var(--brand-fill-color);
  --bs-pagination-focus-bg:            var(--brand-fill-bg-hover);
  --bs-pagination-focus-box-shadow:    none;
  --bs-pagination-border-radius:       var(--border-radius-pill);
}

.pagination .page-link,
.pagination-simple .page-link {
  border-radius: var(--border-radius-pill);
  border-color: transparent;
}

.pagination-simple {
  display: flex;
  gap: 5px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination-simple .page-link {
  color: var(--brand-link);
  background: var(--brand-white);
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.pagination-simple .page-link:hover {
  background: var(--brand-fill-bg-hover);
  color: var(--brand-fill-color);
  border-color: transparent;
}

.pagination .page-item a:hover,
.pagination .page-item a:hover i.fa,
.pagination-simple .page-item a:hover,
.pagination-simple .page-item a:hover i.fa {
  color: var(--brand-fill-color);
}

/* Foco en controles */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-secondary);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px var(--brand-secondary);
}

/* Select de tipo de búsqueda — relleno azul (solo el selector del searchform) */
#searchForm_type.form-select {
  background-color: var(--brand-fill-bg);
  color: var(--brand-fill-color);
  background-size: 0.8em auto;
  background-position: right 0.75rem center;
  padding-right: calc(1rem + 1.2em);
}

input[type="checkbox"] {
  accent-color: var(--brand-fill-bg);
}

/* Controles deshabilitados */
.btn:disabled,
.btn.disabled,
input:disabled,
select:disabled,
textarea:disabled {
  color: var(--brand-disabled);
}

/* Alertas */
.alert-danger {
  --bs-alert-color:        var(--brand-danger);
  --bs-alert-border-color: var(--brand-danger);
}

.alert-warning {
  --bs-alert-color:        var(--brand-warning);
  --bs-alert-border-color: var(--brand-warning);
}

.alert-info {
  --bs-alert-color: var(--brand-info);
}

/* Tablas */
.table {
  --bs-table-striped-bg: var(--brand-bg-subtle);
}

/* Cards */
.card {
  border-color: var(--brand-bg-subtle);
}

/* == PÁGINAS == */

/* --- Home: buscador --- */

/* Bloque integrado: input + selector de tipo + botón en una sola fila */
.searchHomeContent .searchForm-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: #fff;
  border: 1px solid var(--brand-search-border);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 47, 135, .07);
  overflow: hidden;
  margin-bottom: .75rem;
}

.searchHomeContent .searchForm-inputs:focus-within {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 2px rgba(17, 77, 166, .15);
}

.searchHomeContent .searchForm-inputs .searchForm-query {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.searchHomeContent .searchForm-inputs .searchForm-query input.form-control {
  flex: 1;
  border: 0;
  box-shadow: none;
  width: 100%;
  max-width: none;
}

.searchHomeContent .searchForm-inputs .searchForm-query input.form-control:focus {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

/* Select de tipo: borde izquierdo sutil, fondo transparente */
.searchHomeContent .searchForm-inputs #searchForm_type.form-select {
  background-color: transparent;
  color: var(--brand-text);
  flex-shrink: 0;
  border: 0;
  border-left: 1px solid #e2e8ee;
  border-radius: 0;
  box-shadow: none;
  width: auto;
  max-width: none;
  align-self: center;
}

/* Botón buscar: sin radio propio, adosado al bloque */
.searchHomeContent .searchForm-inputs .btn-primary {
  flex-shrink: 0;
  border-radius: 0;
  align-self: stretch;
}

/* Enlace búsqueda avanzada: centrado debajo del bloque (está fuera del div) */
.searchHomeContent .advanced-search-link.btn-link {
  display: block;
  text-align: center;
  margin-top: .5rem;
}

/* --- Resultados --- */

/* Cabecera de resultados: estadísticas + controles en fila */
.search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  background: var(--brand-bg-subtle);
  border-bottom: 1px solid var(--brand-search-border);
  padding: .6rem 0;
  margin-bottom: 1.25rem;
}

.top-facets {
  margin-bottom: 1.25rem;
}

.search-header .search-stats {
  font-size: .9rem;
  color: var(--brand-text);
}

.search-header .search-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Sort y limit: label + select compactos en línea */
.search-sort,
.search-result-limit {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.search-sort label,
.search-result-limit label {
  font-size: .82rem;
  color: var(--brand-disabled);
  margin: 0;
  white-space: nowrap;
}

.search-sort .form-select,
.search-result-limit .form-select {
  font-size: .82rem;
  padding: .25rem .5rem;
  height: auto;
  width: auto;
}

/* Item de resultado */
ol.record-list li.result {
  padding: 1rem 0;
  border-bottom: 1px solid var(--brand-search-border);
}

ol.record-list li.result:last-child {
  border-bottom: none;
}

/* Portada en resultado: tamaño fijo, imagen recortada */
.result .media-left,
.result .media-right {
  flex-shrink: 0;
  width: 90px;
  height: 120px;
  border: 1px solid #eeeff0;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--brand-bg-subtle);
}

.result .media-left .record-cover-container,
.result .media-left a.record-cover-container,
.result .media-right .record-cover-container,
.result .media-right a.record-cover-container {
  display: block;
  width: 100%;
  height: 100%;
}

.result .media-left img.recordcover,
.result .media-right img.recordcover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  padding: 10px;
}

.result .media-body {
  flex: 1;
  padding-left: 1.25rem;
}

/* Badges de formato de material */
.badge.format,
.result .format {
  background: var(--brand-primary);
  color: #fff;
  border-radius: var(--border-radius);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Top facets / etiquetas temáticas */
.top-facet-inner {
  background: var(--brand-hero-bg);
  border: 1px solid var(--brand-search-border);
  border-radius: var(--border-radius);
  color: var(--brand-primary);
  padding: .5rem;
}

/* --- Facetas --- */

#search-sidebar {
  border: none;
}

#search-sidebar > h2 {
  font-size: 1.1rem;
}

.sidebar > h2 {
  margin-top: 0;
}

/* Grupos de faceta: sin borde propio, separación con margen */
#search-sidebar .facet-group {
  border: none;
  margin-bottom: 1.1rem;
  border-radius: var(--border-radius);
}

/* Cabecera del grupo: fondo sutil sobre el botón de colapso
   Usamos h3.facet-title (el elemento) no .facet-title (también es un span interno) */
#search-sidebar h3.facet-title {
  margin: 0;
  background: var(--brand-bg-subtle);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* El botón de colapso hereda el color y fuente correctos */
#search-sidebar h3.facet-title .title {
  color: var(--brand-primary);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Links de faceta */
#search-sidebar .facet-group a {
  color: var(--brand-link);
  text-decoration: none;
}

#search-sidebar .facet-group a:hover {
  color: var(--brand-link-hover);
}

#search-sidebar .facet-group a .badge {
  text-decoration: none;
}

#search-sidebar .facet-group a .text {
  text-decoration: underline;
}

/* Badge de conteo */
#search-sidebar .facet .badge,
.facet .badge {
  background: var(--brand-disabled);
  border-radius: var(--border-radius);
  font-weight: 700;
}

/* Faceta activa: fondo sutil en vez del azul por defecto del tema */
#search-sidebar .facet-group .facet.active {
  background-color: var(--brand-hero-bg);
  color: var(--brand-text);
}

#search-sidebar .facet-group .facet.active a {
  color: var(--brand-primary);
  font-weight: 700;
}

#search-sidebar .facet-group .facet.active .badge {
  background: var(--brand-primary);
}

/* --- Detalle del registro --- */

/* Portada en detalle: más grande */
.record .media-left.img-col,
.record .media-right.img-col {
  flex-shrink: 0;
  width: 160px;
  height: 220px;
  border: 1px solid var(--brand-search-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--brand-bg-subtle);
  margin-right: 1.5rem;
}

.record .media-left.img-col .record-cover-container,
.record .media-left.img-col a.record-cover-container,
.record .media-right.img-col .record-cover-container,
.record .media-right.img-col a.record-cover-container {
  display: block;
  width: 100%;
  height: 100%;
}

.record .media-left.img-col img.recordcover,
.record .media-right.img-col img.recordcover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  padding: 10px;
}

/* Pestañas del detalle: estilo línea — anulamos variables Bootstrap para bordes residuales */
.record-tabs {
  margin-top: 2rem;
}

.record-tabs .nav-tabs {
  margin-bottom: 0;
  border-bottom: 1px solid var(--brand-search-border);

  /* Neutraliza los bordes laterales/superiores y fondos que Bootstrap añade en hover/active */
  --bs-nav-tabs-border-radius:              0;
  --bs-nav-tabs-link-hover-border-color:    transparent;
  --bs-nav-tabs-link-active-bg:             transparent;
  --bs-nav-tabs-link-active-color:          var(--brand-text);
  --bs-nav-tabs-link-active-border-color:   transparent;
}

.record-tabs .nav-tabs .nav-link {
  color: var(--brand-primary);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  margin-bottom: -1px;
}

.record-tabs .nav-tabs .nav-link.active {
  color: var(--brand-text);
  font-weight: 700;
  border-bottom-color: var(--brand-primary);
}

.record-tabs .nav-tabs .nav-link:hover:not(.active) {
  color: var(--brand-link-hover);
  border-bottom-color: var(--brand-search-border);
}

.nav>li>a:hover, .nav>li>button:hover {
  outline: none;
}

/* Tabla de metadatos del registro */
.record table.table th {
  background: var(--brand-bg-subtle);
  color: var(--brand-text);
  font-weight: 700;
  width: 180px;
  vertical-align: top;
}

/* Toolbar de acciones del registro (Cite, Email, Export…) — estilo badge pill */
nav.record-nav {
  margin-bottom: 2rem;
}

nav.record-nav .action-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav.record-nav .action-toolbar li {
  display: flex;
}

nav.record-nav .action-toolbar a.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .85rem;
  border-radius: var(--border-radius-pill);
  background: var(--brand-bg-subtle);
  border: 1px solid var(--brand-search-border);
  color: var(--brand-secondary);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}

nav.record-nav .action-toolbar a.toolbar-btn:hover,
nav.record-nav .action-toolbar a.toolbar-btn:focus {
  background: var(--brand-fill-bg);
  border-color: var(--brand-fill-bg);
  color: var(--brand-fill-color);
  text-decoration: none;
}

/* Quitar el underline que el tema base pone en .icon-link__label */
nav.record-nav .action-toolbar .icon-link__label {
  text-decoration: none;
}

/* --- Búsqueda avanzada --- */

.search.advanced h1 {
  margin-top: 0;
}

.search.advanced fieldset {
  border: none;
}

/* Grupos de búsqueda: borde con color de marca */
.adv-group {
  border-color: var(--brand-search-border);
  background: var(--brand-bg-subtle);
}

/* Botón "Añadir grupo" */
#groupPlaceHolder {
  background: var(--brand-bg-subtle);
  border: 1px solid var(--brand-search-border);
  color: var(--brand-secondary);
  font-weight: 600;
  border-radius: var(--border-radius-pill);
}

#groupPlaceHolder:hover {
  background: var(--brand-fill-bg);
  border-color: var(--brand-fill-bg);
  color: var(--brand-fill-color);
}

/* Selector AND/OR entre grupos */
.adv-group-match .form-select {
  font-size: .85rem;
  width: auto;
}

/* Área de submit */
.adv-submit {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-direction: row-reverse;
}

/* Facetas de fecha en columnas */
@media (min-width: 768px) {
  .solr-facet-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* == FOOTER == */

#insst-footer {
  /* compiled.css trata <footer> como .container con max-width y margin:auto.
     Lo revertimos para que el fondo vaya de lado a lado. */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background-color: var(--brand-footer-bg);
  color: var(--brand-footer-color);
  padding: 2rem 1.5rem;
  font-family: var(--font-base), "Noto Sans", sans-serif;
}

.insst-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Top: social + enlaces, centrado */

.insst-footer-top { text-align: center; }

.insst-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.insst-footer-social .list-inline {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insst-footer-social .list-inline-item { margin: 0; }

/* Iconos como círculos con borde */
.insst-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--brand-footer-icon-border);
  border-radius: 50%;
  font-size: 1rem;
  color: var(--brand-footer-color);
  text-decoration: none;
}

.insst-footer-social a:hover,
.insst-footer-social a:focus {
  border-color: var(--brand-footer-color);
  color: var(--brand-footer-color);
}

/* Enlaces con separador | */
.insst-footer-links {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--brand-footer-color);
  font-size: 14px;
}

.insst-footer-links .list-inline-item {
  display: inline;
  margin: 0;
}

.insst-footer-links .list-inline-item:not(:last-child)::after {
  content: "|";
  margin: 0 0.6rem;
  color: var(--brand-footer-rule);
}

.insst-footer-links a {
  color: var(--brand-footer-color);
  text-decoration: none;
}

.insst-footer-links a:hover {
  color: var(--brand-footer-color);
  text-decoration: underline;
}

/* Bottom: copyright + logos, con regla superior */
.insst-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--brand-footer-rule);
  font-size: 11px;
}

.insst-footer-copyright {
  color: var(--brand-footer-color);
}

.insst-footer-logos .list-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insst-footer-logos .list-inline-item { margin: 0; }

.insst-footer-logos span {
  color: var(--brand-footer-color);
}

@media (max-width: 768px) {
  .insst-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}