@charset "UTF-8";
/*
 * Hoja de estilos institucional.
 *
 * Implementa el Sistema de Diseño Web de la Gobernación de Nariño v1.0,
 * que consolida:
 *  - Manual de Identidad Visual v1.0, junio 2024
 *  - Manual de Usabilidad y Estructura de los Sitios Web v1.0, marzo 2025
 *  - Resolución 1519 de 2020, Anexo 1 (accesibilidad WCAG 2.1 AA)
 *
 * Header y footer son estructuras inmutables: replican las de narino.gov.co
 * y solo admiten cambios en el nombre de la dependencia y en sus datos de
 * contacto. Cualquier otra modificación exige nueva versión del sistema de
 * diseño y despliegue simultáneo en todos los portales institucionales.
 */

/* ==========================================================================
   1. Variables
   ========================================================================== */

.wjc {

    /* ----------------------------------------------------------------------
       Tokens del Sistema de Diseño Web de la Gobernación de Nariño (§1.4).
       Son la única fuente de verdad: ningún valor de color o tipografía se
       escribe incrustado en las reglas.
       ---------------------------------------------------------------------- */

    /* Marca */
    --gn-verde:            #10A13B;
    --gn-amarillo:         #FFD500;
    --gn-azul:             #003366;
    --gn-blanco:           #FFFFFF;
    --gn-negro:            #000000;

    /* Texto */
    --gn-gris-titulo:      #383838;
    --gn-gris-cuerpo:      #4A4A4A;
    --gn-gris-dependencia: #4D4D4D;

    /* Derivados del escudo departamental (§1.3) */
    --gn-azul-claro:       #80BEFF;
    --gn-azul-medio:       #007AAC;
    --gn-cafe:             #B96633;
    --gn-rojo:             #DA1C24;

    /* Tipografía */
    --gn-font-principal:   "Hind Madurai", "Segoe UI", system-ui, sans-serif;
    --gn-font-secundaria:  "Source Sans 3", "Source Sans Pro", sans-serif;
    --gn-font-tarjetas:    "Nunito Sans", var(--gn-font-principal);

    /* Escala */
    --gn-h1:               36px;
    --gn-h1-hero:          32px;
    --gn-h2:               28px;
    --gn-h2-seccion:       30px;
    --gn-h3:               24px;
    --gn-body:             16px;
    --gn-caption:          14px;

    /* Interlineado */
    --gn-lh-titulo:        1.2;
    --gn-lh-cuerpo:        1.4;

    /* ----------------------------------------------------------------------
       Derivados de interfaz.

       El verde normativo #10A13B ofrece 3,4:1 frente al blanco: suficiente
       para texto grande, no para texto normal. La nota del §1.3 admite verdes
       más oscuros como derivados del primario para mejorar el contraste
       tipográfico, así que #006B3F (6,6:1) se reserva para los fondos que
       llevan texto pequeño en blanco. El color identitario de la marca sigue
       siendo #10A13B y es el que se usa en líneas, bordes y etiquetas.
       ---------------------------------------------------------------------- */

    --gn-verde-solido:     #006B3F;
    --gn-verde-hover:      #00532F;
    --gn-verde-tenue:      #E8F6ED;
    --gn-amarillo-hover:   #E0BB00;

    /* Azul institucional de la barra GOV.CO */
    --gn-govco:            #3366CC;

    /* Neutros de interfaz */
    --gn-gris-100: #F5F7F6;
    --gn-gris-200: #E7EAE8;
    --gn-gris-300: #CDD3CF;
    --gn-gris-400: #9AA39D;
    --gn-gris-600: #616B65;

    /* Estados */
    --gn-error:         #B3261E;
    --gn-error-fondo:   #FDECEA;
    --gn-aviso:         #8A5A00;
    --gn-aviso-fondo:   #FFF6DB;
    --gn-info-fondo:    #EAF1F8;

    /* Métricas */
    --gn-radio:         8px;
    --gn-radio-grande:  14px;
    --gn-ancho:         1180px;
    --gn-sombra:        0 1px 3px rgba(0, 0, 0, .07), 0 6px 20px rgba(0, 0, 0, .05);
    --gn-sombra-fuerte: 0 4px 12px rgba(0, 0, 0, .1), 0 12px 32px rgba(0, 0, 0, .07);

    /* ----------------------------------------------------------------------
       Alias internos de la aplicación. Se mantienen para que las reglas
       existentes sigan leyendo siempre desde los tokens normativos.
       ---------------------------------------------------------------------- */

    --wj-verde: var(--gn-verde);
    --wj-verde-solido: var(--gn-verde-solido);
    --wj-verde-oscuro: var(--gn-verde-hover);
    --wj-verde-claro: var(--gn-verde-tenue);
    --wj-amarillo: var(--gn-amarillo);
    --wj-amarillo-oscuro: var(--gn-amarillo-hover);
    --wj-azul: var(--gn-azul);
    --wj-gris-texto: var(--gn-gris-cuerpo);
    --wj-negro: var(--gn-negro);
    --wj-blanco: var(--gn-blanco);
    --wj-gris-100: var(--gn-gris-100);
    --wj-gris-200: var(--gn-gris-200);
    --wj-gris-300: var(--gn-gris-300);
    --wj-gris-400: var(--gn-gris-400);
    --wj-gris-600: var(--gn-gris-600);
    --wj-error: var(--gn-error);
    --wj-error-fondo: var(--gn-error-fondo);
    --wj-aviso: var(--gn-aviso);
    --wj-aviso-fondo: var(--gn-aviso-fondo);
    --wj-info-fondo: var(--gn-info-fondo);
    --wj-fuente-titulos: var(--gn-font-principal);
    --wj-fuente-cuerpo: var(--gn-font-principal);
    --wj-radio: var(--gn-radio);
    --wj-radio-grande: var(--gn-radio-grande);
    --wj-ancho: var(--gn-ancho);
    --wj-sombra: var(--gn-sombra);
    --wj-sombra-fuerte: var(--gn-sombra-fuerte);
}

