/* =============================================================================
   PR-CRIS · CONACYT Paraguay — Sistema de diseño institucional (Pilar 5.3)
   Paleta sobria pero moderna, tipografía de sistema (legible, sin
   dependencias externas), espaciados amplios. Construido como una capa fina
   sobre Bootstrap 5 (vendor/bootstrap): variables CSS propias + componentes
   específicos del dominio CTI (tarjetas de métricas, buscador, red de
   colaboración, directorios).
   ========================================================================== */

:root {
  /* --- Paleta institucional ------------------------------------------------
     Azul profundo: confianza / institucionalidad (predominante).
     Rojo guaraní: acento minoritario, reservado a énfasis puntuales.
     Verde-azulado: acento de datos/visualización (red de colaboración).
  ------------------------------------------------------------------------- */
  --prcris-blue-900: #0b1f3a;
  --prcris-blue-700: #14315c;
  --prcris-blue-600: #1c4587;
  --prcris-blue-500: #2a5aa8;
  --prcris-blue-100: #e8eef7;
  --prcris-blue-50:  #f4f7fb;

  --prcris-red-600: #b3122a;
  --prcris-red-100: #fbe7ea;

  --prcris-teal-600: #0e7c86;
  --prcris-teal-100: #e3f4f5;

  --prcris-ink-900: #14181f;
  --prcris-ink-700: #3a4150;
  --prcris-ink-500: #6b7280;
  --prcris-ink-300: #c7ccd4;
  --prcris-ink-100: #eef0f3;
  --prcris-surface: #ffffff;
  --prcris-surface-alt: #f7f8fa;

  --prcris-radius-sm: 0.5rem;
  --prcris-radius-md: 0.9rem;
  --prcris-radius-lg: 1.4rem;

  --prcris-shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06), 0 1px 1px rgba(11, 31, 58, 0.04);
  --prcris-shadow-md: 0 8px 24px rgba(11, 31, 58, 0.08), 0 2px 6px rgba(11, 31, 58, 0.05);

  --prcris-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --prcris-space-1: 0.5rem;
  --prcris-space-2: 1rem;
  --prcris-space-3: 1.75rem;
  --prcris-space-4: 2.75rem;
  --prcris-space-5: 4.5rem;
}

/* Modo oscuro: se respeta la preferencia del sistema operativo del
   investigador/ciudadano; se mantiene el mismo contraste AA mínimo. */
@media (prefers-color-scheme: dark) {
  :root {
    --prcris-ink-900: #f3f5f8;
    --prcris-ink-700: #cfd4dc;
    --prcris-ink-500: #99a1ad;
    --prcris-ink-300: #3a414d;
    --prcris-ink-100: #232933;
    --prcris-surface: #161b23;
    --prcris-surface-alt: #1d232d;
    --prcris-blue-100: #182740;
    --prcris-blue-50: #131a29;
    --prcris-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --prcris-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

body {
  font-family: var(--prcris-font-sans);
  color: var(--prcris-ink-900);
  background-color: var(--prcris-surface-alt);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--prcris-blue-600);
}

/* --- Navbar institucional --------------------------------------------------- */
.prcris-navbar {
  background: var(--prcris-blue-900);
  box-shadow: var(--prcris-shadow-sm);
  padding-top: var(--prcris-space-1);
  padding-bottom: var(--prcris-space-1);
}
.prcris-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.prcris-navbar .navbar-brand small {
  font-weight: 400;
  color: var(--prcris-blue-100);
  font-size: 0.7rem;
  display: block;
}
.prcris-navbar .nav-link {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}
.prcris-navbar .nav-link:hover,
.prcris-navbar .nav-link.active {
  color: #fff;
}
.prcris-navbar .btn-prcris-login {
  background: var(--prcris-red-600);
  color: #fff;
  border: none;
}

/* --- Hero / buscador centralizado ------------------------------------------ */
.prcris-hero {
  background: linear-gradient(180deg, var(--prcris-blue-900) 0%, var(--prcris-blue-700) 100%);
  color: #fff;
  padding: var(--prcris-space-5) 0 var(--prcris-space-4);
}
.prcris-hero h1 {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
}
.prcris-hero p.lead {
  color: var(--prcris-blue-100);
  max-width: 46rem;
}
.prcris-search {
  background: var(--prcris-surface);
  border-radius: var(--prcris-radius-lg);
  box-shadow: var(--prcris-shadow-md);
  padding: var(--prcris-space-1);
  display: flex;
  gap: 0.5rem;
  max-width: 44rem;
}
.prcris-search input[type="search"] {
  border: none;
  outline: none;
  flex: 1;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  border-radius: var(--prcris-radius-md);
  color: var(--prcris-ink-900);
  background: transparent;
}
.prcris-search button {
  background: var(--prcris-blue-600);
  border: none;
  color: #fff;
  border-radius: var(--prcris-radius-md);
  padding: 0 1.4rem;
  font-weight: 600;
}
.prcris-search button:hover { background: var(--prcris-blue-500); }

/* --- Tarjetas de métricas clave --------------------------------------------- */
.prcris-stats {
  margin-top: calc(var(--prcris-space-4) * -1);
}
.prcris-stat-card {
  background: var(--prcris-surface);
  border-radius: var(--prcris-radius-md);
  box-shadow: var(--prcris-shadow-md);
  padding: var(--prcris-space-3);
  height: 100%;
  border-top: 3px solid var(--prcris-blue-600);
  transition: transform 0.15s ease;
}
.prcris-stat-card:hover { transform: translateY(-2px); }
.prcris-stat-card .prcris-stat-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--prcris-radius-sm);
  background: var(--prcris-blue-100);
  color: var(--prcris-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--prcris-space-2);
}
.prcris-stat-card .prcris-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--prcris-blue-900);
  line-height: 1;
}
.prcris-stat-card .prcris-stat-label {
  color: var(--prcris-ink-500);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}
