/* ============================================================================
   Visor urbanístico · Comunitat Valenciana
   Hoja de estilo. v0.1
   ========================================================================== */

:root{
  --panel:      #101817;
  --panel-2:    #182220;
  --linea:      #26332F;
  --tx:         #E6EDEA;
  --tx-2:       #93A29D;
  --acc:        #63C2B1;
  --ok:         #59C17A;
  --err:        #E2705C;
  --esperando:  #7A8783;

  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;

  --barra-h: 46px;
}

*{ box-sizing:border-box }

html, body{
  height:100%; margin:0; padding:0;
  background:#0A0F0E; color:var(--tx);
  font-family:var(--sans); font-size:14px;
  overscroll-behavior:none;
}

#app{ position:fixed; inset:0; display:flex; flex-direction:column }

/* ---------- Barra superior ---------- */
#barra{
  height:var(--barra-h); flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 14px;
  background:var(--panel); border-bottom:1px solid var(--linea);
  z-index:20;
}
.marca{ display:flex; align-items:baseline; gap:10px; min-width:0 }
.marca-t{ font-size:14.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap }
.marca-s{
  font-size:11.5px; color:var(--tx-2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.barra-der{ display:flex; align-items:center; gap:12px; flex:none }

.btn{
  font:inherit; font-size:12px;
  background:var(--panel-2); color:var(--tx);
  border:1px solid var(--linea); border-radius:4px;
  padding:5px 11px; cursor:pointer;
  transition:border-color .12s, color .12s;
}
.btn:hover{ border-color:var(--acc); color:var(--acc) }
.btn:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }

.estado{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--tx-2); white-space:nowrap;
}
.punto{
  width:8px; height:8px; border-radius:50%;
  background:var(--esperando); flex:none;
  transition:background .2s;
}
.punto.ok{ background:var(--ok) }
.punto.err{ background:var(--err) }

.version{
  font-family:var(--mono); font-size:11px; color:var(--tx-2);
  border:1px solid var(--linea); border-radius:3px; padding:2px 6px;
}

/* ---------- Mapa ---------- */
#mapa{ flex:1; position:relative; background:#0A0F0E }

/* Controles de MapLibre sobre fondo oscuro */
.maplibregl-ctrl-group{
  background:var(--panel) !important;
  border:1px solid var(--linea) !important;
  box-shadow:none !important;
}
.maplibregl-ctrl-group button + button{ border-top:1px solid var(--linea) !important }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{ filter:invert(1) opacity(.78) }
.maplibregl-ctrl-group button:hover{ background:var(--panel-2) !important }

.maplibregl-ctrl-scale{
  background:rgba(16,24,23,.86) !important;
  color:var(--tx) !important;
  border-color:var(--tx-2) !important;
  font-family:var(--mono) !important; font-size:10.5px !important;
  padding:2px 6px !important;
}
.maplibregl-ctrl-attrib{
  background:rgba(16,24,23,.86) !important;
  color:var(--tx-2) !important;
  font-size:10.5px !important;
}
.maplibregl-ctrl-attrib a{ color:var(--acc) !important }
.maplibregl-ctrl-attrib-button{ filter:invert(1) opacity(.7) }

/* ---------- Lectura de coordenadas ---------- */
.lectura{
  position:absolute; left:10px; bottom:10px; z-index:15;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:rgba(16,24,23,.9);
  border:1px solid var(--linea); border-radius:4px;
  padding:6px 10px;
  pointer-events:none;
  max-width:calc(100vw - 20px);
}
.lectura-et{
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tx-2); white-space:nowrap;
}
.lectura-v{
  font-family:var(--mono); font-size:11.5px; color:var(--tx);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.lectura-v + .lectura-et{ margin-left:6px; padding-left:10px; border-left:1px solid var(--linea) }

/* ---------- Aviso ---------- */
.aviso{
  position:absolute; left:50%; top:calc(var(--barra-h) + 16px);
  transform:translateX(-50%); z-index:40;
  width:min(520px, calc(100vw - 28px));
  background:var(--panel); border:1px solid var(--err); border-radius:5px;
  padding:14px 16px; box-shadow:0 10px 34px -14px rgba(0,0,0,.85);
}
.aviso[hidden]{ display:none }
.aviso strong{ display:block; font-size:13.5px; color:var(--err); margin-bottom:6px }
.aviso p{ margin:0 0 12px; font-size:12.5px; color:var(--tx-2); line-height:1.55 }
.aviso p code{ font-family:var(--mono); font-size:11.5px; color:var(--tx) }

/* ---------- Pantallas estrechas ---------- */
@media (max-width:720px){
  :root{ --barra-h:auto }
  #barra{ flex-wrap:wrap; gap:6px 12px; padding:8px 12px }
  .marca{ flex-direction:column; gap:0 }
  .marca-s{ font-size:10.5px }
  .lectura{ flex-direction:column; align-items:flex-start; gap:2px }
  .lectura-v + .lectura-et{ margin-left:0; padding-left:0; border-left:none }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}