/* ==========================================================
 *  Encabezado del panel (botón “Atrás” centrado + título)
 * ========================================================== */
 #city-selector .panel-header{
  display:flex;
  flex-direction:column;     /* flecha arriba, título abajo         */
  align-items:center;        /* todo centrado en horizontal         */
  gap:6px;                   /* separación entre botón y título     */
  margin-bottom:14px;
}

/* ——— Botón “Atrás” ——— */
#city-selector .back-icon{
  display:flex; align-items:center; gap:4px;
  padding:4px 10px;
  font-size:14px;
  background:#f0f0f0;
  border:1px solid #bdbdbd;
  border-radius:20px;
  color:#333; cursor:pointer;
  transition:background .2s, box-shadow .2s;
}
#city-selector .back-icon::before{ content:"Atras"; font-size:16px; }
#city-selector .back-icon:hover  { background:#e5e5e5; }
#city-selector .back-icon:active { background:#dcdcdc; box-shadow:inset 0 1px 3px rgba(0,0,0,.2); }

/* al estar “hidden” el botón desaparece (vista raíz)          */
#city-selector .back-icon.hidden{ display:none; }

/* ——— Título ——— */
#city-selector .panel-header h2{
  margin:0;
  font-size:18px;
  font-weight:600;
  text-align:center;
  line-height:1.25;
}

/* ==========================================================
 *  Apps raíz (Departamentos, Lugares…)
 * ========================================================== */
#category-buttons{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin:10px 0 25px;
}

.app-card{
  width:100px; height:100px;
  padding:6px;
  background:#e5e5e5;
  border-radius:8px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.app-card:hover{
  background:#d5d5d5;
  transform:translateY(-2px);
}
.app-card img{ width:48px; height:48px; margin-bottom:6px; object-fit:contain; }
.app-card span{ font-size:13px; font-weight:600; text-align:center; }

/* ==========================================================
 *  Utilidades
 * ========================================================== */
.hidden{ display:none; }          /* ←  sin !important             */
#category-buttons.hidden{ display:none; }

#city-selector .panel-header h2:empty{ display:none; }