/* =====================================================================
   CTC — Catálogo Territorial de Colombia
   Paleta hipsométrica: la de los mapas de altitud del IGAC.
   Los códigos van en monoespaciada: son el contenido, no un detalle.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     LOS TRES COLORES DE LA CASA

         #FFC300  oro    — la accion: botones y lo que se pulsa
         #0B5ED7  azul   — lo interactivo: enlaces, foco, seleccion
         #084298  azul o.— la estructura: titulos, cabeceras de tabla

     Estan repartidos por FUNCION, no por gusto. El oro solo aparece
     donde se puede pulsar; si tine tambien titulos y bordes deja de
     senalar nada, que es lo que le pasa a un acento cuando se usa para
     todo.

     Los grises se corrieron a un tono AZULADO. Con grises verdosos
     —#D9E0DD, #F4F6F5— el azul de la marca se veia sucio al lado: dos
     temperaturas de color peleando en la misma pantalla.
     --------------------------------------------------------------- */
  --marca-oro:    #FFC300;
  --marca-azul:   #0B5ED7;
  --marca-azul-o: #084298;

  --tinta:    #14232F;
  --tinta-2:  #3B5063;
  --papel:    #F5F7FA;
  --panel:    #FFFFFF;
  --linea:    #DDE3EC;
  --acento:   var(--marca-azul);
  --acento-d: var(--marca-azul-o);

  /* EL COLOR DE LOS BOTONES ES SUYO, NO EL DEL ACENTO.
     Antes los botones usaban `--acento`, que ademas tine enlaces, anillos
     de foco, pildoras y avisos. Cambiar el boton habria cambiado las
     cinco cosas. Con un par de tokens propios, el boton se mueve solo.

     El texto va OSCURO: sobre dorado, el blanco da un contraste de 1,7:1
     —ilegible—, y el azul de la marca da 8,9:1. */
  --boton:        #FFC300;
  --boton-d:      #E5AF00;
  --boton-texto:  var(--marca-azul-o);
  --curva:    #C9A227;
  --alerta:   #B4472E;
  --tenue:    #5C6D7B;

  /* ---------------------------------------------------------------
     PALETA AZUL COMPARTIDA — /usr/local/share/estrategia/paleta-navy.md

     Los ocho valores del ecosistema Estrategia / INGESES. Salieron de
     esta aplicacion y se aplicaron el 24/08/2026 en electoral, las dos
     campanas de prueba y el servidor de licencias.

     Vivian en el <style> de views/login.ejs. Suben aqui porque el
     encargo lo pide y por la razon que da: dos juegos de nombres para el
     mismo color es como una pantalla se queda atras sin que nadie se
     entere. Ahora `--menu*` son ALIAS de estos, no valores propios.

     Contrastes ya medidos (WCAG), no hace falta rehacerlos:
       blanco sobre #131F3B .... 16,32 AAA
       blanco sobre #1B2B4F .... 13,95 AAA
       #FFC300 sobre #131F3B ... 10,15 AAA
       #A9BBD4 sobre #131F3B .... 8,35 AAA
       #A9BBD4 sobre #1B2B4F .... 7,14 AAA
     --------------------------------------------------------------- */
  --ing-fondo:   #131F3B;
  --ing-tarjeta: #1B2B4F;
  --ing-campo:   #16264A;
  --ing-borde:   #2E4271;
  --ing-oro:     #FFC300;
  --ing-oro-o:   #E5AF00;
  --ing-tenue:   #A9BBD4;
  --ing-texto:   #FFFFFF;

  /* Marca del menú lateral, TOMADA DE ELECTORAL.
     No son valores elegidos aquí: son los de
     electoral.appestrategia.net/css/style.css, para que las dos
     aplicaciones de la misma casa se vean iguales.

         --color-navy: #10233F   --color-navy-lighter: #29497A
         --color-accent: #FFC300

     El fondo allí no es plano sino un degradado a #0B1D33, y se replica.

     El gris tenue NO es `--tenue`: aquel se lee sobre papel claro. Medido
     sobre #10233F —el extremo más claro del degradado, o sea el caso
     peor— #ADC4DE da 8,79:1. */
  --menu:       var(--ing-fondo);     /* era #10233F */
  --menu-fondo: #0E1830;              /* era #0B1D33 — el pie del degradado */
  --menu-activo:var(--ing-tarjeta);   /* era #29497A */
  --menu-oro:   var(--ing-oro);
  --menu-texto: var(--ing-tenue);     /* era #ADC4DE */

  --r: 6px;
  --sombra: 0 1px 2px rgba(20,35,47,.06), 0 4px 12px rgba(20,35,47,.05);
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento-d); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* --------------------------------------------------- estructura */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

