body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #f4f4f4;
  overflow: hidden;
}

.principal {
  display: flex;
  height: 100vh;
  width: 100%;
}

#map {
  flex: 1;
}


/* ----------------- INPUTS ESTÁNDAR ----------------- */
.control-estandar {
  width: 240px;
  height: 42px;
  padding: 0 10px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.control-estandar:focus {
  outline: none;
  border-color: #007BFF;
}

/* ----------------- INPUT CON BOTÓN ----------------- */
.input-con-boton {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  height: 42px;
}

.input-con-boton input {
  width: auto;
  height: 100%;
  padding-right: 60px;
  padding-left: 10px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

#btn-geocode,
#clearDireccion {
  position: absolute;
  top: 7px;
  height: 28px;
  width: 28px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

#btn-geocode {
  right: 5px;
}

#clearDireccion {
  right: 35px;
  display: none; /* oculto por defecto */
}

#btn-geocode:hover,
#clearDireccion:hover,
#btn-toggle-cluster {
  background-color: #e0e0e0;
  color: #333;
}

/* ----------------- BOTONES DE ACCIÓN ----------------- */
#btn-tema,
#btn-cercanos,
#btn-restaurar,
#btn-toggle-cluster {
  height: 42px;
  width: 42px;
  background-color: #e9ecef;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#btn-tema:hover,
#btn-cercanos:hover,
#btn-restaurar:hover
,#btn-toggle-cluster:hover {
  background-color: #d6d8db;
}

/* ----------------- ICONOS ----------------- */
.fa-sun {
  color: #ffc947;
}
.custom-fa-icon {
  text-align: center;
  line-height: 1;
  font-size: 2rem;
  color: #ffc947;
}

/* ----------------- LISTADO DE COMERCIOS ----------------- */
#comercioList {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex-grow: 1;
  background-color: #fafafa;
}

#comercioList li {
  padding: 14px 18px;
  border-bottom: 1px solid #e1e1e1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#comercioList li:hover {
  background-color: #f1f3f5;
}

/* ----------------- CONTROLES SUPERIORES ----------------- */
#top-controls {
  width: auto;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  display: flex;
  gap: 10px;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ----------------- LISTADO INFERIOR ----------------- */
#bottom-listado {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 8px;
  border-radius: 10px;
  max-width: 95%;
  overflow-x: auto;
}

#comercioList {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 40px 0;
  flex-direction: row;
  overflow-x: auto;
}

#comercioList li {
  min-width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
  border-radius: 6px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* ----------------- CLUSTER ICONS ----------------- */
.mi-cluster-icon {
  background-color: #007BFF;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  border: 2px solid white;
}

/* ----------------- MARCADORES ----------------- */
.marker-destacado {
  transform: scale(1.4);
  filter: brightness(1.2);
  z-index: 1000;
}

.marker-apagado {
  opacity: 1.3;
  filter: grayscale(20%);
}

/* ----------------- WAVE DECORATIVA ----------------- */
.wave {
  width: 100%;
  height: auto;
  position: absolute;
  top: 75%;
  z-index: 99999;
}

/* ----------------- TEMA OSCURO ----------------- */
.dark-theme {
  background-color: #1e1e1e;
  color: #f1f1f1;
}

.dark-theme #sidebar {
  background-color: #2c2c2c;
  border-right: 1px solid #444;
}

.dark-theme .sidebar-header {
  background-color: #2a2a2a;
  border-bottom: 1px solid #444;
}

.dark-theme .control-estandar,
.dark-theme .input-con-boton input {
  background-color: #3a3a3a;
  color: #f1f1f1;
  border-color: #555;
}

.dark-theme .control-estandar::placeholder,
.dark-theme .input-con-boton input::placeholder {
  color: #bbb;
}

.dark-theme #btn-tema,
.dark-theme #btn-cercanos,
.dark-theme #btn-restaurar,
.dark-theme #btn-toggle-cluster {
  background-color: #444;
  color: #f1f1f1;
}

