:root {
    --agroindustria: #0c809b;
    --ambiental: #6F6E39;
    --artes: #801b41;
    --basicas: #4d7778;
    --blanco: #ffffff;
    --borde-claro: #e4e7ec;
    --educacion: #16873d;
    --fondo-suave: #eef0f5;
    --gris: #BCBDC0;
    --industrial: #fcc200;
    --ingenierias: #f07c00;
    --institucional: #003D6D;
    --institucional-hover: #002036;
    --mecanica: #007cb7;
    --negro: #000000;
    --negro_claro: #333;
    --negro_oscuro: #0d0d0d;
    --posgrado-claro: #dde1d1;
    --posgrado-morado: #2f3c6d;
    --radio: 10px;
    --salud: #00574b;
    --servicios: #b50822;
    --tecnologia: #7D6E5B;
    --texto-fuerte: #111;
    --texto-secundario: #333;
    --transicion: 0.2s ease;
    --transicion-rapida: 0.15s;
}

/* ==========================================================================
   FUENTES AUTO-ALOJADAS
   Reemplaza las llamadas a Google Fonts (CDN) por archivos locales en /fonts.
   Los nombres de font-family coinciden EXACTAMENTE con los usados en
   style.css, planEstudio.css y footer.php ('Noto Sans' / 'Atkinson Hyperlegible'),
   por lo que no hay que modificar ninguna otra regla del tema.

   Rutas relativas a este archivo (css/) -> ../fonts/
   font-display: swap replica el comportamiento del &display=swap del CDN.
========================================================================== */

/* -------------------------------------------------------------------------
   Atkinson Hyperlegible  (encabezados h1–h6)
------------------------------------------------------------------------- */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://media2.utp.edu.co/fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://media2.utp.edu.co/fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('https://media2.utp.edu.co/fonts/AtkinsonHyperlegible-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('https://media2.utp.edu.co/fonts/AtkinsonHyperlegible-BoldItalic.ttf') format('truetype');
}

/* -------------------------------------------------------------------------
   Noto Sans  (cuerpo, enlaces y resto del tema)
   Nota: el CSS del tema también usa font-weight 700/800/900. Al no haber
   archivos para esos pesos, el navegador toma el más cercano (600 SemiBold)
   y lo emboldece de forma sintética, por lo que el texto en negrita se sigue
   viendo en negrita. Para fidelidad total, añadir NotoSans-Bold/ExtraBold/
   Black.ttf y sus @font-face correspondientes.
------------------------------------------------------------------------- */

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://media2.utp.edu.co/fonts/NotoSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://media2.utp.edu.co/fonts/NotoSans-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://media2.utp.edu.co/fonts/NotoSans-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('https://media2.utp.edu.co/fonts/NotoSans-Italic.ttf') format('truetype');
}

