/* --- General Body --- */
body {
  margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff; background-color: #333;
  height: 100vh; overflow: hidden;
}

/* --- Map & Sidebar Layout --- */
#map {
  position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1;
  background-image: url('../img/sevilla-bg.jpg');
  background-size: cover; background-position: center;
}
#sidebar {
  position: absolute; top: 0; left: 0; width: 420px; height: 100%;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border-right: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  z-index: 1000; overflow-y: auto; transition: transform 0.3s ease-in-out;
}
#sidebar.collapsed { transform: translateX(-100%); }
.sidebar-content { padding: 25px; }
h1.title { font-size: 2.2em; text-align: center; margin-bottom: 15px; color: #FFD700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }

/* --- Botón Hamburguesa --- */
#toggle-sidebar-btn {
  position: absolute; top: 15px; left: 15px; z-index: 1001; font-size: 1.5rem; width: 50px;
  height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* --- Responsive para Móvil --- */
@media (max-width: 768px) {
  #sidebar { width: 100%; border-right: none; }
  #toggle-sidebar-btn { top: auto; bottom: 20px; right: 20px; left: auto; }
  #sidebar { transform: translateX(-100%); }
  #sidebar:not(.collapsed) { transform: translateX(0); }
}

/* --- Botones --- */
.btn { transition: all 0.2s ease-out; }
.btn-primary:disabled { background: #555; border-color: #555; cursor: not-allowed; }
.btn-secondary { background-color: #6c757d; border-color: #6c757d; }
.btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

/* --- Secciones y Filtros --- */
.filter-section {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.form-label {
    font-weight: 600;
    margin-bottom: 12px;
    color: #FFD700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-filter {
  background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff; border-radius: 20px; padding: 5px 12px; font-size: 0.9em;
}
.btn-filter.active { background-color: #FFC107; color: #333; font-weight: bold; border-color: #FFD700; }

/* --- NUEVO: ESTILOS DE CHECKBOX PERSONALIZADOS --- */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 10px;
}
.form-check {
  padding-left: 0; /* Reseteamos el padding de Bootstrap */
}
.form-check input[type="checkbox"] {
  display: none; /* Ocultamos el checkbox original */
}
.form-check label {
  position: relative;
  padding-left: 32px; /* Espacio para nuestro checkbox falso */
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}
.form-check label:hover {
  color: #FFD700;
}

/* El cuadro del checkbox */
.form-check label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease-in-out;
}

/* El checkmark (la marca de 'visto') */
.form-check label::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0); /* Oculto por defecto */
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

/* Estilos cuando el checkbox está seleccionado */
.form-check input[type="checkbox"]:checked + label::before {
  background-color: #FFD700;
  border-color: #FFC107;
}
.form-check input[type="checkbox"]:checked + label::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}

/* --- Leyenda y Detalles --- */
#route-legend h2 { font-size: 1.5em; color: #FFD700; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 15px; margin-top: 15px; }
.route-item { display: flex; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 12px; margin-bottom: 10px; cursor: pointer; transition: background 0.2s ease; }
.route-item:hover { background: rgba(255, 255, 255, 0.25); }
.route-number { font-size: 1.5em; font-weight: bold; color: #f09433; margin-right: 15px; }
.route-info h3 { font-size: 1.1em; margin: 0; font-weight: bold; display: flex; align-items: center; }
.route-info p { font-size: 0.9em; margin: 5px 0 0 0; opacity: 0.8; }
.item-details { display: flex; flex-wrap: wrap; gap: 15px; font-size: 0.8em; margin-top: 8px; opacity: 0.9; }
.occupancy-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 8px; border: 1px solid rgba(255,255,255,0.5); }
.occupancy-dot.green { background-color: #2ecc71; }
.occupancy-dot.yellow { background-color: #f1c40f; }
.occupancy-dot.red { background-color: #e74c3c; }

/* --- Popups y otros --- */
.leaflet-popup-content-wrapper { background: rgba(255,255,255,0.95); backdrop-filter: blur(5px); border-radius: 12px; }
.leaflet-popup-content h3 { color: #dc2743; }
.nav-link { background-color: #28a745; color: white !important; text-decoration: none; padding: 8px 12px; border-radius: 5px; display: inline-block; margin-top: 10px; }
.popup-details { margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; font-size: 0.9em; color: #555; }