/* ==========================================================================
   2. Base del bloque
   --------------------------------------------------------------------------
   El plugin convive con el tema del sitio, así que ninguna regla sale del
   contenedor .wjc: no se tocan body, html ni los encabezados de la página.
   ========================================================================== */

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

.wjc {
    color: var(--gn-gris-cuerpo);
    font-family: var(--gn-font-principal);
    font-size: var(--gn-body);
    line-height: var(--gn-lh-cuerpo);
    text-align: left;
}

.wjc h2, .wjc h3, .wjc h4 {
    font-family: var(--gn-font-principal);
    color: var(--gn-negro);
    line-height: var(--gn-lh-titulo);
    margin: 0 0 .5em;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

.wjc h2 { font-size: clamp(24px, 1.3rem + .9vw, var(--gn-h2)); }
.wjc h3 { font-size: 20px; }
.wjc h4 { font-size: 17px; }

.wjc p { margin: 0 0 1rem; max-width: 100ch; }
.wjc p:last-child { margin-bottom: 0; }

.wjc a { color: var(--gn-verde-solido); text-decoration: underline; text-underline-offset: 2px; }
.wjc a:hover { color: var(--gn-azul); }

.wjc img, .wjc svg { max-width: 100%; }

.wjc :focus-visible {
    outline: 3px solid var(--gn-azul);
    outline-offset: 2px;
    border-radius: 3px;
}

.wjc-titulo { margin-bottom: .5rem; }
.wjc-intro { color: var(--gn-gris-cuerpo); margin-bottom: 1.5rem; }

.wjc-contenedor {
    width: 100%;
    max-width: var(--gn-ancho);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.wjc-contenido { padding-block: 1.5rem; }

.wjc-oculto {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.wjc-en-linea { display: inline-block; }

.wjc-salir { margin-top: 1.25rem; }

/* ==========================================================================
   3. Barra GOV.CO y encabezado (§4 — estructura obligatoria)
   ========================================================================== */

/* --- 3.1 Barra GOV.CO. No se altera ni se reemplaza. --- */

.wjc .gn-topbar {
    background: var(--gn-govco);
    padding-block: 6px;
}

.wjc .gn-topbar__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.wjc .gn-govco-logo { display: inline-flex; align-items: center; }
.wjc .gn-govco-logo img { height: 24px; width: auto; display: block; }

.wjc .gn-topbar__lema {
    color: var(--gn-blanco);
    font-size: 13px;
    margin: 0;
    max-width: none;
}

/* --- 3.2 Encabezado institucional --- */

.wjc .gn-header {
    background: var(--gn-blanco);
    border-bottom: 4px solid var(--gn-verde);
}

/* Dos filas: marca y buscador arriba; menú abajo, con todo el ancho
   disponible para que los seis ítems base quepan en una sola línea. */
.wjc .gn-header__interior {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-block: .9rem .2rem;
}

.wjc .gn-header__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.wjc .gn-header__acciones {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

/* Logo + nombre de dependencia separados por línea vertical (§3.2). */
.wjc .gn-marca {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.wjc .gn-marca__logo {
    height: 48px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.wjc .gn-marca__dependencia {
    font-family: var(--gn-font-principal);
    font-weight: 500;
    font-size: var(--gn-body);
    line-height: 1.25;
    color: var(--gn-gris-dependencia);
    padding-left: 1rem;
    border-left: 1px solid var(--gn-gris-300);
    min-width: 0;
    overflow-wrap: break-word;
}

/* --- 3.3 Buscador de contenidos --- */

.wjc .gn-buscador {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--gn-gris-300);
    border-radius: 999px;
    overflow: hidden;
    background: var(--gn-blanco);
    max-width: 320px;
    width: 100%;
}

.wjc .gn-buscador:focus-within {
    border-color: var(--gn-verde);
    box-shadow: 0 0 0 3px rgba(16, 161, 59, .18);
}

.wjc .gn-buscador input {
    border: 0;
    outline: 0;
    padding: .5rem .9rem;
    font-family: inherit;
    font-size: var(--gn-caption);
    color: var(--gn-gris-cuerpo);
    background: transparent;
    flex: 1;
    min-width: 0;
    min-height: 40px;
}

.wjc .gn-buscador button {
    border: 0;
    background: transparent;
    color: var(--gn-verde-solido);
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 44px;
    height: 40px;
    flex-shrink: 0;
}
.wjc .gn-buscador button:hover { color: var(--gn-azul); }
.wjc .gn-buscador svg { width: 18px; height: 18px; }

/* --- 3.4 Menú de navegación --- */

.wjc .gn-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: .25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wjc .gn-nav a {
    display: block;
    padding: .5rem .7rem;
    font-size: var(--gn-caption);
    font-weight: 600;
    color: var(--gn-gris-cuerpo);
    text-decoration: none;
    border-radius: 4px;
    border-bottom: 2px solid transparent;
}

.wjc .gn-nav a:hover,
.wjc .gn-nav a:focus-visible {
    color: var(--gn-verde-solido);
    border-bottom-color: var(--gn-verde);
}

.wjc .gn-nav__boton {
    display: none;
    align-items: center;
    gap: .5rem;
    background: var(--gn-blanco);
    border: 1.5px solid var(--gn-gris-300);
    border-radius: var(--gn-radio);
    padding: .55rem .9rem;
    font-family: inherit;
    font-size: var(--gn-caption);
    font-weight: 600;
    color: var(--gn-azul);
    cursor: pointer;
    min-height: 44px;
}
.wjc .gn-nav__boton svg { width: 18px; height: 18px; }

/* --- 3.5 Identificación del trámite --- */

.wjc .gn-tramite {
    background: var(--gn-gris-100);
    border-bottom: 1px solid var(--gn-gris-200);
}

.wjc .gn-tramite__interior {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    padding-block: .6rem;
}

.wjc .gn-tramite__titulo {
    font-family: var(--gn-font-principal);
    font-weight: 700;
    font-size: var(--gn-body);
    color: var(--gn-azul);
    margin: 0;
    max-width: none;
}

.wjc .gn-tramite__detalle {
    font-size: var(--gn-caption);
    color: var(--gn-gris-cuerpo);
    margin: 0;
    max-width: none;
}

/* ==========================================================================
   4. Indicador de pasos
   ========================================================================== */

.wjc-pasos { background: var(--wj-blanco); border-bottom: 1px solid var(--wj-gris-200); }

.wjc-pasos__lista {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: paso;
    overflow-x: auto;
}

.wjc-paso {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.5rem .85rem 0;
    font-size: .88rem;
    white-space: nowrap;
    color: var(--wj-gris-600);
    position: relative;
}
.wjc-paso:not(:last-child)::after {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--wj-gris-200);
    margin-left: .35rem;
}

.wjc-paso__numero {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--wj-gris-200);
    color: var(--wj-gris-600);
    font-weight: 700;
    font-size: .82rem;
    flex-shrink: 0;
}

.wjc-paso--activo { color: var(--wj-azul); font-weight: 700; }
.wjc-paso--activo .wjc-paso__numero { background: var(--wj-verde-solido); color: var(--wj-blanco); }

.wjc-paso--completo { color: var(--wj-verde-oscuro); }
.wjc-paso--completo .wjc-paso__numero { background: var(--wj-verde-claro); color: var(--wj-verde-oscuro); }
.wjc-paso--completo:not(:last-child)::after { background: var(--wj-verde); }

/* ==========================================================================
   5. Estructura principal
   ========================================================================== */


.wjc-cabecera-pagina { margin-bottom: 1.5rem; }
.wjc-cabecera-pagina p { color: var(--wj-gris-600); max-width: 65ch; }

.wjc-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* ==========================================================================
   6. Sección de portada
   ========================================================================== */

.wjc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    background: var(--wj-blanco);
    border-radius: var(--wj-radio-grande);
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--wj-sombra);
    border-left: 6px solid var(--wj-verde);
}

.wjc-hero h1 { margin-bottom: .6rem; }
.wjc-hero__entrada { font-size: 1.05rem; max-width: 60ch; }

.wjc-hero__lista {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .95rem;
}
.wjc-hero__lista li { margin-bottom: .3rem; }
.wjc-hero__lista li::marker { color: var(--wj-verde); }

.wjc-hero__imagen {
    display: grid;
    place-items: center;
    background: var(--wj-amarillo);
    border-radius: var(--wj-radio-grande);
    padding: 1.5rem 2rem;
}

/* ==========================================================================
   7. Tarjetas
   ========================================================================== */

.wjc-tarjeta {
    background: var(--wj-blanco);
    border-radius: var(--wj-radio-grande);
    padding: 1.75rem;
    box-shadow: var(--wj-sombra);
    margin-bottom: 1.5rem;
}

.wjc-tarjeta__titulo {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .85rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--wj-verde);
}
.wjc-tarjeta__titulo--simple { border-bottom-color: var(--wj-gris-200); }

