/* Componentes de las páginas internas: cabecera con miga, marcadores wireframe, esqueletos, filtros, artículo,
   fichas, rubros, contacto, formulario y mapa del sitio. Tipografía solo por token. 2026-10-27. */

/* ---------- Cabecera de página interna ---------- */
.pagina-cabeza {
    position: relative;
    isolation: isolate;
    padding-block: var(--sp-7) var(--sp-8);
    background: radial-gradient(90% 140% at 85% 100%, var(--azul) 0%, var(--azul) 45%, var(--azul-700) 100%);
    color: var(--fondo);
    overflow: hidden;
}
.pagina-cabeza::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(color-mix(in srgb, var(--fondo) 16%, transparent) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
    mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
}
.pagina-cabeza__titulo {
    max-width: 20em;
    font-family: var(--font-principal);
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    line-height: 1.1;
    text-transform: uppercase;
    text-wrap: balance;
}
.pagina-cabeza__intro { max-width: 46em; margin-top: var(--sp-4); color: var(--pie-texto); font-size: var(--fs-sub); line-height: 1.6; }
.pagina-cabeza :focus-visible { outline-color: var(--fondo); box-shadow: none; }

.miga { margin-bottom: var(--sp-5); }
.miga ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.miga li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--pie-texto);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}
.miga li + li::before { content: "›"; color: var(--pie-texto); }
.miga a { color: var(--fondo); }
.miga [aria-current="page"] { color: var(--pie-texto); }

/* ---------- Encabezado de sección con liga «Ver todo» ---------- */
.seccion__cabeza--liga {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4) var(--sp-6);
    max-width: none;
}
.seccion__cabeza--liga > div { max-width: 880px; }
.seccion__cabeza--liga .liga-mas { margin-top: 0; }

/* ---------- Marcadores tipo wireframe ---------- */
.marcador {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--sp-2);
    min-height: 280px;
    padding: var(--sp-6);
    border: 2px dashed var(--gris);
    border-radius: var(--r-modulo);
    background:
        repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--azul) 4%, transparent) 12px 24px),
        var(--fondo-alt);
    text-align: center;
}
.marcador__icono { width: 40px; height: 40px; color: var(--azul); }
.marcador__titulo {
    color: var(--tinta);
    font-family: var(--font-principal);
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}
.marcador__texto { max-width: 34em; color: var(--gris-texto); font-size: var(--fs-label); }
.marcador .chip { align-self: center; }
.marcador--ancho { min-height: 360px; margin-top: var(--sp-5); }
.marcador--grafica { align-content: start; justify-items: start; text-align: left; min-height: 360px; }
.marcador--grafica::after {
    content: "";
    position: absolute;
    left: var(--sp-6);
    right: var(--sp-6);
    bottom: var(--sp-6);
    height: 140px;
    border-left: 2px solid var(--linea);
    border-bottom: 2px solid var(--linea);
}
.marcador--barras::after {
    background:
        linear-gradient(var(--linea), var(--linea)) 6% 100% / 9% 45% no-repeat,
        linear-gradient(var(--linea), var(--linea)) 20% 100% / 9% 70% no-repeat,
        linear-gradient(var(--linea), var(--linea)) 34% 100% / 9% 55% no-repeat,
        linear-gradient(var(--linea), var(--linea)) 48% 100% / 9% 85% no-repeat,
        linear-gradient(var(--linea), var(--linea)) 62% 100% / 9% 60% no-repeat,
        linear-gradient(var(--linea), var(--linea)) 76% 100% / 9% 40% no-repeat,
        linear-gradient(var(--linea), var(--linea)) 90% 100% / 9% 30% no-repeat;
}
.marcador--lineas::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpolyline points='0,32 15,26 30,28 45,18 60,21 75,12 100,8' fill='none' stroke='%23D3DBE6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.marcador--tabla::after {
    background: repeating-linear-gradient(to bottom, var(--linea) 0 2px, transparent 2px 28px);
    border-left: 0;
}
.rejilla--graficas { gap: var(--sp-5); }

/* ---------- Esqueletos y textos pendientes ---------- */
.esqueleto { display: grid; gap: var(--sp-2); width: 100%; }
.esqueleto__linea { display: block; height: 10px; border-radius: 5px; background: var(--linea); }
.esqueleto__linea:nth-child(3n + 1) { width: 100%; }
.esqueleto__linea:nth-child(3n + 2) { width: 88%; }
.esqueleto__linea:nth-child(3n) { width: 64%; }
.esqueleto--titulo .esqueleto__linea { height: 16px; }
.pendiente {
    display: grid;
    gap: var(--sp-3);
    width: 100%;
    margin-top: var(--sp-3);
    padding: var(--sp-4);
    border: 1px dashed var(--gris);
    border-radius: var(--r-tarjeta);
    background: var(--fondo);
}
.pendiente__que { color: var(--gris-texto); font-size: var(--fs-label); }
.chip--pendiente {
    background: var(--fondo);
    border-style: dashed;
    border-color: var(--gris);
    color: var(--gris-texto);
    vertical-align: middle;
}

