:root {
  --azul: #1e90ff;
  --rojo: #ff0000;
  --gris: #9e9e9e;
  --violeta: #7b2ff7;
  --tinta: #16202b;
  --tenue: #5d6b7a;
  --borde: #dfe5ec;
  --fondo: #f4f6f9;
  --panel: #ffffff;
  --sombra: 0 1px 3px rgba(22, 32, 43, .12), 0 6px 20px rgba(22, 32, 43, .08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}

/* ---------- estructura ---------- */

#app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  /* En el celular 100vh es la altura con la barra del navegador oculta, asi que
     el alto real queda corto. dvh sigue al viewport visible. */
  height: 100dvh;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  z-index: 500;
}

header h1 {
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.2;
}

header h1 small {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  color: var(--tenue);
}

.crece { flex: 1; }

#contenido {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 0;
}

/* El mapa se posiciona absoluto dentro de #zona-mapa en vez de usar
   height:100%. Un porcentaje se mide contra la altura del padre, y #zona-mapa
   no tiene altura propia: la recibe de la fila del grid. Varios navegadores
   moviles resuelven ese porcentaje como 0 y el mapa queda invisible.
   Con inset:0 la altura sale del bloque contenedor y siempre es definida.
   z-index:0 encierra los panes de Leaflet (que llegan a 700) para que no
   tapen al control de capas flotante. */
#zona-mapa { position: relative; min-height: 0; overflow: hidden; }
#mapa { position: absolute; inset: 0; z-index: 0; background: #dfe5ec; }

/* ---------- control de capas flotante sobre el mapa ---------- */

#control-capas {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 600;                 /* por encima de los controles de Leaflet (400) */
  width: 250px;
  max-width: calc(100% - 20px);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--sombra);
  overflow: hidden;
}

#btn-capas {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 9px 12px;
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
}
#btn-capas .flecha { margin-left: auto; transition: transform .15s; }
#btn-capas[aria-expanded="false"] .flecha { transform: rotate(-90deg); }

#cuerpo-capas {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--borde);
  max-height: min(60vh, 460px);
  overflow-y: auto;
}
#cuerpo-capas[hidden] { display: none; }

.grupo-capas + .grupo-capas { margin-top: 12px; }
.titulo-capas {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tenue);
  font-weight: 700;
  margin: 10px 0 6px;
}
.grupo-capas label {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; margin-bottom: 5px; cursor: pointer;
}

.leyenda.sub {
  margin: 0 0 8px 24px;
  font-size: .74rem;
  color: var(--tenue);
}
.leyenda.sub div { margin-bottom: 3px; }
.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1.5px solid #fff;
         box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.leyenda .rampa { display: flex; gap: 0; height: 10px; border-radius: 3px; overflow: hidden; }
.leyenda .rampa i { flex: 1; }
.leyenda .rampa-txt { justify-content: space-between; font-size: .68rem; margin-top: 2px; }

@media (max-width: 860px) {
  #control-capas { width: 210px; top: 8px; right: 8px; }
}

#panel {
  background: var(--panel);
  border-left: 1px solid var(--borde);
  overflow-y: auto;
  padding: 14px;
  min-height: 0;
}

@media (max-width: 860px) {
  #contenido { grid-template-columns: 1fr; grid-template-rows: 52vh 1fr; }
  #contenido { grid-template-rows: 52dvh 1fr; }
  #panel { border-left: none; border-top: 1px solid var(--borde); }
  header h1 small { display: none; }
}

/* ---------- controles ---------- */

button {
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--panel);
  padding: 8px 14px;
  transition: background .15s, border-color .15s;
}

button:hover:not(:disabled) { background: #eef2f7; }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primario {
  background: var(--tinta);
  color: #fff;
  border-color: var(--tinta);
}
button.primario:hover:not(:disabled) { background: #29394b; }

button.apoyo {
  background: #eaf4ff;
  border-color: #b9dbff;
  color: #0b5ed7;
  font-weight: 600;
  padding: 6px 12px;
  font-size: .85rem;
}
button.apoyo.activo {
  background: #0b5ed7;
  border-color: #0b5ed7;
  color: #fff;
}

/* ---------- listado ---------- */

.seccion-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tenue);
  margin: 18px 0 8px;
  font-weight: 700;
}
.seccion-titulo:first-child { margin-top: 0; }

.maestro {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: .74rem; cursor: pointer;
}

/* ---------- indicador de capilaridad ---------- */

