:root {
    --fondo: #f5f7fb;
    --superficie: #ffffff;
    --texto: #172033;
    --texto-suave: #667085;
    --azul: #1e5eff;
    --azul-oscuro: #0f2f73;
    --borde: #e4e7ec;
    --verde: #0f9d6e;
    --sombra: 0 10px 30px rgba(23, 32, 51, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--fondo);
    color: var(--texto);
}

a {
    color: inherit;
    text-decoration: none;
}


/* CABECERA */

.cabecera {
    background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
    color: white;
}

.barra-superior {
    max-width: 1180px;
    margin: auto;
    padding: 20px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;

    font-weight: 800;
}

.logo {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    background: white;
    color: var(--azul);

    border-radius: 12px;

    font-size: 20px;
    font-weight: 900;
}

nav {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;

    font-size: 14px;
}

nav a {
    opacity: 0.9;
}

nav a:hover {
    opacity: 1;
}


/* PRESENTACION */

.presentacion {
    max-width: 1180px;
    margin: auto;

    padding: 44px 28px 58px;

    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 32px;

    align-items: center;
}

.presentacion h1 {
    margin: 0 0 14px;

    font-size: 42px;
    line-height: 1.08;
}

.presentacion > div > p {
    margin: 0 0 24px;

    max-width: 700px;

    font-size: 18px;
    line-height: 1.55;

    color: #e9efff;
}


/* BUSCADOR */

.buscador {
    max-width: 660px;

    padding: 8px;

    display: flex;

    background: white;

    border-radius: 14px;

    box-shadow: var(--sombra);
}

.buscador input {
    flex: 1;

    padding: 14px 16px;

    border: 0;
    outline: 0;

    border-radius: 10px;

    font-size: 16px;
}

.buscador button {
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--texto);
    color: white;

    font-weight: 700;

    cursor: pointer;
}


/* TARJETA DE CABECERA */

.destacado {
    padding: 24px;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
}

.destacado span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.1px;

    opacity: 0.8;
}

.destacado h3 {
    margin: 8px 0 10px;

    font-size: 24px;
}

.destacado p {
    margin: 0;

    line-height: 1.5;

    color: #e9efff;
}


/* CONTENIDO */

main {
    max-width: 1180px;

    margin: -24px auto 60px;

    padding: 0 28px;
}

.seccion {
    margin-top: 34px;
}

.titulo-seccion {
    margin-bottom: 16px;
}

.titulo-seccion h2 {
    margin: 0;

    font-size: 26px;
}

.titulo-seccion p {
    margin: 5px 0 0;

    color: var(--texto-suave);
}


/* ULTIMA VERSION */

.novedades {
    padding: 26px;

    background: var(--superficie);

    border-radius: 18px;

    box-shadow: var(--sombra);
}

#ultima-version > h3 {
    margin: 20px 0 5px;

    color: var(--azul);

    font-size: 23px;
}

#ultima-version > p {
    margin-top: 0;

    color: var(--texto-suave);
}

#ultima-version article {
    margin-top: 18px;
    padding: 18px;

    border: 1px solid var(--borde);
    border-radius: 14px;
}

article h4 {
    margin: 0 0 12px;

    font-size: 17px;
}

article p {
    line-height: 1.55;
}


/* SECCIONES FUTURAS */

.proximamente {
    padding: 24px;

    background: var(--superficie);

    border: 1px solid var(--borde);
    border-radius: 16px;

    color: var(--texto-suave);
}


/* HISTORIAL */

.historial {
    padding: 26px;

    background: var(--superficie);

    border-radius: 18px;

    box-shadow: var(--sombra);
}

#lista-versiones > details {
    margin-top: 12px;

    border: 1px solid var(--borde);
    border-radius: 12px;

    overflow: hidden;
}

#lista-versiones > details > summary {
    padding: 16px 18px;

    background: #f8f9fc;

    cursor: pointer;

    font-size: 18px;
}

#lista-versiones > details > details {
    margin: 10px 16px;

    border: 1px solid var(--borde);
    border-radius: 10px;
}