.wjc-tarjeta__numero {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--wj-verde-solido);
    color: var(--wj-blanco);
    font-size: 1rem;
    flex-shrink: 0;
}

.wjc-tarjeta__intro { color: var(--wj-gris-600); max-width: 68ch; }

.wjc-tarjeta--lateral { background: var(--wj-blanco); }
.wjc-tarjeta--lateral .wjc-tarjeta__titulo { font-size: 1.15rem; }

/* ==========================================================================
   8. Listas informativas
   ========================================================================== */

.wjc-lista-pasos {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    counter-reset: ayuda;
}
.wjc-lista-pasos li {
    counter-increment: ayuda;
    position: relative;
    padding-left: 2.35rem;
    margin-bottom: 1rem;
    font-size: .92rem;
}
.wjc-lista-pasos li::before {
    content: counter(ayuda);
    position: absolute;
    left: 0; top: .1rem;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--wj-amarillo);
    color: var(--wj-azul);
    font-weight: 700;
    font-size: .8rem;
}
.wjc-lista-pasos strong {
    display: block;
    color: var(--wj-azul);
    font-family: var(--wj-fuente-titulos);
}

.wjc-nota-legal {
    background: var(--wj-gris-100);
    border-left: 4px solid var(--wj-amarillo);
    border-radius: 0 var(--wj-radio) var(--wj-radio) 0;
    padding: 1rem 1.15rem;
    font-size: .85rem;
}
.wjc-nota-legal h3 { font-size: .95rem; margin-bottom: .35rem; }

