/* ============================================================================ ckanext-sgc-theme — Branding UPeU · Portal de Datos Abiertos del SGC Paleta institucional (brand-tokens.md): azul brand #003865 · azul profundo #023052 · ámbar accent #F8A900 Se mapea sobre Bootstrap 5 + el CSS base de CKAN 2.11 (public/base/css/main.css), que define --bs-primary: #206b82 y compila botones/masthead con valores fijos. Este archivo SOLO sobreescribe; no toca el core. Carga después de `base/main`. ============================================================================ */ /* ---- Fuentes cívicas self-hosted (soberanía RNF07, sin CDN en runtime) ---- Archivo (grotesca cívica, títulos) + Public Sans (sans del USWDS, cuerpo). Variables woff2 (subset latin) → un archivo cubre todo el eje de peso. */ @font-face{ font-family:"Public Sans"; src:url(/sgc-theme/fonts/public-sans-wght.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:"Archivo"; src:url(/sgc-theme/fonts/archivo-wght.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } :root { /* Marca */ --upeu-blue: #003865; /* brand primario (SVG oficial upeu.edu.pe) */ --upeu-blue-deep: #023052; /* hover / franjas oscuras */ --upeu-amber: #F8A900; /* acento institucional (barra del logo) */ --upeu-amber-600: #e59c00; /* ámbar hover */ --upeu-amber-700: #c98a00; /* ámbar active */ /* Tipografía */ --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Archivo", var(--font-body); /* Neutros tintados hacia el hue navy (~248) — OKLCH, sin negro/blanco puros */ --surface: oklch(0.995 0.003 248); --surface-2: oklch(0.974 0.006 248); --border: oklch(0.912 0.008 248); --border-strong: oklch(0.86 0.010 248); --ink: oklch(0.30 0.022 248); /* cuerpo */ --ink-soft: oklch(0.49 0.018 248); /* secundario */ /* Espacio 4pt · radios · sombra · easing */ --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; --space-32:32px; --space-48:48px; --radius-sm:.4rem; --radius:.6rem; --radius-lg:.85rem; --shadow-1: 0 1px 2px oklch(0.30 0.03 248 / .05); --shadow-2: 0 10px 30px oklch(0.30 0.05 248 / .12); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* Bootstrap primary + fuente base de CKAN 2.11 (#206b82 -> azul UPeU) */ --bs-primary: #003865; --bs-primary-rgb: 0, 56, 101; --bs-link-color: #003865; --bs-link-color-rgb: 0, 56, 101; --bs-link-hover-color: #023052; --bs-font-sans-serif: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-body-color: #24303c; --bs-body-font-size: .9375rem; /* 15px: un punto más legible que el 14 base */ } /* ---- Tipografía base ---- */ body { font-family: var(--font-body); text-rendering: optimizeLegibility; } h1,h2,h3,h4,h5,h6, .module-heading,.page-heading,.hero h1,.dataset-heading { font-family: var(--font-display); letter-spacing: -.012em; } h1,.page-heading { font-weight: 800; letter-spacing: -.02em; } h2 { font-weight: 700; } h3,h4 { font-weight: 600; } /* ---- Micro-motion de botones (Emil): feedback de presión ---- */ .btn { transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; } .btn:active { transform: scale(.97); } @media (prefers-reduced-motion: reduce){ .btn, .btn:active { transition:none; transform:none; } } /* ---- Cabecera estilo upeu.edu.pe -------------------------------------------- Barra superior (utilidades / Iniciar Sesión) azul profundo #023052 y barra principal (logo + menú) gris claro #EAEAEA con texto navy. Colores muestreados del propio upeu.edu.pe: top bar rgb(2,48,82) = #023052 · texto #F2F2F2 main bar rgb(234,234,234)= #EAEAEA · texto #00263D (~#003865) ------------------------------------------------------------------------- */ /* Barra superior — azul profundo (CKAN base: .account-masthead{#003647}) */ .account-masthead { background: #023052 !important; } /* El navegador pinta el lienzo bajo el contenido con el fondo de . Se iguala al footer para que no aparezca una franja blanca al fondo si la página es más corta que la pantalla. */ html { background-color: #023052; } /* Barra principal — gris claro (CKAN base: .masthead{#005d7a}) */ .masthead { background: #EAEAEA !important; border-bottom: 3px solid var(--upeu-blue); color: var(--upeu-blue); } /* Menú principal en navy; hover/activo con tinte azul suave (base: color:#fff) */ .masthead .main-navbar ul li a { color: var(--upeu-blue); } .masthead .main-navbar ul li:hover a, .masthead .main-navbar ul li:focus a, .masthead .main-navbar ul li.active a { color: var(--upeu-blue); background-color: rgba(0, 56, 101, .10); } /* Buscador del masthead sobre fondo claro (base lo asumía sobre azul) */ .masthead .section.controls .form-control, .masthead .site-search .form-control, .masthead .search-input-group .form-control { background: #fff; border-color: rgba(0, 56, 101, .35); color: var(--upeu-blue); } .masthead .site-search button, .masthead .section.controls .btn, .masthead .search-input-group .btn { color: var(--upeu-blue); } /* Logo SVG del masthead: contenerlo (el asset es el wordmark blanco+ámbar). Se iguala la especificidad de CKAN (.masthead .navbar .logo img{max-height:60px}) y se fija height explícito porque el SVG se sirve con width/height propios. */ .masthead .navbar .logo img, .masthead .logo img, .navbar-brand img { height: 44px; max-height: 44px; width: auto; } /* ---- Enlaces (CKAN base los fija en #206b82) ----------------------------- */ a { color: #003865; } a:hover, a:focus { color: #023052; } /* ---- Botón primario -> ámbar acento, texto azul (contraste ~6.4:1 AA) ---- */ .btn-primary, .btn-primary:focus { color: #003865; background-color: var(--upeu-amber); border-color: var(--upeu-amber); } .btn-primary:hover { color: #003865; background-color: var(--upeu-amber-600); border-color: var(--upeu-amber-600); } .btn-primary:active, .btn-primary.active, .btn-check:checked + .btn-primary, .show > .btn-primary.dropdown-toggle { color: #003865; background-color: var(--upeu-amber-700); border-color: var(--upeu-amber-700); } .btn-check:focus + .btn-primary, .btn-primary:focus { box-shadow: 0 0 0 .25rem rgba(248, 169, 0, .4); } /* ---- Acentos varios: badges, foco, secciones destacadas ------------------ */ .badge.bg-primary, .label-primary { background-color: var(--upeu-blue) !important; } .homepage .module-search .tags .tag, .tag { /* etiquetas -> chip navy tenue, texto navy (refinado) */ background-color: rgba(0, 56, 101, .08); border: 1px solid rgba(0, 56, 101, .14); color: var(--upeu-blue) !important; border-radius: var(--radius-sm); font-weight: 600; font-size: .8rem; padding: .22em .6em; transition: background-color 150ms ease, border-color 150ms ease; } a.tag:hover, .tag:hover { background-color: rgba(0, 56, 101, .14); border-color: rgba(0, 56, 101, .28); color: var(--upeu-blue-deep) !important; } :focus-visible { outline: 2px solid var(--upeu-amber); outline-offset: 1px; } /* ---- Página "Acerca de / Política de Datos Abiertos" (una columna) -------- */ .sgc-about { max-width: 900px; } .sgc-about > p, .sgc-about > ul { max-width: 68ch; } .sgc-about h1.page-heading { margin-bottom: .4rem; } .sgc-about h2 { color: var(--upeu-blue); font-size: 1.3rem; font-weight: 700; margin-top: 2.2rem; padding-top: .3rem; border-top: 1px solid var(--border); } .sgc-about .lead { color: var(--ink); font-size: 1.12rem; line-height: 1.6; } .sgc-about ul { padding-left: 1.15rem; } .sgc-about li { margin-bottom: .5rem; } .sgc-about li strong { color: var(--upeu-blue); } .sgc-about .sgc-niveles { border-color: var(--border); } .sgc-about .sgc-niveles th { background: var(--upeu-blue); color: #fff; font-family: var(--font-display); border-color: var(--upeu-blue-deep); } .sgc-about .sgc-niveles td { border-color: var(--border); color: var(--ink); vertical-align: top; } .sgc-badge { display: inline-block; padding: .18rem .55rem; border-radius: .35rem; font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap; } .sgc-badge.sgc-verde { background: #2e7d32; } .sgc-badge.sgc-ambar { background: var(--upeu-amber); color: var(--upeu-blue); } .sgc-badge.sgc-rojo { background: #b3261e; } /* ---- Iconos de categoría (grupos PNDA) — estilo PNDA/datosabiertos.gob.pe -- */ /* En el sidebar de facetas "Grupos" */ .nav-facet a[href*="groups="]::before { content: ""; display: inline-block; width: 17px; height: 17px; margin-right: .45rem; vertical-align: -3px; background-size: contain; background-repeat: no-repeat; background-position: center; } .nav-facet a[href*="groups=educacion"]::before { background-image: url(/sgc-theme/icons/educacion.svg); } .nav-facet a[href*="groups=ciencia-y-tecnologia"]::before{ background-image: url(/sgc-theme/icons/ciencia-y-tecnologia.svg); } .nav-facet a[href*="groups=desarrollo-social"]::before { background-image: url(/sgc-theme/icons/desarrollo-social.svg); } .nav-facet a[href*="groups=gobernabilidad"]::before { background-image: url(/sgc-theme/icons/gobernabilidad.svg); } .nav-facet a[href*="groups=economia-y-finanzas"]::before { background-image: url(/sgc-theme/icons/economia-y-finanzas.svg); } .nav-facet a[href*="groups=salud"]::before { background-image: url(/sgc-theme/icons/salud.svg); } .nav-facet a[href*="groups=cultura"]::before { background-image: url(/sgc-theme/icons/cultura.svg); } .nav-facet a[href*="groups=ambiente"]::before { background-image: url(/sgc-theme/icons/ambiente.svg); } /* Encabezados de faceta más ordenados (estilo PNDA) */ .filters .module-heading, .facet-heading, .nav-facet ~ .module-heading { color: var(--upeu-blue); font-weight: 600; } /* Página de Grupos: el icono centrado en la tarjeta, no estirado */ .media-image[src*="/sgc-theme/icons/"], .group-list .media-image, .media-grid .media-image { object-fit: contain; background: #f4f6f8; padding: 16px; } /* ============================================================================ HOME rediseñada (hero + grid de categorías + stats + CTA) — estilo PNDA/UPeU ============================================================================ */ :root { --sgc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); } .sgc-home { } /* ---- Hero ---- */ .sgc-hero { background: linear-gradient(135deg, #023052 0%, #003865 55%, #00477e 100%); color: #fff; text-align: center; padding: 3.2rem 15px 2.8rem; border-bottom: 3px solid var(--upeu-amber); } .sgc-hero h1 { color:#fff; font-weight:700; margin:0 0 .55rem; font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing:-.01em; } .sgc-hero-sub { color: rgba(255,255,255,.85); max-width: 700px; margin:0 auto 1.7rem; font-size: 1.06rem; line-height:1.55; } .sgc-hero-search { display:flex; max-width: 640px; margin:0 auto; background:#fff; border-radius:.65rem; overflow:hidden; box-shadow: 0 10px 34px rgba(0,0,0,.22); } .sgc-hero-search input { flex:1; border:0; padding:.95rem 1.15rem; font-size:1rem; color:#222; min-width:0; } .sgc-hero-search input:focus { outline:none; } .sgc-hero-search button { display:flex; align-items:center; gap:.45rem; border:0; cursor:pointer; background: var(--upeu-amber); color: var(--upeu-blue); padding:0 1.4rem; font-weight:600; transition: background 160ms ease; } .sgc-hero-search button:hover { background: var(--upeu-amber-600); } .sgc-hero-search button:active { background: var(--upeu-amber-700); } .sgc-hero-stats { display:flex; gap:2.6rem; justify-content:center; margin-top:1.9rem; flex-wrap:wrap; } .sgc-hero-stats div { display:flex; flex-direction:column; } .sgc-hero-stats strong { font-family: var(--font-display); font-size:1.9rem; line-height:1; font-weight:800; letter-spacing:-.02em; font-variant-numeric: tabular-nums; } .sgc-hero-stats span { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.72); margin-top:.3rem; } /* ---- Categorías ---- */ .sgc-cats { padding: 2.8rem 15px 1rem; } .sgc-cats h2, .sgc-cta h2 { color: var(--upeu-blue); font-weight:700; } .sgc-cats h2 { text-align:center; margin-bottom:1.7rem; } .sgc-cat-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; } @media (max-width: 900px){ .sgc-cat-grid { grid-template-columns: repeat(2, 1fr); } } .sgc-cat { display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center; padding:1.7rem 1rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow: var(--shadow-1); color: var(--upeu-blue); text-decoration:none; font-weight:600; font-family: var(--font-display); transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease; } .sgc-cat img { width:44px; height:44px; } @media (hover:hover) and (pointer:fine){ .sgc-cat:hover { transform: translateY(-3px); box-shadow:0 10px 26px rgba(0,56,101,.13); border-color: var(--upeu-amber); } } .sgc-cat:active { transform: translateY(-1px) scale(.99); } /* ---- CTA ---- */ .sgc-cta { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin: 1.4rem auto 3rem; padding:1.8rem 2rem; background:#f4f6f8; border-radius:.85rem; } .sgc-cta-text h2 { text-align:left; margin:0 0 .35rem; font-size:1.3rem; } .sgc-cta-text p { margin:0; color:#444; max-width:560px; } .sgc-cta-actions { display:flex; gap:.7rem; flex-wrap:wrap; } .btn-outline { border:1.5px solid var(--upeu-blue); color:var(--upeu-blue); background:transparent; padding:.5rem 1.05rem; border-radius:.45rem; font-weight:600; transition: background 160ms ease, color 160ms ease; } .btn-outline:hover { background:var(--upeu-blue); color:#fff; } @media (prefers-reduced-motion: reduce){ .sgc-cat, .sgc-cat:hover, .sgc-cat:active { transition:none; transform:none; } } /* ---- Panel de indicadores (scaffold gráficos/mapas/grafos) ---- */ .sgc-metrics { padding: 2.6rem 15px 1rem; } .sgc-metrics h2 { color: var(--upeu-blue); font-weight:700; text-align:center; margin-bottom:.3rem; } .sgc-metrics-sub { text-align:center; color:#667; margin:0 auto 1.7rem; max-width:640px; } .sgc-metric-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1.1rem; } @media (max-width: 900px){ .sgc-metric-grid { grid-template-columns: 1fr; } } .sgc-metric-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow: var(--shadow-1); padding:1.2rem 1.3rem; } .sgc-metric-card h3 { color: var(--upeu-blue); font-size:1.02rem; font-weight:600; margin:0 0 .8rem; } .sgc-metric-ph { display:flex; align-items:center; justify-content:center; text-align:center; min-height:180px; border:1.5px dashed #c8d2dd; border-radius:.5rem; color:#8a97a6; font-size:.9rem; background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 10px, #f4f6f8 10px, #f4f6f8 20px); } /* ---- Gráficos del panel (dona / barras / leyenda) ---- */ .sgc-chart { min-height:180px; display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; } .sgc-chart[data-loading], .sgc-chart-empty { color:#8a97a6; font-size:.88rem; } .sgc-chart-donut { justify-content:flex-start; } .sgc-chart-donut svg { flex:0 0 auto; } .sgc-legend { list-style:none; margin:0; padding:0; font-size:.82rem; line-height:1.55; min-width:0; } .sgc-legend li { display:flex; align-items:center; color:#3a4654; white-space:nowrap; } .sgc-legend i { width:11px; height:11px; border-radius:2px; margin-right:.45rem; flex:0 0 auto; } .sgc-legend b { margin-left:.35rem; color:#003865; font-weight:700; } .sgc-chart-bars { align-items:stretch; } .sgc-chart-bars svg { width:100%; } .sgc-bar-label { font-size:11px; fill:#3a4654; } .sgc-bar-val { font-size:11px; fill:#003865; font-weight:700; } /* ============================================================================ CATÁLOGO (/dataset) — tarjetas de resultado estilo PNDA, marca UPeU ============================================================================ */ .dataset-list { padding-left: 0; } .dataset-list .dataset-item { list-style: none; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 1.05rem 1.3rem; margin-bottom: .85rem; transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out); } @media (hover:hover) and (pointer:fine){ .dataset-list .dataset-item:hover { box-shadow: 0 8px 22px rgba(0,56,101,.10); border-color: #cfd6df; transform: translateY(-2px); } } .dataset-list .dataset-item .dataset-heading { margin: 0 0 .35rem; font-size: 1.12rem; line-height: 1.3; } .dataset-list .dataset-item .dataset-heading a { color: var(--upeu-blue); font-weight: 600; } .dataset-list .dataset-item .dataset-heading a:hover { color: var(--upeu-blue-deep); } /* icono de "conjunto de datos" antes del título (estilo tipo de contenido PNDA) */ .dataset-list .dataset-item .dataset-heading::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: .5rem; vertical-align: -3px; background: no-repeat center/contain url("data:image/svg+xml;utf8,"); } .dataset-list .dataset-item .dataset-content > div, .dataset-list .dataset-item .dataset-content p { color: #556; font-size: .92rem; } /* Badges de formato con color por tipo (csv/xlsx/json/…) — estilo PNDA */ .dataset-resources .badge[data-format] { /* default primero (menor prioridad por orden) */ border-radius: .3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #fff !important; background: #5a6b7b; padding: .3em .55em; } .dataset-resources .badge[data-format="csv"] { background: #2e7d32; } .dataset-resources .badge[data-format="xlsx"], .dataset-resources .badge[data-format="xls"] { background: #1b7f4b; } .dataset-resources .badge[data-format="json"] { background: #e08600; } .dataset-resources .badge[data-format="geojson"] { background: #0a8f8f; } .dataset-resources .badge[data-format="xml"] { background: #7b4bad; } .dataset-resources .badge[data-format="rdf"] { background: #7b4bad; } .dataset-resources .badge[data-format="pdf"] { background: #b3261e; } .dataset-resources .badge[data-format="docx"], .dataset-resources .badge[data-format="doc"] { background: #1c5fb0; } /* Sidebar de facetas un poco más ordenado (estilo PNDA) */ .filters h2.module-heading, .filters .facet-title { color: var(--upeu-blue); font-weight: 700; font-size: 1rem; } .nav-facet .nav-item a { border-radius: .35rem; } .nav-facet .nav-item a:hover { background: rgba(0,56,101,.06); } /* ---- Footer: exactamente el mismo fondo que la barra superior (plano) ---- */ /* La barra superior es #023052 SIN textura; el footer base traía bg.png, que lo hacía verse distinto. Se iguala: fondo plano #023052, como el top bar. */ .site-footer { background: #023052 !important; } /* Bloques oscuros de CKAN (heading de búsqueda, secciones) al azul UPeU */ .module-heading, .hero .module-search .module-content { background: transparent; } /* ============================================================================ Vista de datos (DataTables — el iframe tiene ). Garantiza legibilidad: fondo claro + texto oscuro, y NEUTRALIZA cualquier fondo/box-shadow navy heredado del cambio de --bs-primary. Scope estricto a .dt-view: no afecta al resto del portal. Se re-añade rayado gris claro. ============================================================================ */ .dt-view, .dt-view .dataTables_wrapper { background: #fff !important; color: #333; } .dt-view .dataTables_wrapper .row, .dt-view .dataTables_length, .dt-view .dataTables_filter, .dt-view .dataTables_info, .dt-view .dataTables_paginate, .dt-view .dt-buttons { background: transparent !important; } .dt-view .dataTables_length label, .dt-view .dataTables_filter label, .dt-view .dataTables_info, .dt-view .dataTables_processing { color: #333 !important; } .dt-view table.dataTable thead th, .dt-view table.dataTable thead td { background: #eef1f4 !important; color: #003865 !important; box-shadow: none !important; } .dt-view table.dataTable tbody td, .dt-view table.dataTable tbody th { background-color: #fff !important; color: #333 !important; box-shadow: none !important; } .dt-view table.dataTable tbody tr.odd > * { background-color: #f5f7f9 !important; box-shadow: none !important; } .dt-view table.dataTable tbody tr:hover > * { background-color: #eef3f8 !important; box-shadow: none !important; } .dt-view a { color: #003865; } /* ============================================================================ PULIDO (Pass 2) — facetas, nav, tipografía fina (impeccable + Emil) ============================================================================ */ /* Nav del masthead: fuente display, peso medio, tracking cívico */ .masthead .main-navbar ul li a { font-family: var(--font-display); font-weight: 500; letter-spacing: -.005em; } /* Facetas: separadores hairline (no punteados) + conteo en pill sutil --------- CKAN base pinta los
  • con `1px dotted #ddd` y el conteo como badge oscuro. */ .filters .nav-facet .nav-item, .filters .nav-simple .nav-item, .filters .nav-facet li, .filters .nav-simple li { border-bottom: 1px solid var(--border) !important; } .filters .nav-facet .nav-item:last-child, .filters .nav-simple .nav-item:last-child { border-bottom: 0 !important; } .filters .nav-item a { display: flex; align-items: flex-start; gap: .5rem; padding: .46rem .55rem; color: var(--ink); border-radius: var(--radius-sm); } /* Nombre completo: envuelve y se limita a 2 líneas LLENAS con line-clamp (rellena ambas líneas antes de poner "…", no corta por nº de caracteres). */ .filters .nav-item a .item-label { white-space: normal; line-height: 1.32; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* El "-" es