/* ============================================================================
   tmp.innovacionsantiago.cl · sitio.css
   CAPA PROPIA DEL SITIO. Todo lo demás viene del kit v7.
   URL pública canónica: /estilo/tmp.css (enlace simbólico a este archivo).
   ----------------------------------------------------------------------------
   Contrato (CONTRACTS.md del repo core-style, sección "Qué se permite"):
   este archivo solo puede contener CLASES PROPIAS con prefijo propio. Acá el
   prefijo es "tmp-" y no hay ninguna excepción.

   PROHIBIDO en este archivo, sin excepción:
     1. Declarar o sobrescribir cualquier selector del chrome (familia gr-).
        Si el chrome no alcanza, se anota como brecha K y se pide upstream.
        Esto incluye no repetir el bloque @media (max-width:860px) que
        auditoria/index.html le pone a los enlaces de la barra: esa página es
        modelo de CONSUMO del kit, no especificación.
     2. Redefinir tokens de marca (acento, papel, tinta, línea, tipografías).
        Esos viven solo en v7/brands/{marca}/tokens.css.
     3. Valores hexadecimales, familias tipográficas escritas a mano, CDN.
        Todo color y toda tipografía sale de var(--*) del kit.

   Verificado mecánicamente: 0 selectores compartidos con los tres archivos del
   kit, 0 tokens de marca redefinidos, 0 hexadecimales, 30 tokens del kit
   consumidos sin un solo nombre inexistente.

   Las únicas propiedades personalizadas que se declaran acá llevan prefijo
   --tmp- para que ningún grep de tokens de marca las confunda.

   Cada bloque cita la brecha K que lo justifica. Cada brecha está verificada
   contra los 951 renglones de v7/base/ (tokens 194, chrome 473, components
   284) y tiene ficha en /componentes/brechas/ como solicitud aditiva a
   core-style. El día que el kit publique el componente equivalente, el bloque
   de acá se borra y las páginas cambian el prefijo.
   ============================================================================ */

/* Se declaran sobre las dos carcasas propias y NO sobre :root, a propósito:
   así este archivo no comparte un solo selector con el kit y la verificación
   de no interferencia queda demostrable, no argumentada. Todas las reglas que
   las consumen cuelgan de .tmp-doc o de .tmp-main, así que heredan sin
   problema. */
.tmp-doc,
.tmp-main {
  /* Alto de la barra pegajosa: 14px de relleno arriba y abajo más el alto del
     lockup, redondeado. No es un token de marca, es una medida de layout que
     este sitio necesita para dos cosas: el desplazamiento de anclas y el tope
     del índice lateral. Se declara una vez para no repetir el número suelto. */
  --tmp-navh: 64px;

  /* Ancho de la columna del índice lateral de la plantilla T2. */
  --tmp-side: 220px;
}

/* ============================================================================
   K-03 · Carcasa de página con índice lateral
   El kit tiene .container (1240px) y .prose (68ch) y nada entre medio: no
   existe una carcasa de documento con columna de índice. Esa ausencia es la
   causa directa de que cinco páginas del sitio se hayan inventado .wrap,
   .shell, .main y .side por su cuenta. No se inventa un tercer ancho: la
   carcasa vive dentro de .container y la prosa sigue midiendo 68ch.
   ============================================================================ */

.tmp-doc {
  display: grid;
  grid-template-columns: var(--tmp-side) minmax(0, 1fr);
  gap: var(--space-6);
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

/* minmax(0,1fr) arriba es lo que permite que una tabla ancha desborde dentro
   de .tmp-tablewrap en vez de estirar la reja y sacarle desplazamiento
   horizontal al documento entero. */
.tmp-doc__main { min-width: 0; }

.tmp-doc__side {
  position: sticky;
  top: calc(var(--tmp-navh) + var(--space-3));
  align-self: start;
  max-height: calc(100vh - var(--tmp-navh) - var(--space-5));
  overflow-y: auto;
}

.tmp-doc__disc > summary {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-2);
  cursor: pointer;
}