/* ==========================================================================
   9. Alertas
   ========================================================================== */

.wjc-alerta {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-radius: var(--wj-radio);
    margin-bottom: 1.25rem;
    border-left: 5px solid;
    background: var(--wj-blanco);
}

.wjc-alerta__icono {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    color: var(--wj-blanco);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: .1rem;
}

.wjc-alerta__titulo { font-weight: 700; margin: 0 0 .2rem; color: var(--wj-azul); }
.wjc-alerta__texto { margin: 0; font-size: .93rem; }
.wjc-alerta__lista { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.wjc-alerta__lista li { margin-bottom: .2rem; }

.wjc-alerta--exito { border-color: var(--wj-verde); background: var(--wj-verde-claro); }
.wjc-alerta--exito .wjc-alerta__icono { background: var(--wj-verde-solido); }

.wjc-alerta--error { border-color: var(--wj-error); background: var(--wj-error-fondo); }
.wjc-alerta--error .wjc-alerta__icono { background: var(--wj-error); }
.wjc-alerta--error .wjc-alerta__titulo { color: var(--wj-error); }

.wjc-alerta--aviso { border-color: var(--wj-amarillo-oscuro); background: var(--wj-aviso-fondo); }
.wjc-alerta--aviso .wjc-alerta__icono { background: var(--wj-aviso); }

.wjc-alerta--info { border-color: var(--wj-azul); background: var(--wj-info-fondo); }
.wjc-alerta--info .wjc-alerta__icono { background: var(--wj-azul); }

/* ==========================================================================
   10. Formularios
   ========================================================================== */

.wjc-rejilla {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.1rem 1.25rem;
}

.wjc-campo { display: flex; flex-direction: column; grid-column: span 3; min-width: 0; }
.wjc-campo--completo { grid-column: span 6; }
.wjc-campo--medio   { grid-column: span 3; }
.wjc-campo--tercio  { grid-column: span 2; }
.wjc-campo--sexto   { grid-column: span 1; }

.wjc-etiqueta {
    font-weight: 600;
    font-size: .88rem;
    color: var(--wj-azul);
    margin-bottom: .35rem;
    line-height: 1.35;
}

.wjc-obligatorio { color: var(--wj-error); font-weight: 700; }

.wjc-control {
    width: 100%;
    padding: .62rem .8rem;
    border: 1.5px solid var(--wj-gris-300);
    border-radius: var(--wj-radio);
    font-family: inherit;
    font-size: .95rem;
    color: var(--wj-negro);
    background: var(--wj-blanco);
    transition: border-color .15s ease, box-shadow .15s ease;
    min-height: 44px; /* objetivo táctil accesible */
}

.wjc-control:hover { border-color: var(--wj-gris-400); }

.wjc-control:focus {
    outline: none;
    border-color: var(--wj-verde);
    box-shadow: 0 0 0 3px rgba(16, 161, 59, .18);
}

.wjc-control--grande { font-size: 1.15rem; padding: .8rem 1rem; letter-spacing: .04em; }

.wjc-control--bloqueado {
    background: var(--wj-gris-100);
    color: var(--wj-gris-600);
    cursor: not-allowed;
}

select.wjc-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2.35rem;
}

textarea.wjc-control { min-height: 88px; resize: vertical; }

.wjc-ayuda { font-size: .8rem; color: var(--wj-gris-600); margin: .3rem 0 0; }

.wjc-error {
    font-size: .82rem;
    color: var(--wj-error);
    font-weight: 600;
    margin: .3rem 0 0;
    display: flex;
    gap: .3rem;
}
.wjc-error::before { content: "⚠"; }

.wjc-campo--error .wjc-control { border-color: var(--wj-error); background: var(--wj-error-fondo); }
.wjc-campo--error .wjc-etiqueta { color: var(--wj-error); }

.wjc-campo--oculto { display: none; }

