/* ===========================================================================
   Kit UI gov.co — paleta y tipografía oficiales.
   Fuente: KITUI.pdf (gov.co v4).
     Work Sans  -> títulos y subtítulos, color #004884
     Montserrat -> párrafos, captions y botones, color #4B4B4B
   ======================================================================== */
:root {
    --azul-oscuro: #004884;
    --azul:        #3366CC;
    --azul-claro:  #E6EFFD;
    --texto:       #4B4B4B;
    --gris:        #BABABA;
    --gris-claro:  #F2F2F2;
    --fondo:       #F6F8F9;
    --blanco:      #FFFFFF;
    --verde:       #069169;
    --rojo:        #A80521;
    --amarillo:    #FFAB00;
    --t-titulo: "Work Sans", "Segoe UI", Tahoma, sans-serif;
    --t-texto:  Montserrat, "Segoe UI", Tahoma, sans-serif;

    /* Un ancho máximo de lectura. Sin él, en un monitor de 27 pulgadas las
       líneas de texto cruzan la pantalla entera y no hay quien las siga. */
    --ancho: 1360px;
    --relieve: 0 1px 2px rgba(0, 40, 85, .06), 0 1px 3px rgba(0, 40, 85, .04);
    --relieve-alto: 0 2px 4px rgba(0, 40, 85, .08), 0 4px 12px rgba(0, 40, 85, .06);
    --radio: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0; background: var(--fondo); color: var(--texto);
    font-family: var(--t-texto); font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--t-titulo); color: var(--azul-oscuro); margin: 0; text-wrap: balance; }