.tmp-doc__anchor {
  display: block;
  padding: 5px 0;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: var(--space-2);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tmp-doc__anchor:hover {
  color: var(--ink);
  border-left-color: var(--accent);
}

/* El <details> del índice va CON el atributo open en el marcado.
   Por qué no al revés: el contenido de un <details> cerrado no se puede
   revelar desde el CSS del autor. El navegador lo esconde en su propia ranura
   interna, así que un display:block sobre el <nav> hijo no hace absolutamente
   nada. Escribirlo cerrado y "abrirlo" en pantalla ancha dejaba el índice
   invisible en escritorio, que es justo donde es la navegación secundaria.
   Con open: en pantalla ancha se ve siempre y el título queda inerte (abajo se
   le saca el marcador y el puntero, queda como encabezado de la columna); bajo
   900px vuelve a ser un acordeón nativo y se puede plegar con el dedo.
   Queda pendiente que en teléfono arranque plegado: no hay forma de lograrlo
   sin JavaScript y no vale un guion. Anotado como brecha menor. */
@media (min-width: 901px) {
  .tmp-doc__disc > summary {
    pointer-events: none;
    list-style: none;
  }
  .tmp-doc__disc > summary::-webkit-details-marker { display: none; }
  .tmp-doc__disc > summary::marker { content: ""; }
}

@media (max-width: 900px) {
  .tmp-doc {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .tmp-doc__side {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* ============================================================================
   K-04 · Títulos y ritmo vertical
   En los tres archivos del kit no hay UNA sola regla de encabezado: lo único
   que existe es "h1 em, h2 em, h3 em { color de acento }" en tokens.css:167 y
   ".card h3" en components.css:97. Además --fs-hero y --fs-section se declaran
   en tokens.css:69-70 y no se usan en ninguna regla de ningún archivo. Sin
   este bloque no se puede titular nada. Acá esos dos tokens por fin se
   consumen: --fs-hero en la portada (T1), --fs-section en los documentos (T2).
   Todo va ACOTADO a las dos carcasas para no filtrarse a las páginas de
   demostración T3, que no cargan este archivo justamente por eso.
   ============================================================================ */

.tmp-main {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

.tmp-main h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  margin: var(--space-2) 0 var(--space-3);
}

.tmp-doc__main h1 {
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: var(--space-2) 0 var(--space-3);
}

:is(.tmp-main, .tmp-doc__main) h2 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: var(--space-7) 0 var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--line);
}

:is(.tmp-main, .tmp-doc__main) h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: var(--space-5) 0 var(--space-2);
}

:is(.tmp-main, .tmp-doc__main) p { margin: 0 0 var(--space-3); }

:is(.tmp-main, .tmp-doc__main) ul,
:is(.tmp-main, .tmp-doc__main) ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
  max-width: 68ch;
  font-size: var(--fs-prose);
  line-height: 1.6;
}
:is(.tmp-main, .tmp-doc__main) li { margin-bottom: 6px; }

/* El kit define el subrayado fino de los enlaces de prosa en tokens.css.
   Acá solo se agrega el color de acento al pasar por encima, que no existe. */
:is(.tmp-main, .tmp-doc__main) a:hover { color: var(--accent); }

/* Bajada: una línea que dice qué se decide en la página. Se usa junto a
   .prose, que ya pone 68ch y la altura de línea; esto solo agrega el tamaño
   y el color apagado. */
.tmp-lede {
  font-size: 16px;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}

/* Línea de fecha de revisión, en la voz mono de la casa. */
.tmp-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-soft);
  margin: 0 0 var(--space-5);
}