.wjc-acepta {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--wj-gris-100);
    border: 1.5px solid var(--wj-gris-200);
    border-radius: var(--wj-radio);
    padding: .9rem 1.1rem;
    font-size: .9rem;
    cursor: pointer;
}
.wjc-acepta:hover { border-color: var(--wj-verde); background: var(--wj-verde-claro); }
.wjc-acepta input {
    width: 20px; height: 20px;
    accent-color: var(--wj-verde);
    margin-top: .12rem;
    flex-shrink: 0;
    cursor: pointer;
}
.wjc-campo--error .wjc-acepta { border-color: var(--wj-error); background: var(--wj-error-fondo); }

/* Secciones del formulario largo */

.wjc-formulario--largo { margin-top: .5rem; }

.wjc-seccion {
    background: var(--wj-blanco);
    border-radius: var(--wj-radio-grande);
    padding: 1.6rem 1.75rem 1.75rem;
    box-shadow: var(--wj-sombra);
    margin-bottom: 1.25rem;
}

.wjc-seccion__cabecera {
    border-bottom: 2px solid var(--wj-verde);
    padding-bottom: .8rem;
    margin-bottom: 1.25rem;
}
.wjc-seccion__cabecera h2 { margin-bottom: .2rem; }
.wjc-seccion__cabecera p { font-size: .88rem; color: var(--wj-gris-600); margin: 0; max-width: 78ch; }

/* ==========================================================================
   11. Botones y acciones
   ========================================================================== */

.wjc-acciones {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.wjc-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .7rem 1.6rem;
    border: 2px solid transparent;
    border-radius: var(--wj-radio);
    font-family: var(--wj-fuente-titulos);
    font-size: .97rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.wjc-boton:active { transform: translateY(1px); }

.wjc-boton--primario { background: var(--wj-verde-solido); color: var(--wj-blanco); }
.wjc-boton--primario:hover { background: var(--wj-verde-oscuro); color: var(--wj-blanco); }

.wjc-boton--secundario {
    background: var(--wj-blanco);
    color: var(--wj-azul);
    border-color: var(--wj-gris-300);
}
.wjc-boton--secundario:hover { border-color: var(--wj-azul); color: var(--wj-azul); }

.wjc-boton--amarillo { background: var(--wj-amarillo); color: var(--wj-azul); }
.wjc-boton--amarillo:hover { background: var(--wj-amarillo-oscuro); color: var(--wj-azul); }

.wjc-boton--texto { background: none; color: var(--wj-gris-600); text-decoration: underline; }
.wjc-boton--texto:hover { color: var(--wj-azul); }

.wjc-boton--peligro { background: var(--wj-error); color: var(--wj-blanco); }
.wjc-boton--peligro:hover { background: #8C1D17; color: var(--wj-blanco); }

.wjc-boton--pequeno { min-height: 36px; padding: .35rem .9rem; font-size: .85rem; }

.wjc-acciones--pegajosas {
    position: sticky;
    bottom: 0;
    background: var(--wj-blanco);
    border-top: 3px solid var(--wj-verde);
    border-radius: var(--wj-radio-grande) var(--wj-radio-grande) 0 0;
    box-shadow: var(--wj-sombra-fuerte);
    padding: 1rem 1.5rem;
    justify-content: space-between;
    z-index: 20;
    margin-top: 1.5rem;
}
.wjc-acciones__nota { margin: 0; font-size: .85rem; color: var(--wj-gris-600); }
.wjc-acciones__botones { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ==========================================================================
   12. Tarjetas de contrato
   ========================================================================== */

.wjc-contratos { border: 0; padding: 0; margin: 0; display: grid; gap: .9rem; }

.wjc-contrato {
    position: relative;
    border: 2px solid var(--wj-gris-200);
    border-radius: var(--wj-radio);
    background: var(--wj-blanco);
    transition: border-color .15s ease, background-color .15s ease;
}

.wjc-contrato--seleccionable:hover { border-color: var(--wj-verde); }

.wjc-contrato__radio {
    position: absolute;
    top: 1.15rem; left: 1.1rem;
    width: 20px; height: 20px;
    accent-color: var(--wj-verde);
    cursor: pointer;
}

.wjc-contrato__radio:checked + .wjc-contrato__cuerpo { background: var(--wj-verde-claro); }
.wjc-contrato:has(.wjc-contrato__radio:checked) { border-color: var(--wj-verde); }
.wjc-contrato__radio:focus-visible + .wjc-contrato__cuerpo { outline: 3px solid var(--wj-azul); outline-offset: 2px; }

.wjc-contrato__cuerpo {
    display: block;
    padding: 1.1rem 1.25rem;
    border-radius: calc(var(--wj-radio) - 2px);
}
.wjc-contrato--seleccionable .wjc-contrato__cuerpo { padding-left: 3rem; cursor: pointer; }

.wjc-contrato__cabecera {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.wjc-contrato__referencia {
    font-family: var(--wj-fuente-titulos);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--wj-azul);
}

.wjc-etiqueta-estado {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .18rem .6rem;
    border-radius: 4px;
    color: var(--wj-blanco);
}
.wjc-etiqueta-estado--vigente { background: var(--wj-verde-solido); }
.wjc-etiqueta-estado--cerrado { background: var(--wj-gris-600); }

.wjc-contrato__objeto {
    font-size: .89rem;
    margin: 0 0 .75rem;
    color: var(--wj-gris-texto);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

.wjc-contrato__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .6rem 1.25rem;
    margin: 0;
    font-size: .83rem;
}
.wjc-contrato__datos dt { color: var(--wj-gris-600); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.wjc-contrato__datos dd { margin: 0; font-weight: 600; color: var(--wj-negro); }

.wjc-resumen-contrato { margin-bottom: 1.5rem; }
.wjc-resumen-contrato h2 { font-size: 1.05rem; }
.wjc-resumen-contrato__cambiar { margin-top: .6rem; font-size: .88rem; }

.wjc-historicos { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--wj-gris-200); }
.wjc-historicos h3 { font-size: 1rem; }
.wjc-historicos__nota { font-size: .87rem; color: var(--wj-gris-600); }

.wjc-desplegable {
    background: var(--wj-blanco);
    border-radius: var(--wj-radio);
    box-shadow: var(--wj-sombra);
    padding: 0 1.25rem;
    margin-bottom: 1.5rem;
}
.wjc-desplegable summary {
    cursor: pointer;
    padding: 1rem 0;
    font-weight: 600;
    color: var(--wj-azul);
    font-family: var(--wj-fuente-titulos);
}
.wjc-desplegable__cuerpo { padding-bottom: 1.25rem; display: grid; gap: .9rem; }

/* ==========================================================================
   13. Constancia
   ========================================================================== */

.wjc-exito {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--wj-verde-claro);
    border-left: 6px solid var(--wj-verde);
    border-radius: var(--wj-radio-grande);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}
.wjc-exito h1 { margin-bottom: .2rem; color: var(--wj-verde-oscuro); }
.wjc-exito p { margin: 0; }
.wjc-exito__icono {
    display: grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--wj-verde-solido);
    color: var(--wj-blanco);
    font-size: 1.9rem;
    flex-shrink: 0;
}

.wjc-radicado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    background: var(--wj-azul);
    color: var(--wj-blanco);
    border-radius: var(--wj-radio-grande);
    padding: 1.35rem 1.75rem;
    margin-bottom: 1.5rem;
}
.wjc-radicado__etiqueta {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .82;
    margin-bottom: .2rem;
}
.wjc-radicado__bloque strong { font-family: var(--wj-fuente-titulos); font-size: 1.1rem; }
.wjc-radicado__valor { color: var(--wj-amarillo); letter-spacing: .04em; font-size: 1.3rem !important; }

