/* ============================================================================
   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 }
}

/* ============================================================================
   Panel de capas y buscador   (v0.3)
   ========================================================================== */

.panel{
  position:absolute; top:10px; left:10px; z-index:16;
  width:264px; max-width:calc(100vw - 20px);
  /* El panel no puede pasar del alto del mapa. Los 70px de abajo dejan libre
     la lectura de coordenadas, que vive en esa esquina. Sin este límite el
     panel crecía por debajo del borde y sus controles quedaban inalcanzables. */
  max-height:calc(100% - 70px);
  overflow-y:auto; overscroll-behavior:contain;
  background:rgba(16,24,23,.94); border:1px solid var(--linea); border-radius:5px;
  padding:12px 14px 13px;
  box-shadow:0 8px 26px -16px rgba(0,0,0,.85);
  backdrop-filter:blur(3px);
  scrollbar-width:thin; scrollbar-color:var(--linea) transparent;
}
.panel::-webkit-scrollbar{ width:8px }
.panel::-webkit-scrollbar-track{ background:transparent }
.panel::-webkit-scrollbar-thumb{ background:var(--linea); border-radius:4px }
.panel::-webkit-scrollbar-thumb:hover{ background:var(--acc) }
.panel.plegado{ max-height:none; overflow:visible }
.panel-t{
  margin:0 0 10px; font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--tx-2);
}
.panel-x{
  position:absolute; top:7px; right:8px;
  width:22px; height:22px; line-height:1;
  background:none; border:1px solid var(--linea); border-radius:4px;
  color:var(--tx-2); font:inherit; font-size:14px; cursor:pointer;
}
.panel-x:hover{ border-color:var(--acc); color:var(--acc) }
.panel-x:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }
.panel.plegado .panel-cuerpo{ display:none }
.panel.plegado{ padding-bottom:10px }
.panel.plegado .panel-t{ margin-bottom:0 }

.campo{
  display:block; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tx-2); margin-bottom:5px;
}
#buscar{
  width:100%; font:inherit; font-size:12.5px;
  background:#0A0F0E; color:var(--tx);
  border:1px solid var(--linea); border-radius:4px; padding:6px 9px;
}
#buscar:focus{ outline:none; border-color:var(--acc) }
#buscar::placeholder{ color:#5D6A66 }

.msg{ margin:6px 0 0; font-size:11px; color:var(--acc); min-height:14px; line-height:1.4 }

.linea{ height:1px; background:var(--linea); margin:12px 0 10px }

.fila{ display:flex; align-items:center; gap:8px; margin:7px 0; font-size:12.5px }
.fila input[type=checkbox]{ accent-color:var(--acc); width:14px; height:14px; flex:none; margin:0 }
.fila label{ cursor:pointer; color:var(--tx) }
.fila label b{ color:var(--tx-2); font-weight:400; font-family:var(--mono); font-size:11px }

.nota{
  margin:12px 0 0; padding-top:10px; border-top:1px solid var(--linea);
  font-size:10.5px; line-height:1.55; color:var(--tx-2);
}
.nota b{ color:var(--tx); font-weight:600 }

@media (max-width:720px){
  .panel{ width:calc(100vw - 20px) }
}

/* ============================================================================
   Planeamiento: grupo, leyendas y ficha del recinto   (v0.7)
   ========================================================================== */

.grupo-t{
  margin:0 0 8px; font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--acc);
}

.deslizador{ width:100%; accent-color:var(--acc); margin:2px 0 10px }
.campo b{ float:right; font-family:var(--mono); font-weight:400; color:var(--tx) }

#leyendas{ display:flex; flex-direction:column; gap:8px; margin-top:2px }
.leyenda{ margin:0 }
.leyenda figcaption{
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx-2); margin-bottom:3px;
}
.leyenda img{
  max-width:100%; display:block;
  background:#fff; border:1px solid var(--linea); border-radius:4px; padding:4px;
}
.leyenda-vacia{ margin:0; font-size:10.5px; color:var(--tx-2); font-style:italic }

/* --- Globo con la ficha del recinto --- */
.globo .maplibregl-popup-content{
  background:var(--panel); color:var(--tx);
  border:1px solid var(--linea); border-radius:5px;
  padding:12px 14px; box-shadow:0 10px 30px -14px rgba(0,0,0,.85);
}
.globo .maplibregl-popup-tip{ border-top-color:var(--panel); border-bottom-color:var(--panel) }
.globo .maplibregl-popup-close-button{ color:var(--tx-2); font-size:16px; padding:0 6px }
.globo .maplibregl-popup-close-button:hover{ background:none; color:var(--acc) }

.ficha{ font-size:12px; max-height:340px; overflow-y:auto }
.ficha table{ width:100%; border-collapse:collapse }
.ficha th{
  text-align:left; font-weight:500; color:var(--tx-2);
  font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 8px 4px 0; vertical-align:top; white-space:nowrap; width:1%;
}
.ficha td{ padding:4px 0; color:var(--tx); line-height:1.45; word-break:break-word }
.ficha tr + tr th, .ficha tr + tr td{ border-top:1px solid var(--linea) }
.ficha hr{ border:none; border-top:1px solid var(--linea); margin:10px 0 }
.ficha-vacia{ margin:0; color:var(--tx-2); font-size:12px; line-height:1.5 }
.ficha-enlace{
  display:inline-block; margin-top:10px;
  font-size:11px; color:var(--acc); text-decoration:none;
}
.ficha-enlace:hover{ text-decoration:underline }

