/* Visor: panel de capas a la izquierda, mapa en el resto de la pantalla. */
html, body.visor { height: 100%; }

body.visor {
  display: grid;
  grid-template-columns: 21rem minmax(0, 1fr);
  overflow: hidden;
  background: var(--papel);
}

.mapa { height: 100%; min-height: 0; background: var(--agua-clara); }

/* ---------------------------------------------------------------- panel */
.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--papel);
  border-right: 1px solid var(--linea);
  z-index: 1100;
}

.panel-cabecera {
  padding: 1.25rem 1.25rem 1rem;
  background: var(--tinta);
  color: var(--papel);
}
.panel-cabecera h1 { font-size: 1.5rem; letter-spacing: 0.01em; }
.panel-cabecera p { margin: 0.2rem 0 0; color: #b9d3d1; font-size: 0.95rem; }

.panel-capas { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.5rem 0 1rem; }

.panel-nota { margin: 1rem 1.25rem; color: var(--tinta-suave); }
.panel-nota.con-error { color: var(--alerta); }

.grupo-titulo {
  margin: 1rem 1.25rem 0.25rem;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}
.grupo-lista { list-style: none; margin: 0; padding: 0; }

/* Cada capa se enciende tocando su propio simbolo de mapa. */
.capa { display: flex; align-items: stretch; border-left: 4px solid transparent; }
.capa.activa { border-left-color: var(--agua); background: var(--niebla); }
.capa:hover { background: var(--niebla); }

.capa-etiqueta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.25rem 0.5rem 1rem;
  cursor: pointer;
}

.capa-casilla { position: absolute; opacity: 0; width: 1px; height: 1px; }
.capa-casilla:focus-visible ~ .capa-textos .capa-nombre { outline: 3px solid var(--junco); outline-offset: 2px; }

.simbolo { flex: none; filter: grayscale(1); opacity: 0.35; transition: opacity 120ms, filter 120ms; }
.capa.activa .simbolo { filter: none; opacity: 1; }

.capa-textos { min-width: 0; display: flex; flex-direction: column; }
.capa-nombre { font-weight: 600; overflow-wrap: anywhere; }
.capa:not(.activa) .capa-nombre { font-weight: 400; }
.capa-detalle { font-size: 0.8125rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.capa.con-error .capa-detalle { color: var(--alerta); }

.capa-encuadrar {
  flex: none;
  width: 2.75rem;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
}
.capa-encuadrar:hover:not(:disabled) { color: var(--agua-oscura); background: var(--agua-clara); }
.capa-encuadrar:disabled { opacity: 0.3; cursor: default; }

.panel-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--linea);
  font-size: 0.9rem;
}
.panel-pie form { margin: 0; }
.panel-usuario { font-weight: 600; flex-basis: 100%; }

.panel-abrir, .panel-cerrar { display: none; }

/* ---------------------------------------------------------------- mapa */
.leaflet-container { font-family: var(--letra); font-size: 0.875rem; }
.leaflet-container a { color: var(--agua-oscura); }
.leaflet-bar a { color: var(--tinta); }
.leaflet-popup-content { margin: 0.8rem 0.9rem; }

.globo h2 { font-size: 1rem; margin-bottom: 0.4rem; color: var(--tinta); }
.globo p { margin: 0; color: var(--tinta-suave); }
.globo table { border-collapse: collapse; width: 100%; }
.globo th, .globo td { padding: 0.2rem 0; text-align: left; vertical-align: top; border-top: 1px solid var(--linea); }
.globo th { padding-right: 0.8rem; font-weight: 400; color: var(--tinta-suave); white-space: nowrap; }
.globo td { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- pantallas chicas */
@media (max-width: 760px) {
  body.visor { grid-template-columns: minmax(0, 1fr); }

  .panel {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(21rem, 88vw);
    transform: translateX(-100%);
    transition: transform 180ms ease-out;
    box-shadow: 0 0 0 100vmax rgba(18, 52, 59, 0);
  }
  body.panel-visible .panel { transform: none; box-shadow: 0 0 0 100vmax rgba(18, 52, 59, 0.45); }

  .panel-abrir {
    display: block;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1000;
    padding: 0.55rem 1rem;
    border: 0;
    border-radius: var(--radio);
    background: var(--tinta);
    color: var(--papel);
    font-weight: 600;
    cursor: pointer;
  }
  .panel-cerrar {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--papel);
    text-decoration: underline;
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .simbolo { transition: none; }
}