.wjc-resumen-identidad {
    padding-bottom: 1.1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--wj-gris-200);
}
.wjc-resumen-identidad__nombre {
    font-family: var(--wj-fuente-titulos);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wj-azul);
    margin: 0 0 .2rem;
}
.wjc-resumen-identidad__meta { font-size: .88rem; color: var(--wj-gris-600); margin: 0; }

.wjc-resumen-seccion { margin-bottom: 1.5rem; }
.wjc-resumen-seccion h3 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wj-verde-oscuro);
    border-bottom: 2px solid var(--wj-verde-claro);
    padding-bottom: .35rem;
    margin-bottom: .75rem;
}

.wjc-resumen-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .6rem 1.5rem;
    margin: 0;
}
.wjc-resumen-fila { display: flex; flex-direction: column; padding-bottom: .35rem; }
.wjc-resumen-fila dt { font-size: .76rem; color: var(--wj-gris-600); text-transform: uppercase; letter-spacing: .03em; }
.wjc-resumen-fila dd { margin: 0; font-weight: 600; color: var(--wj-negro); font-size: .93rem; overflow-wrap: anywhere; }

.wjc-pie-constancia {
    font-size: .87rem;
    color: var(--wj-gris-600);
    background: var(--wj-gris-100);
    border-radius: var(--wj-radio);
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}

/* ==========================================================================
   14. Pie de página (§5 — estructura obligatoria)
   ========================================================================== */

.wjc .gn-footer {
    flex-shrink: 0;
    background: var(--gn-negro);
    color: #D8DCD9;
    font-size: var(--gn-caption);
    margin-top: auto;
}

.wjc .gn-footer a { color: var(--gn-amarillo); }
.wjc .gn-footer a:hover { color: var(--gn-blanco); }

/* --- 14.1 Columnas de información, separadas por líneas delgadas --- */

.wjc .gn-footer__cols {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 0;
    padding-block: 2.5rem 2rem;
}

.wjc .gn-footer__col { padding-inline: 1.75rem; }
.wjc .gn-footer__col:first-child { padding-left: 0; }
.wjc .gn-footer__col:last-child { padding-right: 0; }
.wjc .gn-footer__col + .gn-footer__col { border-left: 1px solid rgba(255, 255, 255, .18); }

.wjc .gn-footer__col p { margin: 0 0 .5rem; max-width: 46ch; }

.wjc .gn-footer__logo {
    height: 40px;
    width: auto;
    display: block;
    margin-bottom: .9rem;
    background: var(--gn-blanco);
    border-radius: 4px;
    padding: 4px 6px;
}