html {
    margin: 0 !important;
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

a {
    color: var(--institucional);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.breadcrumb {
    align-items: center;
    padding: 15px 25px;
    margin-bottom: 0;
}

.breadcrumb{
    margin-bottom: 0 !important;
 }

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
  
.breadcrumb li + li::before {
    color: #555;
    content: "»";
    margin: 0 0.5em;
}

body * {
    transition: line-height 0.5s ease, letter-spacing 0.5s ease, word-spacing 0.5s ease;
}

textarea {
    resize: none !important;
}

/* Turnstile Formulario */
.checkbox {
    display: flex;
    justify-content: center;
}

/* Cabecera */

.menu-principal {
    background-color: var(--institucional);
    font-size: 12pt;
    margin: 0 auto;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.menu-principal li a {
    color: var(--blanco);
}

.menu-principal li a:hover {
    color: var(--blanco);
}

.menu-institucional div {
    margin: 0;
    max-width: 1920px;
}

ul.dropdown-menu{
    padding: 0;
}

.menu-principal .dropdown-menu {
    background-color: var(--institucional);
    z-index: 1001;
}

.menu-principal .dropdown-item:hover {
    background-color: var(--institucional);
    text-decoration: underline;
}

/* ==========================================================================
   SECCIÓN 8: HEADER — MENÚ STICKY — BARRA SUPERIOR + NAV + BRAND
========================================================================== */

/* Barra institucional superior */

.btnMenuLateral {
    border: 1px solid var(--institucional);
}
  
/* Barra de navegación sticky */
.menu-institucional {
    background-color: var(--blanco, #ffffff) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    min-height: 74px !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
}

/* El color de facultad solo aplica a la barra superior, no al nav sticky */
.menu-institucional.facultad-educacion,
.menu-institucional.facultad-educacion .dropdown-menu {
    background-color: var(--blanco, #ffffff) !important;
}

/* Links del nav sobre fondo blanco */
.menu-institucional .nav-link {
    color: var(--institucional) !important;
}

/* Grupo izquierdo: botón de menú (dots) + logo, en ese orden.
    No debe encogerse: el espacio que ocupa se replica en .sticky-right-spacer
    (Sección 11) para que el nav quede centrado en toda la barra. */
.sticky-left-group {
    flex-shrink: 0;
    gap: 0.35rem;
}

/* Brand sticky (logo + nombre del programa) */
/* Padding móvil aquí; se ensancha desde 576px (ver RESPONSIVE) */
.sticky-brand {
    flex-shrink: 1;
    min-width: 0;
    padding: 0.35rem 0.4rem;
}

/* max-height/max-width (sin fijos) conserva el aspect ratio del logo.
    El tamaño crece por pasos fijos en RESPONSIVE (antes usaba
    clamp() con vw; ver el bloque RESPONSIVE al final del archivo). */
.logo-sticky {
    height: auto;
    max-height: 55px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.sticky-brand .program-name {
    color: var(--institucional);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    max-width: 220px;
}

/* ==========================================================================
   SECCIÓN 9: HEADER — BOTÓN "MENÚ" (OFFCANVAS) SOBRE LA BARRA STICKY
========================================================================== */
/* generales.css (remoto) define .btnMenuLateral en blanco, pensado para
   fondo azul; aquí el fondo siempre es blanco, se sobreescribe con más
   especificidad (mismo patrón que .nav-link) */
.menu-institucional .btnMenuLateral,
.menu-institucional .btnMenuLateral:hover,
.menu-institucional .btnMenuLateral:focus {
    color: var(--institucional) !important;
}

/* ==========================================================================
    SECCIÓN 10: HEADER — MENÚ PRINCIPAL DESKTOP (MENU2 / MENU-ESTANDAR)
========================================================================== */
/* Hasta 10 ítems en una línea; si no caben, pasan a una segunda línea
    centrada. La fuente crece por pasos fijos (ver RESPONSIVE al final
    del archivo) para priorizar que quepan en una sola línea. */

.menu-institucional .menu-estandar {
    align-items: center;
    column-gap: 0.1rem;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.15rem;
    width: 100%;
}

.menu-institucional .menu-estandar .nav-item {
    display: flex;
}

.menu-estandar > li > a {
    font-size: 12pt !important;
}

.menu-institucional .menu-estandar .nav-link {
    font-size: 12pt;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
}

.menu-institucional .menu-estandar .nav-link:hover,
.menu-institucional .menu-estandar .nav-link:focus {
    color: var(--institucional) !important;
    text-decoration: underline;
}

/* Submenú (2do nivel): fondo azul institucional, texto en blanco */
.menu-institucional .menu-estandar .dropdown-menu.submenu .nav-link {
    background-color: var(--institucional) !important;
    color: var(--blanco) !important;
    padding: 0.8rem 0.5rem;
}

/* Viñeta del submenú en blanco (Bootstrap la deja oscura por defecto) */
.menu-estandar .dropdown-menu.submenu li::marker {
    color: var(--blanco);
}

/* ==========================================================================
    SECCIÓN 11: HEADER — LAYOUT DE LA FILA STICKY (BOTÓN MENÚ + LOGO | NAV | ESPACIADOR)
========================================================================== */

/* Columna espejo a la derecha del nav (desktop, ver Sección 8): su ancho se
    fija por JS (header.php) igual al de .sticky-left-group, para que el nav
    quede centrado en toda la barra y no solo en el espacio libre a su
    derecha. Sin JS/con JS deshabilitado colapsa a 0 y el nav se desplaza
    como antes, pero nunca rompe el layout. */
.sticky-right-spacer {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: start;
}

@media (min-width: 576px) {

    .sticky-brand {
      padding: 0.4rem 0.75rem;
    }

}

@media (min-width: 992px) {
    
    .sticky-right-spacer {
        justify-content: end;
    }
    
    .sticky-right-spacer {
        justify-content: end;
    }

    .menu-institucional div {
        margin: 0 auto !important;
    }
}

@media (min-width: 1200px) {

    .logo-sticky {
      max-height: 55px;
    }

}

/* Fin Cabecera */

/* Menú Lateral Responsive */

.offcanvas-header {
    padding: 1rem 1rem 0;
}

.offcanvas-body {
    padding: 0;
}

ul.menu_lateral {
    font-size: 12pt;
    list-style: none;
    padding: 0.5em 1em 0.5em 1em;
}

.menu_lateral {
    text-decoration: none;
}

.menu_lateral a {
    color: #212529;
    font-size: 12pt;
}

ul.menu_lateral > li.menu-responsive,
.menu-responsive li {
    border: 0;
}

ul.menu_lateral > li.accordion-body > a {
    color: #212529;
    display: flex;
    padding: 0;
}

ul.menu_lateral li ul li > a {
    display: flex;
    font-weight: normal;
}

.menu_lateral li.accordion-item.accordion-body:hover,
ul.accordion-collapse li:hover {
    background-color: #cfe2ff;
}

li.accordion-body {
    list-style: none;
    padding: 1rem 1.25rem;
}

.icon-container {
    align-items: center;
    column-gap: 10px;
    height: inherit;
    justify-content: space-between;
    margin: 0 16px;
}

.icon-container img {
    max-height: 90px;
    object-fit: scale-down;
}

.icon-container a:hover {
    transform: scale(1.1);
}

/* Fin Menú Lateral Responsive */

/* Pagina de entradas */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Atkinson Hyperlegible", sans-serif !important;
}

.tituloPost {
    background: var(--institucional);
    padding: 0.4em 1em;
    margin-bottom: 20px;
}

.tituloPost h2 {
    color: var(--blanco);
    margin-bottom: 0;
    text-transform: capitalize;
}

.post-content, .cuerpo-contenido{
    overflow: hidden;
    padding: 0 10px;
    text-overflow: ellipsis;
}

.post-content .wp-block-cover__inner-container p {
    max-width: 100%;
}

.post-content p.has-small-font-size {
    font-size: 1rem !important;
}

.post-content > div {
    max-width: 90%;
}

.post-content > div.wp-block-buttons, .post-content div.wp-block-group:has(p){
    max-width: 120ch;
}

.post-content>div.wp-block-image {
    margin: 0 auto;
    max-width: 120ch;
}

.post-content>.is-provider-youtube {
    aspect-ratio: 16/9 !important;
    height: 500px;
    max-width: 120ch;
}

ul.wp-block-list {
    margin-bottom: 20px;
}

.post-content h6,
.post-content h5,
.post-content h4,
.post-content h3,
.post-content h2 {
    margin: 36px auto;
    max-width: 1200px;
}

.post-content details :where(ol, ul, p) {
    padding: 10px 45px !important;
}

.post-content>* {
    font-family: "Noto Sans";
    margin: 0 auto;
    max-width: 120ch;
}

.post-content p {
    margin-bottom: 1rem;
}

.post-content table>thead {
    background-color: var(--institucional);
    color: var(--blanco);
}

.post-content iframe {
    aspect-ratio: 16/9;
    max-width: 100%;
    width: 100%;
}

.publicacion {
    color: #595959 !important;
    display: flex;
    flex-direction: column;
    font-size: 12pt;
    padding: 15px;
    text-align: right;
}

.publicacion a:visited {
    color: #609 !important;
}

.publicacion p{
    display: -webkit-box;
    line-clamp: 1;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

@media (min-width: 576px) {
    .tituloPost{
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) {
    .post-content>.wp-block-file {
        max-width: 900px;
    }
}

@media (min-width: 992px) {
    .post-content>figure.wp-block-table {
        max-width: 90%;
    }
}

/* Fin Pagina de entradas */

/* Pie de página */

footer{
    background-color: var(--institucional);
}

.footer-main{
    background-color: var(--institucional);
    color: white;
    padding: 0;
    margin: 0 auto !important;
    max-width: 1920px;
}

.footer-main a{
    color: white;
    font-weight: bold;
}

.social-icon-blu{
    padding: 0 5px;
}

.social-icon-blue img{
    height: 44px;
    width: 44px;
}

.logosGobierno img{
    height: 37px;
}

.separador-logos-gob{
    background-color: #fff;
    height: 100%;
    width: 2pt;
}

.bloque-redes-sociales{
    border: 1px solid #009FE3;
    border-left: 0;
    border-right: 0;
    padding: 0;
}

.portal-enlace a{
    background-color: #254C73;
    border: 1px solid #556A8E;
    border-radius: 10px;
    display: inline-block;
    padding: 13px 20px;
}

.footer-main__contacto-info {
    line-height: inherit;
}

footer p, footer a{
    font-family: 'Noto Sans', sans-serif;
}

.footer-main p{
    font-size: 12pt;
}

.correo-documentos {
    background-color: var(--blanco);
    color: var(--institucional);
    padding: 2px;
}

.correo-documentos :is(a, span){
    color: var(--institucional);
}

.portal-enlace{
    display: flex;
    justify-content: center;
}

@media (min-width: 576px){

    .logosGobierno img{
        height: 52px;
    }

    .social-icon-blue img{
        height: 52px;
        width: 52px;
    }

}

/* Fin Pie de página */