/* ============================================================================
   K-05 · Marco de espécimen
   No hay en el kit ningún contenedor de muestra: marco, etiqueta arriba,
   cuerpo sobre papel elevado y pie con el nombre de la clase. Es el segundo
   componente más reutilizado del sitio actual y la regla de evidencia de esta
   arquitectura depende de él: ninguna página afirma una regla sin mostrar al
   lado el espécimen que la cumple.
   ============================================================================ */

.tmp-spec {
  margin: var(--space-4) 0 var(--space-6);
  border: 1px solid var(--line);
  background: var(--paper);
}

.tmp-spec__head {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.tmp-spec__body {
  padding: var(--space-5) var(--space-3);
  background: var(--paper-raised);
}

/* Variante sin aire: para lo que ya trae su propio borde exterior o mide el
   ancho completo por naturaleza, como los marcos de barra y de pie. */
.tmp-spec__body--flush { padding: 0; }

.tmp-spec__foot {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--ink-muted);
}

/* El iframe sin estilo no trae ancho ni alto ni borde útiles. Se usa SOLO
   donde el position:sticky del chrome obliga (una segunda barra dentro de una
   página que ya tiene la suya se le encima a la real) y para mostrar claro y
   oscuro al mismo tiempo, que es imposible en un mismo documento porque los
   dos bloques oscuros del kit son de raíz.
   El alto por defecto deja la página utilizable con JavaScript apagado;
   sitio.js lo ajusta al contenido cuando puede. */
.tmp-frame {
  display: block;
  width: 100%;
  height: var(--tmp-frame-h, 132px);
  border: 0;
}
/* Apilados, no lado a lado: barra y pie miden el ancho completo por
   naturaleza y partirlos en dos columnas los deja ilegibles. */
.tmp-spec__body--flush .tmp-frame + .tmp-frame {
  border-top: 1px solid var(--line);
}

/* ============================================================================
   K-06 · Código
   Cero estilo para pre, code, kbd y samp en los tres archivos del kit
   (verificado: 0 coincidencias). Un sitio cuyo contenido es marcado de
   referencia no puede mostrar marcado sin esto.
   ============================================================================ */

.tmp-code {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  background: var(--surface-inverse);
  color: var(--on-inverse);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  tab-size: 2;
}
.tmp-code code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Código en línea. Acotado a las carcasas para no alcanzar a nada del chrome.
   Lo usa sobre todo la fecha y fuente que va detrás de cada insignia de
   estado, que es dato mono por convención del sitio.

   El :not(pre) > no es adorno: sin él esta regla le gana a .tmp-code code por
   venir después con la misma especificidad (:is() de clases cuenta como
   clase), y cada bloque de código de espécimen aparecería como una cajita
   clara con borde dentro del bloque oscuro. Así, sencillamente no alcanza al
   código que va dentro de un pre. */
:is(.tmp-main, .tmp-doc__main) :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  padding: 1px 5px;
}

/* ============================================================================
   K-07 · Nota de nivel párrafo
   La insignia del kit es un chip en línea. No hay bloque para una nota, una
   regla o una prohibición, en un kit cuyo contenido son justamente reglas con
   prohibiciones. El color nunca carga el significado solo: la nota siempre
   lleva su palabra escrita en el texto.
   ============================================================================ */

.tmp-note {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  /* Sin franja lateral: la convencion T01 dice que separa el borde completo de
     1px y nada mas. El estado se distingue por el color de TODO el borde, no
     por un canto pintado. */
  border: 1px solid var(--line);
  background: var(--paper-raised);
  font-size: var(--fs-prose);
  line-height: 1.6;
  max-width: 68ch;
}
.tmp-note > :last-child { margin-bottom: 0; }

.tmp-note--ok   { border-color: var(--ok); }
.tmp-note--warn { border-color: var(--warn); }
.tmp-note--err  { border-color: var(--err); }

/* ============================================================================
   K-08 · Envoltorio de tabla
   .table del kit no trae contenedor con desplazamiento horizontal. El único
   overflow de todo el kit está en el nombre de usuario del chip de sesión
   (chrome.css:234). Las tablas de este sitio son anchas por naturaleza: la
   cola de decisiones lleva código, pregunta, estado, aplicado y fuente.
   ============================================================================ */