.wjc .gn-footer__entidad {
    font-family: var(--gn-font-principal);
    font-weight: 700;
    font-size: var(--gn-body);
    color: var(--gn-blanco);
    letter-spacing: .02em;
    margin: 0 0 .6rem;
}

.wjc .gn-footer__titulo {
    font-family: var(--gn-font-principal);
    font-weight: 700;
    font-size: var(--gn-body);
    color: var(--gn-blanco);
    margin: 0 0 .8rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--gn-verde);
    display: inline-block;
}

.wjc .gn-footer__dato { margin-bottom: .65rem; }
.wjc .gn-footer__dato strong { display: block; color: var(--gn-blanco); font-weight: 600; }

/* --- 14.2 Redes sociales --- */

.wjc .gn-social {
    display: flex;
    gap: .5rem;
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.wjc .gn-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--gn-blanco);
}
.wjc .gn-social a:hover { background: var(--gn-verde); color: var(--gn-blanco); }
.wjc .gn-social svg { width: 17px; height: 17px; fill: currentColor; }

/* --- 14.3 Enlaces obligatorios --- */

.wjc .gn-legal {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}
.wjc .gn-legal li { margin-bottom: .35rem; }

.wjc .gn-mapa-sitio {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 700;
}

/* --- 14.4 Hora legal de Colombia --- */

.wjc .gn-footer__hora {
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-block: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 13px;
}
.wjc .gn-footer__hora p { margin: 0; max-width: none; }

#wj-hora-legal {
    font-variant-numeric: tabular-nums;
    color: var(--gn-blanco);
    font-weight: 700;
}

/* --- 14.5 Botón «volver arriba» --- */

.wjc .gn-arriba {
    position: fixed;
    right: 1rem;
    bottom: 5.5rem;
    z-index: 40;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--gn-verde-solido);
    color: var(--gn-blanco);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--gn-sombra-fuerte);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.wjc .gn-arriba.gn-visible { opacity: 1; visibility: visible; transform: none; }
.wjc .gn-arriba:hover { background: var(--gn-verde-hover); }
.wjc .gn-arriba svg { width: 20px; height: 20px; }

/* --- 14.6 Botón de accesibilidad (§6.1 y §10) --- */

.wjc .gn-accesibilidad { position: fixed; right: 1rem; bottom: 1rem; z-index: 45; }

.wjc .gn-accesibilidad__boton {
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: var(--gn-azul);
    color: var(--gn-blanco);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--gn-sombra-fuerte);
}
.wjc .gn-accesibilidad__boton:hover { background: #00294F; }
.wjc .gn-accesibilidad__boton svg { width: 26px; height: 26px; }

.wjc .gn-accesibilidad__panel {
    position: absolute;
    right: 0;
    bottom: 62px;
    width: 268px;
    background: var(--gn-blanco);
    border: 1px solid var(--gn-gris-200);
    border-radius: var(--gn-radio-grande);
    box-shadow: var(--gn-sombra-fuerte);
    padding: 1.1rem;
}

.wjc .gn-accesibilidad__panel h2 {
    font-size: var(--gn-body);
    margin: 0 0 .8rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--gn-verde);
}

.wjc .gn-accesibilidad__grupo { margin-bottom: .9rem; }
.wjc .gn-accesibilidad__grupo p {
    font-size: 13px;
    font-weight: 600;
    color: var(--gn-gris-cuerpo);
    margin: 0 0 .4rem;
    max-width: none;
}

.wjc .gn-accesibilidad__acciones { display: flex; gap: .4rem; flex-wrap: wrap; }

.wjc .gn-accesibilidad__accion {
    flex: 1;
    min-width: 60px;
    min-height: 40px;
    border: 1.5px solid var(--gn-gris-300);
    border-radius: var(--gn-radio);
    background: var(--gn-blanco);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--gn-azul);
    cursor: pointer;
}
.wjc .gn-accesibilidad__accion:hover { border-color: var(--gn-verde); background: var(--gn-verde-tenue); }
.wjc .gn-accesibilidad__accion[aria-pressed="true"] {
    background: var(--gn-verde-solido);
    border-color: var(--gn-verde-solido);
    color: var(--gn-blanco);
}

/* Alto contraste: se refuerzan bordes y se oscurecen los grises. */
body.gn-contraste {
    --gn-gris-cuerpo: #1A1A1A;
    --gn-gris-600: #333333;
    --gn-gris-300: #555555;
    --gn-gris-200: #999999;
    --gn-gris-100: #FFFFFF;
}
body.gn-contraste .wjc-tarjeta,
body.gn-contraste .wjc-seccion { border: 2px solid var(--gn-negro); }
body.gn-contraste .wjc-control { border-width: 2px; border-color: var(--gn-negro); }

/* ==========================================================================
   15. Adaptable
   ========================================================================== */

