/* La barra superior de Atlas. La MISMA en el mapa y en los documentos. * * Hoja aparte de `styles.css` y de `ficha.css` porque es lo único que las dos * comparten. Antes no compartían nada: el mapa tenía una barra de cuatro zonas * y cada página servida por `ficha.js` tenía un `

` con un * "‹ Atlas" y un botón. Duplicar 150 líneas en dos hojas que nadie edita al * mismo tiempo es la forma segura de que en seis meses sean dos barras * distintas, así que vive acá y las dos la enlazan. * * NO trae los tokens (`--bg`, `--acento`, …): los declaran las dos hojas que la * hospedan, y las propiedades personalizadas se resuelven al calcular el valor, * no al parsear — el orden de los da igual. * * La gramática de la barra son CUATRO zonas que se leen de izquierda a derecha * como una frase que va de lo que no cambia a lo que cambia todo el tiempo: * * IDENTIDAD quién habla · fija, nunca se opera * ENCUADRE qué estás mirando · DOS MODOS, ver abajo * ACCIÓN el buscador · lo único que se escribe * ESTADO pulso y sesión · se consulta, no se opera * * El encuadre es la zona que cambia según la página, y no es un capricho: * * En el MAPA el encuadre se OPERA → país + ventana de tiempo, controles * que mutan lo que se ve. * En un DOCUMENTO el encuadre se DECLARA → las migas, que dicen dónde estás. * * De ahí sale que la ventana de tiempo no aparezca fuera del mapa. No es una * excepción: es que un control sin objeto no es un control. La ventana define * sobre qué período se resume cada activo del catastro, y una ficha no tiene * catastro que resumir — nunca leyó ese valor. * * Las zonas se separan por PROXIMIDAD y nada más: 9-12 px adentro de cada * grupo contra 26 entre grupos. Sin filetes ni separadores verticales — esta * interfaz no tiene una sola línea vertical en ninguna parte. */ /* La clase y no `body > header`. El selector de elemento existía para que las filas de familia del panel del catastro —que también son `

`— no heredaran el alto, el filete y el `z-index: 1000` de la barra. Con una clase propia el problema no se puede volver a dar, y además la barra deja de tener que ser hija directa de ``. `.cabecera` y NO `.barra`: `.barra` ya existe y es el marcador de puentes y túneles en el mapa (`styles.css`), un `` absoluto de 18×8 px. Con ese nombre las dos cosas se pisaban en las dos direcciones —el encabezado medía 8 px de alto y cada puente del mapa heredaba `position: sticky` y un filete inferior—, y como `styles.css` se carga después, el síntoma aparecía en un solo sentido y era invisible en la revisión. Es la misma trampa que ya documenta `.ms-barra` unas líneas más abajo. */ .cabecera { height: 54px; display: flex; align-items: center; gap: 26px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--panel); /* `sticky` hace dos cosas de una: en un documento la barra acompaña el scroll —que es lo que "persistente" quiere decir cuando la página se lee— y en las dos páginas sirve de ancla a todo lo que cuelga de ella: el menú Explorar, los resultados de búsqueda, la tarjeta del autor y la ventana de tiempo en móvil. En el mapa no hay scroll de página, así que ahí es `relative` con otro nombre. */ position: sticky; top: 0; /* Pasa POR ENCIMA del mapa. Sus hijos flotantes cuelgan hacia abajo y caen sobre él, y los controles del mapa llegan a z-index 700: sin esto quedaban tapados por botones que están 500 px más abajo. Queda debajo de la capa de acceso (2000), que es un diálogo modal y debe cubrirlo todo. */ z-index: 1000; } /* --- 1 · IDENTIDAD ------------------------------------------------------- La firma del autor va DENTRO del grupo de la marca, no como un ítem más de la barra: es "Atlas, de Rob", no un control. */ .barra-marca { flex: none; display: flex; align-items: center; gap: 9px; } /* El aspecto lo carga la CLASE, no el tag, y eso importa: en el mapa la marca es el `

` de la página —no hay otro título— pero en una ficha el `

` es el nombre del activo. Ahí la marca es un `` al mapa. Dos etiquetas, una sola apariencia: el tag lleva la semántica y la clase lleva la forma. / .marca { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: baseline; gap: 11px; flex: none; color: var(--ink); text-decoration: none; } / La `s` en acento. Con clase propia y no `.marca span`: el subtítulo también es un span hijo de la marca y con el selector de tag se pintaba verde. / .marca .acento { color: var(--acento); } / Solo la versión enlazada reacciona: en el mapa la marca es un título y un título que se ilumina al pasar por encima promete una navegación que no hay. / a.marca { transition: opacity .12s; } a.marca:hover { opacity: .74; } .subtitulo { font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: none; color: var(--ink-3); } / --- 2 · ENCUADRE DECLARADO: las migas ----------------------------------- La jerarquía del sitio, visible. Existía desde siempre como `BreadcrumbList` en el JSON-LD de cuatro páginas —declarada para Google, invisible para las personas— y ahora sale del mismo `migas()` que emite ese JSON-LD: las dos salidas no pueden divergir porque son la misma lista. La raíz de la cadena NO se repite acá: es la marca, que ya está a la izquierda y ya es el enlace al mapa. Un "Atlas › Atlas › Chile" es lo que pasa cuando las migas se pegan al lado de un logo sin pensarlo. `flex: 1 1 auto` con `min-width: 0`: la cadena se come el espacio que dejó la ventana de tiempo, y cuando no alcanza el que cede es el ÚLTIMO eslabón —el nombre largo del activo— y no los de arriba, que son los que sirven para volver. / .migas { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; font: 500 12.5px "Archivo", sans-serif; color: var(--ink-2); overflow: hidden; } .migas a { color: var(--ink-2); text-decoration: none; white-space: nowrap; border-radius: 4px; transition: color .12s; } .migas a:hover { color: var(--acento); } .migas .sep { color: var(--ink-3); font-size: 12px; flex: none; } / Dónde estás parado: el único eslabón que no es enlace, en tinta plena. / .migas .aqui { color: var(--ink); font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } / El rombo de la familia, el mismo del mapa y de la leyenda. Es lo que ata la miga a la capa que le corresponde allá: la minería en naranja acá es lo mismo que el naranja de allá, y sin él la cadena sería texto plano que podría hablar de cualquier cosa. Nombre propio, como `.ms-barra` y `.ms-hueca`: `.rombo` a secas es el marcador del mapa y es `position: absolute`. Acá no se nota porque una ficha no carga `styles.css`, y esa es justamente la razón para no dejarlo — el día que la barra llegue a una página que sí la cargue, el rombo se va a la esquina y nadie va a saber por qué. / .migas .miga-rombo { width: 7px; height: 7px; flex: none; transform: rotate(45deg); border-radius: 1px; margin-right: 3px; display: inline-block; } / Puentes y túneles se dibujan como en la leyenda: un guion, no un rombo. / .migas .miga-rombo.ms-barra { width: 11px; height: 4px; border-radius: 1px; transform: none; } .migas .miga-rombo.ms-hueca { background: transparent !important; border: 1.5px solid currentColor; } / --- 4 · ESTADO ---------------------------------------------------------- Contra el borde derecho, que es donde vive el estado en cualquier panel de instrumentos. Adentro va de lo del sistema a lo de la persona. `.barra-estado` y no `.estado`: `.estado` ya existe en `ficha.css` y es el bloque de clima y sismo del activo —una columna con filete de acento a la izquierda—. Con el nombre a secas, y como `ficha.css` se carga después, la zona de la barra se volvía una columna de 75 px con un filete verde adentro de un encabezado de 54. Va con el prefijo de las otras dos zonas (`.barra-marca`, `.barra-encuadre`), que es donde debió estar siempre. / .barra-estado { font-size: 12px; color: var(--ink-2); margin-left: auto; display: flex; gap: 14px; align-items: center; white-space: nowrap; } / Sin sesión, "Entrar" vive acá, a la vista y al final de todo: es la llamada a la acción y no se esconde en un menú. Con sesión, la cuenta pasa al menú Explorar y acá no queda nada. / .cuenta { display: flex; align-items: center; } .entrar { background: transparent; color: var(--acento); border: 1px solid var(--acento); border-radius: 5px; padding: 6px 14px; font: 600 12px "Archivo", sans-serif; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; } .entrar:hover { background: rgba(53,208,165,0.12); } / --- 3-ter · El chip de cuenta ------------------------------------------- Avatar y @usuario contra el borde derecho. Antes acá no había nada con sesión abierta —la cuenta vivía adentro del menú Explorar— y esa era exactamente la queja: la pantalla donde se decide qué correos llegan estaba a dos clics y sin peso visual. Reusa `.ms-item` para los enlaces del panel: es el mismo tipo de ítem en el mismo tipo de desplegable, y tener dos aspectos para lo mismo en la misma barra es cómo empiezan a divergir. / .chip-cuenta { position: relative; flex: none; } / El relleno es SIMÉTRICO por defecto: sin @usuario adentro no hay nada que compensar y el chip tiene que ser un círculo. Con el relleno asimétrico de siempre quedaba una píldora coja de 42×34 con la cara pegada a la izquierda, que en hover se leía como un interruptor y no como una persona. / .chip-cuenta > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; height: 34px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); transition: border-color .12s; } / El aire de la derecha aparece solo cuando hay texto que separar del borde. / .chip-cuenta.con-arroba > summary { padding-right: 11px; } .chip-cuenta > summary::-webkit-details-marker { display: none; } .chip-cuenta > summary:hover, .chip-cuenta[open] > summary { border-color: var(--acento); } / El avatar es el mismo elemento con foto o con iniciales, así que las dos variantes comparten tamaño y forma: si no, el chip cambia de ancho el día que alguien sube una foto. / .ch-av { width: 26px; height: 26px; border-radius: 999px; flex: none; object-fit: cover; display: flex; align-items: center; justify-content: center; font: 700 10.5px "Archivo", sans-serif; color: #08110d; background: linear-gradient(140deg, var(--acento), #7fd8f0); } .ch-anon { background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); } .ch-anon svg { width: 15px; height: 15px; } .ch-arroba { font: 500 12px "IBM Plex Mono", monospace; color: var(--ink-2); } .chip-cuenta[open] .ch-arroba { color: var(--ink); } .ch-caja { position: absolute; right: 0; top: calc(100% + 7px); z-index: 1000; width: 262px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); } .ch-id { display: flex; gap: 10px; align-items: center; padding: 6px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 7px; } .ch-id > div { min-width: 0; } .ch-id b { display: block; font-size: 13px; color: var(--ink); } / `> div >` y no `.ch-id span` a secas: el avatar TAMBIÉN es un adentro de `.ch-id`, así que la regla suelta le cambiaba el `display: flex` por `block` y la fuente por mono de 11 px. El resultado era la inicial saliéndose del círculo, arriba y a la izquierda, en toda cuenta sin foto. / .ch-id > div > span { display: block; font: 400 11px "IBM Plex Mono", monospace; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 720px) { / En 375 px el arroba y "Explorar" no caben juntos. Se va el arroba y queda la cara, que es lo que hace de ancla. / .ch-arroba { display: none; } .chip-cuenta.con-arroba > summary { padding-right: 3px; } } / --- 3-bis · El índice del sitio ----------------------------------------- El panel no es una lista de enlaces: son tres grupos —la persona, el sitio y el ranking— y el último es el catastro visto de otra forma, familia por familia, con el mismo rombo de color que usa el mapa. / .menu-sitio { position: relative; flex: none; } / `>`: el ranking, adentro del panel, es otro
con su propio summary y no tiene que heredar el cuerpo del botón de la barra. / .menu-sitio > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; height: 34px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font: 500 12px "Archivo", sans-serif; white-space: nowrap; transition: color .12s, border-color .12s; } .menu-sitio > summary::-webkit-details-marker { display: none; } .menu-sitio > summary svg { width: 16px; height: 16px; flex: none; } .menu-sitio > summary:hover, .menu-sitio[open] > summary { border-color: var(--acento); color: var(--ink); } .menu-sitio[open] > summary svg { color: var(--acento); } / Sesión abierta: se enciende el SÍMBOLO, no un punto al lado. Un punto es la convención de "hay algo nuevo que mirar", y acá no hay nada que mirar: solo dice que la sesión existe, cosa que el propio menú ya dice al abrirse. Va después de la regla de `[open]` para que abrir el menú no lo apague. / .menu-sitio.con-sesion > summary svg { color: var(--acento); } / Anclado a la DERECHA del botón, que vive contra el borde derecho de la barra: el panel cuelga hacia adentro y nunca se sale de la pantalla. / .ms-caja { position: absolute; right: 0; top: calc(100% + 7px); z-index: 1000; width: 356px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: aparece .18s ease-out; } .ms-grupo + .ms-grupo { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; } / Cada ítem: su símbolo enmarcado en un cuadrado —la misma gramática del botón de Explorar y de los controles del mapa— y el nombre a la derecha. Nada más: sin descripción, la página explica qué es al llegar. / .ms-item { display: flex; align-items: center; gap: 10px; padding: 5px 7px; border-radius: 7px; color: var(--ink); text-decoration: none; font: 600 13px "Archivo", sans-serif; } .ms-item:hover { background: rgba(255,255,255,.06); } .ms-ico { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); transition: color .12s, border-color .12s; } .ms-ico svg { width: 14px; height: 14px; } .ms-item:hover .ms-ico { color: var(--acento); border-color: var(--acento); } .ms-item.salir { color: var(--ink-2); } / Dónde estás, dicho por el menú. Es la otra mitad de la jerarquía: las migas dicen la posición vertical —de qué cuelga esta página— y esto dice la horizontal, cuál de las puertas del índice es la que ya cruzaste. Sin esto, el menú de una página se ve idéntico al de cualquier otra. / .ms-item[aria-current="page"] { color: var(--acento); background: rgba(53,208,165,.08); } .ms-item[aria-current="page"] .ms-ico { color: var(--acento); border-color: var(--acento); } / Y lo mismo una familia del ranking, que también es un destino del índice. / .ms-fam a[aria-current="page"] { color: var(--acento); background: rgba(53,208,165,.08); } / Un