/* ---------- Filtros ---------- */
.filtros-banda { padding-block: var(--sp-5); background: var(--fondo); border-bottom: 1px solid var(--linea); }
.filtros {
    display: grid;
    grid-template-columns: auto repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: var(--sp-3) var(--sp-4);
}
.filtros__titulo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 48px;
    color: var(--azul);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}
.filtro { display: grid; gap: var(--sp-1); }
.filtro > span, .formulario__campo > span {
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}
.campo:disabled { background: var(--fondo-alt); color: var(--gris-texto); cursor: not-allowed; }
.filtros__nota { grid-column: 1 / -1; }
@media (max-width: 1023px) {
    .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filtros__titulo { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 479px) { .filtros { grid-template-columns: 1fr; } }

/* ---------- Artículo con lateral, dos columnas, fichas ---------- */
.articulo, .dos-columnas { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 1024px) {
    .articulo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .dos-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.articulo__cuerpo .seccion__titulo { margin-bottom: var(--sp-5); }
.articulo__parrafo { max-width: 70ch; margin-top: var(--sp-4); font-size: var(--fs-body); line-height: 1.75; }
.articulo__lateral { display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) { .articulo__lateral { position: sticky; top: calc(var(--alto-encabezado) + var(--sp-5)); } }
.ficha {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--fondo-alt);
    border: 1px solid var(--linea);
    border-radius: var(--r-modulo);
}
.ficha__titulo {
    color: var(--azul);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}
.ficha__texto { font-size: var(--fs-body); }
.ficha__lista { display: grid; gap: var(--sp-2); }
.ficha__lista li, .lista-marcas li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.ficha__lista .ico, .lista-marcas .ico { margin-top: 4px; color: var(--azul); }
.ficha .informe__descargas { margin-top: 0; padding-top: 0; border-top: 0; }
.ficha .anios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lista-marcas { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.subtitulo--separado { margin-top: var(--sp-6); }

/* ---------- Rubros del informe ---------- */
.rubros { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; grid-auto-rows: 1fr; }
@media (min-width: 640px) { .rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rubros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rubro {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--r-tarjeta);
}
.rubro__icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul-050); color: var(--azul); }
.rubro__texto { font-size: var(--fs-body); }
.rubro .chip { grid-column: 2; }

/* ---------- Investigación: logos de ejemplo ---------- */
.logos-ejemplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.logo-ejemplo {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--sp-2);
    min-height: 112px;
    border: 2px dashed var(--gris);
    border-radius: var(--r-tarjeta);
    background: var(--fondo);
    color: var(--gris-texto);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}
.logo-ejemplo .ico { color: var(--gris); }

/* ---------- Quiénes somos: instituciones ---------- */
.instituciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.institucion {
    display: grid;
    place-items: center;
    padding: var(--sp-5);
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--r-tarjeta);
    box-shadow: var(--sombra);
}
.institucion img { width: auto; height: 64px; }

/* ---------- Centro de Información: tipos y documentos de ejemplo ---------- */
.filtro-tipos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.filtro-tipo {
    display: inline-flex;
    align-items: center;
    min-height: var(--tactil);
    padding: 0 var(--sp-4);
    border: 1px solid var(--linea);
    border-radius: var(--r-chip);
    color: var(--gris-texto);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}
.filtro-tipo--activo { background: var(--azul); border-color: var(--azul); color: var(--fondo); }
.tarjeta--documento { gap: var(--sp-4); }
.tarjeta--documento .chip { align-self: flex-start; }

/* ---------- Contacto ---------- */
.seccion--contacto { background: var(--fondo); border-top: 1px solid var(--linea); padding-block: var(--sp-8); }
.contacto-banda { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 1024px) { .contacto-banda { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) auto; gap: var(--sp-6); } }
.contacto-banda__datos, .datos-contacto { display: grid; gap: var(--sp-4); }
.datos-contacto { margin-block: var(--sp-5) var(--sp-6); }
.dato-contacto { display: flex; align-items: flex-start; gap: var(--sp-3); }
.dato-contacto > span:last-child { display: grid; gap: var(--sp-1); }
.dato-contacto__icono { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--azul-050); color: var(--azul); }
.dato-contacto__etiqueta {
    color: var(--gris-texto);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}
.contacto-banda__botones { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.boton--contorno { border-color: var(--azul); color: var(--azul); background: var(--fondo); }
.boton--contorno:hover { background: var(--azul-050); }

.formulario {
    display: grid;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background: var(--fondo-alt);
    border: 1px solid var(--linea);
    border-radius: var(--r-modulo);
}
.formulario__campo { display: grid; gap: var(--sp-1); }
.campo--area { min-height: 140px; padding-block: var(--sp-3); resize: vertical; }
.formulario .boton { justify-self: start; }

/* ---------- Mapa del sitio ---------- */
.mapa-sitio { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .mapa-sitio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mapa-sitio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mapa-sitio > li { padding: var(--sp-5); background: var(--fondo-alt); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); }
.mapa-sitio > li > a {
    font-family: var(--font-principal);
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    text-decoration: none;
}
.mapa-sitio > li > a:hover { text-decoration: underline; }
.mapa-sitio ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding-left: var(--sp-4); border-left: 2px solid var(--linea); }