/* =============================
       ESTILOS GENERALES DE LA PÁGINA
       ============================= */
html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: Arial;
}

/* Contenedor principal del mapa */
#viewDiv {
    position: absolute;
    top: 0;
    left: 235px;
    right: 0;
    bottom: 0;
    transition: left 0.3s ease;
}

/* Títulos dentro del panel lateral */
.panel-title {
    font-weight: bold;
    font-size: 8px;
    margin-bottom: 10px;
}

/* Estilo de un pequeño contador o indicador */
.counter {
    font-size: 10px;
    margin-top: 10px;
    padding: 8px;
    background: #e9ecef;
    border-radius: 6px;
}

/* Selector desplegable para distritos */
#districtSelect {
    width: 100%;
    padding: 6px;
    font-size: 10px;
    margin-bottom: 10px;
}

/* Reducir el tamaño de fuente de todo el modal */
.small-modal {
    font-size: 12px;
}

.small-modal .form-label {
    font-size: 11px;
}

.small-modal .form-control {
    font-size: 12px;
    padding: 4px 8px;
}

.small-modal .modal-title {
    font-size: 14px;
}

/* ==============================
       PANEL LATERAL IZQUIERDO (menú)
       ============================== */
#sidePanel {
    position: absolute;
    top: 0;
    left: 0;
    width: 210px;
    height: 100%;
    background: #f4f4f4;
    border-right: 2px solid #ccc;
    padding: 10px;
    transition: left 0.3s ease;
    overflow-y: auto;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ==============================
       BOTÓN PARA MOSTRAR/OCULTAR PANEL
       ============================== */
#toggleHandle {
    position: absolute;
    top: 50%;
    left: 210px;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    background: #007ac2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    z-index: 100;
    font-size: 16px;
    transition: left 0.3s ease;
    user-select: none;
}

/* Estado cuando el panel está oculto */
#sidePanel.hidden {
    left: -210px;
}

/* Ajuste del botón cuando el panel está oculto */
#sidePanel.hidden+#toggleHandle {
    left: 0;
    border-radius: 6px;
}

/* Ícono dentro del botón */
#toggleHandle i {
    transition: transform 0.3s ease;
    display: block;
    line-height: 40px;
}

/* Rota el ícono de la flecha cuando el panel está oculto */
#sidePanel.hidden+#toggleHandle i {
    transform: rotate(180deg);
}

/* ==============================
       SECCIÓN DE LOGIN/REGISTRO USUARIO
       ============================== */
#authSection {
    background: #e9ecef;
    padding: 8px;
    border-top: 2px solid #ccc;
    border-radius: 6px 6px 0 0;
}

#authSection h4 {
    margin: 5px 0;
    font-size: 12px;
    color: #333;
    text-align: center;
}

#authSection input {
    width: 100%;
    padding: 6px;
    margin: 5px 0;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 11px;
}

/* Botón de login o registro */
#authSection button {
    width: 100%;
    padding: 6px;
    margin-top: 5px;
    background: #007ac2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

/* Efecto hover al pasar el mouse */
#authSection button:hover {
    background: #005f96;
}

/* Mensaje de estado de autenticación */
#authStatus {
    font-size: 11px;
    margin-top: 6px;
    text-align: center;
    color: #333;
}

/* Botón para cerrar sesión (inicialmente oculto) */
#logoutBtn {
    width: 100%;
    padding: 6px;
    margin-top: 6px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: none;
}

/* ==============================
   ESTILOS DEL ACORDEÓN (menú plegable)
   ============================== */
.accordion {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
}

.accordion-item {
    border-bottom: 1px solid #ccc;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    background-color: #eee;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: background-color 0.2s ease;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

.accordion-header:hover {
    background-color: #ddd;
}

.accordion-body {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-body.active {
    max-height: 50vh; /* abre hasta 50% de la pantalla */
    overflow-y: auto;
}

/* Párrafos dentro del panel */
.panel p {
    margin: 4px 0;
    line-height: 1;
    font-size: 10px;
}

/* ==============================
   MEDIA QUERIES PARA RESPONSIVIDAD
   ============================== */

/* 📱 Dispositivos móviles pequeños (≤480px) */
@media (max-width: 480px) {

  /* Panel lateral ocupa toda la pantalla al abrirse */
  #sidePanel {
    width: 100%;
    left: -100%;
  }
  #sidePanel.hidden {
    left: -100%;
  }

  /* Botón de toggle siempre pegado al borde */
  #toggleHandle {
    left: 0 !important;
    border-radius: 6px;
  }

  /* El mapa se ajusta al ancho completo */
  #viewDiv {
    left: 0;
  }

  /* Ajustamos tamaño de fuentes */
  .accordion-header {
    font-size: 12px;
  }
  .panel p {
    font-size: 12px;
  }
  .counter {
    font-size: 12px;
    padding: 6px;
  }
  #districtSelect {
    font-size: 12px;
  }
  #authSection h4 {
    font-size: 14px;
  }
  #authSection input,
  #authSection button {
    font-size: 12px;
    padding: 8px;
  }
}

/* 📱 Tablets (481px – 768px) */
@media (max-width: 768px) {

  /* Panel lateral ocupa 60% del ancho */
  #sidePanel {
    width: 60%;
  }
  #toggleHandle {
    left: 60%;
  }
  #sidePanel.hidden + #toggleHandle {
    left: 0;
  }

  /* El mapa se ajusta al espacio restante */
  #viewDiv {
    left: 60%;
  }

  /* Texto un poco más grande que en móviles */
  .accordion-header {
    font-size: 13px;
  }
  .panel p {
    font-size: 12px;
  }
  .counter {
    font-size: 12px;
  }
}

/* 🖥️ Escritorios pequeños (769px – 1024px) */
@media (max-width: 1024px) {
  #sidePanel {
    width: 250px;
  }
  #viewDiv {
    left: 250px;
  }
  #toggleHandle {
    left: 250px;
  }
}