#indicador {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #f7fbff, var(--panel));
}
.ind-cabeza { display: flex; align-items: baseline; gap: 10px; }
.ind-num {
  font-size: 1.75rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ind-pct { font-size: 1rem; font-weight: 600; color: #0b5ed7; }

.ind-barra {
  height: 8px; border-radius: 999px; background: #e7edf4;
  margin: 10px 0 8px; overflow: hidden;
}
.ind-barra i {
  display: block; height: 100%; width: 0;
  border-radius: 999px; background: #0b5ed7;
  transition: width .35s ease;
}
.ind-pie { font-size: .78rem; color: var(--tenue); line-height: 1.45; }
.ind-nota { font-size: .75rem; color: var(--tenue); margin-top: 8px; }
.ind-nota summary { cursor: pointer; font-weight: 600; }
.ind-nota[open] summary { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ind-barra i { transition: none; }
}

/* ---------- la lista agrupada por zona (campo Ubicacion) ----------
   Las clases siguen diciendo 'corredor' por historia: antes se agrupaba por el
   campo Tramo. El estilo es el mismo, solo cambio el criterio de agrupacion. */

/* Fila de tramo: la calle arriba, el destino abajo en chico. */
/* El recorte con puntos suspensivos va en cada linea, no en el contenedor:
   con dos hijos en bloque, el ellipsis del padre no llega a aplicarse. */
.ubicacion .calle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ubicacion .referencia {
  display: block;
  font-size: .78rem;
  color: var(--tenue);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corredor { border-bottom: 1px solid var(--borde); }
.corredor:last-child { border-bottom: none; }

.corredor > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 8px 8px 4px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}
.corredor > summary::-webkit-details-marker { display: none; }
.corredor > summary:hover { background: #f3f7fb; }

/* flecha propia, para poder ubicarla antes del tilde */
.corredor > summary::before {
  content: '▸';
  flex: none;
  width: 12px;
  color: var(--tenue);
  transition: transform .15s ease;
}
.corredor[open] > summary::before { transform: rotate(90deg); }

.corredor > summary input[type=checkbox] { flex: none; cursor: pointer; }

.nombre-corredor {
  flex: 1;
  min-width: 0;
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta-corredor {
  flex: none;
  font-size: .74rem;
  color: var(--tenue);
  white-space: nowrap;
}

/* las filas del corredor se sangran para que se lea la jerarquia */
.corredor > .fila-tramo { margin-left: 21px; }

@media (prefers-reduced-motion: reduce) {
  .corredor > summary::before { transition: none; }
}

/* ---------- filas de tramos (estilo arbol de capas) ---------- */

.fila-tramo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
.fila-tramo:hover { background: #f3f7fb; }
.fila-tramo.resaltada { border-color: var(--tinta); background: #f3f7fb; }
.fila-tramo input[type=checkbox] { flex: none; cursor: pointer; }

.fila-tramo .ubicacion {
  flex: 1;
  min-width: 0;
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila-tramo.oculto .ubicacion { color: var(--tenue); opacity: .6; }
.fila-tramo .conteo { flex: none; min-width: 26px; text-align: right; }
.fila-tramo button.apoyo { flex: none; }

.tarjeta {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.tarjeta:hover { border-color: #b9c6d4; background: #fafcfe; }
.tarjeta.resaltada { border-color: var(--tinta); box-shadow: var(--sombra); }

.tarjeta .cuerpo { flex: 1; min-width: 0; }
.tarjeta .nombre { font-weight: 600; font-size: .92rem; }
.tarjeta .meta { font-size: .78rem; color: var(--tenue); margin-top: 2px; }
.tarjeta .acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.conteo { font-size: .78rem; color: var(--tenue); white-space: nowrap; }
.conteo b { color: var(--tinta); font-size: .95rem; }

.pastilla {
  display: inline-block;
  font-size: .68rem;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
  vertical-align: middle;
}
.pastilla.en_analisis { background: #ffe5e5; color: #b40000; }
.pastilla.aprobada    { background: #e3f0ff; color: #0b5ed7; }
.pastilla.desaprobada { background: #eceff2; color: #5d6b7a; }
.pastilla.pendiente   { background: #fff3d6; color: #8a6100; }

/* ---------- leyenda ---------- */

.leyenda { font-size: .8rem; }
.leyenda div { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.muestra { width: 24px; height: 4px; border-radius: 2px; flex: none; }
.muestra.punteada { height: 0; border-top: 4px dashed var(--violeta); }

/* ---------- dibujo de propuestas ---------- */

#barra-dibujo {
  display: none;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: #fff8e6;
  border: 1px solid #f0d9a0;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: .85rem;
}
#barra-dibujo.visible { display: flex; flex-wrap: wrap; }

#form-propuesta { display: none; }
#form-propuesta.visible { display: block; }
#form-propuesta input, #form-propuesta textarea {
  width: 100%; font: inherit; padding: 8px 10px;
  border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 8px;
}
#form-propuesta textarea { resize: vertical; min-height: 70px; }

.aviso {
  font-size: .8rem; color: var(--tenue);
  background: var(--fondo); border-radius: 8px; padding: 10px 12px;
}
.aviso.error { background: #ffecec; color: #9b1c1c; }
.aviso.ok { background: #e6f7ed; color: #0f6b3a; }

.usuario { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.usuario img { width: 26px; height: 26px; border-radius: 50%; }

.leaflet-popup-content { font-size: .85rem; line-height: 1.45; }
.leaflet-popup-content b { display: block; margin-bottom: 3px; }
.cargando { color: var(--tenue); font-size: .85rem; padding: 8px 0; }