h1 { font-size: 1.72rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
h2 { font-size: 1.08rem; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: .92rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
p { margin: 0; }
a { color: var(--azul); }
.num { font-variant-numeric: tabular-nums; }

.salto-contenido { position: absolute; left: -9999px; background: var(--azul-oscuro); color: #fff; padding: .6rem 1rem; z-index: 20; }
.salto-contenido:focus { left: .5rem; top: .5rem; }

/* ---------------------------------------------------------- barra gov.co */
.govco-barra { background: var(--azul-oscuro); color: var(--blanco); padding: .45rem 0; }
.govco-barra > * { max-width: var(--ancho); }
.govco-barra__interior { max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.govco-barra__marca { font-family: var(--t-titulo); font-weight: 700; letter-spacing: .04em; }
.govco-barra__marca span { color: var(--amarillo); }
.govco-barra__lema { font-size: .76rem; opacity: .9; margin-left: auto; }

/* ------------------------------------------------------ encabezado entidad */
.entidad { background: var(--blanco); border-bottom: 1px solid var(--gris-claro); }
.entidad__interior { max-width: var(--ancho); margin: 0 auto; padding: .85rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.entidad__escudo { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--azul-oscuro); color: #fff; display: grid; place-items: center; font-family: var(--t-titulo); font-weight: 700; font-size: .8rem; }
.entidad__txt strong { display: block; font-family: var(--t-titulo); color: var(--azul-oscuro); font-size: 1rem; }
.entidad__txt span { font-size: .78rem; }
.entidad__usuario { margin-left: auto; text-align: right; font-size: .78rem; }
.entidad__usuario strong { display: block; color: var(--azul-oscuro); font-size: .85rem; }

/* ------------------------------------------------------------------ menú */
.menu { background: var(--blanco); border-bottom: 2px solid var(--azul-oscuro); box-shadow: var(--relieve); position: relative; z-index: 2; }
.menu__interior { max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: thin; }
.menu a { font-size: .86rem; font-weight: 500; color: var(--texto); text-decoration: none; padding: .7rem .95rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.menu a:hover { background: var(--azul-claro); color: var(--azul-oscuro); }
.menu a[aria-current="page"] { color: var(--azul-oscuro); font-weight: 700; border-bottom-color: var(--azul); background: var(--azul-claro); }
.menu a:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

.migas { max-width: var(--ancho); margin: 0 auto; padding: .85rem 1.5rem .1rem; font-size: .78rem; }
.migas b { color: var(--azul-oscuro); }
.migas span { color: var(--gris); margin: 0 .35rem; }

.pagina { max-width: var(--ancho); margin: 0 auto; padding: 1.1rem 1.5rem 3.5rem; display: grid; gap: 1.25rem; }
.pagina__cab { padding-bottom: .1rem; }
.pagina__cab p { font-size: .92rem; margin-top: .3rem; max-width: 78ch; }

/* --------------------------------------------------------------- tarjetas */
.caja { background: var(--blanco); border: 1px solid #E9EDF1; border-radius: var(--radio); padding: 1.15rem 1.3rem; box-shadow: var(--relieve); }
.caja__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--gris-claro); flex-wrap: wrap; }
.nota { font-size: .8rem; opacity: .85; margin-top: .7rem; }
.rejilla { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ------------------------------------------------------------------ kpis */
.kpis { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi { background: var(--blanco); border: 1px solid #E9EDF1; border-top: 4px solid var(--azul); border-radius: var(--radio); padding: 1rem 1.15rem; box-shadow: var(--relieve); transition: box-shadow .15s ease; }
.kpi:hover { box-shadow: var(--relieve-alto); }
.kpi__et { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; opacity: .75; }
.kpi__val { display: block; font-family: var(--t-titulo); color: var(--azul-oscuro); font-size: 2rem; font-weight: 700; line-height: 1.15; margin: .25rem 0 .15rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi__pie { font-size: .78rem; opacity: .8; display: block; }

/* ---------------------------------------------------------------- tablas */
.tabla-env { overflow-x: auto; border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: .58rem .7rem; text-align: left; border-bottom: 1px solid var(--gris-claro); vertical-align: top; }
thead th { position: sticky; top: 0; background: var(--azul-oscuro); color: #fff; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
tbody tr:nth-child(even) { background: #FBFCFD; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--azul-claro); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -------------------------------------------------------------- etiquetas */
.etq { display: inline-block; padding: .1rem .55rem; border-radius: 2px; font-size: .73rem; font-weight: 600; white-space: nowrap; }
.e-ok { background: #e0f2ec; color: var(--verde); }
.e-mal { background: #f8e3e5; color: var(--rojo); }
.e-med { background: #fff2d6; color: #8a5c00; }
.e-info { background: var(--azul-claro); color: var(--azul-oscuro); }
.e-gris { background: var(--gris-claro); color: var(--texto); }

/* --------------------------------------------------------------- botones */
.boton { font: inherit; font-family: var(--t-texto); font-size: .84rem; font-weight: 600; background: var(--azul); color: #fff; border: 2px solid var(--azul); border-radius: var(--radio); padding: .46rem 1.1rem; cursor: pointer; text-decoration: none; display: inline-block; transition: background .12s ease, border-color .12s ease; }
.boton:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); }
.boton--sec { background: var(--blanco); color: var(--azul); }
.boton--sec:hover { background: var(--azul-claro); color: var(--azul-oscuro); }
.boton:focus-visible { outline: 2px solid var(--azul-oscuro); outline-offset: 2px; }

/* ---------------------------------------------------------------- avisos */
.avisos { max-width: var(--ancho); margin: 1rem auto 0; padding: 0 1.5rem; }
.aviso { border-left: 4px solid var(--azul); background: var(--azul-claro); padding: .8rem 1.05rem; border-radius: var(--radio); font-size: .87rem; margin-bottom: .35rem; box-shadow: var(--relieve); }
.aviso--error { border-left-color: var(--rojo); background: #fbeced; }
.aviso--success { border-left-color: var(--verde); background: #e4f3ed; }
.aviso--alerta { border-left-color: var(--amarillo); background: #fff8e8; }

/* ------------------------------------------------------------ formularios */
label { font-size: .8rem; display: block; margin-bottom: .2rem; }
input, select { font: inherit; font-size: .88rem; padding: .45rem .6rem; border: 1px solid var(--gris); border-radius: 2px; width: 100%; background: #fff; color: inherit; }
input:focus, select:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.campos { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); align-items: end; }

/* --------------------------------------------------------------- ingreso */
.ingreso { display: grid; place-items: center; min-height: 78vh; padding: 1.5rem; }
.ingreso__caja { width: min(420px, 100%); background: var(--blanco); border: 1px solid var(--gris); border-top: 5px solid var(--azul-oscuro); padding: 1.8rem; display: grid; gap: .5rem; }
.ingreso__caja h1 { text-align: center; }
.ingreso__sub { text-align: center; font-size: .85rem; margin-bottom: 1rem; }
.ingreso__recordar { display: flex; align-items: center; gap: .5rem; font-size: .84rem; margin: .8rem 0; }
.ingreso__recordar input { width: auto; }

/* -------------------------------------------------------------- jerarquía */
.rama { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; padding: .5rem .75rem; border: 1px solid var(--gris); border-radius: 3px; background: var(--blanco); margin-bottom: .3rem; }
.rama--hija { margin-left: 1.8rem; background: var(--fondo); border-left: 3px solid var(--azul); }
.rama__n { font-family: var(--t-titulo); font-weight: 600; color: var(--azul-oscuro); font-size: .87rem; }
.rama__m { font-size: .77rem; display: block; opacity: .85; }

.pie { background: var(--azul-oscuro); color: #fff; font-size: .78rem; margin-top: 2.5rem; }
.pie__interior { max-width: var(--ancho); margin: 0 auto; padding: 1.15rem 1.5rem; }
.pie strong { font-family: var(--t-titulo); display: block; margin-bottom: .15rem; }

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- Módulo Plan de Desarrollo ------------------------------------------ */
.submenu { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 1rem; }
.submenu__enlaces { display: flex; gap: .4rem; flex-wrap: wrap; }
.submenu__vigencia { display: flex; align-items: center; gap: .5rem; }
.submenu__vigencia label { margin: 0; font-size: .8rem; font-weight: 600; }
.submenu__vigencia select { width: auto; min-width: 150px; }

/* Semáforo: el color nunca va solo, siempre con la etiqueta y el número (WCAG 1.4.1). */
.semaforo { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.semaforo__caja { display: block; border: 1px solid var(--gris); border-radius: 4px; padding: .8rem .9rem; text-decoration: none; color: var(--texto); }
.semaforo__caja:hover { background: var(--azul-claro); }
.semaforo__n { font-family: var(--t-titulo); font-size: 1.7rem; font-weight: 700; display: block; line-height: 1.1; }
.semaforo__et { font-size: .8rem; font-weight: 600; display: block; margin-bottom: .45rem; }
.semaforo__barra { display: block; height: 5px; border-radius: 3px; min-width: 3px; }

.barra { background: var(--gris-claro); border-radius: 3px; height: 9px; overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 3px; }
.barra--mini { height: 5px; width: 70px; display: inline-block; vertical-align: middle; margin-right: .35rem; }

.barra-fila { margin-bottom: .95rem; }
.barra-fila__cab { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; margin-bottom: .3rem; }
.barra-fila__cab .num { font-weight: 700; color: var(--azul-oscuro); }

.ficha { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: .45rem .9rem; font-size: .87rem; margin: 0; }
.ficha dt { font-weight: 600; color: var(--azul-oscuro); }
.ficha dd { margin: 0; }

.cadena { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.cadena__paso { border: 1px solid var(--gris); border-left: 4px solid var(--azul); border-radius: 3px; padding: .55rem .7rem; }
.cadena__et { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.cadena__val { font-family: var(--t-titulo); font-weight: 700; color: var(--azul-oscuro); font-variant-numeric: tabular-nums; }

.meses { font-size: .8rem; }
.meses th, .meses td { padding: .35rem .4rem; }
.mes--sin { color: var(--gris); }
.mes--con { font-weight: 600; color: var(--azul-oscuro); }

abbr { text-decoration: none; font-weight: 600; color: var(--azul-oscuro); }

/* --- Módulo Presupuesto -------------------------------------------------- */
.apilada { display: flex; height: 22px; border-radius: 3px; overflow: hidden; background: var(--gris-claro); }
.apilada span { display: block; height: 100%; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .4rem; vertical-align: baseline; }

/* La barra se escala al límite legal, no a 100: lo que hay que ver es el margen. */
.limite { margin: .5rem 0 .2rem; }
.limite__pista { background: var(--gris-claro); border-radius: 3px; height: 11px; overflow: hidden; }
.limite__pista span { display: block; height: 100%; border-radius: 3px; }
.limite__marca { display: block; text-align: right; font-size: .72rem; font-weight: 600; margin-top: .2rem; }

/* --- Módulo Seguimiento a la Gestión ------------------------------------ */
.tableros { display: flex; flex-wrap: wrap; gap: .35rem; padding: .7rem 1rem; }
.tableros__uno { font-size: .8rem; text-decoration: none; color: var(--texto); border: 1px solid var(--gris); border-radius: 3px; padding: .3rem .6rem; display: inline-flex; align-items: center; gap: .4rem; }
.tableros__uno:hover { background: var(--azul-claro); color: var(--azul-oscuro); }
.tableros__uno--activo { background: var(--azul-oscuro); color: #fff; border-color: var(--azul-oscuro); font-weight: 600; }
.tableros__uno--activo:hover { background: var(--azul-oscuro); color: #fff; }
.tableros__n { background: var(--gris-claro); color: var(--texto); border-radius: 10px; padding: 0 .4rem; font-size: .72rem; font-weight: 600; }
.tableros__uno--activo .tableros__n { background: rgba(255,255,255,.25); color: #fff; }

/* Una fila vencida se marca con color y con la etiqueta: el color nunca va solo. */
.fila--vencida { background: #fbeced; }

/* --- Gráficas (Chart.js sobre lienzo) ------------------------------------ */
.grafica { margin: .8rem 0 .4rem; padding: 0; position: relative; height: var(--alto, 240px); }
.grafica--acotada { max-width: 480px; margin-inline: auto; }
.grafica canvas { max-width: 100%; }

.grafica-medidor { text-align: center; }
.grafica-medidor .grafica { margin-bottom: 0; }
.grafica-medidor__pie { display: block; font-size: .72rem; font-weight: 700; color: var(--rojo); margin-top: -.9rem; }

.punto { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .4rem; vertical-align: baseline; }

/* Fila de cambio rápido de acceso en la gestión de usuarios. */
.rapido { display: flex; align-items: flex-end; gap: .7rem; flex-wrap: wrap; padding: .6rem 0; border-bottom: 1px solid var(--gris-claro); }
.rapido:last-of-type { border-bottom: 0; }
.rapido__quien { min-width: 190px; font-size: .86rem; font-weight: 600; color: var(--azul-oscuro); }
.rapido__campo { min-width: 165px; }
.rapido__campo label { font-size: .72rem; margin-bottom: .1rem; }

/* Campos apilados en una sola columna, para formularios estrechos. */
.campos--uno { grid-template-columns: 1fr; }