/* ============================================================================
   Recintos vectoriales de planeamiento   (v0.8)
   ========================================================================== */

.plan-que{
  margin:2px 0 10px 22px; font-size:10.5px; color:var(--acc);
  line-height:1.4; min-height:14px;
}

.clases{ display:flex; flex-direction:column; gap:5px; margin:0 0 4px }
.clase{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--tx); cursor:pointer;
}
.clase input[type=checkbox]{ accent-color:var(--acc); width:13px; height:13px; flex:none; margin:0 }
.clase i{
  width:11px; height:11px; border-radius:2px; flex:none;
  border:1px solid rgba(255,255,255,.22);
}

.ficha-clase{
  margin:0 0 8px; font-size:12.5px; font-weight:600;
  letter-spacing:.01em;
}

/* ============================================================================
   Grupos plegables del panel   (v0.9)
   ========================================================================== */

.grupo{ border-top:1px solid var(--linea); padding:10px 0 2px; margin:0 }
.grupo:first-of-type{ margin-top:12px }

.grupo > summary{
  cursor:pointer; list-style:none;
  font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tx-2); padding:2px 0 8px 16px; position:relative;
  transition:color .12s;
}
.grupo > summary::-webkit-details-marker{ display:none }
.grupo > summary:hover{ color:var(--acc) }
.grupo > summary:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:3px }

/* Triángulo propio: gira al abrir */
.grupo > summary::before{
  content:""; position:absolute; left:2px; top:50%;
  width:0; height:0; margin-top:-6px;
  border-left:4px solid currentColor;
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
  transition:transform .15s;
}
.grupo[open] > summary::before{ transform:rotate(90deg); transform-origin:2px 3.5px }
.grupo[open] > summary{ color:var(--acc) }

.grupo > summary + *{ margin-top:2px }
.grupo .nota{ margin-bottom:4px }

/* ============================================================================
   Ámbitos propios   (v0.10)
   ========================================================================== */

.amb-titulo{
  margin:8px 0 2px; font-size:11.5px; font-weight:600; color:var(--tx);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.amb-sel-n{ margin:0 0 8px; font-size:10.5px; color:var(--acc) }

.dos{ display:flex; gap:8px; align-items:flex-end }
.dos > div{ flex:1; min-width:0 }
.dos > input{ flex:1; min-width:0 }
.dos > .btn{ flex:none }

#amb-form input[type=text],
#amb-form select,
#amb-form textarea,
#amb-clave-caja input{
  width:100%; font:inherit; font-size:12px;
  background:#0A0F0E; color:var(--tx);
  border:1px solid var(--linea); border-radius:4px; padding:6px 8px;
}
#amb-form textarea{ resize:vertical; line-height:1.45; font-size:11.5px }
#amb-form input:focus, #amb-form select:focus,
#amb-form textarea:focus, #amb-clave-caja input:focus{
  outline:none; border-color:var(--acc);
}
#amb-form select{ appearance:none; cursor:pointer }

.botones{ display:flex; gap:6px; margin-top:10px }
.botones .btn{ flex:1; padding:6px 8px; font-size:11.5px }
.btn.acc{ background:var(--acc); color:#0A0F0E; border-color:var(--acc); font-weight:600 }
.btn.acc:hover{ filter:brightness(1.12); color:#0A0F0E }
.btn.peligro{ color:var(--err); border-color:#4A2A24 }
.btn.peligro:hover{ border-color:var(--err); color:var(--err) }

#amb-clave-caja{ margin:10px 0 4px; padding-top:10px; border-top:1px solid var(--linea) }

#amb-lista{ display:flex; flex-direction:column; gap:3px; margin:12px 0 4px }
.amb-fila{
  display:flex; align-items:center; gap:7px; width:100%;
  background:none; border:1px solid transparent; border-radius:4px;
  padding:5px 6px; cursor:pointer; text-align:left;
  color:var(--tx); font:inherit; font-size:11.5px;
}
.amb-fila:hover{ border-color:var(--linea); background:var(--panel-2) }
.amb-fila:focus-visible{ outline:2px solid var(--acc); outline-offset:1px }
.amb-fila i{ width:8px; height:8px; border-radius:50%; flex:none }
.amb-fila span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.amb-fila em{ font-style:normal; font-size:10px; color:var(--tx-2); flex:none }
.amb-vacio{ margin:0; font-size:10.5px; color:var(--tx-2); font-style:italic }

/* ============================================================================
   Ficha de sector: globo y editor   (v0.11)
   ========================================================================== */

.ficha-sector{ max-height:400px }
.ficha-estado{ margin:0 0 10px; font-size:10.5px; letter-spacing:.04em }
.ficha-bloque{
  margin:12px 0 4px; font-size:9.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tx-2);
  border-top:1px solid var(--linea); padding-top:8px;
}
.ficha-bloque:first-of-type{ border-top:none; padding-top:0; margin-top:0 }
.ficha-pie{ display:flex; gap:6px; margin-top:14px; padding-top:10px; border-top:1px solid var(--linea) }
.ficha-pie .btn{ flex:1; font-size:11px; padding:6px 8px }

/* --- Ventana del editor --- */
.modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,10,9,.72); backdrop-filter:blur(2px);
  padding:20px;
}
.modal[hidden]{ display:none }
.modal-caja{
  width:min(620px, 100%); max-height:min(88vh, 900px);
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--linea); border-radius:7px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);
  overflow:hidden;
}
.modal-cab{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 18px 13px; border-bottom:1px solid var(--linea); background:var(--panel-2);
}
.modal-et{
  margin:0 0 3px; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tx-2);
}
.modal-cab h2{ margin:0; font-size:16px; font-weight:600; color:var(--tx) }
.modal-x{
  flex:none; width:26px; height:26px; line-height:1;
  background:none; border:1px solid var(--linea); border-radius:4px;
  color:var(--tx-2); font-size:17px; cursor:pointer;
}
.modal-x:hover{ border-color:var(--err); color:var(--err) }

