/* Climalerta — app shell (mapa a pantalla completa + panel lateral). Sólo tokens ya declarados en app.css: --navy, --navy-deep, --navy-2, --navy-3, --orange, --amber, --danger, --ink, --muted, --card-border. Se activa con .shell-on en (lo pone js/shell.js); sin ese script la página sigue funcionando como documento normal. MODO DE PANEL — dos comportamientos según el ancho, mismo estado (la clase body.panel-abierto), sin duplicar lógica en JS: - Escritorio (≥880px): el panel EMPUJA el mapa — es una columna real de un grid, no una capa flotante. Así se ve como reddeesperanza.com: el mapa sigue visible y usable al lado, nada se oscurece. - Móvil (<880px): no hay espacio para partir la pantalla, así que el panel se comporta como una hoja que se desliza ENCIMA del mapa, con velo. El truco que lo hace posible sin tocar una por una las reglas de #shellTop, #shellActions, #shellCornerL/R, etc. (todas position:fixed): #shell recibe un transform inocuo (translateZ(0)), lo que lo convierte en el "contenedor de referencia" de sus hijos fixed — igual que el viewport, pero acotado a la caja de #shell. Cuando la columna del grid se angosta, #shell se angosta, y todos sus hijos fixed se realinean solos. */ body.shell-on { overflow: hidden; } /* el mapa es la página; el scroll vive en el panel */ /* #appGrid es el ÚNICO contenedor grid, con SÓLO dos hijos (drawer, shell) — deliberadamente NO es . real tiene ~20 hijos más (los cinco modales, el toast, scripts…), y usar mismo como grid resultó frágil: en un momento #shell colapsó a 0px de alto sin causa aislable con certeza entre tanta compañía. Un wrapper propio, position:fixed y de alto EXPLÍCITO en unidades absolutas (nunca % ni fr para el alto de los hijos — ver más abajo) elimina cualquier ambigüedad de resolución. */ #appGrid { position: fixed; inset: 0; height: 100dvh; display: grid; grid-template-columns: 0 minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); /* fila única y explícita, ver #drawer/#shell */ /* SIN transition en grid-template-columns a propósito: animar una lista de pistas (no un escalar simple) resultó no asentarse nunca en el valor final en este motor — el panel quedaba en 0px para siempre pese a que la clase, la media query y el valor inline estaban todos correctos. Costó una ronda larga de depuración aislar que la transición era la causa. Cambio instantáneo: correcto siempre gana a bonito. */ } @media (min-width: 880px) { body.panel-abierto #appGrid { grid-template-columns: min(390px, 34vw) minmax(0, 1fr); } } /* ── Panel lateral (columna 1 en escritorio, capa en móvil) ────────── */ #drawer { grid-column: 1; position: relative; height: 100dvh; min-width: 0; background: var(--navy-deep); border-right: 1px solid var(--card-border); display: flex; flex-direction: column; overflow: hidden; } #drawerHead { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--card-border); background: rgba(11,42,91,.6); } #drawerHead #redEstado { margin-left: auto; font-size: .72rem; white-space: nowrap; } #drawerTitulo { font-family: var(--font-head); color: #fff; font-size: 1.05rem; white-space: nowrap; } #drawerCerrar { background: transparent; border: 0; color: var(--muted); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0 4px; } #drawerCerrar:hover { color: var(--orange); } #drawerNav { flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; border-bottom: 1px solid var(--card-border); scrollbar-width: none; } #drawerNav::-webkit-scrollbar { display: none; } #drawerNav button { flex: 0 0 auto; background: var(--card); color: var(--ink); border: 1px solid var(--card-border); border-radius: 999px; padding: 7px 13px; cursor: pointer; font-family: var(--font-label); font-size: .78rem; font-weight: 700; } #drawerNav button:hover { border-color: var(--orange); color: #fff; } #drawerBody { flex: 1 1 auto; min-width: 390px; /* evita que el contenido se aplaste al animar el ancho */ overflow-y: auto; overflow-x: hidden; padding: 4px 18px 60px; -webkit-overflow-scrolling: touch; } #drawerBody .section { padding: 22px 0; border-bottom: 1px solid var(--card-border); } #drawerBody .wrap { padding: 0; max-width: 100%; } #drawerBody .hero-en-panel { padding: 18px 0 6px; text-align: left; } #drawerBody .hero-en-panel .hero-mark, #drawerBody .hero-en-panel .live-pill { display: none; } #drawerBody .hero-en-panel h1 { font-size: 1.35rem; } .drawer-credito { padding: 18px 0 4px; text-align: center; color: var(--faint); font-size: .78rem; border-top: 1px solid var(--card-border); margin-top: 8px; } .drawer-credito a { color: var(--muted); } /* Aviso de cuenta dentro del chat — para que "cómo entrar" esté a la vista en vez de escondido en la barra superior. */ #chatAvisoCuenta.hidden { display: none; } #chatAvisoCuenta { margin-bottom: 12px; } /* ── Contenedor del mapa y sus controles ───────────────────────────── translateZ(0) es lo que convierte a #shell en el contenedor de referencia de sus descendientes position:fixed (top bar, acciones, esquinas…), así quedan acotados a esta columna en vez de a todo el viewport. */ #shell { grid-column: 2; position: relative; height: 100dvh; min-width: 0; overflow: hidden; transform: translateZ(0); z-index: 10; } /* ── Barra superior ─────────────────────────────────── */ #shellTop { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: linear-gradient(180deg, rgba(7,30,66,.92), rgba(7,30,66,.55) 70%, transparent); } #shellBrand { display: flex; align-items: center; gap: 10px; min-width: 0; } #shellBrand svg { width: 34px; height: 34px; flex: 0 0 34px; } #shellBrand span { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } #shellBrand b { font-family: var(--font-head); font-size: 1.06rem; color: #fff; letter-spacing: -.2px; } #shellBrand small { font-family: var(--font-label); font-size: .7rem; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #shellTopRight { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* Pastillas de vidrio, el vocabulario de control del shell. */ .pill, #shellTopRight #btnLang, #shellCornerR .btn, #shellCornerL .btn { background: rgba(255,255,255,.94); color: var(--navy); border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-family: var(--font-label); font-weight: 700; font-size: .82rem; box-shadow: 0 4px 16px rgba(0,0,0,.28); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .pill:hover { background: #fff; } .pill-solid { background: var(--navy-3); color: #fff; } .pill-solid:hover { background: var(--orange); } /* La cuenta se integra a la barra en vez de flotar suelta. */ #shellTopRight #redCuenta { margin: 0; justify-content: flex-end; } #shellTopRight #redCuenta .btn { padding: 8px 14px; border-radius: 999px; font-size: .82rem; } #shellTopRight #redCuenta .red-cuenta-info { color: #fff; text-align: right; } #shellTopRight #redCuenta .red-cuenta-info b { font-size: .86rem; } /* ── Barras de capas / filtros / acciones secundarias ───────────────── */ #shellBars { position: fixed; top: 60px; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; gap: 8px; padding: 0 14px 8px; } /* Las capas ENVUELVEN, no se desplazan. Con 17 pastillas la fila mide ~1.856px; #shellBars vive dentro de #shell (el mapa), así que con el panel abierto el ancho útil baja a ~890px y CINCO capas quedaban fuera de pantalla — «Puntos de agua» entre ellas, cortada por la mitad en el borde derecho. Un scroll horizontal sin barra visible no se descubre: la capa existía y el usuario no podía verla. Envolver cuesta una franja de mapa y hace que las 17 capas sean visibles de una sola mirada, que es lo que importa acá. */ #shellBars .layer-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; margin: 0; min-width: 0; } #shellBars .layer-chip { flex: 0 0 auto; background: rgba(255,255,255,.90); color: var(--navy); border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; font-size: .78rem; font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,.22); } #shellBars .layer-chip.active { background: var(--orange); color: #fff; } /* Los filtros de reportes y las acciones Zona/Acopio viven en el panel, dentro de la sección de reportes (junto a la lista que gobiernan). */ #redReportes .red-filtros { margin: 0 0 10px; } #redReportes #shellSecundarias { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } /* Estado del momento al tope del panel (resumen de peligro + cifras). */ #panelEstado { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; } #panelEstado #redResumen { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; } /* ── El mapa ocupa todo lo que #shell le deje ───────────────────────── */ #shellMap { position: fixed; inset: 0; z-index: -1; } #shellMap .map-wrap { height: 100%; width: 100%; border-radius: 0; border: 0; margin: 0; } #shellMap #quakeMap { height: 100% !important; width: 100%; border-radius: 0; } /* ── Capas flotantes sobre el mapa ──────────────────── SOLO dos: el banner de sismo mayor (casi siempre oculto) y la línea de tiempo. Todo lo demás vive en el panel izquierdo — apilar tarjetas flotantes sobre las barras terminaba solapándose. */ #shellOverlays { /* Debajo del borde REAL de las barras de capas (shell.js publica --barsBottom): con 17 chips envueltas el alto varía entre 1 y 3 filas, y un top fijo dejaba los avisos tapados por las chips. */ position: fixed; left: 0; right: 0; top: calc(var(--barsBottom, 104px) + 8px); z-index: 15; padding: 0 14px; display: flex; flex-direction: column; gap: 8px; max-width: min(520px, 92vw); pointer-events: none; } #shellOverlays > * { pointer-events: auto; } #shellOverlays #alertMajor { margin: 0; } #shellOverlays .timeline { background: rgba(7,30,66,.90); border-radius: 14px; padding: 8px 12px; backdrop-filter: blur(6px); box-shadow: 0 4px 16px rgba(0,0,0,.3); } /* ── Control de zoom de Leaflet ─────────────────────────────────────── Leaflet lo posiciona top-left con 10px de margen por defecto, así que quedaba por detrás de #shellTop + #shellBars (z-index 20; #shellMap vive a z-index:-1 dentro de #shell) — el mismo bug de márgenes que ya se arregló para #shellOverlays con --barsBottom (Carlos lo vio dos veces). Misma variable, mismo criterio: bajar el control hasta que las barras terminen en vez de asumir un alto fijo que el ajuste de línea rompe. */ #shellMap .leaflet-top.leaflet-left { top: calc(var(--barsBottom, 104px) + 8px); } /* ── Acciones principales: SOS + Reportar, una sola fila ───────────── Dos botones lado a lado, como el par rojo/azul de la referencia — nada de una pila de tres filas compitiendo por el pulgar. */ #shellActions { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; width: min(560px, calc(100% - 28px)); display: flex; gap: 10px; } #shellActions .btn { flex: 1 1 0; justify-content: center; border-radius: 16px; } #shellActions #btnSOS { font-size: 1rem; padding: 15px 14px; letter-spacing: .1px; } #shellActions #btnReportar { font-size: .92rem; padding: 13px 14px; } /* ── Esquinas ───────────────────────────────────────── */ #shellCornerL, #shellCornerR { position: fixed; z-index: 55; display: flex; gap: 8px; bottom: max(16px, env(safe-area-inset-bottom)); } #shellCornerL { left: 14px; flex-direction: column; align-items: flex-start; } #shellCornerR { right: 14px; flex-direction: column; align-items: flex-end; } #shellCornerR #btnLocate, #shellCornerR .btn { background: rgba(255,255,255,.94); color: var(--navy); border: 0; border-radius: 999px; padding: 8px 14px; font-family: var(--font-label); font-weight: 700; font-size: .82rem; box-shadow: 0 4px 16px rgba(0,0,0,.28); } #shellCornerR #modBadge { position: static; } /* ── Velo, sólo para el modo hoja (móvil) ──────────────────────────── En escritorio el panel empuja el mapa: nada que oscurecer, se ve y se usa igual que en la referencia. */ #scrim { position: fixed; inset: 0; z-index: 110; background: rgba(7,30,66,.55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s; } @media (min-width: 880px) { #scrim { display: none; } } /* ── Móvil: el panel pasa a ser una hoja que se desliza ENCIMA ──────── */ @media (max-width: 879px) { /* Sin espacio para partir la pantalla: #appGrid deja de comportarse como grid de dos columnas — #shell ocupa todo el ancho y #drawer se convierte en una hoja que se desliza ENCIMA, con velo. */ #appGrid { display: block; } #shell { width: 100%; } #drawer { position: fixed; inset: 0; z-index: 120; width: 100vw; height: 100dvh; transform: translateX(101%); transition: transform .28s cubic-bezier(.4,0,.2,1); } body.panel-abierto #drawer { transform: translateX(0); } body.panel-abierto #scrim { opacity: 1; visibility: visible; } #drawerBody { min-width: 0; } } @media (max-width: 700px) { #shellBrand small { display: none; } #shellTop { padding: 8px 10px; } #shellBars { padding: 0 10px 6px; top: 56px; } /* En un teléfono las 17 capas envueltas serían ~6 filas tapando el mapa, así que acá SÍ se desplazan — pero con las dos cosas que faltaban y hacían que pareciera un corte y no un carrusel: aire al final para que la última pastilla no quede pegada al borde, y un difuminado que delata que hay más a la derecha. */ #shellBars .layer-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 28px; scroll-padding-inline-end: 28px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } #shellBars .layer-chips::-webkit-scrollbar { display: none; } #shellOverlays { top: calc(var(--barsBottom, 98px) + 6px); } #shellMap .leaflet-top.leaflet-left { top: calc(var(--barsBottom, 98px) + 6px); } /* Las pastillas de esquina se aplanan a UNA fila al pie. Cada esquina toma una MITAD de la pantalla y desborda con scroll horizontal dentro de su mitad — así nunca se solapan aunque cambie el número de pastillas (antes la izquierda tenía sólo «Chat»; ahora suma «Leyenda» y se salía del hueco fijo de 92px que asumía la regla vieja) ni el largo al traducir. */ #shellCornerL, #shellCornerR { bottom: max(10px, env(safe-area-inset-bottom)); flex-direction: row; align-items: center; max-width: calc(50vw - 14px); overflow-x: auto; scrollbar-width: none; } #shellCornerL { left: 10px; justify-content: flex-start; } #shellCornerR { left: auto; right: 10px; justify-content: flex-end; } #shellCornerL::-webkit-scrollbar, #shellCornerR::-webkit-scrollbar { display: none; } #shellCornerL > *, #shellCornerR > * { flex: 0 0 auto; } #shellCornerR #btnCompartirApp { display: none; } /* vive en la sección «Comparte» del panel */ #shellActions { bottom: max(58px, calc(env(safe-area-inset-bottom) + 52px)); } #shellActions #btnSOS { font-size: .92rem; padding: 14px 10px; } #shellActions #btnReportar { font-size: .84rem; padding: 13px 10px; } #shellOverlays { max-width: 100%; padding: 0 10px; } /* (La línea de tiempo de 72 h se retiró del mapa el 2026-07-24; con ella se fueron estas reglas móviles. El pronóstico vive en «Ver qué me afecta a mí» y en los popups de ciudad.) */ .pill, #shellCornerR #btnLocate { padding: 7px 11px; font-size: .76rem; } } /* Alturas cortas (móvil apaisado): el mapa manda. */ @media (max-height: 520px) { #shellBars, #shellOverlays { display: none; } }