/* SATwality · Explorador (maqueta): mapa a pantalla completa, panel de capas, leyenda y barra de tiempo. */
:root { --bg: #030a17; --ink: #eaf4ff; --ink2: #c3d6e8; --muted: #93b0cc; --muted2: #5f7d99; --line: rgba(140, 200, 255, .14); --line2: rgba(140, 200, 255, .24);
  --aqua: #6fd0ff; --cyan: #55e6d6; --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; --sans: 'Inter', system-ui, sans-serif; --r: 1rem; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--sans); }
a { color: var(--aqua); text-decoration: none; }
.saltar { position: absolute; left: -999px; }
.xp { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh; }
.xp__top { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: rgba(3, 10, 23, .92); z-index: 1000; }
.xp__simar img { height: 1.5rem; width: auto; display: block; }
.marca { display: flex; align-items: center; gap: .45rem; color: var(--ink); }
.marca__ico { width: 1.7rem; height: 1.7rem; fill: none; stroke: #5bd0ff; stroke-width: 1.7; stroke-linecap: round; }
.marca__ico .ola { stroke: var(--aqua); }
.marca__txt { font: 600 1.2rem/1 var(--sans); }
.marca__txt b { background: linear-gradient(100deg, #d9f99d, #5bd0ff 40%, #e2486e); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.xp__sub { font: 600 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.xp__nav { display: flex; gap: .2rem; margin-left: auto; }
.xp__nav a { color: var(--muted); font-size: .86rem; padding: .4rem .7rem; border-radius: 999px; }
.xp__nav a:hover, .xp__nav a.on { color: var(--ink); background: rgba(140, 200, 255, .08); }
.topright { display: flex; align-items: center; gap: .7rem; }
.xp__main { position: relative; min-height: 0; }
.xp__mapa { position: absolute; inset: 0; background: #06182b; }
.xp__panel { position: absolute; z-index: 800; top: 1rem; left: 1rem; width: 19rem; max-height: calc(100% - 2rem); overflow: auto; padding: 1rem; border-radius: var(--r);
  background: rgba(3, 12, 26, .9); border: 1px solid var(--line2); backdrop-filter: blur(10px); }
.xp__panel h2 { margin: 0 0 .7rem; font: 600 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.xp__capas { display: grid; gap: .3rem; }
.xp__capa { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .6rem; border-radius: .6rem; border: 1px solid transparent; cursor: pointer; }
.xp__capa:hover { background: rgba(140, 200, 255, .06); }
.xp__capa:has(input:checked) { border-color: rgba(91, 208, 255, .5); background: rgba(91, 208, 255, .08); }
.xp__capa input { margin-top: .2rem; accent-color: #5bd0ff; }
.xp__capa b { display: block; font: 600 .78rem/1.2 var(--mono); color: var(--ink); }
.xp__capa small { color: var(--muted); font-size: .78rem; }
.xp__nota { margin: .9rem 0 0; font-size: .78rem; color: #ffe2b0; border-top: 1px dashed rgba(255, 200, 102, .35); padding-top: .8rem; }
.xp__ley { position: absolute; z-index: 800; right: 1rem; bottom: 1.6rem; max-width: 22rem; padding: .85rem 1rem; border-radius: var(--r);
  background: rgba(3, 12, 26, .9); border: 1px solid var(--line2); }
.xp__ley h3 { margin: 0 0 .55rem; font: 600 .66rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.xp__ley small { display: block; margin-top: .5rem; color: var(--muted); font-size: .72rem; }
.xp__aviso { position: absolute; z-index: 900; left: 50%; top: 1rem; transform: translateX(-50%); padding: .6rem 1rem; border-radius: 999px; background: rgba(40, 30, 10, .92);
  border: 1px solid rgba(255, 200, 102, .5); color: #ffe2b0; font-size: .85rem; max-width: calc(100% - 2rem); }
.xp__tl { display: flex; align-items: center; gap: .9rem; padding: .55rem 1rem; border-top: 1px solid var(--line); background: rgba(3, 10, 23, .95); }
.xp__play { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--muted); }
.xp__tl input[type=range] { flex: 1; min-width: 0; accent-color: #5bd0ff; }
.xp__fecha { font: 600 .82rem/1 var(--mono); color: var(--ink); white-space: nowrap; }
.xp__gob { height: 1.5rem; width: auto; opacity: .8; }
.leaflet-container { background: #06182b; font-family: var(--sans); }
.xp-dom { stroke: #55e6d6; stroke-width: 1.5; stroke-dasharray: 6 6; fill: none; }
@media (max-width: 900px) {
  .xp__nav, .xp__sub, .xp__gob { display: none; }
  .xp__top { gap: .6rem; padding: .5rem .7rem; }
  .xp__top .topright { margin-left: auto; }
  .xp__panel { top: auto; bottom: .6rem; left: .6rem; right: .6rem; width: auto; max-height: 40%; }
  .xp__ley { display: none; }
}
/* teléfono: sin el logo de SIMAR+ ni la etiqueta (el panel ya dice «Maqueta») para que quepan la marca y el idioma */
@media (max-width: 480px) { .xp__simar, .xp__top .maqueta { display: none; } }