.prcris-stat-card.prcris-accent-red { border-top-color: var(--prcris-red-600); }
.prcris-stat-card.prcris-accent-red .prcris-stat-icon { background: var(--prcris-red-100); color: var(--prcris-red-600); }
.prcris-stat-card.prcris-accent-teal { border-top-color: var(--prcris-teal-600); }
.prcris-stat-card.prcris-accent-teal .prcris-stat-icon { background: var(--prcris-teal-100); color: var(--prcris-teal-600); }

/* --- Directorios nacionales de CTI (Pilar 5.2) ------------------------------ */
.prcris-directorios { padding: var(--prcris-space-4) 0; }
.prcris-directorio-card {
  background: var(--prcris-surface);
  border: 1px solid var(--prcris-ink-100);
  border-radius: var(--prcris-radius-md);
  padding: var(--prcris-space-3);
  height: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.prcris-directorio-card:hover {
  border-color: var(--prcris-blue-500);
  box-shadow: var(--prcris-shadow-sm);
  color: inherit;
}
.prcris-directorio-card .prcris-directorio-icon {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--prcris-blue-100);
  color: var(--prcris-blue-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--prcris-space-2);
}
.prcris-directorio-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }
.prcris-directorio-card p { color: var(--prcris-ink-500); font-size: 0.88rem; margin: 0; }

/* --- Red de colaboración (gráfico conceptual) ------------------------------- */
.prcris-network-card {
  background: var(--prcris-surface);
  border-radius: var(--prcris-radius-md);
  box-shadow: var(--prcris-shadow-sm);
  padding: var(--prcris-space-3);
}
#prcris-network-canvas {
  width: 100%;
  height: 26rem;
  border-radius: var(--prcris-radius-sm);
  background: var(--prcris-blue-50);
  display: block;
}

/* --- Secciones genéricas ------------------------------------------------- */
.prcris-section-title {
  font-weight: 700;
  color: var(--prcris-blue-900);
  margin-bottom: var(--prcris-space-2);
}
.prcris-badge-calidad {
  font-size: 0.72rem;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  font-weight: 600;
}
.prcris-badge-calidad.alta { background: var(--prcris-teal-100); color: var(--prcris-teal-600); }
.prcris-badge-calidad.media { background: #fff3cd; color: #7a5b00; }
.prcris-badge-calidad.baja { background: var(--prcris-red-100); color: var(--prcris-red-600); }

.prcris-table thead th {
  color: var(--prcris-ink-500);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom-width: 1px;
}

/* --- Panel interno (bp_admin) ---------------------------------------------- */
.prcris-admin-subnav .nav-link {
  color: var(--prcris-ink-700);
  font-size: 0.88rem;
  border-radius: var(--prcris-radius-sm);
}
.prcris-admin-subnav .nav-link.active {
  background: var(--prcris-blue-600);
  color: #fff;
}
.prcris-admin-card {
  background: var(--prcris-surface);
  border-radius: var(--prcris-radius-md);
  box-shadow: var(--prcris-shadow-sm);
  padding: var(--prcris-space-3);
}

footer.prcris-footer {
  background: var(--prcris-blue-900);
  color: var(--prcris-blue-100);
  padding: var(--prcris-space-4) 0 var(--prcris-space-3);
  margin-top: var(--prcris-space-5);
  font-size: 0.85rem;
}
footer.prcris-footer a { color: #fff; }