/* ====== TOP ACTIONS (botonera) ====== */

/* Base común: aplica a #buttons y #buttons-sist */
.top-actions-wrap{
  position: absolute;
  top: 0;
  z-index: 4000; /* por encima de leaflet */
}

/* Toggle oculto por defecto (desktop/tablet) */
.top-actions-wrap .top-actions-toggle{
  display: none;
}

/* Panel visible por defecto (desktop/tablet) */
.top-actions-wrap .top-actions{
  display: block;
}

/* ---- Ajustes generales internos (para que no “estire” raro) ---- */
.top-actions-wrap .top-actions{
  width: auto;
}


/* Contenedor en desktop: mantiene tu comportamiento previo */
.top-actions-wrap{
  position: absolute;
  top: 0;
  z-index: 3000;
}

/* Toggle oculto por defecto */
.top-actions-wrap .top-actions-toggle{
  display: none;
}

/* Panel visible por defecto (desktop/tablet) */
.top-actions-wrap .top-actions{
  display: block;
}


/* Botonera de sistemas */
#buttons-sist.top-actions-wrap{
  left: 40px;     /* ajusta a tu gusto */
  top: 70px;      /* ajusta a tu gusto */
}


/* ====== MÓVIL ====== */
@media (max-width: 768px){
div.botonTipo {
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle;
    
}
#buttons {
    top: 50px;}

  .top-actions-wrap{
    left: 140px;
    top: 50px;
    margin: 0 !important;
    width: auto !important;
  }

  /* Mostrar hamburguesa */
  .top-actions-wrap .top-actions-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
    cursor: pointer;
  }

  /* OCULTAR panel SIEMPRE en móvil (blindado) */
  .top-actions-wrap .top-actions{
    display: none !important;

    margin-top: 8px;
    background: rgba(52,61,63,.92);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,.25);
    padding: 20px;

    max-height: 55vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Mostrar panel solo si está abierto */
  .top-actions-wrap.is-open .top-actions{
    display: block !important;
  }

  /* Compactar layout interno en móvil */
  .top-actions-wrap .tipo{
    display: block !important;
    margin: 6px 0 !important;
  }

  /* Quitar separador vacío */
  .top-actions-wrap .tipo-sep{
    display: none !important;
  }
}

/* POSICIONAMIENTO BÁSICO PARA EL DE SISTEMAS */
#buttons-sist{
  position: absolute;
  top: 70px;        /* ajusta */
  left: 40px;       /* ajusta */
  z-index: 4000;    /* por encima de leaflet */
}

/* por defecto visible en desktop */
#buttons-sist .top-actions{ display:block; }
#buttons-sist .top-actions-toggle{ display:none; }

/* móvil: hamburguesa + desplegable */
@media (max-width:768px){
  #buttons-sist .top-actions-toggle{ display:inline-flex; }
  #buttons-sist .top-actions{ display:none; width:260px; }
  #buttons-sist.is-open .top-actions{ display:block; }
}