.modal-cuerpo{ padding:14px 18px 18px; overflow-y:auto; scrollbar-width:thin }
.modal-cuerpo::-webkit-scrollbar{ width:9px }
.modal-cuerpo::-webkit-scrollbar-thumb{ background:var(--linea); border-radius:5px }

.fi-bloque{
  margin:16px 0 8px; font-size:10px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--acc);
}
.fi-bloque:first-child{ margin-top:0 }

.rejilla{ display:grid; gap:9px }
.rejilla.c1{ grid-template-columns:1fr }
.rejilla.c3{ grid-template-columns:repeat(3, 1fr) }
.rejilla.c4{ grid-template-columns:repeat(4, 1fr) }
@media (max-width:620px){
  .rejilla.c3, .rejilla.c4{ grid-template-columns:repeat(2, 1fr) }
}

.rejilla label{
  display:flex; flex-direction:column; gap:4px; min-width:0;
  font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--tx-2);
}
.rejilla label.oculta-et{ gap:0 }
.rejilla input, .rejilla textarea{
  width:100%; font:inherit; font-size:12.5px; text-transform:none; letter-spacing:0;
  background:#0A0F0E; color:var(--tx);
  border:1px solid var(--linea); border-radius:4px; padding:7px 9px;
}
.rejilla textarea{ resize:vertical; line-height:1.45 }
.rejilla input:focus, .rejilla textarea:focus{ outline:none; border-color:var(--acc) }
.rejilla input::placeholder, .rejilla textarea::placeholder{ color:#4E5B57 }

.modal-pie{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid var(--linea); background:var(--panel-2);
}
.modal-pie .msg{ flex:1; min-width:120px; margin:0 }
.modal-pie .botones{ margin:0; flex:none }
.modal-pie .botones .btn{ padding:7px 16px; font-size:12px }

/* ============================================================================
   Ficha flotante   (v0.12)
   Panel arrastrable. Sustituye a los globos anclados: se aparta a un lado y
   deja ver el sector mientras se consultan los datos.
   ========================================================================== */

.flot{
  position:absolute; z-index:22;
  width:340px; max-width:calc(100vw - 28px);
  max-height:calc(100% - 90px);
  display:flex; flex-direction:column;
  background:rgba(16,24,23,.96); border:1px solid var(--linea); border-radius:6px;
  box-shadow:0 16px 44px -18px rgba(0,0,0,.92);
  backdrop-filter:blur(3px);
  overflow:hidden;
}
.flot[hidden]{ display:none }
.flot.arrastrando{ box-shadow:0 22px 56px -18px rgba(0,0,0,.95); border-color:var(--acc) }

.flot-cab{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:10px 12px 9px; background:var(--panel-2); border-bottom:1px solid var(--linea);
  cursor:grab; touch-action:none; user-select:none;
}
.flot.arrastrando .flot-cab{ cursor:grabbing }
.flot-tit{ min-width:0 }
.flot-et{
  margin:0 0 2px; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tx-2);
}
.flot-cab h2{
  margin:0; font-size:13.5px; font-weight:600; color:var(--tx);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.flot-x{
  flex:none; width:22px; height:22px; line-height:1;
  background:none; border:1px solid var(--linea); border-radius:4px;
  color:var(--tx-2); font-size:15px; cursor:pointer;
}
.flot-x:hover{ border-color:var(--err); color:var(--err) }

.flot-cuerpo{
  padding:12px 14px 14px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--linea) transparent;
}
.flot-cuerpo::-webkit-scrollbar{ width:8px }
.flot-cuerpo::-webkit-scrollbar-thumb{ background:var(--linea); border-radius:4px }
.flot-cuerpo .ficha{ max-height:none; overflow:visible }

@media (max-width:720px){
  .flot{ width:calc(100vw - 20px); max-height:52% }
}