#lista-versiones > details > details > summary {
    padding: 13px 16px;

    cursor: pointer;

    font-weight: 600;

    color: var(--azul);
}

#lista-versiones details article {
    margin: 10px 16px 18px;
    padding: 16px;

    background: #fafbfc;

    border-radius: 10px;
}


/* FOOTER */

footer {
    max-width: 1180px;

    margin: 0 auto 30px;

    padding: 0 28px;

    color: var(--texto-suave);

    font-size: 13px;
}


/* CELULAR / TABLET */

@media (max-width: 900px) {

    .presentacion {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 650px) {

    .barra-superior {
        align-items: flex-start;
        flex-direction: column;
    }

    .presentacion h1 {
        font-size: 34px;
    }

    main {
        padding: 0 16px;
    }

    .presentacion,
    .barra-superior,
    footer {
        padding-left: 16px;
        padding-right: 16px;
    }

}

/* GUIAS */

.grilla-guias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.tarjeta-guia {
    padding: 20px;

    background: var(--superficie);

    border: 1px solid var(--borde);
    border-radius: 16px;

    box-shadow: 0 5px 18px rgba(23, 32, 51, 0.04);

    transition: 0.18s;
}

.tarjeta-guia:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
}

.categoria-guia {
    color: var(--azul);

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.tarjeta-guia h3 {
    margin: 10px 0 8px;

    font-size: 18px;
}

.tarjeta-guia p {
    color: var(--texto-suave);

    line-height: 1.5;
}

.datos-guia {
    display: flex;
    gap: 8px;

    margin-top: 14px;
}

.datos-guia span {
    padding: 5px 8px;

    background: #f2f4f7;

    border-radius: 999px;

    color: #475467;

    font-size: 12px;
}

@media (max-width: 900px) {

    .grilla-guias {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 650px) {

    .grilla-guias {
        grid-template-columns: 1fr;
    }

}

/* MODAL DE GUIAS */

.tarjeta-guia {
    cursor: pointer;
}

.modal {
    display: none;

    position: fixed;
    inset: 0;
    z-index: 1000;

    padding: 30px;

    background: rgba(15, 23, 42, 0.65);

    overflow-y: auto;
}

.modal.visible {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal-contenido {
    position: relative;

    width: 100%;
    max-width: 800px;

    margin: 40px auto;

    padding: 36px;

    background: white;

    border-radius: 18px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.cerrar-modal {
    position: absolute;

    top: 14px;
    right: 18px;

    border: 0;
    background: transparent;

    color: var(--texto-suave);

    font-size: 30px;
    line-height: 1;

    cursor: pointer;
}

.modal-contenido h2 {
    margin: 10px 40px 10px 0;

    font-size: 28px;
}

.resumen-guia {
    margin: 24px 0;

    color: var(--texto-suave);

    font-size: 17px;
    line-height: 1.6;
}

.texto-guia {
    padding-top: 20px;

    border-top: 1px solid var(--borde);

    line-height: 1.7;
}

.etiquetas-guia {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 28px;
}

.etiquetas-guia span {
    padding: 6px 10px;

    background: #e8efff;
    color: var(--azul);

    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;
}

/* RESULTADOS DE BUSQUEDA */

.resultado-busqueda {
    margin-top: 16px;
    padding: 18px;

    border: 1px solid var(--borde);
    border-radius: 14px;

    background: white;
}

.tipo-resultado {
    margin-bottom: 8px;

    color: var(--azul);

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.boton-ver-guia {
    margin-top: 8px;
    padding: 9px 14px;

    border: 0;
    border-radius: 8px;

    background: var(--azul);
    color: white;

    font-weight: 600;

    cursor: pointer;
}

.boton-ver-guia:hover {
    opacity: 0.9;
}

/* CONSULTAS FRECUENTES */

.grilla-consultas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tarjeta-consulta {
    padding: 20px;

    background: var(--superficie);

    border: 1px solid var(--borde);
    border-radius: 16px;

    box-shadow: 0 5px 18px rgba(23, 32, 51, 0.04);
}

.tarjeta-consulta h3 {
    margin: 10px 0 8px;

    font-size: 18px;
}

.tarjeta-consulta p {
    margin-bottom: 0;

    color: var(--texto-suave);

    line-height: 1.55;
}

@media (max-width: 650px) {

    .grilla-consultas {
        grid-template-columns: 1fr;
    }

}

.logo-centro {
    width: 310px;
    max-width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 650px) {

    .logo-centro {
        width: 250px;
    }

}

.tarjeta-consulta {
    cursor: pointer;

    transition: 0.18s;
}

.tarjeta-consulta:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
}

.ver-mas {
    margin-top: 16px;

    color: var(--azul);

    font-size: 13px;
    font-weight: 700;
}

/* CONTENIDO DE GUIAS */

.seccion-guia {
    margin-top: 30px;
    padding-top: 26px;

    border-top: 1px solid var(--borde);
}

.seccion-guia h3 {
    margin: 0 0 14px;

    font-size: 21px;
}

.seccion-guia .texto-guia {
    padding-top: 0;
    border-top: 0;

    color: #344054;

    line-height: 1.7;
}

.imagen-guia {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 22px auto 0;

    border: 1px solid var(--borde);
    border-radius: 10px;

    box-shadow: 0 4px 14px rgba(23, 32, 51, 0.08);
}


/* ====================================================
   FILTROS DE SISTEMAS
   ==================================================== */

.filtros-sistemas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0 0 26px;
}

.filtro-sistema {
    padding: 8px 18px;

    border: 1px solid #d8dee8;
    border-radius: 20px;

    background: #ffffff;
    color: #344054;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}

.filtro-sistema:hover {
    border-color: #1f6f8b;
    color: #1f6f8b;
}

.filtro-sistema.activo {
    background: #1f6f8b;
    border-color: #1f6f8b;
    color: #ffffff;
}


/* ====================================================
   BLOQUE DE VERSION
   ==================================================== */

.bloque-version {
    margin-bottom: 28px;
    padding: 24px;

    background: #ffffff;

    border: 1px solid #e3e7ee;
    border-radius: 14px;

    box-shadow: 0 4px 16px rgba(23, 32, 51, 0.06);
}


/* ====================================================
   CABECERA DE VERSION
   ==================================================== */

.cabecera-version {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 5px;
}

.sistema-version {
    display: inline-block;

    padding: 5px 11px;

    border-radius: 6px;

    background: #eef6f7;
    color: #176b73;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.numero-version {
    color: #1d2939;

    font-size: 15px;
    font-weight: 600;
}

.fecha-version {
    margin: 0 0 18px;

    color: #667085;

    font-size: 13px;
}


/* ====================================================
   NOVEDADES DENTRO DE CADA VERSION
   ==================================================== */

.bloque-version article {
    padding: 18px 0;

    border-top: 1px solid #eaecf0;
}

.bloque-version article:first-of-type {
    margin-top: 12px;
}

.bloque-version article h4 {
    margin: 0 0 10px;

    color: #1d2939;

    font-size: 17px;
}

.bloque-version article p {
    margin: 7px 0;

    color: #475467;

    line-height: 1.6;
}


/* ====================================================
   RESPONSIVE
   ==================================================== */

@media (max-width: 650px) {

    .cabecera-version {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .bloque-version {
        padding: 18px;
    }

    .filtro-sistema {
        padding: 7px 14px;
    }
}


/* ====================================================
   SABIAS QUE
   ==================================================== */

.sabias-que-tarjeta {
    position: relative;

    padding: 30px 34px;

    background: linear-gradient(
        135deg,
        #f5faf9 0%,
        #ffffff 100%
    );

    border: 1px solid #dcebe7;
    border-radius: 16px;

    box-shadow: 0 5px 18px rgba(23, 32, 51, 0.06);
}


/* CABECERA */

.sabias-que-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.sabias-que-etiqueta {
    color: #18856f;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.6px;
}


.sabias-que-sistemas {
    padding: 5px 11px;

    background: #eef6f7;

    border-radius: 6px;

    color: #176b73;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
}


/* TITULO */

.sabias-que-tarjeta h3 {
    margin: 0 0 12px;

    color: #1d2939;

    font-size: 23px;
}


/* TEXTO */

.sabias-que-texto {
    max-width: 750px;

    margin: 0 0 22px;

    color: #475467;

    font-size: 16px;
    line-height: 1.7;
}


/* BOTON */

.boton-sabias-que {
    padding: 9px 18px;

    background: #ffffff;

    border: 1px solid #18856f;
    border-radius: 8px;

    color: #18856f;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: all 0.2s ease;
}


.boton-sabias-que:hover {
    background: #18856f;
    color: #ffffff;
}


/* MOVIL */

@media (max-width: 650px) {

    .sabias-que-tarjeta {
        padding: 22px;
    }

    .sabias-que-cabecera {
        align-items: flex-start;
        flex-direction: column;
    }

    .sabias-que-tarjeta h3 {
        font-size: 20px;
    }
}

/* ====================================================
   BOTON VOLVER ARRIBA
   ==================================================== */

.boton-subir {
    position: fixed;
    right: 28px;
    bottom: 28px;

    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;

    background: #1f6f8b;
    color: #ffffff;

    font-size: 24px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.2s ease, transform 0.2s ease;

    z-index: 1000;
}

.boton-subir.visible {
    opacity: 1;
    visibility: visible;
}

.boton-subir:hover {
    transform: translateY(-3px);
}

@media (max-width: 650px) {
    .boton-subir {
        right: 18px;
        bottom: 18px;
        width: 42px;
        height: 42px;
    }
}

/* ====================================================
   HISTORIAL - SABIAS QUE
   ==================================================== */

.lista-sabias-que {
    margin-top: 18px;
    padding-top: 20px;

    border-top: 1px solid #e3e7ee;
}


/* CABECERA */

.cabecera-lista-sabias {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
}

.cabecera-lista-sabias h3 {
    margin: 0;

    color: #344054;

    font-size: 16px;
    font-weight: 700;
}


/* BOTON OCULTAR */

.boton-ocultar-sabias {
    padding: 6px 12px;

    border: none;
    background: transparent;

    color: #667085;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.boton-ocultar-sabias:hover {
    color: #18856f;
}


/* ACCIONES DEL DESTACADO */

.sabias-que-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


/* VER TODOS */

.boton-ver-todos-sabias {
    border: none;
    background: transparent;

    color: #18856f;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.boton-ver-todos-sabias:hover {
    text-decoration: underline;
}


/* TARJETAS ANTERIORES */

.sabias-que-anterior {
    position: relative;

    margin-bottom: 10px;
    padding: 17px 20px;

    background: #ffffff;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.sabias-que-anterior:hover {
    border-color: #b8d9d1;

    box-shadow: 0 4px 12px rgba(23, 32, 51, 0.06);

    transform: translateY(-2px);
}


/* SISTEMAS */

.sabias-anterior-sistemas {
    margin-bottom: 7px;

    color: #18856f;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* TITULO */

.sabias-que-anterior h4 {
    margin: 0 0 6px;

    color: #1d2939;

    font-size: 16px;
}


/* DESCRIPCION */

.sabias-que-anterior p {
    margin: 0 0 9px;

    color: #667085;

    font-size: 14px;
    line-height: 1.5;
}


/* FECHA */

.sabias-anterior-fecha {
    color: #98a2b3;

    font-size: 12px;
}


/* MOVIL */

@media (max-width: 650px) {

    .sabias-que-acciones {
        align-items: flex-start;
        flex-direction: column;
    }

    .sabias-que-anterior {
        padding: 15px 16px;
    }
}

/* ====================================================
   FILTRO GENERAL DEL CENTRO DE CONOCIMIENTO
   ==================================================== */

.filtro-general {
    padding-top: 22px;
    padding-bottom: 8px;
}

.filtro-general-contenido {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 14px 20px;

    background: #f8fafc;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
}

.filtro-general-titulo {
    color: #475467;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
}


/* Los filtros dentro del bloque general */

.filtro-general .filtros-sistemas {
    margin: 0;
}


/* MOVIL */

@media (max-width: 650px) {

    .filtro-general-contenido {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

}