.dark-theme #comercioList {
  background-color: #2a2a2a;
}

.dark-theme #comercioList li {
  background-color: #2c2c2c;
  color: #f1f1f1;
  border-color: #444;
}

.dark-theme #comercioList li:hover {
  background-color: #3a3a3a;
}

.dark-theme #top-controls,
.dark-theme #bottom-listado {
  background-color: rgba(30, 30, 30, 0.95);
}

#comercioList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow-y: auto;
  flex-grow: 1;
}

#comercioList li {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#comercioList li:hover {
  background-color: #f1f1f1;
}

.btn-cerrar-sidebar {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.btn-cerrar-sidebar:hover {
  color: #333;
}

.dark-theme #sidebar-derecho {
  background-color: #2c2c2c;
  color: #f1f1f1;
  border-left: 1px solid #444;
}

.dark-theme #comercioList li {
  background-color: #3a3a3a;
  border-color: #444;
  color: #f1f1f1;
}

.dark-theme #comercioList li:hover {
  background-color: #444;
}
/* Estilo para los marcadores que no coinciden */
.leaflet-marker-icon.opacidad-reducida {
  opacity: 0.1 !important;
  transform: scale(0.2);
  transition: all 0.3s ease;
  color: #1e1e1e;
}

/* Estilo para los marcadores resaltados */
.leaflet-marker-icon.resaltado {
  opacity: 1 !important;
  transform: scale(1);
  transition: all 0.3s ease;
  color: #0067d5;
}

#btn-toggle-cluster {
  font-size: 16px;
  cursor: pointer;
}
/* ---- Desktop (sin media queries activas) ---- */
#top-controls {
  display: flex;
  flex-direction: row;    /* asegurar fila */
  flex-wrap: nowrap;      /* que no salte de línea */
  align-items: center;
  gap: 10px;
}

/* el contenedor de botones debe ser fila también */
#top-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* por si quedó algún margen-top auto de mobile, lo anulamos en desktop */
#top-actions button,
#btn-cercanos,
#btn-toggle-cluster,
#btn-restaurar,
#btn-tema,
#btn-toggle-sidebar {
  margin-top: 0 !important;
  display: inline-flex;   /* asegura alineación limpia */
}

/* tamaños típicos de los campos en desktop (ajusta a gusto) */
#searchBox,
.input-con-boton,
#rubroFilter {
  width: 280px;           /* o el ancho que uses en desktop */
}
/* Centrar íconos en los botones */
#btn-cercanos,
#btn-toggle-cluster,
#btn-restaurar,
#btn-tema,
#btn-toggle-sidebar {
  display: inline-flex;           /* usar flexbox */
  align-items: center;            /* centrar vertical */
  justify-content: center;        /* centrar horizontal */
  padding: 0;                     /* evitar que el padding desplace el icono */
}

/* Responsive general */
@media (max-width: 1366px) {
  #top-controls {
    width: 90%;
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px;
    top: 10px;
  }

  #top-controls input,
  #top-controls select,
  #top-controls button,
  #btn-toggle-sidebar {
    height: 38px;
    font-size: 13px;
  }

  .control-estandar {
    width: 100%;
  }
}

