/* ===============================
   Paleta y ajustes
   =============================== */
:root{
  --primary-700:#0b5ed7;     /* enlaces / iconos */
  --primary-800:#0a53be;     /* hover */
  --chip-bg:#e9f2ff;         /* chips inactivos */
  --chip-text:#0b5ed7;       /* texto chips inactivos */
  --chip-active:#0c3d69;     /* chip activo */
  --ink-900:#0f172a;         /* texto principal */
  --ink-700:#334155;         /* subtítulo */
  --muted-600:#6b7280;       /* textos secundarios */
  --line-200:#e6e9ef;        /* líneas divisoras */
  --field-border:#d7dbe3;    /* borde del input de búsqueda */
  --field-placeholder:#909db1;
  --search-btn:#2f64dd;      /* círculo azul del buscador */
}

:root{
  --bs-link-color:var(--primary-700);
  --bs-link-hover-color:var(--primary-800);
}

body{
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===============================
   Encabezado
   =============================== */
.page-title{
  font-weight:800;
  font-size:48px;
  line-height:1.1;
  margin-bottom:10px;
}
header .fs-5{
  color:var(--ink-700);
  font-weight:600;
}

/* ===============================
   Chips categorías
   =============================== */
.chips{ gap:.75rem .75rem }
#chips{ display:flex; flex-wrap:wrap }

#chips .chip{
  display:inline-flex;
  align-items:center;
  padding:.56rem 1.15rem;
  background:var(--chip-bg);
  color:var(--chip-text);
  border-radius:9999px;
  border:1px solid transparent;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
}
#chips .chip .count{
  font-variant-numeric:tabular-nums;
  opacity:.9;
}
#chips .chip:hover{ filter:brightness(.97) }
#chips .chip.active{
  background:var(--chip-active);
  color:#fff;
}
#chips .chip.active .count{ display:none }

/* ===============================
   Buscador (como referencia)
   =============================== */
/* Contenedor relativo para posicionar el botón circular dentro */
.search-wrap{
  position:relative;
  max-width:780px;
}
/* Input con borde gris claro y radio tipo píldora */
.search-wrap .form-control{
  height:56px;
  padding:0 1.15rem;
  padding-right:72px;                 /* espacio para el botón circular */
  border-radius: 8px !important;
  border:1px solid var(--field-border);
  box-shadow:none;
}
.search-wrap .form-control::placeholder{
  color:var(--field-placeholder);
}
.search-wrap .form-control:focus{
  border-color:var(--primary-700);
  box-shadow:0 0 0 .15rem rgba(11,94,215,.12);
}
/* Botón circular azul dentro del input (no como “píldora” a la derecha) */
.search-wrap .btn{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius: 25px !important;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--search-btn);
  border:0;
  box-shadow:none;
}
.search-wrap .btn i{
  font-size:1.2rem;
  color:#fff;
}
.search-wrap .btn:hover{
  filter:brightness(.95);
}
/* El input-group de Bootstrap suele redondear extremos; neutralizamos */
.search-wrap .input-group>.form-control{
  border-top-right-radius:18px;
  border-bottom-right-radius:18px;
}

/* ===============================
   Conteo de resultados
   =============================== */
.results-count{
  color:var(--muted-600);
  font-size:16px;
  margin-top:6px;
}

/* ===============================
   Lista de resultados
   =============================== */
#results{
  border-top:1px solid var(--line-200);
  margin-top:16px;
}
.result-item{
  padding:22px 0 26px 0;
  border-bottom:1px solid var(--line-200);
}
.result-title a{
  font-size:22px;
  font-weight:700;
  line-height:1.25;
  color:var(--primary-700);
  text-decoration:none;
}
.result-title .title-text{
  font-size:22px;
  font-weight:700;
  line-height:1.25;
  color:var(--ink-900);
}
.result-title a:hover{
  color:var(--primary-800);
  text-decoration:underline;
}
.result-desc{
  color:#495057;
  margin-top:.5rem;
  margin-bottom:0;
}
.result-cats{
  color:#64748b;
  font-size:15px;
  margin-top:.35rem;
}