/* EL MISMO AZUL QUE EL INGRESO, PLANO.

   Llevaba un degradado que bajaba de #131F3B a #0E1830, asi que su mitad
   inferior era mas oscura que el fondo de la pantalla de ingreso y las dos
   no se veian del mismo color aunque compartieran el token de arriba.

   El encargo compartido (/usr/local/share/estrategia/paleta-navy.md) pide
   degradado «para dar profundidad contra el area de trabajo». Aqui se opta
   por el plano a peticion expresa: pesa mas que el lateral y el ingreso se
   reconozcan como la misma superficie. Volver atras es cambiar esta linea
   por  linear-gradient(180deg, var(--menu) 0%, var(--menu-fondo) 100%). */
.lateral {
  background: var(--ing-fondo);
  color: var(--ing-tenue);
  padding: 20px 0;
  display: flex; flex-direction: column;
}
.marca { padding: 4px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.14);
         text-align: center; }
/* El logo es blanco sobre transparente, así que se apoya en el azul sin
   necesitar recuadro ni fondo propio. */
/* Centrado y a 118 px: se lee la silueta y el texto del logo sin comerse
   la barra. A 64 px quedaba pequeño para ser la marca de la aplicación. */
.marca-logo { display: block; width: 118px; height: auto; margin: 0 auto 12px; }
.marca b {
  display: block; color: var(--menu-oro); font-size: 17px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.25;
}
.marca span { font-size: 12px; color: var(--menu-texto); letter-spacing: .05em;
              text-transform: uppercase; }

.nav { padding: 14px 0; flex: 1; }
.nav a {
  display: block; padding: 11px 22px; color: var(--ing-tenue); font-size: 15.5px;
  border-left: 3px solid transparent;
}
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
/* EL FILETE DORADO ES LO QUE SENALA, NO EL RELLENO.
   Sobre azul oscuro cualquier relleno de la misma familia queda en 1,1-1,2
   de contraste: no se ve, y no hay que forzarlo aclarandolo. El filete da
   10,15 contra el azul del menu. Si algun dia resulta poco, se engorda el
   filete. */
.nav a.on { background: var(--menu-activo); border-left-color: var(--menu-oro);
            border-left-width: 4px; color: var(--ing-texto); font-weight: 600; }

