/* Hoja de estilos global del frontend: layout, paneles, listas y marcadores. */
html,body{
  height:100%;
  margin:0;
  font-family:Arial, system-ui;
  background:#0b0b0b;
  color:#e6e6e6;
  overflow:hidden;
}

.app-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:56px;
  display:flex;
  align-items:center;
  padding:0 16px;
  background:#0c0c0c;
  border-bottom:1px solid #1f1f1f;
  z-index:5000;
}

.main-nav{
  display:flex;
  gap:20px;
}

.main-nav a{
  color:#aaa;
  text-decoration:none;
  font-weight:600;
}

.main-nav a.active{
  color:#fff;
}

#map{
  position:absolute;
  top:56px;
  right:0;
  bottom:0;
  left:420px;
}

.panel{
  position:absolute;
  top:68px;
  left:12px;
  bottom:12px;
  width:390px;
  display:flex;
  flex-direction:column;
  background:#0f0f0f;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.8);
  border:1px solid #1f1f1f;
  z-index:1000;
  overflow:hidden;
}

.panel-body{
  flex:1;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
}

h2{
  margin:0;
  font-size:20px;
}

input,select,button{
  width:100%;
  padding:11px 12px;
  margin:0;
  border-radius:10px;
  border:1px solid #2a2a2a;
  background:#141414;
  color:#e6e6e6;
  box-sizing:border-box;
  font-size:14px;
}

input::placeholder{
  color:#777;
}

.row{
  display:flex;
  gap:8px;
}

.row>*{
  flex:1;
}

.btn-primary{
  background:#ffffff;
  color:#000;
  border:none;
  font-weight:700;
}

.btn-secondary{
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  color:#ddd;
}

.topbar{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13px;
  min-height:18px;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
}

.dot.ok{background:#00ff88}
.dot.warn{background:#ffcc00}
.dot.err{background:#ff5555}

.muted{
  font-size:12px;
  color:#8f8f8f;
}

/* Estos tabs cambian entre listado y editor sin meter todo junto en el mismo bloque */
.panel-tabs{
  display:flex;
  gap:8px;
}

.panel-tab{
  flex:1;
  background:#151515;
  border:1px solid #2a2a2a;
  color:#bdbdbd;
  font-weight:700;
  cursor:pointer;
}

.panel-tab.active{
  background:#ffffff;
  color:#000;
  border-color:#ffffff;
}

.tab-pane{
  display:none;
  flex-direction:column;
  gap:10px;
}

.tab-pane.active{
  display:flex;
}

/* Caja simple para indicar si estás creando o editando.
   Así el usuario entiende en qué estado está sin leer mucho. */
.subtle-box{
  padding:10px 12px;
  background:#121212;
  border:1px solid #1f1f1f;
  border-radius:10px;
  font-size:13px;
  color:#dcdcdc;
}

.section-card{
  border:1px solid #1f1f1f;
  border-radius:12px;
  background:#121212;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
}

.section-grow{
  min-height:220px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid #1f1f1f;
  background:#111;
  font-size:13px;
  font-weight:700;
}

.mini-badge{
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:#ddd;
}

.stops{
  flex:1;
  overflow:auto;
  background:#121212;
}

.stop{
  padding:10px 12px;
  border-bottom:1px solid #1f1f1f;
  font-size:13px;
}

.empty-box{
  padding:12px;
}

.panel-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.actions{
  margin:0;
}

.list-actions{
  margin-top:2px;
}

.search-wrapper{
  position:relative;
  z-index:2000;
}

.suggestions{
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  margin-top:4px;
  background:#121212;
  border:1px solid #2a2a2a;
  border-radius:10px;
  max-height:220px;
  overflow:auto;
  z-index:5000;
}

.loading{
  padding:10px 12px;
  background:#1a1a1a;
  border-radius:10px;
  font-size:13px;
  animation:pulse 1.4s infinite;
}

@keyframes pulse{
  0%{opacity:.4}
  50%{opacity:1}
  100%{opacity:.4}
}

.info-line{
  font-size:13px;
  color:#b8b8b8;
  padding:0 2px;
}

/* El listado queda separado del editor.
   Aquí luego pintas cards o filas según quieras, pero ya no se ve revuelto. */
.planned-list{
  min-height:260px;
  max-height:520px;
  overflow:auto;
  border:1px solid #1f1f1f;
  border-radius:12px;
  background:#121212;
  display:flex;
  flex-direction:column;
  gap:0;
}

.planned-card{
  padding:12px;
  border-bottom:1px solid #1f1f1f;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.planned-card:last-child{
  border-bottom:none;
}

.planned-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.planned-card-title{
  font-size:14px;
  font-weight:700;
  color:#f1f1f1;
  line-height:1.3;
}

.planned-card-meta{
  font-size:12px;
  color:#9a9a9a;
}

.planned-card-actions{
  display:flex;
  gap:6px;
}

.planned-card-actions button{
  margin:0;
}

.stop-circle{
  background:url("../img/parada.png") center/contain no-repeat;
  color:#000;
  border-radius:0;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

.gps-dot{
  width:40px;
  height:40px;
  border-radius:0;
  background:url("../img/alfiler-de-mapa.png") center/contain no-repeat;
  border:none;
  transform:translate(-30%, -30%);
}

.leaflet-div-icon{
  background:transparent !important;
  border:none !important;
}

@media (max-width: 900px){
  #map{
    left:0;
    top:56px;
    bottom:0;
  }

  .panel{
    top:64px;
    left:8px;
    right:8px;
    width:auto;
    height:58%;
    bottom:auto;
  }

  .planned-list{
    min-height:180px;
    max-height:220px;
  }
}