/* El menú colapsa a hamburguesa; logo y buscador permanecen visibles (§4.2). */
@media (max-width: 1080px) {
    .wjc .gn-nav__boton { display: inline-flex; }

    .wjc .gn-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 30;
        background: var(--gn-blanco);
        border-top: 1px solid var(--gn-gris-200);
        border-bottom: 4px solid var(--gn-verde);
        box-shadow: var(--gn-sombra-fuerte);
        padding: .5rem 1.25rem 1rem;
    }
    .wjc .gn-nav[hidden] { display: none; }

    .wjc .gn-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .wjc .gn-nav li + li { border-top: 1px solid var(--gn-gris-200); }
    .wjc .gn-nav a { padding: .8rem .25rem; font-size: var(--gn-body); border-bottom: 0; }

    .wjc .gn-header { position: relative; }
    .wjc .gn-header__interior { padding-block: .9rem; }
}

@media (max-width: 960px) {
    .wjc-columnas { grid-template-columns: 1fr; }
    .wjc .gn-footer__cols { grid-template-columns: 1fr 1fr; }
    .wjc .gn-footer__col:nth-child(3) { border-left: 0; }
    .wjc-hero { grid-template-columns: 1fr; }
    .wjc-hero__imagen { display: none; }
    .wjc-campo--tercio { grid-column: span 3; }
    .wjc-campo--sexto { grid-column: span 3; }
}

@media (max-width: 640px) {
    .wjc { font-size: 15.5px; }

    .wjc .gn-header__interior { gap: .75rem; }
    .wjc .gn-header__fila { flex-wrap: wrap; gap: .75rem; }
    .wjc .gn-marca { flex: 1 1 100%; }
    .wjc .gn-marca__dependencia {
        font-size: 12px;
        padding-left: .75rem;
        line-height: 1.2;
    }
    .wjc .gn-marca__logo { height: 40px; }
    /* El buscador y el botón de menú comparten fila: ambos deben poder
       encogerse o la cabecera desborda en pantallas estrechas. */
    .wjc .gn-header__acciones { flex: 1 1 100%; min-width: 0; }
    .wjc .gn-buscador { max-width: none; flex: 1 1 auto; min-width: 0; }
    .wjc .gn-topbar__lema { display: none; }

    .wjc .gn-footer__cols { grid-template-columns: 1fr; }
    .wjc .gn-footer__col {
        padding-inline: 0;
        padding-block: 1.25rem;
        border-left: 0 !important;
    }
    .wjc .gn-footer__col + .gn-footer__col { border-top: 1px solid rgba(255, 255, 255, .18); }
    .wjc .gn-footer__hora { flex-direction: column; align-items: flex-start; }

    .wjc .gn-accesibilidad__panel { width: min(268px, calc(100vw - 2rem)); }
    .wjc-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wjc-campo, .wjc-campo--completo, .wjc-campo--medio,
    .wjc-campo--tercio, .wjc-campo--sexto { grid-column: span 2; }
    .wjc-tarjeta, .wjc-seccion { padding: 1.25rem; }
    .wjc-hero { padding: 1.5rem; }
    .wjc-encabezado__interior { flex-direction: column; align-items: flex-start; }
    .wjc-encabezado__tramite { text-align: left; border-left: 0; border-top: 3px solid var(--wj-amarillo); padding: .6rem 0 0; }
    .wjc-acciones--pegajosas { flex-direction: column; align-items: stretch; }
    .wjc-acciones--pegajosas .wjc-boton { width: 100%; }
    .wjc-exito { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   16. Impresión
   ========================================================================== */

@media print {
    .wjc .gn-topbar, .wjc .gn-nav, .wjc .gn-buscador, .wjc .gn-footer,
    .wjc .gn-arriba, .wjc .gn-accesibilidad,
    .wjc-pasos, .wjc-sin-impresion, .wjc-saltar { display: none !important; }
    .wjc .gn-header { border-bottom: 2px solid #000; }
    .wjc { background: #FFF; font-size: 11pt; }
    .wjc-principal { padding: 0; }
    .wjc-tarjeta, .wjc-seccion { box-shadow: none; border: 1px solid #CCC; page-break-inside: avoid; }
    .wjc-radicado { background: #FFF !important; color: #000 !important; border: 2px solid #10A13B; }
    .wjc-radicado__valor { color: #003366 !important; }
    .wjc a { text-decoration: none; color: #000; }
}

/* ==========================================================================
   17. Preferencias del usuario
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: more) {
    .wjc-control { border-width: 2px; border-color: var(--wj-negro); }
    .wjc-ayuda, .wjc-tarjeta__intro { color: var(--wj-negro); }
}

/* ==========================================================================
   18. Verificación de identidad
   ========================================================================== */

.wjc-reenvio {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--wj-gris-200);
}
.wjc-reenvio .wjc-ayuda { margin-bottom: .6rem; }

/* ==========================================================================
   19. Logotipo en contextos destacados
   ========================================================================== */

.wjc-hero__logo { height: 96px; width: auto; display: block; }

.wjc-acceso__logo {
    height: 56px;
    width: auto;
    display: block;
    margin: 0 auto;
    background: var(--gn-blanco);
    border-radius: var(--gn-radio);
    padding: 8px 12px;
}

.wjc-admin__logo {
    height: 34px;
    width: auto;
    display: block;
    background: var(--gn-blanco);
    border-radius: 4px;
    padding: 3px 5px;
}