/* ===== Menú responsive corregido ===== */
@media (max-width: 768px) {
  #sidebar-derecho {
    position: absolute;
    bottom: 0; /* anclado abajo */
    top: auto; /* ignoramos el top anterior */
    height: 40%; /* ocupa el 40% de alto, ajusta a gusto */
    max-height: 300px; /* altura máxima opcional */
    border-radius: 12px 12px 0 0; /* bordes redondeados arriba */
    overflow-y: auto;
    background-color: #fff;
  }

  .dark-theme #sidebar-derecho {
    background-color: #2c2c2c;
  }
  /* Poner el menú en el flujo arriba y en columna */
  #top-controls {
    position: static;      /* deja de superponerse al mapa */
    transform: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* padding lateral para que inputs no toquen los bordes */
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    z-index: 1;
    left: 0;
    right: 0;
    padding: 10px 0;
  }

  /* Inputs/select al 100% reales (con box-sizing) */
  #searchBox,
  #rubroFilter,
  .input-con-boton,
  .input-con-boton input,
  .control-estandar {
    width: 300px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* input con botones de ícono: mantener margen interno y espacio para íconos */
  .input-con-boton input {
    padding-left: 12px;   /* margen interno izq */
    padding-right: 60px;  /* espacio para geocode + clear */
    height: 40px;
  }

  /* Select y buscar con la misma sensación de ancho y padding */
  #searchBox,
  #rubroFilter {
    height: 40px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Botones: misma talla y todos al fondo del menú */
  #btn-cercanos,
  #btn-toggle-cluster,
  #btn-restaurar,
  #btn-tema,
  #btn-toggle-sidebar {
    width: 40px;
    height: 40px;
    font-size: 16px;
    border-radius: 8px;
    /* ubicarlos como última "fila" del menú */
    order: 99;
  }

  /* Truco: empujar la botonera al final con margin-top:auto
     (aplicar al PRIMER botón de la serie; los demás lo siguen) */
  #btn-cercanos { margin-top: auto; }

  /* mostrar los botones en una sola línea */
  #top-controls {
    /* seguimos en columna, pero los botones quedan al final uno al lado del otro
       porque son elementos consecutivos con order:99 */
  }
  
  /* El mapa ocupa el resto del alto, sin quedar tapado */
  .principal { 
    flex-direction: column; 
    height: 100vh;
  }
  #map {
    flex: 1 1 auto;
    height: auto;
  }
}

/* móviles muy pequeños: leve ajuste */
@media (max-width: 380px) {
  #top-controls { padding:10px 0; gap: 8px; }
  #btn-cercanos,
  #btn-toggle-cluster,
  #btn-restaurar,
  #btn-tema,
  #btn-toggle-sidebar { width: 36px; height: 36px; font-size: 14px; }
}

/* --- Sidebar con altura fija y lista scrolleable --- */
#sidebar-derecho {
  position: absolute;            /* o fixed, según tu layout */
  right: 12px;
  top: 200px;
  width: min(380px, 90vw);
  height: 480px;                 /* << altura estática (ajustá a gusto) */
  background: var(--panel-bg, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 500;                  /* encima del mapa */
  overflow: hidden;              /* oculto el overflow del contenedor */
  display: flex;                 /* clave: para separar header/lista */
  flex-direction: column;
}

/* si tenés un header/controles dentro del sidebar (buscador, filtros, etc.) */
#sidebar-derecho .controles,
#sidebar-derecho .sidebar-header {
  flex: 0 0 auto;
  padding: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* la lista toma TODO el alto restante y scrollea */
#comercioList {
  list-style: none;
  margin: 0;
  padding: 12px;
  flex: 1 1 auto;               /* se expande para ocupar el resto */
  overflow-y: auto;              /* << scroll vertical */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* estética de ítems */
#comercioList li {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  cursor: pointer;
}
#comercioList li:last-child { border-bottom: none; }

#comercioList .li-titulo { font-weight: 600; margin-bottom: 2px; }
#comercioList .li-sub    { font-size: 0.92rem; opacity: .85; }

/* botón cerrar/abrir puede mantener su estilo; solo asegurate que no rompa el flow */
#sidebar-derecho.oculto { display: none; }

/* opcional: altura más baja en móviles */
@media (max-width: 768px) {
  #sidebar-derecho {
    height: 70vh;               /* mantiene “estática” respecto a la ventana */
    right: 8px;
    left: 8px;                  /* si querés que tome casi todo el ancho */
    width: auto;
  }
}