/* Tema oscuro (por defecto, ignora la preferencia del sistema) y claro (solo si se elige explícitamente): las variables de color viven todas acá para que el selector manual (#themeToggle, ver js/app.js) controle todo desde un único atributo. Ese atributo (data-theme) lo fija un script inline en el antes del primer pintado, para no hacer "flash" del tema equivocado al cargar. */ :root { --bg: #0b0f17; --bg-elev: #111826; --bg-elev-2: #161f2e; --border: #223047; --text: #e7edf5; --text-dim: #93a3b8; --text-faint: #5c6b81; --accent: #3fd6c7; --accent-soft: rgba(63, 214, 199, 0.12); --danger: #ff5a6e; --warning: #ffb03f; --header-bg: rgba(11,15,23,0.85); --mag-1: #4fc3f7; /* <3.0 */ --mag-2: #ffd166; /* 3-3.9 */ --mag-3: #ff9f4a; /* 4-4.9 */ --mag-4: #ff5a6e; /* 5-5.9 */ --mag-5: #c23bff; /* 6-6.9 */ --mag-6: #e91e63; /* >=7.0 */ /* Colores de catálogo de catalogo-fallas-gem.php (--cat-color en cada fila/tarjeta, ver js/gen-catalogo-fallas.js). Separados de --accent porque hay más de un catálogo a la vez en pantalla. */ --cat-sara: #ffb03f; --cat-bird: #c23bff; --radius: 14px; --shadow: 0 8px 30px rgba(0,0,0,0.35); font-size: 16px; } /* Oscuro es el default en todo escenario (incluso sin JS: sin el atributo data-theme, se queda en los valores oscuros de :root de arriba — ya no sigue la preferencia del sistema). Modo claro solo al elegirlo explícitamente con #themeToggle. */ :root[data-theme="light"] { /* Antes --bg-elev era #ffffff puro: en pantallas grandes (mapa, paneles, tabla histórica) eso se traducía en superficies de blanco intenso que resultan agresivas a la vista. Se suaviza a un blanco roto/marfil muy sutil (menos del 3% de diferencia perceptual), que sigue leyéndose como "elevado" sobre --bg pero sin el brillo del blanco puro. --text también baja un poco de intensidad por la misma razón (menos contraste extremo texto-fondo), sin bajar de una relación de contraste cómoda para lectura. */ --bg: #e6eaf0; --bg-elev: #f0f2f6; --bg-elev-2: #e2e6ee; --border: #d0d7e2; --text: #1b2330; --text-dim: #4c5a6e; --text-faint: #8592a3; --shadow: 0 8px 24px rgba(20, 30, 50, 0.09); --header-bg: rgba(230,234,240,0.85); /* El --accent original (#3fd6c7) se calibró para resaltar sobre fondos casi negros: brillante y con mucho contraste ahí, pero contra fondos claros pierde casi todo el contraste (por eso los enlaces "no resaltaban" y se confundían con el resto del texto). Se oscurece solo para claro, manteniendo el mismo tono teal de marca, para que enlaces, botones y bordes de acento cumplan un contraste de texto legible sobre --bg-elev. */ --accent: #0b8073; --accent-soft: rgba(11, 128, 115, 0.12); /* Mismo problema que --accent: #ffb03f (SARA) y #c23bff (Bird 2003) se calibraron para fondo oscuro. El naranja original apenas pasaba 1.6:1 de contraste sobre --bg-elev claro (necesita 4.5:1 para texto normal); el violeta original quedaba en ~3.5:1, suficiente para los números grandes de .summary-count pero no para el texto chico de .catalog-badge. Ambos se oscurecen manteniendo el matiz. */ --cat-sara: #a35c00; --cat-bird: #9b2ee6; /* Mismo problema otra vez: --warning (#ffb03f, usado por el badge de fuente "FUNVISIS" y por .pillar-drop) y --danger (#ff5a6e, usado por el valor y el filo de la ficha "Magnitud máxima") apenas pasaban 1.6:1 y 2.7:1 de contraste respectivamente sobre --bg-elev claro. Se oscurecen manteniendo el matiz (amarillo/naranja y rojo). */ --warning: #a35c00; --danger: #b91c3c; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; scroll-behavior: smooth; } .noise-overlay { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 10%, rgba(63,214,199,0.06), transparent 40%), radial-gradient(circle at 85% 90%, rgba(194,59,255,0.05), transparent 45%); z-index: 0; } /* ---------- Header ---------- */ .app-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* En oscuro el header ya se distingue por el brillo del logo/acento sobre fondo casi negro; en claro, con superficies todas en la misma familia de grises, el encabezado se perdía contra los paneles. Un lavado muy sutil con los dos colores de marca (teal/violeta del logo) le da identidad sin restarle legibilidad al texto. */ :root[data-theme="light"] .app-header { background: linear-gradient(120deg, rgba(63,214,199,0.14), rgba(194,59,255,0.08)), var(--header-bg); } .header-inner { width: 100%; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 48px; height: 30px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(63, 214, 199, 0.4)); } .brand-text h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .brand-accent { color: var(--accent); } .brand-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); } .header-status { display: flex; align-items: center; gap: 16px; } .live-pill { display: flex; align-items: center; gap: 8px; background: var(--accent-soft); color: var(--accent); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(63,214,199,0.6); animation: pulse 2s infinite; } .live-pill.offline { background: rgba(255,90,110,0.12); color: var(--danger); } .live-pill.offline .live-dot { background: var(--danger); animation: none; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(63,214,199,0.5); } 70% { box-shadow: 0 0 0 8px rgba(63,214,199,0); } 100% { box-shadow: 0 0 0 0 rgba(63,214,199,0); } } .last-update { font-size: 12px; color: var(--text-faint); } /* Selector de tema claro/oscuro: un solo botón, icono de sol o luna según el tema actualmente activo (indica hacia cuál se cambia al hacer clic). Ambos íconos conviven en el DOM; el CSS decide cuál se ve. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .btn-icon { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ---------- Pestañas de navegación entre páginas ---------- */ /* Barra compartida por las 4 páginas del sitio (Monitor / Quiénes somos / Catálogo de fallas / Créditos). Cada página es HTML estático propio (no es una SPA); "pestaña activa" se marca con aria-current="page" desde el propio HTML de cada página, y js/site-nav.js le agrega la clase visual. */ .site-tabs { border-bottom: 1px solid var(--border); background: var(--bg-elev); } .site-tabs-inner { width: 100%; padding: 0 24px; display: flex; gap: 4px; overflow-x: auto; } .site-tab { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-dim); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .site-tab:hover { color: var(--text); } .site-tab[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } /* Botón "Menú" que reemplaza a .site-tabs-inner en móvil (ver media query más abajo) — oculto en desktop/tablet, donde las pestañas ya se ven todas seguidas. */ .nav-toggle { display: none; } /* ---------- Páginas de contenido (Quiénes somos, Créditos) ---------- */ .content-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 60px; position: relative; z-index: 1; } .content-page h2 { font-size: 22px; margin: 36px 0 14px; } .content-page h2:first-child { margin-top: 0; } .content-page p { line-height: 1.7; color: var(--text-dim); margin: 0 0 14px; } .content-page p strong { color: var(--text); } .content-page a { color: var(--accent); text-decoration: none; } .content-page a:hover { text-decoration: underline; } .content-page .lead { font-size: 16px; color: var(--text); } .credits-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 13.5px; } .credits-table th, .credits-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .credits-table th { color: var(--text-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; } .credits-table td { color: var(--text-dim); } .credits-table td:first-child { color: var(--text); font-weight: 600; } .credits-table a { color: var(--accent); text-decoration: none; } .credits-table a:hover { text-decoration: underline; } @media (max-width: 640px) { /* Con 6 páginas, repartir el ancho entre pestañas (como antes, con flex:1 1 0) las dejaba demasiado angostas y con el texto envuelto a 2-3 líneas — poco usable en táctil. En su lugar: un botón "Menú" compacto de una sola fila (con el nombre de la página actual, puesto por bindMobileNavToggle() en js/site-nav.js) que despliega la lista completa hacia abajo, una pestaña por fila. */ .nav-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; background: none; border: none; color: var(--text); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; } .nav-toggle .btn-icon { width: 18px; height: 18px; color: var(--text-dim); flex-shrink: 0; } .nav-toggle-label { flex: 1; text-align: left; } .nav-toggle-caret { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; transition: transform 0.15s; } .site-tabs.open .nav-toggle-caret { transform: rotate(180deg); } .site-tabs-inner { display: none; flex-direction: column; padding: 0; gap: 0; } .site-tabs.open .site-tabs-inner { display: flex; } .site-tab { padding: 12px 16px; font-size: 13.5px; justify-content: flex-start; text-align: left; white-space: normal; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; } .site-tab:last-child { border-bottom: none; } .site-tab[aria-current="page"] { /* En esta lista vertical la línea de abajo es un divisor entre filas, no el indicador de "activa" (eso lo hace el borde izquierdo). */ border-bottom-color: var(--border); border-left-color: var(--accent); background: var(--accent-soft); } /* La búsqueda histórica no está disponible en celular (ver .mobile-unavailable) — no tiene sentido ofrecerla en el menú. Sigue en el DOM (bindMobileNavToggle() en js/site-nav.js la necesita para poner el nombre de la página actual en el botón "Menú" si alguien entra directo a esa URL), solo se oculta visualmente de la lista. */ .site-tab[href="historico-sismos.php"] { display: none; } .content-page { padding: 28px 16px 48px; } } /* ---------- Página "Qué hacer en caso de terremoto" ---------- */ /* Tres fichas grandes y llamativas para AGÁCHATE / CÚBRETE / SUJÉTATE (cada una con su propio color de acento), seguidas de fichas más compactas con consejos según la situación. Poco texto por ficha a propósito: en una emergencia se lee rápido, no se estudia. */ .safety-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 32px; } .pillar-card { position: relative; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 16px 20px; text-align: center; box-shadow: var(--shadow); border-top: 3px solid var(--pillar-color, var(--accent)); } .pillar-drop { --pillar-color: var(--warning); } .pillar-cover { --pillar-color: var(--accent); } .pillar-hold { --pillar-color: var(--mag-5); } .pillar-step { position: absolute; top: 12px; left: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--pillar-color, var(--accent)); color: #0b0f17; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .pillar-icon { width: 52px; height: 52px; color: var(--pillar-color, var(--accent)); margin: 6px 0 10px; } .pillar-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: 0.02em; color: var(--text); } .pillar-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); } .safety-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 28px; } .tip-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } :root[data-theme="light"] .tip-card { border-left: 3px solid var(--accent); } .tip-icon { width: 26px; height: 26px; color: var(--accent); margin-bottom: 8px; } .tip-card h4 { margin: 0 0 4px; font-size: 14px; color: var(--text); } .tip-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); } @media (max-width: 640px) { .safety-pillars { grid-template-columns: 1fr; gap: 12px; } .pillar-card { padding: 18px 16px; } .safety-tips { grid-template-columns: repeat(2, 1fr); } } /* ---------- Página "¿Qué es un terremoto?" ---------- */ /* Diagramas ilustrativos (placas tectónicas, anatomía de un sismo): SVG en línea con los mismos colores/variables del resto del sitio, así se adaptan solos al cambiar de tema claro/oscuro. */ .edu-figure { margin: 8px 0 28px; padding: 20px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; } .edu-figure svg { width: 100%; max-width: 420px; height: auto; } .edu-figure figcaption { margin-top: 12px; font-size: 12.5px; color: var(--text-faint); line-height: 1.5; } /* Contenedor responsive de proporción 16:9 para el iframe de YouTube (mismo truco de padding-top que .map-container usa para el mapa). */ .video-embed { position: relative; width: 100%; padding-top: 56.25%; margin: 8px 0 10px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--bg-elev-2); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-fallback { font-size: 12.5px; color: var(--text-faint); margin: 0 0 28px; } .video-fallback a { color: var(--accent); text-decoration: none; } .video-fallback a:hover { text-decoration: underline; } /* Escala de magnitud: mismos colores/puntos (.dot.mag-1..5) que la leyenda del mapa en index.php, para que el lector reconozca los mismos colores al volver al monitor. */ .magnitude-scale { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 28px; padding: 18px 20px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .magnitude-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .magnitude-row .dot { width: 12px; height: 12px; flex-shrink: 0; align-self: center; } .magnitude-row-label { font-weight: 700; color: var(--text); font-size: 13.5px; min-width: 150px; } .magnitude-row-desc { color: var(--text-dim); font-size: 13px; line-height: 1.5; } @media (max-width: 640px) { .magnitude-row-label { min-width: 100%; } } /* ---------- Layout ---------- */ .layout { width: 100%; padding: 24px; position: relative; z-index: 1; } .stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; } /* ---------- Panel de búsqueda (historico-sismos.php) ---------- */ /* El formulario de búsqueda vive dentro de .panel-head de .map-panel (junto al título y la leyenda), no en un panel aparte — así, al maximizar el mapa, se mueve con él automáticamente (.map-panel.maximized) sin necesitar lógica extra para que no quede tapado. width:100% lo fuerza a su propia fila dentro del header (que ya es flex-wrap), en vez de competir por espacio con el título/leyenda en la misma línea. */ .search-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; width: 100%; margin-top: 4px; } .search-date-field { display: flex; flex-direction: column; gap: 4px; } .search-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); } .search-form input[type="date"], .search-form select { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-family: inherit; cursor: pointer; } .search-form input[type="date"] { color-scheme: dark; cursor: text; } :root[data-theme="light"] .search-form input[type="date"] { color-scheme: light; } .search-form input[type="date"]:disabled, .search-form select:disabled { opacity: 0.6; cursor: default; } .search-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; } .search-btn:hover { background: var(--accent); color: var(--bg-elev); } .search-btn:disabled { opacity: 0.6; cursor: default; } /* Selector de fecha (mes/año en selects + día en cuadrícula tipo calendario). El popup usa position:fixed (posicionado por JS con getBoundingClientRect) en vez de absolute, porque .panel-head vive dentro de .panel que tiene overflow:hidden — con absolute el calendario quedaría recortado por ese overflow. */ .date-picker { position: relative; } .date-picker-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 116px; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-family: inherit; cursor: pointer; } .date-picker-trigger:hover { border-color: var(--accent); } .date-picker-trigger .btn-icon { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; } .date-picker-trigger:disabled { opacity: 0.6; cursor: default; } .date-picker-popup { position: fixed; z-index: 3000; width: 232px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; } .date-picker-header { display: flex; gap: 6px; margin-bottom: 8px; } .date-picker-header select { flex: 1; min-width: 0; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 5px; font-size: 12px; font-family: inherit; cursor: pointer; } .date-picker-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10.5px; color: var(--text-faint); margin-bottom: 4px; } .date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .date-picker-grid button { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 6px; color: var(--text); font-size: 12px; font-family: inherit; cursor: pointer; } .date-picker-grid button:hover { background: var(--bg-elev-2); } .date-picker-grid button.selected { background: var(--accent); color: var(--bg-elev); font-weight: 700; } @media (max-width: 640px) { .search-form { padding: 14px 16px; gap: 10px; } } .mobile-unavailable { display: none; } @media (max-width: 640px) { .historico-grid { display: none; } .mobile-unavailable { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 56px 24px; color: var(--text-dim); } .mobile-unavailable-icon { width: 40px; height: 40px; color: var(--text-faint); } .mobile-unavailable h2 { color: var(--text); font-size: 17px; margin: 0; } .mobile-unavailable p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 340px; } } .stat-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } /* Sin esto, las 4 fichas del resumen (Último Movimiento, Sismos, Magnitud mínima/máxima) eran indistinguibles del panel donde viven — incluso entre ellas, ya que el color solo aparecía en el valor (accent-min/accent-max). Un filo superior de color, en vez de fondo plano, las separa a simple vista sin competir con .tip-card (borde izquierdo) ni con .pillar-card (que ya tiene su propio filo superior por variante). Aplica en los dos temas: en oscuro el filo se ve como un acento más sobre el fondo casi negro; en claro es lo que evita que las 4 fichas se vean todas iguales. */ .stat-card { border-top: 3px solid var(--accent); } .stat-card.accent-min { border-top-color: var(--mag-1); } .stat-card.accent-max { border-top-color: var(--danger); } .stat-card.last-quake-card { border-top-color: var(--mag-5); } .last-quake-card { grid-column: span 2; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 10px; transition: border-color 0.15s ease; } .last-quake-title { margin-top: 0; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); } .last-quake-card:hover { border-color: var(--accent); } .last-quake-header { display: flex; align-items: center; gap: 12px; } .last-quake-info { min-width: 0; flex: 1; } .last-quake-place { font-size: 14px; font-weight: 700; line-height: 1.3; } .last-quake-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--text-faint); } .last-quake-details { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 8px; } .stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } .accent-max .stat-value { color: var(--danger); } .accent-min .stat-value { color: var(--accent); } .stat-label { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; } .content-grid { position: relative; } .panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; } .map-panel { width: 100%; min-height: 560px; position: relative; /* Aísla el stacking context de Leaflet (sus panes internos usan z-index hasta 700) para que no se pinte por encima del panel flotante. */ isolation: isolate; } /* Aviso flotante: cómo interactuar con la capa de fallas activa */ .fault-hint { position: absolute; /* A la par del control de zoom (+/-) de Leaflet, que sigue en su esquina superior izquierda por defecto; el desplazamiento a la izquierda deja el ancho justo de ese control (~44px) libre. z-index por encima del máximo interno de Leaflet (sus controles llegan a 800). */ top: 15px; left: 60px; z-index: 1000; /* Se adapta al ancho disponible (pantallas angostas / ventana reducida) en vez de mantener un ancho fijo que fuerce el texto a envolver en muchas líneas y crecer hacia abajo. */ max-width: min(280px, calc(100% - 90px)); width: max-content; display: flex; align-items: flex-start; gap: 8px; background: var(--bg-elev); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 12.5px; line-height: 1.4; color: var(--text-dim); } .fault-hint[hidden] { display: none; } .fault-hint-icon { color: var(--accent); font-weight: 700; flex-shrink: 0; } /* Versión en línea del aviso de fallas, debajo de cada checkbox — solo para el layout móvil (ver @media max-width:640px), donde .fault-hint (flotante sobre el mapa) queda oculto por taparlo. En desktop/tablet no se usa. */ .fault-hint-inline { display: none; } /* Panel flotante de actividad reciente, superpuesto sobre el mapa */ .list-panel { position: absolute; top: 72px; right: 16px; z-index: 30; width: 400px; max-width: calc(100% - 32px); max-height: calc(100% - 88px); box-shadow: 0 12px 40px rgba(0,0,0,0.45); } .panel-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; /* Sin esto, el flexbox del panel (columna) podía repartirle espacio de menos frente al contenido del mapa (que fuerza min-height:78vh) y achicarlo — sobre todo al maximizar, con más presión vertical. */ flex-shrink: 0; } /* La cabecera de cada panel (mapa, listado, búsqueda del histórico) era del mismo tono que el cuerpo del panel y se perdía contra él en los dos temas. Fondo un tono más (--bg-elev-2) y un filo de acento abajo separan "encabezado" de "contenido" sin salirse de la paleta de marca. */ .panel-head { background: var(--bg-elev-2); border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); } .panel-head h2 { margin: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); } .panel-title { display: flex; align-items: center; gap: 8px; } .drag-handle { cursor: grab; color: var(--text-faint); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; touch-action: none; user-select: none; } .drag-handle:hover { color: var(--text); background: var(--bg-elev-2); } .list-panel.dragging .drag-handle { cursor: grabbing; } .list-panel.dragging { transition: none; box-shadow: 0 20px 60px rgba(0,0,0,0.55); } /* Minimizar/restaurar el panel de actividad reciente: colapsa todo lo que está debajo de la barra de título (filtros + listado), dejando visible solo esa barra. El ícono (flecha) rota 180° para indicar la acción contraria disponible. */ .list-minimize-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin-left: 2px; background: transparent; border: none; border-radius: 6px; color: var(--text-faint); cursor: pointer; } .list-minimize-btn:hover { color: var(--text); background: var(--bg-elev-2); } .list-minimize-icon { width: 15px; height: 15px; transition: transform 0.15s ease; } .list-panel.minimized .list-minimize-icon { transform: rotate(180deg); } .list-panel.minimized .list-filters, .list-panel.minimized .quake-list { display: none; } /* Maximizar/restaurar el mapa: lo saca del layout normal y lo lleva a cubrir toda la ventana (por encima de encabezado, pestañas y del panel de actividad reciente), útil tanto en escritorio como en móvil —en móvil, el mapa solo está visible cuando hay un sismo elegido (ver mobile-map-active), así que maximizar ahí es "maximizar para ese sismo". Los dos íconos (expandir/contraer) conviven en el DOM; el CSS decide cuál se ve según el estado. Botón flotante sobre el mapa, debajo del control de zoom de Leaflet y del selector de mapa base (Satelital/Calles — ver buildBaseLayers() en js/app.js), que ocupan la esquina superior izquierda apilados uno debajo del otro con las reglas propias de Leaflet. Se deja bastante margen extra porque esos controles pueden ser más altos de lo normal en pantallas táctiles, donde Leaflet usa botones más grandes. */ .map-maximize-btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 145px; left: 10px; /* Un punto por encima de .fault-hint (1000): en el breakpoint de tablet (max-width:980px) ambos coinciden cerca de esa misma altura, y este botón no debe quedar tapado si el aviso de fallas está activo. */ z-index: 1001; width: 30px; height: 30px; padding: 0; background: var(--bg-elev); color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); cursor: pointer; } .map-maximize-btn:hover { color: var(--text); border-color: var(--accent); } .map-maximize-btn .btn-icon { width: 15px; height: 15px; } .icon-restore { display: none; } /* Selector de mapa base (Satelital/Calles, ver buildBaseLayers() en js/app.js): sin position/margin propios — queda en el flujo normal de la esquina superior izquierda de Leaflet, apilado automáticamente debajo del control de zoom con las reglas de margen que trae Leaflet (que además tienen más especificidad que cualquier margin-top que le forcemos acá, así que intentar correrlo con CSS propio no tiene efecto). Es .map-maximize-btn (arriba) la que se corrió hacia abajo para dejarle lugar, ya que ese botón sí es HTML propio del sitio sin ese problema de especificidad. */ /* El "* { box-sizing: border-box }" global del sitio (más arriba en este mismo archivo) le rompe a Leaflet los anchos que calcula para sus propios controles, que asumen "content-box" — sin este reset local, las etiquetas de las capas base se ven apretadas y envuelven mal. */ .leaflet-control-layers, .leaflet-control-layers * { box-sizing: content-box; } .leaflet-control-layers-list label { white-space: nowrap; } .map-panel.maximized .icon-maximize { display: none; } .map-panel.maximized .icon-restore { display: block; } .map-panel.maximized { /* Explícito (no solo heredado de .panel): al maximizar, app.js mueve el panel a ser hijo directo de , por lo que deja de ser descendiente de .layout.mobile-map-active — la regla que lo muestra en móvil (".layout.mobile-map-active .map-panel") ya no puede alcanzarlo, y sin este display explícito (más específico que el ".map-panel{display:none}" base de móvil) el mapa se quedaría oculto ahí. */ display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* Muy por encima de cualquier otra cosa en la página (encabezado del sitio z-index:50, panel de sismos flotante z-index:2001) para que no quede ninguna duda de que tapa todo lo demás. */ z-index: 2000; width: 100%; height: 100%; min-height: 0; border-radius: 0; } /* El alto mínimo de 78vh es para el layout normal (mapa "de tamaño fijo" entre otro contenido); maximizado ya se reparte por flexbox dentro de un contenedor de 100vh, así que ese mínimo solo podía competir de más con el título del panel y quitarle espacio. */ .map-panel.maximized #map { min-height: 0; } /* Al maximizar, el panel de "Actividad reciente" debe seguir flotando sobre el mapa en la misma posición relativa que tiene siempre (arriba a la derecha) — no taparlo ni quedar tapado. app.js le agrega esta clase directamente (en vez de un selector :has(), para no depender de qué tan bien lo soporte cada navegador) apenas maximiza el mapa. Solo aplica en escritorio/tablet: en móvil el panel de sismos ya no es flotante y el mapa maximizado no convive con él (ver @media max-width:640px). */ @media (min-width: 641px) { .list-panel.following-maximized-map { position: fixed; top: 72px; right: 16px; left: auto; z-index: 2001; } } .legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); } .legend-item { display: flex; align-items: center; gap: 5px; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .mag-1 { background: var(--mag-1); } .mag-2 { background: var(--mag-2); } .mag-3 { background: var(--mag-3); } .mag-4 { background: var(--mag-4); } .mag-5 { background: var(--mag-5); } .mag-6 { background: var(--mag-6); } .legend-toggle { cursor: pointer; user-select: none; } .legend-toggle input { accent-color: var(--warning); cursor: pointer; } .fault-swatch { display: inline-block; width: 14px; height: 0; } .fault-swatch-gem { border-top: 2px dashed var(--warning); } .fault-swatch-usgsmap { width: 12px; height: 12px; border: 1.5px solid var(--text-dim); background: repeating-linear-gradient(45deg, var(--text-dim) 0 1px, transparent 1px 4px); } .usgs-fault-label-hotspot { background: transparent; border: none; cursor: pointer; } .map-loading-hint { color: var(--accent); font-weight: 600; animation: mapLoadingPulse 1.2s ease-in-out infinite; } @keyframes mapLoadingPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .map-container { position: relative; flex: 1; min-height: 0; } #map { height: 100%; min-height: 78vh; background: #0d1420; } /* Filtros del listado: fuente de datos (arriba) + rango/orden/magnitud (abajo). Agrupados en una columna propia para que el checkbox de fuentes quede claramente sobre los nunca se corten) es exclusivo de móvil — ver @media max-width:640px; aquí queda el comportamiento de siempre (ancho según contenido). */ .list-filters { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .filters { display: flex; gap: 8px; } .filters select { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; } .filters select:disabled { opacity: 0.5; cursor: wait; } /* ---------- Quake list ---------- */ .quake-list { /* ~7 tarjetas visibles a la vez; el resto se alcanza con scroll */ max-height: calc(7 * 72px); overflow-y: auto; padding: 10px; } .quake-list::-webkit-scrollbar { width: 8px; } .quake-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .quake-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; border: 1px solid transparent; } .quake-card:hover { background: var(--bg-elev-2); border-color: var(--border); } .quake-card:active { transform: scale(0.99); } .quake-card.selected { background: var(--accent-soft); border-color: var(--accent); } /* En claro, las fichas sin seleccionar/hover son transparentes sobre un panel ya de por sí claro: todo el listado se veía como un bloque liso. Sombreado alternado sutil (mismo criterio que la tabla de terremotos-en-venezuela.php) para diferenciar cada fila; el :not() evita pisar los estados hover/selected de arriba pese a que esta regla es más específica por el prefijo de tema. */ :root[data-theme="light"] .quake-card:nth-child(even):not(:hover):not(.selected) { background: var(--bg-elev-2); } .quake-mag { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #08121a; } .quake-info { flex: 1; min-width: 0; } .quake-place { font-size: 14px; font-weight: 600; white-space: normal; overflow-wrap: break-word; } .quake-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; } .quake-time { flex-shrink: 0; text-align: right; min-width: 78px; } .quake-time-ago { font-size: 11.5px; color: var(--text-faint); } .quake-time-abs { font-size: 11px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; } .quake-chevron { flex-shrink: 0; color: var(--text-faint); font-size: 11px; } /* Detalle en línea, desplegado justo debajo de la tarjeta seleccionada */ .quake-detail { margin: 2px 6px 10px; padding: 14px 16px; background: var(--bg-elev-2); border: 1px solid var(--accent); border-radius: 10px; animation: detailIn 0.15s ease; } @keyframes detailIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .detail-field { display: flex; flex-direction: column; gap: 3px; } .detail-field-wide { grid-column: 1 / -1; } .detail-link { display: inline-block; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; } .detail-link:hover { text-decoration: underline; } /* Detalle del sismo elegido, mostrado como bloque propio arriba del panel del mapa en el layout móvil (ver @media max-width:640px) — fuera del panel del mapa, para no taparlo. Oculto por defecto: solo se activa junto con .has-selection dentro de ese media query. */ .mobile-map-detail { display: none; background: var(--bg-elev); border: 1px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); animation: detailIn 0.15s ease; } .mobile-map-detail-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } /* Botón "Ver en el mapa" del detalle: solo tiene sentido en el layout móvil (ver @media max-width:640px), donde el mapa arranca oculto. En escritorio/tablet el mapa ya está siempre visible junto al listado. */ .detail-header { display: none; justify-content: flex-end; margin-bottom: 12px; } .detail-map-btn { display: none; align-items: center; gap: 6px; padding: 6px 12px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; } .detail-map-btn:hover { background: var(--accent); color: var(--bg-elev); } /* Icono de línea (globo / flecha) dentro de .detail-map-btn y .map-back-btn: hereda el color del texto del botón vía currentColor, así el hover de cada botón también tiñe el icono sin reglas aparte. */ .btn-icon { width: 15px; height: 15px; flex-shrink: 0; } /* Botón "Volver al listado": ítem flex normal dentro de .panel-head (el encabezado del mapa, junto a "Mapa epicentros" y la leyenda) en vez de flotar sobre el mapa mismo. margin-left:auto lo pega al borde derecho de su fila sin superponerse con la leyenda (que puede ocupar varias líneas) — a diferencia de position:absolute, el flujo normal nunca se solapa. Mismo estilo (fondo/borde/texto de acento) que .detail-map-btn ("Ver mapa"), para que se vea igual de "botón" y no como un enlace de texto plano. */ .map-back-btn { display: none; align-items: center; gap: 6px; padding: 8px 14px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; } .map-back-btn:hover { background: var(--accent); color: var(--bg-elev); } /* Con el mapa maximizado (pantalla completa) no tiene sentido "volver al listado" — ese listado ni siquiera se ve. Solo debe estar presente en el estado normal del mapa móvil. */ .map-panel.maximized .map-back-btn { display: none; } .empty-state, .loading-hint { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 14px; } /* Skeletons */ .skeleton-list { display: flex; flex-direction: column; gap: 10px; padding: 4px; } .skeleton-card { height: 62px; border-radius: 10px; background: linear-gradient(90deg, var(--bg-elev-2) 0%, var(--border) 50%, var(--bg-elev-2) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------- Error banner ---------- */ .error-banner { margin-top: 16px; background: rgba(255,90,110,0.1); border: 1px solid rgba(255,90,110,0.35); color: var(--danger); padding: 12px 16px; border-radius: 10px; font-size: 13.5px; } /* ---------- Footer ---------- */ .app-footer { margin-top: 24px; text-align: center; font-size: 12px; color: var(--text-faint); padding-bottom: 20px; } .app-footer a { color: var(--accent); text-decoration: none; } .app-footer a:hover { text-decoration: underline; } .footer-disclaimer { margin-top: 8px; max-width: 720px; margin-left: auto; margin-right: auto; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; } .field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .field-value { font-size: 14px; font-weight: 600; } .source-badge { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; vertical-align: middle; } .source-usgs { background: var(--accent-soft); color: var(--accent); } .source-funvisis { background: rgba(255, 176, 63, 0.15); color: var(--warning); } .source-sgc { background: rgba(194, 59, 255, 0.15); color: var(--cat-bird); } .source-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; align-self: flex-start; width: 100%; } .source-filters-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .source-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; transition: opacity 0.15s ease; } .source-toggle input { width: 11px; height: 11px; margin: 0; accent-color: currentColor; cursor: pointer; } .source-toggle:has(input:not(:checked)) { opacity: 0.35; } /* Mismo estilo de checkbox (tamaño, accent-color por currentColor, atenuado cuando está sin marcar) que los toggles de fuente, pero con el tamaño de letra de los del listado siempre en una sola línea: se reparten el ancho disponible y truncan con "…" en vez de desbordar o envolver (el panel recorta cualquier desborde vía overflow:hidden). Solo aplica en este layout — en desktop/tablet los