/* ===============================
   Metadatos (columna derecha)
   =============================== */
.meta{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  font-size:15px;
}
.meta .meta-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--primary-700);
}
.meta .meta-row i{ font-size:1.1rem }
.meta a.label{
  color:var(--primary-700);
  text-decoration:underline;
}
.meta span.label{
  color:var(--muted-600);
  text-decoration:none;
}
.meta .muted{ color:var(--muted-600) }

/* ===============================
   Responsivo
   =============================== */
@media (max-width:991.98px){
  .result-title a{ font-size:20px; }
  .result-title .title-text{ font-size:20px; }
}
@media (max-width:767.98px){
  .meta{ margin-top:.75rem }
  .search-wrap{ max-width:100% }
}

/* ===== Paginador (look de referencia) ===== */
.pagination{
  margin: 1rem 0 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;                 /* separación pareja */
}

.pagination .page-item{ margin: 0; }

.pagination .page-link{
  border: 0 !important;
  background: transparent !important;
  color: #0b3d69;           /* azul texto números */
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  padding: .45rem .6rem;
  border-radius: .8rem;
  text-decoration: none;
}

/* hover de números */
.pagination .page-item:not(.active):not(.prev-next):not(.disabled) .page-link:hover{
  color: #1f4fc7;
}

/* activa = pastilla azul */
.pagination .page-item.active .page-link{
  background: #3367E8 !important;
  color: #fff !important;
  box-shadow: 0 2px 0 rgba(16,24,40,.05);
}

/* Anterior/Siguiente como enlaces */
.pagination .page-item.prev-next .page-link{
  color: #2b6dde !important;
  text-decoration: underline;
  font-weight: 500;
  padding: 0 .25rem;        /* sin pastilla */
}

/* estados deshabilitados de prev/next */
.pagination .page-item.prev-next.disabled .page-link{
  color: #9aa7bb !important;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

/* elipsis */
.pagination .page-item.ellipsis .page-link{
  color: #7b8aa0 !important;
  padding: 0;
  cursor: default;
}

/* responsive */
@media (max-width: 576px){
  .pagination{ gap: .8rem; }
  .pagination .page-link{ font-size: 1.1rem; padding: .35rem .5rem; }
}


/* ===== Loader IDU ===== */
.loader{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
  transition: opacity .3s ease;
}
.loader.hidden{
  opacity: 0;
  pointer-events: none;
}

.loader-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}

.logo-wrap{
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: #eaf2ff;
  display: grid;
  place-items: center;
  overflow: visible;
}
.loader-logo{
  width: 56px;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}

/* Anillos en órbita */
.ring{
  position: absolute;
  border-radius: 999px;
  border: 3px solid transparent;
  pointer-events: none;
}
.ring1{
  inset: -6px;
  border-top-color: var(--primary-700);
  border-right-color: var(--primary-700);
  animation: spin 1.15s linear infinite;
}
.ring2{
  inset: -14px;
  border-bottom-color: var(--primary-700);
  border-left-color: var(--primary-700);
  opacity: .35;
  animation: spin 1.6s linear infinite reverse;
}

/* Pulso suave */
.logo-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(11,94,215,.35);
  animation: pulse 1.8s ease-out infinite;
}

/* Texto */
.loader-text{
  margin: 0;
  font-weight: 600;
  color: var(--primary-700);
}

/* Animaciones */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(11,94,215,.35); }
  70%  { box-shadow: 0 0 0 18px rgba(11,94,215,0); }
  100% { box-shadow: 0 0 0 0 rgba(11,94,215,0); }
}

/* Accesibilidad: respeta usuarios con motion reducido */
@media (prefers-reduced-motion: reduce){
  .ring1, .ring2, .logo-wrap::after{ animation: none; }
}