.tmp-tablewrap {
  overflow-x: auto;
  margin: var(--space-3) 0 var(--space-5);
  border: 1px solid var(--line);
  background: var(--paper-raised);
}
.tmp-tablewrap .table { min-width: 640px; }
.tmp-tablewrap .table th,
.tmp-tablewrap .table td { padding-left: var(--space-3); }

/* ============================================================================
   K-09 · Reja de propósito general
   Las únicas rejas del kit son .cards (tres columnas fijas y alto mínimo de
   210px) y la reja del pie (cuatro fijas), las dos amarradas a su componente.
   Para alinear cuatro cifras o seis muestras hace falta una reja suelta.
   El número de columnas entra por --tmp-cols, que es propiedad propia y no
   tiene relación con ningún token de marca.
   ============================================================================ */

.tmp-grid {
  display: grid;
  grid-template-columns: repeat(var(--tmp-cols, 3), minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-6);
}
@media (max-width: 900px) {
  .tmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tmp-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   K-10 · Muestras de color y de tipografía
   No hay en el kit nada para mostrar un color o una tipografía en cuadrícula
   con su etiqueta.
   NOTA DE EXCEPCIÓN, la única del sitio: un catálogo de color tiene que poder
   dibujar colores que todavía NO son tokens (los diez colores de proyecto que
   propuso la taxonomía y que nadie aprobó). Esos entran por la propiedad
   propia --tmp-chip en el atributo de estilo de la muestra. Eso NO es
   redefinir un token de marca ni teñir la página: es el dato que la página
   está catalogando. La compuerta check-chrome.sh debe permitir --tmp-chip y
   nada más dentro de un atributo de estilo.
   ============================================================================ */

.tmp-swatches {
  display: grid;
  grid-template-columns: repeat(var(--tmp-cols, 4), minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-6);
}
@media (max-width: 700px) {
  .tmp-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tmp-swatch {
  border: 1px solid var(--line);
  background: var(--paper-raised);
}
.tmp-swatch__chip {
  display: block;
  height: 72px;
  background: var(--tmp-chip, var(--accent));
  border-bottom: 1px solid var(--line);
}
.tmp-swatch__label {
  display: block;
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  line-height: 1.5;
  color: var(--ink-muted);
  word-break: break-all;
}

/* ============================================================================
   K-11 · Hilo anterior y siguiente
   No existe en el kit. Acá no es comodidad: bajo 860px el kit esconde los
   enlaces de la barra y el botón de menú que emite está muerto (la clase
   is-open aparece una sola vez en todo v7, en chrome.css:281, y theme.js solo
   escucha el atributo de tema), así que el hilo ES la navegación principal en
   teléfono, junto con la marca de la barra y el pie.
   ============================================================================ */

.tmp-prevnext {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-strong);
}
.tmp-prevnext a {
  /* Recuadro gris oscuro, no un enlace subrayado: es el control de avance de
     la pagina y tiene que leerse como boton. La flecha la pone el CSS segun el
     sentido, asi que el marcado no la repite y no se puede desincronizar. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--on-inverse, #f0f0ea);
  background: var(--surface-inverse, #2b2b2b);
  text-decoration: none;
  border: 1px solid var(--surface-inverse, #2b2b2b);
  padding: 9px 14px;
}
/* La flecha va antes en el anterior y despues en el siguiente. Se elige por
   posicion porque el primero SIEMPRE es el anterior en este marcado. */
.tmp-prevnext a:first-child::before { content: "\2190"; font-size: 1.15em; line-height: 1; }
.tmp-prevnext a:last-child::after   { content: "\2192"; font-size: 1.15em; line-height: 1; }
.tmp-prevnext a:only-child::before  { content: none; }
.tmp-prevnext a:hover { background: var(--ink); border-color: var(--ink); }
/* Si solo hay siguiente (la portada) el enlace se va solo a la derecha. */
.tmp-prevnext a:only-child { margin-left: auto; }

/* ============================================================================
   K-12 · Desplazamiento de ancla bajo la barra pegajosa
   En todo v7/base/ no hay una sola declaración de scroll-margin ni de
   scroll-padding (verificado: 0 coincidencias en los tres archivos) y la barra
   es position:sticky con z-index 30. Sin esto, cada salto de ancla deja el
   título tapado por la barra. Como la convención del sitio es que toda mención
   de un código es un enlace a su ancla, el índice lateral y las citas cruzadas
   nacen defectuosos si falta este bloque.
   ============================================================================ */

:is(.tmp-main, .tmp-doc__main) :is(h2, h3)[id],
:is(.tmp-main, .tmp-doc__main) [id].tmp-spec {
  scroll-margin-top: calc(var(--tmp-navh) + var(--space-2));
}

/* ============================================================================
   K-13 · Foco visible
   La única regla de foco del kit es .input:focus (components.css:175). Sin
   esto, recorrer el sitio con teclado no muestra dónde está parado, y el
   índice lateral es justamente una lista larga de enlaces.
   ============================================================================ */

:is(.tmp-main, .tmp-doc__main) a:focus-visible,
.tmp-doc__anchor:focus-visible,
.tmp-doc__disc > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================================
   K-02 · NO SE ARREGLA ACÁ, a propósito.
   Al omitir el botón de menú (está muerto, ver K-11) la reja de la barra bajo
   860px queda con una cuarta columna vacía y las acciones no quedan pegadas al
   borde derecho. Arreglarlo desde acá sería sobrescribir el chrome, que es
   exactamente la violación que hubo que revertir. Queda anotado como brecha y
   se sigue. El arreglo real es upstream: darle a theme.js un segundo delegado
   para el menú, manteniendo su guarda de una sola ejecución.
   ============================================================================ */




/* ============================================================================
   K-100 · El pie: namebrand y lema con el mismo numero de lineas
   Regla de Martin (2026-08-09): o los dos van en una linea, o los dos van en
   varias, pero no el namebrand en una y el lema en dos. En el ancho de la
   columna de marca el lema se partia y el nombre no.
   Se baja el cuerpo del lema y se le prohibe cortar mientras el nombre tampoco
   corta. Bajo 560px cortan los dos, que es el otro lado de la misma regla.
   ============================================================================ */
.gr-footer__brand-tag { font-size: 12.5px; white-space: nowrap; }
@media (max-width: 560px) { .gr-footer__brand-tag { white-space: normal; } }

/* ============================================================================
   K-101 · Resumen de estado del mapa
   El mapa listaba 89 dominios uno debajo de otro y el estado del conjunto solo
   se podia obtener contando. La barra apilada lo dice de un vistazo, con el
   ancho proporcional a la cuenta: es el dato, no una decoracion.
   ============================================================================ */
.mapa-resumen { margin: 0 0 var(--space-6); }
.mapa-barra { display: flex; height: 34px; border: 1px solid var(--line); overflow: hidden; }
.mapa-barra span { display: block; }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; font-size: 13px; }
.mapa-leyenda > span { display: inline-flex; align-items: center; gap: 7px; }
.mapa-leyenda i { width: 11px; height: 11px; flex: none; font-style: normal; }
.mapa-leyenda b { font-variant-numeric: tabular-nums; }
.mapa-caidos { margin: var(--space-4) 0 0; padding: 12px 15px; border: 1px solid var(--err); font-size: 14px; line-height: 1.55; }
.mapa-caidos code { font-size: 12.5px; }
/* El contador de rutas llevaba el numero solo, sin unidad, pegado al estado. */
.mapa-rutas { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-muted); margin-left: 8px; white-space: nowrap; }