.pie-lateral { padding: 18px 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14.5px; }
.pie-lateral .quien { color: var(--ing-texto); }
.pie-lateral .rol { color: var(--menu-texto); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.pie-lateral button {
  margin-top: 10px; background: none; border: 1px solid rgba(255,255,255,.22);
  color: var(--ing-tenue); padding: 5px 12px; border-radius: var(--r); cursor: pointer; font: inherit;
  font-size: 14px;
}
.pie-lateral button:hover { border-color: var(--menu-oro); color: var(--ing-texto); }

/* ---------------------------------------------------------------------
   ANCHO: LAS TARJETAS SE ESTIRAN, EL TEXTO NO

   El tope estaba en 1180 px y dejaba media pantalla vacia en un monitor
   normal. Sube a 1560, que en 1920 px deja el contenido respirado sin
   pegarlo al borde.

   Pero ancho de caja y ancho de LECTURA no son lo mismo. Una tabla de
   ocho columnas agradece los 1500 px; un parrafo a 1500 px se lee mal,
   porque al saltar de renglon el ojo pierde cual era el siguiente. Por
   eso el texto corrido se capa aparte, en `ch` —anchos de caracter—, que
   es la unidad que mide justo eso.
   --------------------------------------------------------------------- */
.contenido { padding: 28px 36px 64px; max-width: 1560px; }
/* En un portatil de 1366 el relleno mayor comia mas de lo que el tope
   nuevo daba, y la tarjeta acababa 16 px MAS ESTRECHA que antes. Ahi el
   aire sobra menos que el sitio. */
@media (max-width: 1400px) { .contenido { padding-left: 28px; padding-right: 28px; } }

.sub { max-width: 88ch; }
/* Las notas al pie de una tarjeta son texto corrido, no datos. */
.caja > p { max-width: 96ch; }

h1 { font-size: 34px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.015em;
     color: var(--marca-azul-o); }
/* El oro entra aqui como marca de seccion, no como relleno: una barra
   fina a la izquierda del titulo. Es el mismo color del boton, asi que
   la pantalla se lee de un vistazo — oro = donde pasan cosas. */
h2 {
  font-size: 22px; font-weight: 600; margin: 36px 0 15px;
  color: var(--marca-azul-o); position: relative; padding-left: 14px;
}
h2::before {
  content: ''; position: absolute; left: 0; top: .16em; bottom: .16em;
  width: 4px; border-radius: 2px; background: var(--marca-oro);
}
.sub { color: var(--tenue); margin: 0 0 26px; font-size: 16.5px; }

/* --------------------------------------------------- tarjetas */
.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

.cifra {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 16px 18px; box-shadow: var(--sombra);
}
.cifra .n { font-size: 30px; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cifra .e {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tenue); margin-top: 3px;
}
.cifra.destacada { border-left: 3px solid var(--curva); }

.caja {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 24px; box-shadow: var(--sombra);
}

/* --------------------------------------------------- tablas */
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th {
  text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--marca-azul-o); font-weight: 700; padding: 12px 14px;
  border-bottom: 2px solid var(--marca-azul-o);
  vertical-align: bottom;
}
td { padding: 13px 14px; border-bottom: 1px solid #EAEEF5; vertical-align: middle; }
tbody tr:hover { background: #F5F8FE; }

/* UNA TABLA ANCHA SE DESPLAZA DENTRO DE SU TARJETA, NO SE SALE DE ELLA.
   Sin esto, la ultima columna se sale del borde de la caja y el boton
   queda flotando fuera — que es exactamente lo que pasaba en Usuarios. */
.tabla-ancha { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- códigos
   Firma de la interfaz: el código es el dato central del CTC,
   así que tiene tipografía propia y no se confunde con el nombre. */
.cod {
  font-family: var(--mono); font-size: 14px; letter-spacing: .02em;
  background: #EAF1FD; color: var(--acento-d);
  padding: 2px 7px; border-radius: 3px; border: 1px solid #C9DBF8;
  white-space: nowrap;
}
.cod.sin { background: #FAF3F1; color: var(--alerta); border-color: #F0DDD8; font-style: normal; }
.cod.reg { background: #FBF6E6; color: #8A6E14; border-color: #EFE3BC; }

.sistema {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tenue); font-weight: 600;
}

/* --------------------------------------------------- etiquetas */
.pill {
  display: inline-block; font-size: 12.5px; padding: 2px 9px; border-radius: 999px;
  background: #EAF1FD; color: var(--acento-d); letter-spacing: .03em;
}
.pill.gris  { background: #EEF1F6; color: var(--tenue); }
.pill.rojo  { background: #FAF0ED; color: var(--alerta); }
.pill.oro   { background: #FBF6E6; color: #8A6E14; }

/* --------------------------------------------------- ruta jerárquica
   Se dibuja como una línea de nivel: cada salto es un descenso. */
.ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 14px; }
.ruta span.sep { color: var(--curva); font-weight: 600; }
.ruta a { color: var(--tinta-2); }
.ruta b { font-weight: 600; }

/* --------------------------------------------------- formularios */
label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 7px;
        color: var(--tinta-2); }
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=tel], select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16.5px;
  border: 1px solid var(--linea); border-radius: var(--r);
  background: #fff; color: var(--tinta);
}
input:focus, select:focus {
  border-color: var(--marca-azul); outline: none;
  box-shadow: 0 0 0 3px rgba(11,94,215,.16);
}
.campo { margin-bottom: 16px; }

/* FILA DE ALTA: REJILLA, NO FLEX.
   En flex, cada campo llevaba su propio `min-width` y su etiqueta podia
   ocupar una linea o dos, asi que se descolgaban unos de otros — el de
   telefono quedaba mas bajo que los demas. En una rejilla las columnas
   son las mismas para todos y `align-items: end` alinea los campos por
   abajo, tenga la etiqueta el largo que tenga. */
.fila-alta {
  display: grid; align-items: end; gap: 18px 16px;
  grid-template-columns: 1.3fr 1.7fr 1.1fr 1.1fr .9fr auto;
}
.fila-alta .campo { margin: 0; min-width: 0; }
.fila-alta .btn { white-space: nowrap; }
@media (max-width: 1080px) { .fila-alta { grid-template-columns: repeat(2, 1fr); }
                             .fila-alta .btn { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 560px)  { .fila-alta { grid-template-columns: 1fr; } }

.btn {
  display: inline-block; padding: 12px 24px; font: inherit; font-size: 16px; font-weight: 600;
  background: var(--boton); color: var(--boton-texto); border: 1px solid var(--boton);
  border-radius: var(--r); cursor: pointer;
}
.btn:hover { background: var(--boton-d); border-color: var(--boton-d); text-decoration: none; }
.btn.plano { background: transparent; color: var(--tinta-2); border-color: var(--linea); }
.btn.plano:hover { background: #EDF2FB; color: var(--tinta); }
.btn.riesgo { background: transparent; color: var(--alerta); border-color: #E8CEC7; }
.btn.riesgo:hover { background: var(--alerta); color: #fff; }
.btn.chico { padding: 7px 16px; font-size: 14.5px; }

/* --------------------------------------------------- avisos */
.aviso { padding: 13px 16px; border-radius: var(--r); font-size: 15.5px; margin-bottom: 20px; }
.aviso.err { background: #FBF0ED; color: #8C3421; border: 1px solid #F0DAD3; }
.aviso.ok  { background: #EAF1FD; color: var(--acento-d); border: 1px solid #C2D7F7; }
.aviso.dato{ background: #FBF6E6; color: #7A6110; border: 1px solid #EFE3BC; }

.vacio { text-align: center; padding: 40px 20px; color: var(--tenue); }
.vacio p { margin: 0 0 14px; }

/* --------------------------------------------------- acceso */
/* ---------------------------------------------------------------------
   PANTALLAS DE ACCESO — recuperar, restablecer y error

   Estaban en casi negro (`--tinta`) con dos degradados en diagonal, uno de
   ellos VERDE AZULADO: resto del acento anterior. No se parecian en nada a
   la pantalla de ingreso, aunque son la misma familia y la gente pasa de
   una a otra en el mismo minuto.

   FONDO PLANO, NO DEGRADADO. El encargo lo dice y viene de electoral: alli
   un degradado radial aclaraba una esquina hasta #29497A y contra ese punto
   la tarjeta perdia el borde.

   Y OJO CON EL TEXTO. Todo lo de dentro estaba pensado para leerse sobre
   una tarjeta BLANCA: el `h1` es #084298, las etiquetas van en gris de
   sobre-blanco y los enlaces en azul. Sobre este azul, ninguno de los tres
   se lee. Por eso hay que repintarlos uno a uno y no solo cambiar el fondo
   — es el paso que el encargo llama «el que se olvida».
   --------------------------------------------------------------------- */
.acceso {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--ing-fondo);
}
.acceso .caja {
  width: 100%; max-width: 384px; padding: 34px;
  background: var(--ing-tarjeta); border-color: var(--ing-borde);
  color: var(--ing-texto);
}
.acceso h1 { font-size: 22px; margin-bottom: 2px; color: var(--ing-texto); }
.acceso .sub { margin-bottom: 24px; font-size: 14px; color: var(--ing-tenue); }
.acceso label { color: var(--ing-tenue); }
.acceso input[type=text], .acceso input[type=email], .acceso input[type=password] {
  background: var(--ing-campo); border-color: var(--ing-borde); color: var(--ing-texto);
}
.acceso input::placeholder { color: #7E93B4; }
.acceso input:focus { border-color: var(--ing-oro); box-shadow: 0 0 0 3px rgba(255,195,0,.20); }
.acceso a { color: var(--ing-oro); }
.acceso a:hover { color: var(--ing-oro-o); }

/* --------------------------------------------------- API docs */
.endpoint { border-bottom: 1px solid #EAEEF5; padding: 15px 0; }
.endpoint:last-child { border-bottom: none; }
.metodo {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  background: var(--acento); color: #fff; padding: 2px 8px; border-radius: 3px;
}
.endpoint code { font-family: var(--mono); font-size: 13.5px; color: var(--tinta); }
.endpoint p { margin: 6px 0 0; color: var(--tenue); font-size: 14px; }
pre {
  background: var(--tinta); color: #D3E0E7; padding: 15px; border-radius: var(--r);
  overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.5;
}

/* --------------------------------------------------- responsivo */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .lateral { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 12px; }
  .marca { border: none; padding: 0; flex: 1; }
  .nav { display: flex; flex-wrap: wrap; padding: 0; width: 100%; }
  .nav a { border-left: none; border-bottom: 2px solid transparent; padding: 7px 12px; }
  .nav a.on { border-left: none; border-bottom-color: var(--acento); }
  .pie-lateral { border: none; padding: 0; }
  .contenido { padding: 20px 16px 50px; }
  table { font-size: 13.5px; }
  th, td { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}